Scramble Text
Resolve each character out of random glyph noise, in any stagger order. Install with npx remotion-ui@latest add scramble-text.
PrimitivePrimitivesAdvanced
$ 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. |