# Segmented thumb hero

A segmented control's thumb shift becomes the star of a close-up — a cursor clicks it and a new icon springs in.

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

## Params

_No params._

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

## Prompt

## When to use

An announcement shot for a "mode switch / pick one of two" feature (Ask→Computer, Chat→Agent style); a close-up technique that lets one micro-interaction carry a whole shot

## Intention

When a product switches to a new mode, the usual shot swaps out the whole interface. This card does the opposite: it blows the segmented control up to 1080px wide for a close-up, and **the thumb's 8-frame shift itself is the narrative** — "we went from A to B." With no page context at all, the control itself is the stage. The causal chain is complete: the cursor slides in (someone arrived) → clicks with a ripple (a decision was made) → the thumb slides (the world responds) → the new icon pops (a new identity is confirmed). None of the four beats can be dropped: skip the cursor and it looks like the control is moving on its own, skip the icon pop and the switch has no payoff.

## Duration & energy

- Duration: ~3.5s (demo 110f: float-in 18f + cursor 24f + click + slide 8f + icon pop + hold)
- Energy: Medium (a refined micro-interaction close-up, not a big hit)

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

## 意图
产品切到新模式，通常拍法是整个界面换掉。本卡反着来：把 segmented
control 放大到 1080px 宽拍特写，**thumb 那 8 帧位移本身就是叙事**——
"我们从 A 走到了 B"。没有任何页面上下文，控件即舞台。因果链完整：
光标滑入（有人来了）→ 按下+涟漪（做了决定）→ thumb 滑动（世界响应）
→ 新图标弹出（新身份确立）。四拍缺一不可，缺了光标就是 UI 自己在动，
缺了图标弹出就是切换没有奖励。

## 动效核心
- 控件特写尺寸 1080×220，从下 200px 弹簧浮入
  （spring damping 14 / stiffness 120），大阴影随落位收小（24→12px）
- 光标是超大描边箭头（130px，白底墨描边）：24f Easing.out(cubic)
  从右下画外滑到目标段上；按下 scale 1→0.86→1（3f 下 4f 回）
- **thumb 严格 8f** Easing.out(cubic)（demo 52→60f）——还原原片手感；
  这 8f 是全镜的心跳，前后各拍都在为它服务
- 到位瞬间双动作同帧起：新图标 spring(damping 10, stiffness 220)
  过冲弹出；旧图标 6f Easing.in 塌缩且 width 同步归零让文字自然回流
- 点击涟漪：4px 描边圆环 12f 从点击点扩散淡出（Easing.out(quad)）
  ——涟漪确认"按下"发生过，无涟漪点击读作光标路过

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 控件尺寸 | 1080×220，thumb 内缩 16px | 缩到 <600px 宽就不是特写了，thumb 位移读不出重量 |
| thumb 时长 | 8f Easing.out(cubic) | >14f 读作慢动作演示视频；<5f 读作瞬移，"滑"没了 |
| 光标滑入 | 24f 从画外，ease-out | linear 或 <14f 读作光标被扔进来；起点必须画外 |
| 按下 | scale 0.86 + 涟漪 12f | 无按下直接滑 thumb，因果链断，读作自动播放 |
| 图标弹出 | spring damping 10/stiffness 220 | damping <8 弹三下抢 thumb 的戏；旧图标不收起文字会挤出控件 |
| 收尾 hold | 新态静置 ≥30f | 切换完立刻切镜，"新模式"没被看清 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 与 input-trigger-moves 分工：cursor-performance 是光标在完整页面里
  点击推近（有上下文），本卡是控件脱离页面拍无背景特写——同片可共存，
  但同一次点击别既拍页面版又拍特写版
- 图标塌缩用 width 归零而不是只 scale——只 scale 会留空位，文字不回流，
  控件内出现"幽灵缝"（demo 里 width 与 scale 同步驱动）
- 二段以上（3+ 段）控件慎用：thumb 跨多段滑行 8f 太快读不出停靠，
  拉长又破手感——本卡吃"二选一"最顺
- 涟漪圆环要 zIndex 压在 thumb 之上、圆心锁点击点——跟着 thumb 走
  就成了 thumb 的拖尾，语义变错
- 实战替换素材：段标签/图标换成真功能名即可，但"新段图标带表情"
  （demo 笑脸 laptop）是奖励感的一半，纯线框图标会淡不少

## 参考实现
demos/interaction/segmented-thumb-hero/
（SegmentedThumbHero.tsx）
原片出处：perplexity-promo 2.3–5s

## Reference implementation (Remotion)

- demos/interaction/segmented-thumb-hero/SegmentedThumbHero.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/interaction/segmented-thumb-hero/SegmentedThumbHero.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/interaction/segmented-thumb-hero/SegmentedThumbHero.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.