∞ forever components

Text Effects

Glitch Split

Bold word renders with red/cyan RGB channel-split; periodic bursts trigger horizontal slice displacement and scanline glints over a dark background.

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

Cyberpunk/hacker aesthetic hero sections, error states, game UIs, or any dark-theme display needing dramatic ambient motion.

When not to

Light backgrounds (dark color hardcoded), accessibility-sensitive contexts (reduced-motion collapses to static), or layouts needing legible body text.

Working with an AI agent

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

Change WORD to 'ERROR', set the red channel color to '#ff6600' and cyan to '#00ffcc', and slow burst decay from 240ms to 400ms.

Safe to edit

  • WORD content ('GLITCH')
  • channel offset range (idle 0.6, burst 7..11)
  • burst frequency (nextBurst 1400..4000ms)
  • slice count (2..6)
  • scan glint intensity (e*0.5)
  • burst cadence (nextBurst: first ≈340 ms after mount, then every ~2.1 s) and the idle CRT scan band

Keep intact

  • prefers-reduced-motion guard and staticFrame fallback
  • visibilitychange pause
  • IIFE wrapper
  • globalCompositeOperation='lighter' for RGB blend
  • idle CRT scan band between bursts

Known limitations

  • Background color hardcoded to #0a0b10 — must edit CSS to change
  • No touch/pointer interactivity — purely autonomous
  • Font size scales with viewport but may clip on very narrow screens (<200px)

glitchrgb-splittextcanvaschromatic-aberrationscanlinesloop

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