# Row embed

Content rows drop from above like cards, level out via rotateX, and an accent-color seam lights up along the bottom edge as they embed.

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

## Params

_No params._

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

## Prompt

## When to use

A detail-page/list shot for "structured data growing into the page"; a batch entrance for row-level content

## Intention

A detail page's rows don't "appear," they "grow in" — each row drops from above and embeds seamlessly into the page layout, and the accent-color seam that lights up at the moment of embedding is the visual sound effect of a "click" snapping into place.

## Duration & energy

- Duration: About 2s (12–68f)
- Energy: Medium

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

## 意图
详情页的行不是"显示出来"而是"长进去"——每一行从空中降下并严丝合缝嵌入页面布局，嵌入瞬间的强调色缝是"咔哒"扣上的视觉拟音。

## 动效核心
- 行按节拍逐条从上空飞入，rotateX 从仰角收平，scale 略过冲后 press 回弹
- 行位先盖页面底色补丁占位，落地后补丁消失让纹理透出
- 嵌入瞬间行底边一道 2px 强调色缝从中心向两侧展开后淡出
- 相机同时匀速下摇，行雨与运镜并行

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 节拍 | 第 i 行 cue = 12 + i·9，飞行 12f，最后一行 60f 落地、强调色缝 68f 收尾 ≤ 镜头 70f 预算 | 先算"最后一行何时落地"再定 cue 间隔——节拍×行数要对预算（同 document-typewriter-reveal 卡的核心算术） |
| 飞行姿态 | `perspective(900px) translateY(−120·air) rotateX(16°·air)`，scale 1.06→0.995 再 4f press-bounce 回 1 | rotateX 收平是"嵌入"的关键读感；纯垂直下落读作贴纸 |
| 飞行体 | backgroundImage 取整页截图、backgroundPosition 负偏移裁出该行 | 纹理裁片不重绘内容（Q1）——重绘的行和页面字体渲染有肉眼可见差异 |
| 空槽补丁 | 行位先盖页面底色 patch，落地后 2f 消失 | 无补丁时纹理里烤入的行会先透出来，飞入变成"重影" |
| 嵌入闪光 | 底边 2px 强调色缝从中心向两侧 5f 展开（Easing.out cubic）、8f 淡出，带 6px 辉光 | 缝只在底边、只闪一次；四边都闪读作选中框 |
| 相机 | cy 300→760 匀速 75f 下摇 | 运镜与行雨并行制造"边看边长"的感觉；相机若等行落完再动，镜头会拖 |

## 声音
段落切入钉 transition-soft（模板片钉在 f475）；行落地不逐条配音——行数多、间隔匀时逐条 pop 会机枪化，靠画面的强调色缝做"视觉拟音"即可（S2 反面自检）。

## 已知坑
- 飞入终点必须是页面布局真实槽位、落地即嵌入（Q9）——要"从空中飞入，嵌入 dashboard"；悬浮其上不落地会显得假
- 强调色缝等光效必须裁进承载元素圆角边界内（Q4 判例），光溢出圆角是廉价感典型来源

## 参考实现
demos/ui-entrance/row-embed/RowEmbed.tsx（原 template/src/aifl/live/SceneDetail.tsx）

## Reference implementation (Remotion)

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