Binary Text for React

Binary Text starts every character as a bit, a muted 0 or 1 in a monospaced digit, flipping fast, then settles each one on its real character, one after another, so a wave of bits collapses into words. It plays once, when the text scrolls into view; it can also play as soon as the page shows it, or every time the pointer comes over it.

Use it for a developer tool's hero, a security page, or any decoding moment that should feel computational rather than chaotic. For letters and symbols instead of bits, use Decrypted Text; to scramble the characters under the pointer, Scrambled Text. There's no timer and nothing random: every character is a window over a column of bits ending in itself, stepped through by a CSS keyframe animation the install adds to your stylesheet, so the server and the browser draw the same bits. With reduced motion the text is plain.

Installation

Usage

import { BinaryText } from "@/components/ui/binary-text";

<BinaryText text="Hello, world" />

Demos

Hover

trigger="hover" decodes the text each time the pointer comes over it, and shows it plain the rest of the time. A monospaced font, as here, gives every character the width of a bit, so no bit is ever clipped.

Timing

steps is how many bits each character flips through, speed how long each bit shows, and stagger the time between one character settling and the next; stagger={0} settles them all at once. trigger="mount" plays it as soon as the page shows it.

Bit colour

bitColor is the colour of the bits, any CSS colour or theme variable; by default they're the text's own colour at 45%, so the real characters stand out as they land.

Accessibility

Screen readers read the real text once, from a visually hidden copy, never the bits. Every character keeps its own width while it decodes, so the line never shifts. With reduced motion the text shows as it is.

FAQ

API Reference