ef-text

Renders text with optional per-character or per-word animation support.

Renders text. Style with Tailwind or inline CSS.

Attribute	Type	Default	Description
`split`	`"line" \| "word" \| "char"`	`"word"`	Split text into segments by line, word, or character.
`stagger`	`CSS time`	—	Delay between animated segments (e.g. "100ms").
`easing`	`string`	`"linear"`	CSS easing function applied to stagger timing.
`duration`	`CSS time`	—	How long this element is active.
`offset`	`CSS time`	`0`	When this element starts within a parent fixed-mode group.
`motion-blur`	`boolean`	`false`	Wraps each segment in an `<ef-motionblur>` element for auto-detected directional blur.

When split is set, each segment gets CSS variables for animation:

Variable	Value
`--ef-index`	Segment index (0, 1, 2 …)
`--ef-stagger-offset`	Calculated delay for this segment
`--ef-seed`	Deterministic random (0–1) per segment

<ef-timegroup duration="5s" class="w-[1920px] h-[1080px] bg-slate-900 flex items-center justify-center">
  <ef-text
    split="char"
    stagger="40ms"
    class="text-white text-9xl font-black tracking-widest"
  >
    EDITFRAME
  </ef-text>
  <style>
    @keyframes charPop {
      from { transform: scale(0) rotate(-15deg); opacity: 0; }
      to   { transform: scale(1) rotate(0deg);   opacity: 1; }
    }
    ef-text-segment {
      display: inline-block;
      animation: charPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
      animation-delay: var(--ef-stagger-offset);
    }
  </style>
</ef-timegroup>