Composition

ef-text

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

Renders text. Style with Tailwind or inline CSS.

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

Interactive example

<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>

Attributes

Filter attributes13 of 13

`blur-amount`

React prop: blur-amount
Type: number
Default: —
Description: Forwarded to the wrapping <ef-motionblur>'s amount when motion-blur is set.

`blur-angle`

React prop: blur-angle
Type: number
Default: —
Description: Forwarded to the wrapping <ef-motionblur>'s angle when motion-blur is set.

`blur-fps`

React prop: blur-fps
Type: number
Default: —
Description: Forwarded to the wrapping <ef-motionblur>'s fps when motion-blur is set.

`blur-sensitivity`

React prop: blur-sensitivity
Type: number
Default: —
Description: Forwarded to the wrapping <ef-motionblur>'s sensitivity when motion-blur is set.

`blur-shutter-angle`

React prop: blur-shutter-angle
Type: number
Default: —
Description: Forwarded to the wrapping <ef-motionblur>'s shutter-angle when motion-blur is set.

`blur-threshold`

React prop: blur-threshold
Type: number
Default: —
Description: Forwarded to the wrapping <ef-motionblur>'s threshold when motion-blur is set.

`duration`

React prop: duration
Type: string
Default: —
Description: How long this element is active (CSS time, e.g. "5s").

`easing`

React prop: easing
Type: string
Default: "linear"
Description: CSS easing keyword applied to stagger timing.

`loop`

React prop: loop
Type: boolean
Default: false
Description: Loop attribute — when this temporal is a self-driving root under a PlaybackController, the controller wraps back to 0 instead of pausing at duration.

`motion-blur`

React prop: motionBlur
Type: boolean
Default: false
Description: Wraps each segment in an <ef-motionblur> element for auto-detected directional blur.

`offset`

React prop: offset
Type: number
Default: —
Description: Start offset (seconds) within a parallel (fixed/contain/fit) parent timegroup.

`split`

React prop: split
Type: line | word | char
Default: "word"
Description: Splits text into segments by line, word, or character for staggered animation.

`stagger`

React prop: stagger
Type: string
Default: ""
Description: Delay between each split segment's animation start (CSS time, e.g. "100ms").

Events

Events
Event	Detail	Description
`child-duration-changed`	`{ duration: number }`	Fires on the nearest context-providing ancestor, when a nested media element's duration becomes known or changes.