∞ forever components

Text Effects

Stagger Rise

Gold serif letters rise through a clipped baseline one by one, hold as a word, then exit upward in a staggered loop.

csslight complexitymoderate motion

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Hero headlines, loading screens, or ambient brand displays needing elegant looping text reveal on dark backgrounds.

When not to

Light backgrounds (dark navy is hardcoded). Strings over ~12 characters where stagger delay makes last letters slow to appear.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change the word to 'LUXE' by setting word="LUXE", update color from #f5d76e to #e8c4ff, and slow stagger delay from .085s to .12s per letter. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • word content (word variable)
  • letter color (#f5d76e)
  • stagger delay per letter (0.085s multiplier)
  • animation cycle duration (4.6s)
  • baseline underline opacity (0.32)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • tte02-clip overflow:hidden wrapper (creates the reveal mask)
  • IIFE wrapper
  • prefers-reduced-motion guard
  • visibilitychange pause
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Background color hardcoded in CSS — must edit to use on non-dark backgrounds
  • Google Fonts (Fraunces) required — falls back to Georgia if offline but weight may differ

typographystaggertext-animationloopserifrevealclip

More Text Effects components

  • Scramble DecodeGold monospace text resolves from random glyphs left-to-right with a tracking caret, holds with micro-flickers, then re-scrambles through a 6-phrase loop.
  • Gradient WipeBold headline in dim steel; a bright gold sheen band sweeps across via background-clip:text with a soft bloom glow pulsing beneath at center crossing.
  • Weight WaveA bell-curve wave of font-weight travels left-to-right across the word WEIGHT; crest letters bulge bold, lift slightly, and warm to gold glow.
  • Block RevealGold block sweeps left-to-right over stacked uppercase words, pauses, then retracts right to reveal the text. Loops with a faint underline rule.
  • Glitch SplitBold word renders with red/cyan RGB channel-split; periodic bursts trigger horizontal slice displacement and scanline glints over a dark background.