Binary text
Text scrambles into 0s and 1s, then decodes left to right. Plays in view and again on every hover.
Text, hover and focus, plus once in view, Motion
Install
npm i clsx motion tailwind-merge && curl -o components/binary-text.tsx https://motion-brew.com/r/binary-text.tsxOne self contained file for React and Tailwind CSS: binary-text.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { BinaryText } from "@/components/binary-text";
export default function Page() {
return (
<BinaryText text="Access granted" className="text-3xl font-semibold" />
);
}Props
| Prop | Type | Default | Description | ||||
|---|---|---|---|---|---|---|---|
| text | string | "Access granted" | The text to decode | ||||
| duration | number | 1.1 | Seconds for the full decode | ||||
| charset | string | "01" | Characters used while scrambling | ||||
| as | "h1" \ | "h2" \ | "h3" \ | "p" \ | "span" | "p" | Element to render |
| className | string | Size and color; it is monospace by default |
More text
- Wave text: A heading whose words warp like liquid under your cursor: noise-driven displacement bends each glyph into flowing bands, then it settles back to crisp type.
- Blur text: Words rise out of a soft blur one after another as the line scrolls into view, then settle sharp.
- Flip words: One word in a sentence flips to the next on a loop, letter by letter in 3D, while the sentence reflows smoothly around it.
- Gradient text: A slow gradient flows through the letters on a seamless loop, clipped to real, selectable text.