ef-text

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

Renders text. Style with Tailwind or inline CSS.

Attribute	React prop	Type	Default	Description
`blur-amount`	`blur-amount`	`number`	—	Forwarded to the wrapping `<ef-motionblur>`'s `amount` when `motion-blur` is set.
`blur-angle`	`blur-angle`	`number`	—	Forwarded to the wrapping `<ef-motionblur>`'s `angle` when `motion-blur` is set.
`blur-fps`	`blur-fps`	`number`	—	Forwarded to the wrapping `<ef-motionblur>`'s `fps` when `motion-blur` is set.
`blur-sensitivity`	`blur-sensitivity`	`number`	—	Forwarded to the wrapping `<ef-motionblur>`'s `sensitivity` when `motion-blur` is set.
`blur-shutter-angle`	`blur-shutter-angle`	`number`	—	Forwarded to the wrapping `<ef-motionblur>`'s `shutter-angle` when `motion-blur` is set.
`blur-threshold`	`blur-threshold`	`number`	—	Forwarded to the wrapping `<ef-motionblur>`'s `threshold` when `motion-blur` is set.
`duration`	`duration`	`string`	—	How long this element is active (CSS time, e.g. `"5s"`).
`easing`	`easing`	`string`	`"linear"`	CSS easing keyword applied to stagger timing.
`loop`	`loop`	`boolean`	`false`	Loop attribute — when this temporal is a self-driving root under a {@link PlaybackController}, the controller wraps back to `0` instead of pausing at `duration`.
`motion-blur`	`motionBlur`	`boolean`	`false`	Wraps each segment in an `<ef-motionblur>` element for auto-detected directional blur.
`offset`	`offset`	`number`	—	Start offset (seconds) within a parallel (`fixed`/`contain`/`fit`) parent timegroup.
`split`	`split`	`line` \| `word` \| `char`	`"word"`	Splits text into segments by line, word, or character for staggered animation.
`stagger`	`stagger`	`string`	`""`	Delay between each split segment's animation start (CSS time, e.g. `"100ms"`).

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>

Slots