Task-focused guides for specific ef-text use cases. For live demos of word split, char split, line split, easing, stagger timing, --ef-seed basics, and the template pattern, see the Text Reference.

---

Create a Typewriter Effect

Problem: You want characters to appear one by one with proper word wrapping preserved.

Solution: Use split="char" with a small stagger value and a fade-in animation.

Key points:

• Set split="char" to split text by characters
• Use a small stagger value (e.g., "50ms") for rapid character reveals
• Characters within words are automatically wrapped to prevent line breaks
• Works correctly with emoji and complex characters

---

Use Seed-Based Variation

Problem: You want each segment to have unique, varied properties (colors, scales, rotations) that look random but are deterministic and consistent across renders.

Solution: Use the --ef-seed CSS variable, which provides a deterministic pseudo-random value (0–1) based on each segment's index.

Key points:

• --ef-seed is a CSS variable available on each ef-text-segment
• Value ranges from 0 to 1, based on the segment's index
• Same segment index always produces the same seed value — deterministic across renders
• Use calc() to map seed values to your desired ranges

Common patterns:

Color variation:

color: hsl(calc(360 * var(--ef-seed)), 80%, 70%);
/* Maps seed (0–1) to hue (0–360°) for a rainbow effect */

Scale variation:

transform: scale(calc(1 + 0.3 * var(--ef-seed)));
/* Maps seed (0–1) to scale (1.0–1.3) */

Rotation variation:

transform: rotate(calc(var(--ef-seed) * 20deg - 10deg));
/* Maps seed (0–1) to rotation (−10deg to +10deg) */

Combined:

color: hsl(calc(360 * var(--ef-seed)), 80%, 70%);
transform: scale(calc(1 + 0.2 * var(--ef-seed)))
           rotate(calc(var(--ef-seed) * 20deg - 10deg));
/* Each segment gets unique color, scale, and rotation */

---

Use Staggered Animations with Easing

Problem: You want to control how segments appear over time with non-linear timing patterns.

Solution: Combine the stagger attribute for per-segment delay with easing to shape the distribution.

Key points:

• stagger sets the delay between segments (e.g., "50ms")
• easing controls how delays are distributed: "linear", "ease-out", "ease-in", "ease-in-out", or a custom cubic-bezier(...)
• With ease-out, segments cluster at the start and spread toward the end
• Use animation-delay: var(--ef-stagger-offset) in your CSS to apply the calculated offset
• Combine with --ef-seed for varied visual properties per segment

---

Create Line-by-Line Reveals

Problem: You want to animate multi-line text so each line appears sequentially.

Solution: Use split="line" with newlines in your text content and an appropriate stagger.

Key points:

• Set split="line" to split on newlines
• Larger stagger values (e.g., "1000ms") work well for line-by-line reveals
• Each line becomes a block-level segment; add display: block to the segment class
• easing="ease-in-out" gives each line reveal a natural deceleration