# Cycle Glass Node Morph

A single subject shrinks into a mechanism diagram during a diagonal wipe, three looping-cycle labels establish along an arc, then on a continuous push-in three glass nodes rise from below to take over the original labels, ending with staggered diagnostic markers pinning the system state.

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

## Params

_No params._

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

## Prompt

## When to use

The perceive-reason-act loop of AI agents/automation/control systems; an explainer shot for "one object with three mechanisms behind it"; technical B-roll transitioning from a real scene into an abstract system diagram.

## Intention

A cycle diagram easily collapses into "draw three circles and two arrows." This card grounds the mechanism explanation in one continuous subject: instead of being replaced by a separate grayscale copy, the subject shrinks into the system's center in sync with a diagonal wipe; the cycle text first appears as black concept labels, and once the camera pushes in, glass nodes rise up from beneath them, turning the very same label into a white node title. What viewers read is an object in the scene being explained as an operating mechanism, not a cut to another slide.

## Duration & energy

- Duration: About 8.6s (257f@30fps; final state held for 34f).
- Energy: Medium-high (scene transition up front, cycle establishment in the middle, push-in with continuous three-node lift-off at the end).

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

## 意图
循环图最容易沦为“画三个圆加两支箭头”。本卡把机制解释建立在一个连续主体上：
主体不是被另一份灰阶副本替换，而是在对角擦除发生时同步缩入系统中心；循环文字先作为
黑色概念标签出现，推近后玻璃节点从它们下方升起，把同一标签转为白色节点标题。
观众因此读到的是**场景里的对象被解释成一套运行机制**，而不是切到另一页 PPT。

## 动效核心
- f0–61：大主体与上下文条完整静置；先让观众看清“被解释的对象”，不要一开场就缩小
- f62–94：主体用 `inOutCubic` 连续缩小并向系统位置靠拢；f66–90 同时由左上到右下
  推进对角擦除，揭出浅色机制场；两者共用同一主体 DOM，不做双主体交叉淡化
- f66–110：背景内容圆从 .3× 长到 1×；f84–90 机制标题短促落位
- f124/129/134：三段标签按 5f 错峰，用七帧 `亮→灭→灭→亮→暗→亮→暗→锁定`
  的可控闪现建立；它们继续沿弧线滑到宽机位的最终位置，而不是闪完就停
- f127–176：上下两条弧线同步描边生长，箭头头部随线端行进；到 f176 才形成闭环
- f176–198：整组做一次连续推近，关键状态 scale `.61→.659→.935→1`；中间关键帧
  只约束路径，不允许停顿或二次起步
- f184–208：三枚 64px 玻璃节点每隔 8f 从下方 86px 依次顶起，带一次 18px 量级的
  outBack 越位后落定；节点覆盖处把标签由黑转白
- f208–222：左、上、右三个三角诊断标记独立错峰落位；f222–256 全部静止

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 场景 hold | f0–61 | 至少留 1.5s 看清主体；缩短后会像片头缓冲失败 |
| 主体缩入 | f62–94，宽 332→154px | **命门**：始终是同一个主体对象；复制一份灰阶主体叠化会破坏连续性 |
| 对角擦除 | f66–90，135° 硬边 gradient stop -40%→140% | 擦除线必须越过两个对角并与主体缩入同时发生；提前结束会露出“双世界”接缝 |
| 标签节奏 | f124/129/134 起，七帧闪现后锁定 | 闪现只是“系统识别”口吻；全程随机 glitch 会牺牲可读性 |
| 弧线建立 | f127–176 | 约 1.6s 的持续生长让观众能顺着关系读；压到 20f 只剩装饰扫线 |
| 连续推近 | f176–198，scale .61→1 | 中间关键帧不得做 hold；分三段 easing 后速度归零会产生三次启停 |
| 节点顶起 | f184/192/200 起，各 8f，rise 86px | 每枚只允许一次越位回落；三枚同时弹出会丢掉阅读顺序 |
| 诊断标记 | f208/213/217 起，5–6f | 标记是收尾证据，不与节点共享 transform，避免“整组一起弹” |
| 最终 hold | f222–256 | 34f 是三段机制通读时间；若标签更长，优先延长总时长 |

## 已知坑
- 对角擦除边界必须从画外进入并越过另一侧画外；只插值 0%→100% 会在起止帧残留旧场景角落
- 主体、背景圆、弧线和标签的 z-index 必须明确：主体在圆上、弧线在圆上但不盖主体、节点最后压过标签
- 玻璃节点需要真实 `backdrop-filter`、内高光与外阴影三层质感；单一半透明灰填充会像普通圆形按钮
- 标签变白必须只发生在玻璃圆覆盖区域。demo 用节点内同文白字模拟；落地到长标签时应使用圆形 mask 裁切同一文字层，避免双文本错位
- 推近作用于机制组，不作用于开场背景和对角擦除层；把整画面一起缩放会让转场边界漂移
- demo 为原创通用 DOM/SVG 重构，不含参考研究中的车辆、品牌、道路或 UI 资产

## 参考实现
demos/data/cycle-glass-node-morph/
（CycleGlassNodeMorph.tsx）

## Reference implementation (Remotion)

- demos/data/cycle-glass-node-morph/CycleGlassNodeMorph.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/data/cycle-glass-node-morph/CycleGlassNodeMorph.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/data/cycle-glass-node-morph/CycleGlassNodeMorph.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.