# Scramble decode text

A monospace line of characters scrambles rapidly, then locks left to right into real letters one by one with a blue-white flash.

- Category: typography · Tags: shotcraft, remotion, typography
- Spec: 1920×1080 @ 30 fps · 3.7s (16:9)
- License: Apache-2.0 · Tier: free
- JSON: https://gimgs.net/motion/scramble.json
- Kind: remotion
- Source (TSX): https://gimgs.net/motion/scramble/template.html
- Repo: https://github.com/Vincentwei1021/video-shotcraft
- Credits: video-shotcraft (Vincent Wei) — https://github.com/Vincentwei1021/video-shotcraft
- Page: https://gimgs.net/motion/scramble.html

## Params

_No params._

Default params (base64url for `?p=`): `e30`

## Prompt

## When to use

A technical opening title; a version number/codename reveal; a machine-voiced beat like "system ready" or "data unlocked"

## Intention

Of the three "lettering" techniques for the same title, typewriter feels like a person writing, flip-card feels like a machine broadcasting, and scramble-lock feels like **a machine computing** — first full-screen noise signals "not decoded yet," then it locks in real characters one by one left to right. It naturally carries a hacker/decryption tone, suited to a technical product's opening; but it's also the most demanding on copy, since each character gets called out individually, so the character count is the beat count.

## Duration & energy

- Duration: About 3.2s (96f@30fps)
- Energy: Medium-high (continuous high-frequency character-swapping visual noise, no single impact point)

## Shot recipe (original Chinese — timing, easing, parameter table, known pitfalls)

## 意图
同一句标题的三种"造字"手法里，打字机是人在写、翻牌是机器在播报，
乱码锁定是**机器在算**——先满屏噪声表示"还没解出来"，再左→右一个个
咬定真字符。它天然带黑客/解密腔，适合技术产品的开场；但也最挑文案：
字符是被逐个点名的，字数就是节拍数。

## 动效核心
- 全字符同时跳乱码，字池 47 个大写字母+数字+符号；**每 2 帧换一次字**
  （`bucket = floor(frame/2)`，96f 全片约 48 次重掷）
- 锁定点按字序线性铺开：`lockAt = 0.25 + (i/n)·0.6 + rand(i·7)·0.06`
  ——第 24f 起第一个字定，第 82f 末字定，每字再叠 ≤6f 随机抖动破掉机械等分
- 锁定瞬间闪光：`flash = 1 - seg(t, lockAt, lockAt+0.1)`，flash>0.4 时字色
  从 #e8eaf0 提到 #dff3ff，同时打 `0 0 flash·18px` 蓝白光晕，约 3f 内衰完
- 起手 6f 全空（`t < 0.06` 输出空格）——先给一拍空屏，噪声才是"开始运算"
  而不是"一直在闪"
- 乱码字符与闪光抖动全走种子哈希 `rand(seed)`，**禁 Math.random**，
  同一帧号永远同一画面
- 未锁定字色压到 #3d4560（近背景），锁定后才提亮——亮度差本身就是进度条

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 占位文案 | `TEMPLATE MOTION DEMO`，20 字符 | 字符数直接决定 stagger 密度：<10 字锁定太快读不出"逐个"，>30 字末字等到片尾 |
| 锁定窗 | 全局 0.25→0.85（24f→82f） | 起点早于 0.2 噪声段太短没建立感；终点晚于 0.9 没有静置收尾 |
| 锁定抖动 | `rand(i·7)·0.06`（≤6f） | 去掉就是完美等分，读作进度条而非"逐个咬定"；>0.12 顺序会乱 |
| 跳字频率 | 每 2 帧（15 次/秒） | 1 帧一换糊成灰带；4 帧以上读作"慢慢翻"不是高速运算 |
| 锁定闪光 | 窗 0.1（约 3f），光晕 18px 峰值 | 这一闪是"咬定"的画面体，删了只剩换字；>30px 相邻字光晕连成一片 |
| 字体字距 | SF Mono/Menlo 34px、`letter-spacing:2px`、槽宽 `min-width:0.62em` | 等宽 + 固定槽宽是刚需，比例字体会随乱码字符宽度整行抖动 |
| 起手空屏 | `t < 0.06`（前 6f） | 直接开噪声读作故障闪烁；>12f 空屏在剪辑里成了黑场 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- **换成项目文案时字符数要贴近 20**：lockAt 是按 `i/n` 归一化铺开的，
  字数变了锁定间隔跟着缩放——8 字标题会在半秒内全锁完（读不出解密过程），
  40 字标题末字要等到 82f 才定（前面早锁的字已经"凉了"）
- 必须等宽字体：槽宽写死 `0.62em`，比例字体下 `#`/`W`/`I` 宽度不一，
  整行会随每次重掷左右抽动
- 空格字符被显式跳过（永不参与乱码），所以词间隙全程保持——文案里
  空格位置就是节奏的呼吸点，把长标题拆成 3–4 词比一整串更好读
- 与 split-flap-title / 打字机类分工：那两个是**机械/人工**造字，本卡是
  **算法**解字；一支片里同类"造字"手法只留一次，重复即贬值

## 参考实现
demos/typography/scramble/
（Scramble.tsx）

## Reference implementation (Remotion)

- demos/typography/scramble/Scramble.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/typography/scramble/Scramble.tsx

The component imports shared fixtures from `demos/_fixtures` and helpers from `assets/lib` in the repo; SKILL.md there documents the render workflow.


## Flow

1. **Read the recipe**
   Prompt = when to use, intention, parameter table with typical values and how each one feels, known pitfalls. Treat values as calibrated starting points.
2. **Get the code** — tool: git
   `git clone https://github.com/Vincentwei1021/video-shotcraft && cd video-shotcraft && npm install`
3. **Register + render** — tool: remotion
   `npx remotion render <CompositionId> out.mp4   # component: demos/typography/scramble/Scramble.tsx`
4. **Or re-implement**
   Port the timing/easing from the recipe to HTML + WAAPI (gimgs motion contract) or any engine; keep the same segment windows and easing.

## Render

Clone https://github.com/Vincentwei1021/video-shotcraft (npm install). The component lives under demos/{category}/{name}/ and imports shared fixtures from demos/_fixtures and helpers from assets/lib. Copy it (with those imports) into a Remotion project, register a <Composition> with the template's width/height/fps/duration in Root.tsx, then `npx remotion render <CompositionId> out.mp4`. SKILL.md in the repo documents the full Claude Code / Codex workflow. The prompt below is the shot recipe (timing, easing, parameter table, pitfalls) — enough to re-implement the shot in HTML/WAAPI or another engine if you prefer.

## Contract

React/Remotion composition (TSX) from the open-source video-shotcraft library (Apache-2.0). It is not a browser-playable template: clone the repo, register the component in a Remotion project and render with `npx remotion render`. The recipe (prompt) describes timing, easing and parameters so you can also re-implement the shot in any engine.