Typewriter

Enable

Typing and deleting animation that cycles through a list of strings. Includes a blinking cursor.

functions.php JS module

// Add to the softedge_js_components filter:
$components[] = 'typewriter';

main.scss SCSS import

// Uncomment in child main.scss:
@import "themes/components/typewriter";

Basic Usage

Add data-typewriter with pipe-separated strings. The element types each string, pauses, deletes, then moves to the next.

data-typewriter

We build

<h3>We build <span data-typewriter="websites|brands|experiences"></span></h3>

Options

Control speed, pause duration, and looping via data attributes.

data-typewriter-*

Attribute Default Description data-typewriter — Pipe-separated strings to cycle through data-typewriter-speed 80 Typing speed in ms per character data-typewriter-delete-speed 40 Deleting speed in ms per character data-typewriter-pause 1500 Pause in ms after typing a string data-typewriter-loop true Loop back to first string after last

// faster typing, shorter pause
<span data-typewriter="fast|typing"
      data-typewriter-speed="40"
      data-typewriter-pause="800"></span>

// slow and deliberate
<span data-typewriter="slow|and|steady"
      data-typewriter-speed="150"
      data-typewriter-delete-speed="80"
      data-typewriter-pause="2000"></span>

// no loop — stops after last string
<span data-typewriter="one|two|done"
      data-typewriter-loop="false"></span>

Speed Variations

Compare different speed settings.

Fast speed: 40, pause: 800

Slow speed: 150, pause: 2000

Cursor

A blinking .typewriter-cursor is automatically appended after the element. Styled via CSS keyframes.

.typewriter-cursor

// Auto-generated — a <span class="typewriter-cursor">|</span>
// is inserted after the data-typewriter element.

// Override cursor style in your CSS:
.typewriter-cursor {
  font-weight: 100;
  animation: typewriter-blink 0.7s step-end infinite;
}

Accessibility

Respects prefers-reduced-motion.

prefers-reduced-motion

When reduced motion is enabled, the first string is displayed immediately with no animation. The cursor blink animation is also disabled.

On this page