Simulates prefers-reduced-motion for the demo. Off follows your system setting.
Steps focus through the demo with ] and [. Tab, arrows, and Escape stay native so the component behaves as shipped.
1
And a lean, silent figure slowly fades into the gathering darkness, aware at last that in this world, with great power there must also come… great responsibility!AndAndAndAnd aaaa lean,lean,lean,lean, silentsilentsilentsilent figurefigurefigurefigure slowlyslowlyslowlyslowly fadesfadesfadesfades intointointointo thethethethe gatheringgatheringgatheringgathering darkness,darkness,darkness,darkness, awareawareawareaware atatatat lastlastlastlast thatthatthatthat inininin thisthisthisthis world,world,world,world, withwithwithwith greatgreatgreatgreat powerpowerpowerpower theretheretherethere mustmustmustmust alsoalsoalsoalso come…come…come…come… greatgreatgreatgreat responsibility!responsibility!responsibility!responsibility!
A paragraph that glitches in word by word through comic panels, torn color slices and print misregistration.
npx shadcn@latest add ikislay/pixel-ui/comic-glitch-textimport { ComicGlitchText } from "@/components/ui/comic-glitch-text"export function Demo() {return (<ComicGlitchText className="max-w-md text-lg">With great power there must also come great responsibility.</ComicGlitchText>)}
1// Loading…
Options you can pass to customize this component.
children*stringThe text to reveal. It wraps like a normal paragraph.
staggernumberFrames between one word and the next, at 24 frames a second.
looptruefalseScrambles the text out and plays the reveal again. Off, the text stays after the first reveal.