# Platform hinge rise

A platform establishes first, two subjects flip up from adjacent hinges with a damped rebound, then a conclusion stand rises in.

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

## Params

_No params._

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

## Prompt

## When to use

Side-by-side entrance for two subjects/options/brands; buildings, equipment, or cards rising up from a base; explainer B-roll that needs to "lay out evidence, then draw a conclusion" in one fixed camera position

## Intention

Let the platform establish itself as a credible "support relationship" first, then let the two subjects flip up from behind the platform, and the viewer will naturally read them as evidence in the same set; the conclusion stand rising up from below at the end isn't a third peer element, it's a synthesis of the first two. The fixed camera and clear occlusion order make this suited to explanatory B-roll, and the subjects can be swapped for product cards, people, buildings, or comparison options. The core isn't "something appears from below" — it's **two adjacent hinges producing opposing directions of unfolding force**.

## Duration & energy

- Duration: About 3.5s (104f@30fps; holds still for 30f after the conclusion settles)
- Energy: Medium (the two subjects flipping up together mid-shot is the only major action; the ending is just a steady platform rise)

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

## 意图
先让平台成为可信的“承托关系”，再让两个主体从平台后方翻起，观众会自然把它们
理解为同组证据；最后从下方升起的结论台不是第三个平级元素，而是对前两者的归纳。
固定机位和明确的遮挡顺序让这张卡适合解释性 B-roll，也能换成产品卡、人物、建筑或
对比方案。核心不是“东西从下方出现”，而是**两个相邻铰点产生方向相反的展开力**。

## 动效核心
- f0–15：182×16 的梯形平台从中心 seed 以 `scaleX 0.012→1` 建立，缓动
  `cubic-bezier(.16,1,.3,1)`；必须先看见承托面，主体才能随后成立
- f12–32：背景语境圆 `scale .88→1`、`translateY 18→0`、opacity 0→1，
  比主体早 2f 起步、晚 2f 收尾，作为低能量背景层
- f14–30：左右主体共用 `cubic-bezier(.4,0,.2,1)`，分别从 `translateY 112/90px`
  与 `rotate -18°/+18°` 回到 0；两块的 transform-origin 分别钉在相邻的右下/左下铰点
- f30–46：左块 1.5°、右块 -1.2° 的三半波阻尼回摆，振幅乘 `(1-p)^2`；
  右块延迟 1f，避免完全镜像的机械感
- f52–74：结论台 `translateY 96→0`，opacity 在前 18% 行程先到 0.45 再收至 1；
  f74–103 完全静止，让结论可读

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 平台建立 | f0–15，scaleX .012→1 | 少于 10f 像硬切，多于 22f 会拖慢主体登场 |
| 语境圆 | f12–32，scale .88→1，rise 18px | 背景必须先于主体可辨认，但不能先完成太久 |
| 双主体翻起 | f14–30；左 rise 112px/-18°，右 rise 90px/+18° | **命门**：两块必须从相邻铰点反向展开；同向旋转会失去“打开舞台”的力学关系 |
| 阻尼回摆 | 16f；左 1.5°，右 1.2°，右延迟 1f | 只允许一次可感回摆；振幅 >2° 会像卡片玩具 |
| 结论台 | f52–74，rise 96px | 与主体落定至少隔 6f，避免证据和结论同时抢读 |
| 收尾 hold | 30f | 结论文字若超过 8 个汉字，继续延长总时长，不要压缩升台动作 |

## 已知坑
- 主体必须被平台上缘或独立遮罩裁住底部；没有遮挡会暴露它们从画外平移而非从平台后翻起
- `transform-origin` 不能放在各自主体中心：中心旋转读作两张卡在晃，只有相邻底部铰点才读作展开
- 左右块不要做成完全同尺寸、同高度、同振幅；轻微不对称是让双主体保持可辨认轮廓的关键
- 结论台是总结层，视觉对比应低于两个主体；若给它更深颜色或更大过冲，会反客为主
- demo 只含原创通用 DOM 形状和占位文字，不依赖复刻研究里的品牌、建筑或视频素材

## 参考实现
demos/ui-entrance/platform-hinge-rise/
（PlatformHingeRise.tsx）

## Reference implementation (Remotion)

- demos/ui-entrance/platform-hinge-rise/PlatformHingeRise.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/ui-entrance/platform-hinge-rise/PlatformHingeRise.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/platform-hinge-rise/PlatformHingeRise.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.