# Card Flip Reveal

A feature card flips 180° on the Y axis, its front UI flashing a highlight band that moves with the angle right at the thinnest edge, revealing a large result number on the back, cards flipping staggered across a row.

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

## Params

_No params._

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

## Prompt

## When to use

The "feature → result" paired narrative: a row of feature cards each flip to reveal their own metric/result; an element-level transition.

## Intention

The library's existing "flip" family already has wall-reveal-moves B (a whole wall flipping in waves, for entrances) and split-flap (character flip-cards, for text). This card is a semantic flip: a card's two faces form a cause-and-effect pair — the front is the feature interface, the back is the number it produces. The flip motion itself answers "so what?" — the standard grammar of Apple bento-grid segments. Flipping staggered by 10f across a row of three cards reads as "results reported one after another."

## Duration & energy

- Duration: Single-card flip 26f, three cards staggered by 10f, full run ~4.9s (with hold).
- Energy: Medium-high

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

## 意图
库内"翻"字辈已有 wall-reveal-moves B（整墙波浪翻面，讲入场）和
split-flap（字符翻牌，讲文字）。本卡是**语义翻面**：一张卡的正反两面
是一对因果——正面是功能界面，背面是它带来的数字结论。翻面动作本身
就是"所以呢？"的回答，Apple bento 段落的标准语法。逐张错峰 10f 扫过
一排，三张卡三个数字节奏读作"成果连报"。

## 动效核心
- perspective 1200px + transformStyle preserve-3d；双面各自
  backfaceVisibility hidden，背面预转 rotateY(180°)
- 翻转 18f Easing.bezier(0.55,0,0.3,1) 冲到 192°（12° 过冲，原案 8°
  不可感已加码），再 8f Easing.out(poly(5)) 回落 180°
- **侧棱高光**：linear-gradient 位置随角度 35°→145° 从卡左外扫到右外，
  强度 sin 包络在 90°（最薄瞬间）达峰 0.32 加深灰——白底用加深不用
  提亮（判例）；高光与角度联动才读作"光扫过转动的面"
- 错峰 delay 10f/卡；全部翻完真静止 ≥40f

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 翻转时长 | 18f + 8f 回弹 | <14f 看不到侧棱瞬间；>28f 读作慢慢转 |
| 过冲 | 192°→180°（12°） | 无过冲落定读作生硬停表 |
| 高光峰值 | 0.32 加深灰 @90° | 峰值错开 90° 读作贴图错误 |
| 错峰 | 10f/卡，≤4 卡 | 同时翻读作整墙翻面（那是 wall-reveal B 的活）|
| 背面内容 | 大号数字（90px 级）+ 一行小标签 | 背面塞完整 UI 读不完——翻面后只有一拍注意力 |
| 收尾 | 末卡落定真静止 ≥40f | R1 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 与 wall-reveal-moves B 式（网格波浪翻面）同技术根不同语义：那是
  入场（背面灰卡→正面 UI），这是揭示（正面 UI→背面结论）——同片
  两者都用时翻转方向要区分（入场 rotateX、揭示 rotateY）
- 正反两面必须语义成对（界面→它的成果）；翻出无关内容，翻面就
  只是花哨的换图
- 真实素材正面用截图时注意 backface 渲染开销，三卡以上分 Sequence
- 声音候选位：每卡翻停帧一声轻"啪"（sound-design §4.5），三连啪
  节奏感翻倍

## 参考实现
demos/transition/card-flip-reveal/
（CardFlipReveal.tsx）

## Reference implementation (Remotion)

- demos/transition/card-flip-reveal/CardFlipReveal.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/card-flip-reveal/CardFlipReveal.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/transition/card-flip-reveal/CardFlipReveal.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.