127 Components
Cipher Scramble Text
TextCryptographic matrix text decoder that permutes characters through a high-frequency glyph wave on pointer hover, focus, or click.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/cipher-scramble-text.json"
Props
TypeScript props supported by <CipherScrambleText />.
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "ZERO-DEPENDENCY KINETIC PRIMITIVES" | Target decoded text string. |
| charset | string | "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#$%&*+<>?" | Pool of cipher characters sampled during scramble frames. |
| frameInterval | number | 28 | Duration of each scramble frame tick in milliseconds. |
| cyclesPerChar | number | 2 | Number of scramble ticks per character before locking into place. |
Key Features
- Progressive left-to-right cryptographic character lock-in with customizable glyph pool and frame cadence.
- Triggers seamlessly on pointer hover, keyboard focus, or tactile click.
- Pairs an sr-only canonical string with an aria-hidden visual stream so screen readers never read scrambled noise.
Keyboard & Accessibility
- Exposes the decoded canonical string inside an sr-only node while marking the permuting glyph stream aria-hidden='true'.
- Fully keyboard-triggerable via Tab focus or Enter/Space activation.
- Bypasses character scrambling immediately when prefers-reduced-motion is enabled.