# Skeleton reveal

Three-tier reveal from sketch to structure to content — hand-drawn doodles get swapped for skeleton bars, which resolve into real UI.

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

## Params

_No params._

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

## Prompt

## When to use

A "from nothing to something" entrance narrative for product UI; the section where the product interface is first shown after the opening

## Intention

The UI-entrance library is full of "the whole page arrives at once" (fly-in/drop/wipe). This card instead splits the entrance into **three tiers of fidelity**: hand-drawn doodle (idea) → gray-bar skeleton (structure) → real content (product) — each jump is a satisfying beat of "becoming real," and the viewer follows the narrative arc from "sketch to product." The skeleton-to-content reveal borrows loading-state grammar — users see skeleton screens every day, so gray bars instantly read as "content is coming," and that expectation is free. Division of labor with document-typewriter-reveal: that's **one document** being written out block by block (the content is the star, meant to be read); this is **one interface** progressively becoming real (structure is the star, text is the final layer of fidelity). Division of labor with ai-stream-response: that's evidence rows "flowing in" one by one (a growing list); this is already-placed placeholders "developing" (the layout is set from the start, fidelity is what upgrades).

## Duration & energy

- Duration: ~5.7s (172f: doodle 1s + swap-to-real 0.3s + skeleton scroll-in 1.2s + push-in reveal 3s)
- Energy: Medium (a narrative-driven entrance; the emphasis is on the two moments of "becoming real")

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

## 意图
UI 登场库全是"整页一次到位"（飞入/落位/擦出）。本卡把登场拆成
**三级保真度跃迁**：手绘涂鸦（想法）→ 灰条骨架（结构）→ 真实内容
（产品），每次跃迁都是一拍"变成真的"的爽点，观众跟着走完"从草图
到产品"的叙事弧。骨架→内容的显影借的是加载态语法——用户天天见
skeleton screen，看到灰条就知道"内容要来了"，预期免费。与
document-typewriter-reveal 分工：那是**一份文档**被逐块写出来（内容是
主角、要读字）；本卡是**一个界面**逐级变真（结构是主角、字是最后
一级质感）。与 ai-stream-response 分工：那是证据行逐条"汇入"（列表
在生长），本卡是已就位的占位"显影"（布局早定，保真度在升级）。

## 动效核心
- 涂鸦 = 种子抖动折线/blob 路径（mulberry32），SVG 圆头粗 stroke
  （11–14px）；**每 5f 换一套种子做"煮沸"**——静止的手绘读作贴图
- 换真一拍：涂鸦层 8f Easing.in 加速缩退（scale -14%）+ 淡出，
  骨架窗口同时 spring(damping 16, stiffness 160) 弹入，交叠不留空场
- 骨架行 translateY 520→0 逐行错峰 6f 滚入（ease-out cubic）
- 显影 = 骨架/内容双层叠放 opacity 互换 + 头像 scale 0.7→1 长出，
  伴随镜头 1→1.34 inOut 推近（76f）——推近给显影一个"凑近看清"的
  视线动机
- 文字逐词 2.5f 步进上浮 14px 进场；末行末词 +14f 晚半拍（"pink?"
  式收尾顿点）

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 煮沸周期 | 每 5f 换种子，抖幅 ±6–10px | <3f 抖成噪点；>8f 读作卡顿而非手绘活性 |
| 换真一拍 | 涂鸦 8f 加速缩退，骨架 spring 同帧弹入 | 这拍必须快而果断——拖长成 crossfade，"跃迁"就没了 |
| 骨架滚入 | 每行错峰 6f，各 22f ease-out | 骨架期要短暂停留（观众登记"结构"）再显影，粘连读不出三级 |
| 显影节拍 | 每行错峰 13f，行内 12f；镜头推近同段起 | 逐行有节奏地变真；全屏同帧显影读作换图 |
| 逐词进场 | 2.5f/词，上浮 14px + 淡入 | 词级进场是最后一级质感；整行淡入降一档也成立 |
| 晚半拍 | 末行末词 +14f | 收尾顿点让"加载完成"有句号；全部齐落平淡 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 三级布局必须严格同构：涂鸦的窗口/侧栏/消息行位置要和骨架、骨架要和真内容对得上——错位后"显影"变成"换了个页面"，叙事断
- 实战真内容层贴产品真实截图/排版时，骨架灰条的行高与槽位要按截图量（document-typewriter-reveal 卡"烤入纹理对齐"同族教训）
- 涂鸦线稿别画细节：粗圆头 blob + 波浪线足够，画得太像 UI 第一级和第二级就没差了
- mock 文案合规：不出现客户/成员真名（Q1 通例）
- 声音：换真一拍钉一声 pop/whoosh，逐行显影各一声极轻 tick，末词晚半拍处配一声轻 chime 收束

## 参考实现
demos/ui-entrance/skeleton-reveal/
（SkeletonReveal.tsx）
原片出处：slack-promo 4–4.5s + 10–15s

## Reference implementation (Remotion)

- demos/ui-entrance/skeleton-reveal/SkeletonReveal.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/ui-entrance/skeleton-reveal/SkeletonReveal.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/skeleton-reveal/SkeletonReveal.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.