Scramble Text

Every character shuffles through noise and locks onto its new value at its own moment. For status labels, live values and swapped words.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add scramble-text

Example

import { ScrambleText } from "@/components/galactrex/scramble-text";

<ScrambleText text={status} />

Installs to components/galactrex/scramble-text.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

Prop	Type	Default	Description
`text`	`string`	—	Change it to scramble into it.
`as`	`ElementType`	`"span"`	Element.
`duration`	`number`	`650`	Ms for a change.
`glyphs`	`string`	—	Noise characters.
`hover`	`boolean`	`false`	Also scramble on hover.
`className`	`string`	—	Extra classes for the outer element.