# Line carry transition

Scene A's progress bar extends off-frame, the camera pans with the line, and the line turns a corner mid-move to frame scene B's card border, with no cut anywhere.

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

## Params

_No params._

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

## Prompt

## When to use

Between two scenes with graphic kinship (a progress bar → a card frame, an underline → a chart axis); the signature transition slot of a film, the graphic-relay opening of Catch Me If You Can.

## Intention

The three transition families in the library all answer "how does the scene change"; this card's answer is **it fundamentally doesn't change — one line leads you across**. Once the progress bar fills, its end extends into a long line that shoots off the card's edge, the camera pans with the line into the new world, the line turns right angles mid-move to frame scene B's card, the frame closes, content fades in — the audience's eye never leaves the line from start to finish. Graphic continuity is itself the transition. The difference from a match-cut: that aligns shapes on either side of a cut — it's still a cut; this is continuous drawing — **there is no cut**. The line needs a narrative logic for its identity; a line with no justification is mere decoration.

## Duration & energy

- Duration: ~5.3s (progress bar fills + pan 60f + framing + content fade-in + 36f hold)
- Energy: Medium

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

## 意图
转场库三大族（穿越/藏切/体块）都在回答"场景怎么换"；本卡的回答是
**根本不换——一条线牵着你走过去**。进度条走满后末端延伸成长线冲出
卡缘，镜头跟着线横移 1920px 进入新世界，线在移动中拐直角围出 B 场景
的卡框，框闭合、内容淡入，从头到尾观众的眼睛没离开过这条线。图形
连续性本身就是转场。与 match-cut 的区别：那是切点两侧形状对位——
终究还是切；这是连续绘制——**没有切**。线的身份要有叙事逻辑（进度条
"走完了"所以延伸出去），无来由的线只是装饰。

## 动效核心
- 3840 宽世界容器 translateX 当镜头，34–94f 移 1920px，
  Easing.inOut(cubic)
- 一条手写折线 path（进度条 560 + 冲出段 + 直角 + 560×330 矩形框，
  总长 3980）全程 dasharray/dashoffset evolve，分段驱动 drawn 长度
- **命门：横移段 drawn = 1100 + cam，线生长与镜头位移同速**——笔头
  钉在画面 x≈1500 偏右，永不出画也永不落后；一旦失速，观众跟丢线
  就等于跟丢了转场
- 笔头 r=11 墨点随线走，框闭合后 112–118f 线性消散并条件卸载
  （摘罩判例）；B 内容 124f 前淡入完，124–160f 真静止 36f

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 线体 | 6px ink 实线 | 太细横移中读丢；虚线读作未完成态 |
| 横移配比 | 1920px / 60f（32px/f） | 更远的横移等比拉长时长，别提速——>40px/f 笔头开始拖影跟丢 |
| 笔头位置 | 画面 x≈1500（约 78% 处偏右） | 居中读作"线追镜头"；贴边一颤就出画 |
| 拐角 | 直角硬拐，不倒圆 | 圆角软拐丢掉制图感，Saul Bass 味就没了 |
| 框闭合 | 闭合帧起 B 内容再淡入 | 框没闭合内容先出，线的悬念白搭 |
| 收尾 | 淡入完 ≥36f 真静止 | 笔头墨点必须条件卸载，残留即毁静止 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 与 draw-svg-trace 的关系：那是元素级描边点名（线属于元素），这是
  场景级线条接力（线属于镜头）——同片可共存，但线的语义要一致：
  同为 ink 6px 手绘感，或同为几何硬线，混用读作两套美术
- 全片 ≤1 次——这是招牌转场不是常规转场，第二次出现魔法就穿帮
- 起点必须是已有图形构件的自然延伸（进度条走满、下划线画完），
  凭空起线读作屏保
- 声音：线生长一声持续笔擦、框闭合一声轻叩（sound-design §4.5）

## 参考实现
demos/transition/line-carry-transition/
（LineCarryTransition.tsx）

## Reference implementation (Remotion)

- demos/transition/line-carry-transition/LineCarryTransition.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/transition/line-carry-transition/LineCarryTransition.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/line-carry-transition/LineCarryTransition.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.