# Paper craft moves

Two paper-craft techniques: masking-tape-slap pins a card down with tape slaps, and popup-book-rise stands cards up like a pop-up book.

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

## Params

_No params._

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

## Prompt

## When to use

Physical material language for paper-and-ink hero visuals: use A for a single card's settling entrance, B for a full dashboard opening build; naturally paired with paper/ink + accent-color hero visuals (paper/ink/amber template films)

## Intention

A UI translation of Wes Anderson notebook art and pop-up book paper craft. A: a card floats lightly into place and hangs there swaying slightly (unsecured paper), two torn strips of translucent tape slap down one after another on opposite corners, and on the second slap the card **simultaneously** stops swaying, its shadow thins, and it settles down — the instant of being "pinned down" is the star, and the two slap sounds are a natural audio cue. B: the whole page lies flat like an open book seen from above, and cards like paper pieces glued to the page stand up one after another along their base edges in a staggered wave to form a wall, overshooting to 95° and springing back to 90° (paper's springiness), with the shadow at the root narrowing as it stands up.

## Duration & energy

- Duration: A 3–4s / B 4–5.5s
- Energy: A Medium (a two-beat hit) / B Medium-high (standing up the wall has depth impact)

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

## 意图
Wes Anderson 手账美术与立体书纸艺的 UI 翻译。A：卡片轻飘入位后
悬着微晃（未固定的纸），两条撕边半透明胶带"啪、啪"先后拍在对角，
第二条拍下**同帧**卡片停晃、投影变薄、整卡下沉——"按死"的定妆
一瞬是主角，两声"啪"是天然音效点。B：整页平躺如摊开书页（俯视），
卡片像贴在页上的纸片沿各自底边错峰立起成墙，立到 95° 回弹 90°
（纸的韧性），根部投影随立起收窄。

## 两式选型
| 式 | 做法 | 适用 |
|----|------|------|
| A masking-tape-slap | 晃动=幅度包络×正弦（rot ±1.5°/bob ±5px）；胶带扑入 6f：scale 1.45→1 + rotate 欠 16°→过冲 7°→回正 + 落帧 scaleY 0.72 一帧压扁；撕边 14 点 clipPath 锯齿 | 单卡/徽章的定妆入场；文案重音对齐 |
| B popup-book-rise | 双层 3D：场景 rotateX 75° 俯视（persp 2600），每卡 rotateX 0→-90° spring（damping 11 过冲 -95°），origin 底边，preserve-3d 贯通；远排先近排后错峰 7f | 整版 dashboard 开场；"系统被搭建起来" |

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| A 按死三件套 | 同帧：晃动 2f 归零 + 投影 34px→8px + 全卡下沉 2px | 三件拆帧就没有"按死"感；第一条胶带只把包络衰到 0.45（半死） |
| A 胶带质感 | 半透明 + 锯齿撕边 + 落点故意歪 2–3° | 歪斜是设计的手工感；直挺挺读作 UI 元素 |
| B 立起方向 | rotateX 0→**-90°**（向观众立起） | demo 判例：方向写反卡片往画面里倒被底板裁切 |
| B 根部投影 | blur 矩形不随卡立起，高 104→14px、透明度 0.26→0.1 随角度插值 | 无投影纸片浮空；投影跟着立起来穿帮 |
| B 收尾 | 全部站定后场景 75°→68° 轻回正（in-out cubic） | 直接定住少一口呼吸 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- A 的晃动是"未固定"的叙事铺垫不是手持抖动（Q3 边界）：
  振幅包络必须最终归零，全片只在被按死前存在
- B 与 tilt-reveal 分工：tilt 是**机位**抬头看静止页面，
  本卡机位基本不动、**构件自己**站起来
- B 立墙后卡片呈 90° 侧立态，文字不可读——立墙是构图动作，
  信息交给立起后的正视段落（Q6 同源）
- 声音：A 两声"啪"（纸拍击拟音）；B 每排立起一声轻纸响，
  错峰对齐（S2/S4 同源）

## 参考实现
demos/ui-entrance/paper-craft-moves/
（MaskingTapeSlap.tsx / PopupBookRise.tsx）

## Reference implementation (Remotion)

- demos/ui-entrance/paper-craft-moves/MaskingTapeSlap.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/ui-entrance/paper-craft-moves/MaskingTapeSlap.tsx
- demos/ui-entrance/paper-craft-moves/PopupBookRise.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/ui-entrance/paper-craft-moves/PopupBookRise.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/paper-craft-moves/MaskingTapeSlap.tsx, demos/ui-entrance/paper-craft-moves/PopupBookRise.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.