Skip to content

Scramble Text

rAF

Decodes left to right from block glyphs, on mount and on hover.

Check the work

Install

$ npx shadcn@latest add https://spotcheckui.com/r/scramble-text.json

No motion engine needed.

Usage

import { ScrambleText } from "@/components/spotcheck/scramble-text"

<ScrambleText text="Check the work" className="text-5xl" />

The real text holds the space and is what screen readers get, so glyphs of other widths can't move the layout.

Props

  • text * RequiredstringDefault —
  • trigger("mount" | "hover")[]Default ["mount", "hover"]When it decodes. Pass an empty array to show the text with no effect.

Keyboard

Nothing to operate: this component displays information.

Reduced motion

The text appears at once, with no glyphs.