ProOn view

Scramble Text

Headlines that decode themselves out of flickering glyphs.

Loading
Usage 
import { ScrambleText } from "./ScrambleText";

<ScrambleText
  as="h1"
  text="Decode the message."
/>

About

Text that decodes left to right out of noise — symbols, blocks, binary or letters — with each character flickering in the accent colour before it settles. A hidden copy of the final text holds the layout, so nothing reflows while it plays, and the element carries the real text as its accessible name. Plays when it scrolls into view, on hover, both, or once on mount.

What you get

  • Rebuild prompt

    One paste into Claude Code, Cursor, Codex or v0 rebuilds it byte for byte.

  • Source

    ScrambleText.tsx + ScrambleText.css — plain React and CSS, every comment kept.

  • Vite project

    A ready-to-run project with this exact example and pinned versions — unzip, install, run.

More like this

All components
↕ScrollNewFree
Open live demo →

Velocity Marquee

Text

A ticker that races, reverses and leans with your scroll.

↕ScrollNewPro
Open live demo →

Aperture Zoom

Scroll

A framed image that opens to full-bleed as you scroll, parting the headline.

◎HoverNewPro
Open live demo →

Dot Field

Backgrounds

A living field of dots that parts around the cursor and breathes.