∞ forever components

Kinetic Typography

Gradient Shimmer

Bold "SHIMMER" text with a rainbow gradient clipped to the letterforms, continuously panning for a glossy iridescent sweep on deep umber.

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

Brand name displays, hero headlines, dark-mode splash screens needing vibrant ambient motion.

When not to

Light backgrounds (hardcoded dark umber body), body copy, or contexts where rainbow hues clash with brand palette.

Working with an AI agent

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

Change the word to 'GLOW', shift the gradient palette to warm sunset tones (#ff6b35, #f7c59f, #fffae3), and slow the cycle to 10s. 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 (SHIMMER text node)
  • gradient stop colors (linear-gradient stops)
  • animation duration (6s)
  • background-size sweep width (300%)
  • font-size clamp range
  • drop-shadow glow color
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • background-clip:text + color:transparent pattern
  • prefers-reduced-motion guard (animation:none)
  • visibilitychange pause handler
  • IIFE wrapper
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • background-clip:text requires -webkit- prefix for full Safari support
  • Light re-theme via the [data-theme=light] token block; catalog bg/accent describe the dark default
  • Single static word only; multiline layouts need line-height adjustment

typographygradientshimmertext-animationiridescentloop

More Kinetic Typography components

  • Weight Morph WaveEach letter of a word pulses font-weight and vertical scale in a staggered sine wave, shifting hue from cyan to blue.
  • Scramble DecodeNeon-green monospace words scramble through random glyphs then lock left-to-right like a terminal decrypting. Auto-cycles; click skips to next word.
  • Split-Flap BoardSix amber tiles cycle through letters to spell airport-style words (DEPART, ARRIVE, ONTIME, BOARDS) on a dark charcoal background with a rotateX flip…
  • Glitch RGB SplitRed and cyan pseudo-element copies of GLITCH drift and randomly snap with clipped displacement, simulating a CRT RGB-split glitch on near-black.
  • Marquee TickerTwo rows of bold words scroll in opposite directions — yellow left, teal right — with red bullet separators on a dark green background, news-ticker style.
  • Moving MaskDiagonal gradient light band sweeps across REVEAL, illuminating letters in shifting teal-copper hues against dark. Pure CSS mask + background-clip animation.