# Wall reveal: three moves

Three whole-wall batch entrances — bento cell-by-cell light-up, grid wave flip, and blueprint draw-on; all reveal in place with no displacement, complementing the fly-in, displacement-type deck-deal-flyin.

- Category: ui-entrance · Tags: shotcraft, remotion, ui-entrance
- Spec: 1920×1080 @ 30 fps · 5.06s (16:9)
- License: Apache-2.0 · Tier: free
- JSON: https://gimgs.net/motion/wall-reveal-moves.json
- Kind: remotion
- Source (TSX): https://gimgs.net/motion/wall-reveal-moves/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/wall-reveal-moves.html

## Params

_No params._

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

## Prompt

## When to use

The overall reveal of a feature wall/card wall/whole-page UI; passages where content is already in place and needs to "appear" rather than "pour in"

## Intention

Until now, the library's only answer for "how does a whole wall of content enter" was deck-deal-flyin — high-energy, displacement-type, "things pouring in." But not every wall should pour: a brand passage wants gravitas, a feature wall wants briskness, a "from design to product" passage wants to show process. These three moves share a common trait — **non-displacement batch entrance** — elements reveal in place, the layout is already correct from frame one, and what the viewer watches is "a wavefront of state-change sweeping across a wall," not "objects flying." Ask first when choosing: should this wall "pour in" or "light up"? The former goes to deck-deal-flyin, the latter to this card.

## Duration & energy

- Duration: Single style ~4.3–5s (A 150f / B 130f / C 150f @30fps, including an establishing hold and a still close)
- Energy: Medium

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

## 意图
"一墙内容怎么出场"库内此前只有 deck-deal-flyin 一个答案——高能量、位移型、
"东西涌进来"。但不是每面墙都该涌：品牌段要庄重、功能墙要轻快、
"从设计到实物"要讲工序。这三式共同点是**非位移批量入场**——元素原地显形，
版式从第一帧就成立，观众看的是"状态变化的波前扫过一面墙"而不是"物体飞行"。
选型先问一句：这面墙该"涌进来"还是"亮起来"？前者去 deck-deal-flyin，后者进本卡。

