# Travel-through transitions

Two travel-through transitions — shared-element homecoming and letter-cavity pass-through; the camera drills through a real element inside the frame to complete the scene change.

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

## Params

_No params._

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

## Prompt

## When to use

Joins where the two shots share an element/container-level spatial relationship (a technique card, used complementarily with the six shot-transitions moves)

## Intention

The six shot-transitions moves are "handoff" type — the outgoing shot closes, the incoming shot enters, and the join is covered by a white flash/black hold/focus pull/black screen/blur frame/window. This card's two styles are "travel-through" type — the background already exists as a real element inside the foreground frame (a grid slot / a letter cavity), and the camera makes one continuous spatial move drilling into it, so the viewer follows the same object the whole way with no handoff moment. The selection rule: if the background can already be "present in advance" inside the foreground, use travel-through; if the two shots are merely sequential with no spatial nesting, use handoff. The two styles further split by meaning — A is "putting this card back where it belongs" (detail-to-overview, the reverse of style F's window pass-through); C is "the title itself is the door" (a chapter text card and a transition rolled into one).

## Duration & energy

- Duration: n/a (a technique card; each style's action segment is 25–60f, holds before/after counted separately, frames drawn from the neighboring shots' budget)
- Energy: n/a (a technique card, doesn't occupy an energy slot)

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

## 意图
shot-transitions 六式是"交棒"型——前镜收尾、后镜入场，接缝靠白闪/暗场/
焦点/黑场/糊帧/窗口盖住换页瞬间。本卡两式是"穿越"型——后景在前景画面里
以真实元素存在（网格槽位/字形洞），镜头一条连续空间运动钻进去，
观众从头到尾跟着同一个物体，没有交棒瞬间。选型口径：后景能在前景里"预先
在场"→穿越；两景只是先后关系、无空间嵌套→交棒。两式内部再按语义分——
A 是"把这张卡放回去"（详情→总览，F 式穿窗的逆向）；C 是"标题即是门"
（章节字卡与转场二合一）。

## 两式选型表

| 式 | 做法 | 适用接缝 |
|----|------|----------|
| A 共享元素归位 shared-element-morph | 全屏特写卡收缩+位移+长出圆角，严丝合缝飞落进 dashboard 网格所属槽位，3% 过冲落座 | 详情→总览的"归位"语义；与 F 式穿窗成对使用（进窗/回位）|
| C 字腔穿越 letterform-zoom | 巨型标题字腔（SVG mask 挖洞）透出新页，指数推进穿洞，洞撑满瞬间接管、残余笔画甩出画外 | 章节标题→正文；替代 D 式黑场字卡的高能量款 |

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| A morph 主曲线 | 25f bezier(0.4,0,0.2,1) 冲到 1.03 过冲 + 10f Easing.out(cubic) 弹回 1；位置/尺寸/圆角共用同一条进度 p | 三属性各走各的曲线立刻读作"变形"而非"同一物体"；过冲 >5% 读作果冻 |
| A 同一物体感 | 内容按槽位尺寸渲染、随容器等比缩放（scale 3.66→1，origin 左上）；投影随 p 从 0/36/110/0.32 收敛到 0/2/8/0.06 | 内容重排版=换了张卡，穿越感断；投影不收敛则卡永远悬空、落不了座 |
| A 落座仪式 | 背景 dashboard 0.9 透明度待命，落座瞬间 5f 提到 1 | 背景全程满亮则飞落没有"到家"的一拍；提亮窗口跨骑落座帧前后 |
| C 穿腔主推 | 盖板 SVG mask（白底+黑字 900 字重）挖洞，transform-origin 对准腔心（demo："DASH" A 腔 ≈773,508）；scale=28^t，t 60f bezier(0.6,0,0.85,0.5) 慢起陡收 | ZOOM_MAX 按"洞撑满画面"配，字腔越小倍数越大；慢起段留给观众看清"洞里有东西" |
| C 撤场与呼应 | scale∈[15,24] 盖板 opacity 1→0（残余笔画边飞边撤）；期望模糊量 0→16px 除以 scale 写进 blur 补偿；洞内 B 层微 dolly 1→1.1、接管后 25f 落回 1 | blur 不除 scale 会被 transform 放大成糊墙；B 不跟着 dolly 则洞里是张死图，"穿进活页面"的感知断掉 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验；灰阶测不出纹理级缺陷（轮 A 判例），真实素材
  上先出静帧自检
- C 式腔心坐标是字体度量估算（字宽 em 值手推），换字体/换词/渲染器字距
  不同都会漂——渲后看第一帧推进方向，洞不居中就微调 origin，别信算出来的数
- A 式槽位坐标必须精确到像素（demo 里从 fixtures 布局逐项推算 808,590,
  524x454,r14）——差几像素落座后再对齐，观众读作"飞到附近再吸附"，
  "归位"的严丝合缝感全无
- 穿越两式与交棒六式同一接缝不叠加，一缝一式；穿越式已自带高能量，
  再包白闪/震屏读作穿帮（规矩同 shot-transitions）

## 参考实现
demos/transition/transition-travel/
（LetterformZoom.tsx / SharedElementMorph.tsx）

## Reference implementation (Remotion)

- demos/transition/transition-travel/LetterformZoom.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/transition-travel/LetterformZoom.tsx
- demos/transition/transition-travel/SharedElementMorph.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/transition-travel/SharedElementMorph.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/transition-travel/LetterformZoom.tsx, demos/transition/transition-travel/SharedElementMorph.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.