# Page-turn transitions

Two full-page transitions: cube-rotate turns two pages like adjacent cube faces, and barn-door-split splits the old page open like doors.

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

## Params

_No params._

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

## Prompt

## When to use

Chapter-level page changes: a "turning the page" ritual between two parallel major sections; division of labor with the shot-transitions family (camera hand-off) — that's "the camera moves across," this is "the page itself is a physical object"

## Intention

The shot-transitions six and transition-travel/hidden-cut all treat the page as a "scene" — the camera moves between scenes. This card treats the page as a **physical object**: it has thickness, weight, it can turn over and split apart. The physical-object metaphor carries more ceremony, suited to major chapter-level page changes (feature A wraps up → feature B begins) rather than small shot-to-shot hand-offs. A, the cube, is "spatially parallel" — the two pages are two faces of a box, implying a peer relationship; B, the barn door, is "the old one steps aside" — the old page tears open from the center and slides away while the new page rises up from below, implying replacement. Choose by semantics: use A for parallel page turns, B for old-to-new swaps.

## Duration & energy

- Duration: Per style: establish 30f + transition 20–38f + settle ≥40f, about 4.4–4.7s
- Energy: Medium-high

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

## 意图
shot-transitions 六式和 transition-travel/hidden-cut 都把页面当"场景"
——相机在场景间移动。本卡把页面当**实体**：它有厚度、有重量、会翻面
会裂开。体块隐喻的仪式感更强，适合章节级大换页（功能 A 讲完→功能 B）
而非镜头级小交棒。A 立方体是"空间上并列"——两页是盒子的两面，
暗示同级关系；B 对开门是"旧的让位"——旧页从正中撕开滑走、新页
从底下迎上来，暗示取代关系。按语义选：并列翻篇用 A，新旧交替用 B。

## 两式选型
| 式 | 做法 | 适用 |
|----|------|------|
| A cube-rotate | 两页贴立方体相邻面（rotateY 0/90° + translateZ W/2），场景层转 -90°；旧面转出压暗、新面转进变亮，45° 时两面夹一条暗棱 | 并列章节翻篇；产品两大功能区切换 |
| B barn-door-split | 旧页两个 960px overflow 容器对位拼合，同时向外 Easing.in(cubic) 滑出画外；裂缝内边缘亮线+投影，新页底层 scale 1.06→1 迎上 | 新旧交替：改版前后、方案 A→方案 B |

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| A 结构命门 | 场景层 `translateZ(−W/2) rotateY(θ)` 把正面拉回 z=0 | 少了这层 hold 段页面尺度不对（被 perspective 推远） |
| A 转速 | θ 0→−90° / 38f inOut cubic；中段叠 blur 1.5px 落定摘 | <28f 读不出体块感；>50f 读作慢慢挪 |
| A 亮度对切 | 旧面 1→0.55、新面 0.55→1 + 接缝竖向渐变阴影 sin(pπ) | 无明暗对切两面读作同一张图在转 |
| B 预告 | 裂前中缝 2px 细线闪现两次（18–22/25–29f） | 直接裂开观众没看到裂点在哪 |
| B 滑出 | 各 translateX ∓980px / 20f Easing.in(cubic) 加速 | ease-out 滑出是"被推走"，ease-in 才是"让位" |
| B 撕裂边 | 内边缘 3px G.ink 亮线 + 8px 投影 | 无边线两半读作普通左右擦除 |
| 收尾 | 新页落定真静止 ≥40f | R1 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 一缝一式规矩同 shot-transitions；体块转场比镜头交棒更重，
  **全片 ≤2 次**，连续两缝都用体块读作 PPT 翻页
- A 式官方 `@remotion/transitions` cube() 是付费件——本卡是 CSS 自实现，
  backlog 已有"评估官方转场原语"待选项，若引入官方件可对照
- B 式两半必须**对位拼合无缝**（右半内层 translateX(−960px)）——
  静止时看出接缝就穿帮；真实截图注意奇数宽度取整
- 转场前后两页都要有 ≥30f 静止建立/收尾——两端都在动，体块感被
  运动淹没

## 参考实现
demos/transition/page-turn-transitions/
（BarnDoorSplit.tsx / CubeRotate.tsx）

## Reference implementation (Remotion)

- demos/transition/page-turn-transitions/BarnDoorSplit.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/page-turn-transitions/BarnDoorSplit.tsx
- demos/transition/page-turn-transitions/CubeRotate.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/page-turn-transitions/CubeRotate.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/page-turn-transitions/BarnDoorSplit.tsx, demos/transition/page-turn-transitions/CubeRotate.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.