Components•Decode text
Components•Decode text
Decode text
A scramble that resolves into real text. Each cell holds the width of its final glyph, so the line never shifts while blocks, box rules, braille or half-width katakana churn through it. Glyphs lock in with randomised timing and a brief accent flash.
Dependencies
Copy below cli
npx shadcn add @bjork-ui/decode-textHow to use
import { DecodeText, type DecodeTextHandle } from "@/components/bjork-ui/text/decode-text";const ref = useRef<DecodeTextHandle>(null);<DecodeText ref={ref} words={["Signal received", "Archive unsealed", "Handshake done"]} charset="blocks" // "box" | "braille" | "katakana-half" | "math" | "binary" | any string order="left" // "center" | "random" trigger="inView" // "mount" | "hover" | "manual" duration={1.15} interval={2.4} seed={7}/>ref.current?.replay();