# Theme switch: sweep and ripple

Two theme-switch moves — theme-sweep, a diagonal wipe (the skin changes wherever the boundary passes), and palette-ripple, a combo move (a ⌘K panel collapses to a point, a ripple spreads from it to re-skin).

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

## Params

_No params._

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

## Prompt

## When to use

Dark-mode/theme feature narrative passages; the same UI "changes color before your eyes" rather than cutting to a new scene

## Intention

Two ways to shoot light/dark mode switching. A (Notion/Figma/Linear-style): a 15° diagonal boundary band with a bright line sweeps from top-left to bottom-right; where the boundary passes, light mode **changes in place** to dark mode, both themes coexisting in the same layout for an instant — the viewer sees "the same UI changing its skin," not a transition. B (a combo variant): a ⌘K panel is typed "dark" and entered, the panel collapses to a bright point, and a dark ripple **spreads out from that point** across the whole UI — a fully readable cause-and-effect chain of "a command triggers the re-skin." The linchpin for the combo: the ripple's center must be the panel's collapse point, and the start frame must be the frame the collapse completes.

## Duration & energy

- Duration: A: 3–4s / B: 5–6s
- Energy: A medium / B medium-high (the combo move has a complete cause-and-effect chain)

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

## 意图
深浅模式切换的两种拍法。A（Notion/Figma/Linear 惯用）：15° 斜向
边界带亮线从左上扫到右下，边界经过处浅色**就地**变深色，同布局
双主题共存一瞬——观众看到的是"同一个 UI 换肤"，不是转场。
B（组合变异）：⌘K 面板输入 "dark" 回车，面板收缩成一个亮点，
深色涟漪**从该点**荡开扫过全 UI——"命令引发换肤"的因果链完整可读。
组合命门：涟漪圆心必须是面板收缩点、起始帧必须是收缩完成帧。

## 两式选型
| 式 | 做法 | 适用 |
|----|------|------|
| A theme-sweep-toggle | 深色版 clip-path polygon 15° 斜边扫场（out poly3 先快后缓 ~38f），边界 4px 白亮线+18px 辉光，扫完 2f 淡出；深版 scale 1→0.995→1 坐实 | 主题功能直接展示 |
| B palette-theme-ripple | 面板 back(1.9) 弹落→逐字输入→回车面板 ease-in 收缩到 0 + 白色高光核钉住位置→圆形 clip 半径 12→1250px cubic-out 荡开，边缘 5px 白环双向辉光 | 命令面板+主题联动的高光段 |

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 深色版制作 | 对色板逐键手工映射（bg/card/border 各自定深色值） | 滤镜反转出来的深色是错的（图像/头像全反） |
| A 斜边超扫 | 底端超出 SLANT+40px | 不超扫右下角残留浅色三角 |
| A 坐实 | scale 0.995 幅度偏微妙（demo 自评） | 实战可加大到 0.985 |
| B 因果钉扎 | 高光核在收缩点挂 10f，涟漪圆心=该点坐标 | 圆心错位/错帧就断了"命令→换肤"因果（组合命门） |
| B 浅色层 | 扫场完成后条件卸载 | 真静止前提 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 两版布局必须逐像素一致——布局有出入就读作"切换到另一个页面"，
  手法即失效
- 真实页面实战：深浅两版分别真实截图（Q1），不做滤镜假深色
- 一支片主题切换 ≤1 次：它是功能叙事不是转场，反复切读作演示事故
- 声音：A 扫场一声长 whoosh；B 回车一声确认 + 涟漪荡开接 whoosh
  （S4 拟音优先）

## 参考实现
demos/interaction/theme-switch-moves/
（PaletteThemeRipple.tsx / ThemeSweepToggle.tsx）

## Reference implementation (Remotion)

- demos/interaction/theme-switch-moves/PaletteThemeRipple.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/interaction/theme-switch-moves/PaletteThemeRipple.tsx
- demos/interaction/theme-switch-moves/ThemeSweepToggle.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/interaction/theme-switch-moves/ThemeSweepToggle.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/theme-switch-moves/PaletteThemeRipple.tsx, demos/interaction/theme-switch-moves/ThemeSweepToggle.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.