Design intent

Target

The headline "Motion that feels intentional." assembles on screen piece by piece (chars) using a rise entrance. The result should feel choreographed and confident, like a title card, not a typewriter.

Motion rhythm

• Each chars piece starts 32ms after the previous one and takes 800ms to settle.
• Easing is smooth:
  • smooth = long ease-out (cubic-bezier(.22,1,.36,1))
  • snappy = symmetric ease-in-out
  • bouncy = slight overshoot
• Rise and drop entrances include a small rotation (±4°), so the letters seem to tip into place.
• With prefers-reduced-motion, it becomes a plain fade with no stagger and no movement.

Must keep

• Pieces animate with transform, opacity and filter only. The text itself never reflows.
• Words never break across lines. Line wrapping happens only between words, and lines are balanced.
• A soft #8b5cf6 glow sits behind the text (a text-shadow plus a radial wash in the background).
• Screen readers hear the full sentence once (aria-label on the heading, pieces aria-hidden).
• The font size is 96px at a 1280px-wide container and scales down proportionally below that.

Avoid

• Animating top/left or font-size.
• Splitting with innerHTML, which is unsafe for user-provided text.

Acceptance checks

Key states

• Before: all pieces are invisible. There is no flash of fully rendered text before the animation starts.
• During: pieces enter left to right with a 32ms gap and the rise entrance.
• After: the text "Motion that feels intentional." is fully visible and static. The glow is visible behind it.
• Reduced motion: a single fade with no movement.

Checks

• The text, colors, font size (96px at 1280px), weight 600, stagger and duration match the parameters.
• No word is broken mid-word at 375px wide.
• A screen reader (VoiceOver/NVDA) reads the sentence once, not letter by letter.
• Changing the text at runtime via update() rebuilds cleanly, with no leftover spans.
• destroy() cancels pending timers and animations.