# Radial ripple phone chips

Concentric rings breathe like water behind a phone mockup with an auto-scrolling feed, while white chips spring in on both sides.

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

## Params

_No params._

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

## Prompt

## When to use

The "this is it" freeze shot for a mobile product; an intro section with feature points listed on both sides; a product overview for a cold open or outro

## Intention

Put the phone dead-center with as few moves as possible and make it feel "alive": the concentric rings handle the ambient breathing, the auto-scrolling feed inside the screen proves "there's real content running in there," and the chips on either side call out feature names. Each of the three layers of motion is extremely slow on its own — stacked together, they avoid reading as static. This is the standard recipe for a product freeze shot.

## Duration & energy

- Duration: About 5.6s (168f@30fps)
- Energy: Low (quiet, breathing feel, sustained by the concentric rings' continuous undulation so it never goes cold)

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

## 意图
用最少的动作把手机放在画面正中并让它"活着"：同心圆负责氛围呼吸，
屏内自动滚屏负责证明"里面有内容在跑"，两侧 chip 负责点出功能名。
三层动作各自极慢，叠起来才不会显得静止——这是产品定格镜头的标准配法。

## 动效核心
- 4 层同心圆（560/440/320/210px，#d7dbe1→#eef0f3 由深到浅）各自
  `scale 1 ± 0.06`，全片走 1.5 个正弦周期，相邻层相位差 1.7 rad
  ——错相是"水波"而不是"整体缩放"的关键
- 手机 mockup 132×264、22px 圆角、`0 24px 50px rgba(58,64,74,.35)`
  的落地投影，屏内 8 张骨架卡组成 feed
- feed `translateY 0→−150px`，窗口 `t 0.08→0.98` **匀速无缓动**
- chip pop：`seg(t0, t0+0.12, outBack)` 驱动 scale 0.8→1，opacity 在
  前 0.08 就跳满；左 chip 起 0.22、右 chip 起 0.40
- pop 完接 `sin` 悬浮 ±3px（2 周期/全片），并由 `seg(t0+0.12, t0+0.3)`
  渐渐介入——不是一落位就开始飘

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 同心圆层数/尺寸 | 4 层 560/440/320/210px | 3 层撐不满画面，5 层以上最外层被裁掉只剩色带 |
| 呼吸幅度 | scale 1±0.06，1.5 周期/全片 | 0.06 已是上限；到 0.1 就读作"脉冲动画"而非水波 |
| 相位差 | 相邻层 1.7 rad | 相位全同 = 整块放大缩小；差 1.7 才有波从中心荡开的错觉 |
| 手机投影 | 0 24px 50px rgba(58,64,74,.35) | 投影是手机"浮在波上"的唯一依据，去掉就贴平了 |
| 自动滚屏 | translateY 0→−150px，t 0.08→0.98 匀速 | 加 ease 立刻读作"有人在滑"；匀速才是自动播放 |
| chip pop | outBack、0.12 时长、scale 0.8→1 | outBack 的过冲量是"弹出"的全部质感，换 outCubic 就平了 |
| chip 时序 | 左 0.22 / 右 0.40（≈0.6s 差） | 同时出现读作两个标签；错开才有"一个一个说"的节奏 |
| chip 悬浮 | ±3px、2 周期，pop 后 0.18 内渐入 | 幅度超过 5px 就和同心圆的呼吸抢戏 |

## 已知坑
- chip 用 `calc(50% + 86px)` 贴着手机边缘定位；改手机宽度必须同步改
  这个 86px，否则 chip 压到 mockup 上
- 屏内 feed 是 8 张骨架卡的占位内容，落地换真实截图时总高必须
  大于「150px + 屏高」，否则滚到底露白
- 同心圆是实色叠放（不是描边圆环），层序必须由大到小 append，
  顺序反了就只看得见最大那层
- ACCENT_RGB（默认 `122,134,153` 中性灰蓝）只作用于屏内缩略图渐变，
  换项目品牌色只改这一个变量即可换肤

## 参考实现
demos/effects/radial-ripple-phone-chips/
（RadialRipplePhoneChips.tsx）

## Reference implementation (Remotion)

- demos/effects/radial-ripple-phone-chips/RadialRipplePhoneChips.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/effects/radial-ripple-phone-chips/RadialRipplePhoneChips.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/effects/radial-ripple-phone-chips/RadialRipplePhoneChips.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.