## 三式选型
| 式 | 做法 | 适用 |
|----|------|------|
| A bento-light-up 逐格点亮 | 暗场 3×2 bento 墙压暗待命，强调色流光逐格描边一圈、内容随即提亮上浮，全亮后镜头缓推收住 | 内容庄重/暗场品牌段；节奏沉稳的功能总览 |
| B grid-wave-flip 波浪翻面 | 3×3 灰背卡墙沿对角线波前依次 rotateX 原位翻转 180°，翻出正面内容，尾张过冲回弹 | 轻快功能墙；一秒扫完全屏的快节奏段 |
| C wireframe-draw-on 蓝图描线成形 | 界面先以 SVG 细线蓝图分组描画，再一条强调色发光竖线左→右扫过，扫过处线框实体化成真实界面 | "从设计到实物/从想法到产品"叙事；产品首次整体亮相 |

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| A 节拍 | hold 20f → 每格间隔 12f 依次激活（六格 ~96f 全亮）→ scale 1→1.04 缓推 25f（bezier 0.33,0,0.2,1）→ 静止收尾 | 12f 级联是"逐格可辨"与"整墙拖沓"的平衡点；格数增多可压到 8–10f，但间隔均匀本身就是这一式的庄重感来源，别学发牌加速 |
| A 单格 | 暗态 opacity 0.18 + translateY 20px；SVG rect pathLength=100 + dashoffset 描边 8f（强调色 #e8b45e 4px + drop-shadow 辉光）；描边过半（+6f）内容 back-out(0.3,1.4,0.5,1) 弹出 8f 提亮归位；描完 +12f 流光退火到 0.4 常亮细边 | 描边与内容弹出要**接力不同步**——同帧起读作整格闪现；点亮中段辉光脉冲用 lit·(1−lit)·4 抛物线，峰值幅度按格 seed 微差（正弦哈希，禁真随机） |
| B 波前 | hold 20f → delay=(row+col)*6f 对角线步进，每张 rotateX 0→180° 翻 14f bezier(0.35,0,0.25,1)；尾张冲到 190° 再 8f 弹回 180° | (row+col) 是对角波的灵魂，换 row 或 col 单向扫立刻平庸；只给尾张过冲——张张过冲读作整墙果冻 |
| B 翻面结构 | 共享 perspective 1200px 容器（整墙一个消失点），每张双面卡 preserve-3d：灰背朝外 + 正面预转 rotateX(180°)，两面都 backfaceVisibility hidden | perspective 加在墙容器不是单卡上，否则九个消失点各翻各的；翻到 90° 最薄处叠一道 4px 白色高光线（不随卡旋转、贴格位随角度 45°→135° 从上缘扫到下缘，opacity=1−|angle−90|/45），阴影随 sin(angle) 抬起再收回 |
| C 描线 | hold 20f → 分组错峰各 30f 描完：侧栏 20f 起/顶栏 30f 起/6 卡 40+i*3f 起/折线图 52f 起；SVG pathLength=1 + dashoffset 1→0，描边 #8f8f8d 2.5px round | 分组错峰是"手在画"的感觉来源，全部同帧起笔读作打印机；卡内占位线再按 +3f 细错峰，长短用 seed 哈希微差 |
| C 实体化 | 88–118f 实体层 clip-path inset(0 right% 0 0) 从左向右展开 30f，bezier(0.55,0,0.25,1)；前沿跟 4px 强调色竖线（#ffc46b + 双层辉光 boxShadow），86–92f 淡入、112–120f 淡出 | 竖线位置与 clip 前沿必须同一个 scan 值驱动，异步读作穿帮；描线段与扫描段之间留 ~6f 喘息（82→88f），线框画完立刻扫读作赶工 |
| 静止收尾 | 三式动作全部落定后真静止 ≥15f（A 在缓推结束后、B 在尾张回弹后、C 在扫描线淡出后起算） | R1 呼吸判例：静止期一切属性锁死，包括辉光/阴影/高光残留 |

## 已知坑
- **demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验**
- A/C 的强调色描边/扫描线属"单点高质量光效"范畴（Q4 三约束内合规），但一支片
  整墙点亮 ≤1 次（P4 手法去重）——A 和 C 同片共用即算两次整墙光效，选一
- B 式翻面后的正面实战要接真实截图：backface 侧预留高清纹理（Q2），翻转中
  正面会以斜角被看，低倍截图先按审美准则 Q2 的高分辨率栅格化技法处理再上
- C 式线框几何必须与实体层布局逐像素对位（demo 里按 FakeDashboard A 手排），
  换素材要重排线框——对不齐则扫描线扫过瞬间元素跳位，一眼穿帮
- 三式都是"原位显形"，别混入位移入场（如 B 翻面时再加 translateY 飞入）——
  位移需求去 deck-deal-flyin，杂交会两头不像
- A 式暗态 opacity 0.18 依赖暗底（#2a2a28）成立，亮底下压暗读作褪色故障

## 参考实现
demos/ui-entrance/wall-reveal-moves/
（BentoLightUp.tsx / GridWaveFlip.tsx / WireframeDrawOn.tsx）

实现状态：三式均有参考实现与 Gallery 动态样片。

## Reference implementation (Remotion)

- demos/ui-entrance/wall-reveal-moves/BentoLightUp.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/ui-entrance/wall-reveal-moves/BentoLightUp.tsx
- demos/ui-entrance/wall-reveal-moves/GridWaveFlip.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/ui-entrance/wall-reveal-moves/GridWaveFlip.tsx
- demos/ui-entrance/wall-reveal-moves/WireframeDrawOn.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/ui-entrance/wall-reveal-moves/WireframeDrawOn.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/ui-entrance/wall-reveal-moves/BentoLightUp.tsx, demos/ui-entrance/wall-reveal-moves/GridWaveFlip.tsx, demos/ui-entrance/wall-reveal-moves/WireframeDrawOn.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.