# Integration hub map

The old page flips 180° in one go to land as a new hub page, five integration app icons pop in at once, then five rainbow light conduits connect all at once with pulses flowing continuously.

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

## Params

_No params._

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

## Prompt

## When to use

Integration/ecosystem capability segments (one product connects to everything); a version-upgrade narrative (the old page flips into the new); a feature climax with a dark, neon-toned mood.

## Intention

The flip means "a new era": the old document page flips a full 180° into the new hub page — it must be a complete flip, not a tilt at an angle; the flip motion is **fast with a decelerating tail**, completed in one unbroken motion with no segmented pause. The side-edge moment only "flashes once". The connection is **two beats**: five icons pop in on the same frame (first beat) → five conduits start drawing and connect all at once (second beat) — only "all at once" reads as "the ecosystem arrives in one shot"; staggered one-by-one connections read as negotiating individually. Once connected, bright pulses cycle continuously inside the conduits toward the hub — that "delivery" feeling is the life of the final state.

## Duration & energy

- Duration: Lead-in ~0.5s + fast flip ~1.2s + icons appearing all at once → conduits connecting all at once in two beats ~0.7s + delivery breathing ≥1.5s; whole segment 4.5–5s
- Energy: Medium-high (the flip is the peak, the delivery segment is the afterglow)

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

## 意图
翻面是"换时代"：旧文档页整个翻转 180° 得到新中枢页——必须是
完整翻面不是转个角度（判例），翻的动作**快翻+尾段减速**、一口气
完成无分段停顿（"匀速"判例：用户说的匀速=无停顿，不是字面
linear；90° 侧棱停顿版被裁）。侧棱时刻只"闪一下"（1–3f 脉冲，
长光晕平台被裁）。接入是**两拍制**：五图标同帧弹现（第一拍）→
五管同帧起画齐连（第二拍）——齐，才读作"生态一次到位"；错峰
逐个连读作逐个谈判（两轮被裁）。连通后光管内亮脉冲沿图标→中枢
方向持续循环，"输送感"是终态的生命。

## 动效核心
- 翻面：rotateY 0→180°，35f，Easing.out(cubic)（前 41% 时间完成
  80% 角度，尾段长减速缓着陆），双面卡（正面旧页/背面新页）
- 侧棱瞬闪：~90° 时刻 2f 脉冲 bloom（0→1→0.25→0，4f 内归零）
- 两拍制接入：五图标 tIcon 同帧（翻面落定 +3f）弹现；+10f 五管
  tPipe 同帧起画，9f 齐长全亮
- 输送脉冲：光管 dash 亮斑沿图标→中枢方向循环（速度 ~4.6px/f，
  各管相位错开），全连通后中枢页轻呼吸
- 背景：暗紫底噪 + 霓虹矩形浮现衬场

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 翻面时长 | 35f（曾 70f 被裁"再快1倍"） | <24f 读不出双面；尾段减速比例 ~60% 时间走 20% 角度 |
| 翻面曲线 | ease-out 单调无停顿 | 侧棱停顿/分段被裁；严格 linear 起停生硬也被裁——快翻尾缓 |
| 侧棱闪 | 2f 脉冲、4f 归零 | 长光晕平台被裁"闪一下就行" |
| 接入节奏 | 两拍制：图标同帧 → +10f 光管同帧 | 错峰逐连两轮被裁"同时出现，然后同时连接"；两拍间隔 <6f 读作一拍 |
| 光管生长 | 9f 齐长 | 18f 版偏慢；各管长度不同但同帧到达（按各自 len 归一） |
| 输送脉冲 | ~4.6px/f 循环、相位错开 | 静态连线=没有"输送的感觉"（判例）；同相位读作闪烁 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 时序判例链完整记录在案：错峰连入 ×2 被裁 → 管齐图标错峰被裁 →
  两拍制过关。"同时"是这张卡的节奏身份
- 与 glow-flyline-moves 分工：那张是飞线本身的光效戏；本卡是
  翻面+两拍接入+输送的叙事结构，光管只是元素
- 与 canvas-materialize-moves 分工：那张是画布元素实体化；本卡
  核心是"旧页翻成新页"的换代语义
- 双面卡实现：水平/垂直线 bbox=0 会使 SVG filter/渐变失效（三管
  消失判例），管线渐变用 userSpaceOnUse 每管独立定义

## 参考实现
demos/ui-entrance/integration-hub-map/
（IntegrationHubMap.tsx）
原片出处：clickup-30.mp4

## Reference implementation (Remotion)

- demos/ui-entrance/integration-hub-map/IntegrationHubMap.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/ui-entrance/integration-hub-map/IntegrationHubMap.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/integration-hub-map/IntegrationHubMap.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.