Scramble Text
Resolve each character out of random glyph noise, in any stagger order. Install with npx remotion-ui@latest add scramble-text.
PrimitiveAdvanced
$ npx remotion-ui@latest add scramble-textEvery character runs its own scramble on its own clock, then locks onto its target glyph.
import { ScrambleText } from "@/remotion/primitives/scramble-text";
<ScrambleText
text="Resolve out of noise"
order="center"
charset="symbols"
staggerInFrames={6}
/>Against matrix-decode
matrix-decode resolves strictly left to right from one shared progress value.
This one is built on split-text-chars, so the resolve follows any stagger
order (center, edges, random), and a character's noise stops when that
character arrives, not when the string is a given percentage decoded.
Charsets
charset takes symbols (the default), latin, digits, blocks, or any
string to use as the pool. tickInFrames is how long one noise glyph is held:
1 is a blur, 4 is a slot machine.
Monospace is the default on purpose
A proportional face re-flows the line every time a noise glyph changes width,
and the whole word jitters sideways. Override fontFamily only with a face
whose glyphs share an advance, or accept the wobble.
Determinism
Glyphs are hashed from the character index, the tick and seed, never
sampled. Math.random() would resample on every render pass, so the same frame
would scramble differently in the preview and in the render.
Per-character clocks, so any stagger order works. `matrix-decode` resolves strictly left to right from one shared progress value.
Agent notes
Install first, then import the copied source component locally. AI guide →
@/remotion/primitives/scramble-text- Use when: frame-level motion primitives and reusable animation wrappers.
- Customize: text, charset, tickInFrames, scrambleColor, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
import { ScrambleText } from "@/remotion/primitives/scramble-text";
<ScrambleText text="Resolve out of noise" order="center" charset="symbols" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | - | The string that resolves. `\n` breaks a line. |
| charset | "latin" | "symbols" | "digits" | "blocks" | string | "symbols" | Glyph pool the noise is drawn from. Any string is used as-is. |
| tickInFrames | number | 2 | Frames one noise glyph is held. 1 is a blur, 4 is a slot machine. |
| scrambleColor | string | - | Colour of the unresolved glyphs. Defaults to `color`. |
| scrambleOpacity | number | 0.72 | Opacity of the unresolved glyphs. |
| scrambleOnExit | boolean | true | Scramble again on the way out. |
| order | "start" | "end" | "center" | "edges" | "random" | "start" | Which character resolves first. Document order is never affected. |
| staggerInFrames | number | 2 | Frames between one character resolving and the next. |
| durationInFrames | number | 20 | Length of one character's resolve. |
| delayInFrames | number | 0 | Frames before the first character starts. |
| seed | number | 1 | Seeds the glyph noise and `order="random"`. |
| exitAtInFrames | number | - | Frame the first character starts leaving on. |
| fontFamily | string | ui-monospace stack | Monospace by default: a proportional face re-flows on every tick. |