∞ forever components

Text Effects

Weight Wave

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

cssmedium 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 or section titles needing ambient kinetic motion. Brand name displays on dark backgrounds.

When not to

Light backgrounds (hardcoded dark canvas). Words longer than ~8 characters where wave shape becomes unclear.

Working with an AI agent

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

Change TEXT to "MOTION", slow the wave by setting SPEED to 1.2, and shift the accent color to electric blue by replacing 245,215,110 with 100,180,255. 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 (TEXT variable)
  • wave speed (SPEED=2.05)
  • font weight range (MIN=130, MAX=860)
  • bell curve width (0.62 sigma)
  • accent color (245,215,110 gold)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • prefers-reduced-motion guard and CSS fallback
  • visibilitychange pause with banked elapsed time
  • IIFE wrapper
  • bell() function shaping the weight envelope
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Requires Inter variable font from Google Fonts — offline use degrades to system font with no weight axis
  • Background color hardcoded to dark navy in CSS
  • No pointer or click interaction — purely autonomous

typographyvariable-fontwavetext-animationglowloop

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.
  • Stagger RiseGold serif letters rise through a clipped baseline one by one, hold as a word, then exit upward in a staggered 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.
  • 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.