AnimateScramble

Text arriving through noise, one character at a time. AnimateTyping's sibling: a typewriter reveals a string from an empty line, this one resolves it out of a line that was already the right length.

import { AnimateScramble } from 'neba';

<AnimateScramble text="RESOLVING SIGNAL" />;

Props

Prop	Type	Default	Description
text	string	—	The text, when it is easier to pass than to nest. Overrides children
speed	number	18	How fast the text settles, in characters per second. duration wins when it is given
tick	number	45	How often an unsettled character is redrawn, in milliseconds. Below about 30 it stops reading as characters
characters	string	—	The pool an unsettled character is drawn from. Glyphs of different heights make the line jump
locale	string	—	Which language the text is in
durationshared	number	—	How long one run takes, in milliseconds
delayshared	number	0	How long before it starts, in milliseconds
easing	string	—	The easing curve, as CSS writes it. Defaults to the house curve
repeatshared	number | 'infinite'	1	How many times it runs
alternateshared	boolean	false	Runs every other pass backwards, so a repeat returns instead of jumping
triggershared	'mount' | 'visible' | 'hover' | 'manual'	'mount'	What starts it. visible is on scrolling into view, hover is under the pointer (focus counts), manual is whatever play says
play	boolean	—	Runs it when trigger is manual. Each false → true starts it over
onceshared	boolean	true	With trigger="visible", whether it runs only the first time. Off, it runs again on every return
thresholdshared	number	0.2	With trigger="visible", how much of the element has to be on screen, from 0 to 1
pausedshared	boolean	false	Holds the animation where it is
render	useRender.RenderProp	—	Renders something other than a div (render={<h2 />}). Base UI's own escape hatch
children	ReactNode	—	The text to settle

Every other <div> attribute passes through to the root. The settings shared by every Animate* are defined in prop conventions.

The box never changes size, which is the whole reason to choose this over AnimateTyping: nothing around it reflows, and a heading does not push the page down as it lands.

Whitespace is never scrambled. A space that flickered into a letter and back would read as the words having moved, which is the one thing this effect exists to avoid.

Examples

speed, duration and tick

speed is how many characters settle per second; duration is the whole run and wins when it is given, so the per-character delay falls out of it rather than being asked for twice. tick is how often an unsettled character is redrawn: below about 30 milliseconds it stops reading as characters at all.

import { useState } from 'react';
import { AnimateScramble, Button, Typography } from 'neba';

export default function AnimateScramblePool() {
  const [run, setRun] = useState(0);

  return (
    <div className="flex w-full flex-col gap-4">
      <Button variant="outline" size="sm" onClick={() => setRun((n) => n + 1)}>
        Run again
      </Button>

      <div key={run} className="flex flex-col gap-5">
        <div className="flex flex-col gap-1">
          <Typography level="caption" color="secondary">
            speed=10 — slower
          </Typography>
          <AnimateScramble
            text="DECODING"
            speed={10}
            className="font-mono text-lg text-(--neba-fg)"
          />
        </div>

        <div className="flex flex-col gap-1">
          <Typography level="caption" color="secondary">
            characters=&quot;01&quot;
          </Typography>
          <AnimateScramble
            text="0100 1110 0100 0101"
            characters="01"
            className="font-mono text-lg text-(--neba-fg)"
          />
        </div>
      </div>
    </div>
  );
}

characters

The pool an unsettled character is drawn from. Keep the glyphs one height: a pool with tall and short characters in it makes the line jump as it settles.

Accessibility

• The finished string is in the document from the first frame, in a clipped box for a screen reader; the noise is a visible copy that is aria-hidden.
• A reduced-motion preference shows the text straight away.
• Do not scramble something a reader has to act on quickly. It is legible only at the end.