# Before/After Slider Scrub

A before/after comparison bar — "before" and "after" versions stacked, the divider whips fast then scrubs slow, revealing the new version as it "develops" past.

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

## Params

_No params._

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

## Prompt

## When to use

The effect-comparison segment for AI enhancement/optimization/refactor features ("before vs. after" told in one shot).

## Intention

The standard comparison grammar of AI-image launch films: the same frame's "before" (low-contrast, hazy gray) and "after" (clear) stacked, with a round-handled vertical divider whipping fast from the left edge to 70% (overshoot and spring back), holding a beat, then scrubbing back slowly at about 1/5 the speed so viewers can see the difference clearly — the speed contrast between the fast whip and slow scrub is the rhythm itself: the fast whip announces "it changed," the slow scrub proves "where it changed."

## Duration & energy

- Duration: 4–5s
- Energy: Medium (the fast whip is the impact beat, the slow scrub is the reading period).

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

## 意图
AI 图像产品发布片的标准对比语法：同一画面"处理前"（低对比灰蒙）
与"处理后"（清晰版）叠放，带圆手柄的竖分割杆先从左端猛甩到 70%
（overshoot 回弹）、停一拍，再以约 1/5 的速度慢扫回来让观众看清
差异——**快甩慢扫的速度对比就是节奏**：快甩宣告"变了"，
慢扫证明"变在哪"。

## 动作阶段
| 阶段 | 帧段参考 | 内容 |
|------|------|------|
| 1 静置 | f0–14 | 杆停 8%，画面几乎全是"处理前" |
| 2 快甩 | 12f | 8%→76%（out cubic）过冲 |
| 3 回弹 | 12f | 76%→70% |
| 4 停顿 | ~18f | 让观众看清 after |
| 5 慢扫 | ~48f | 70%→40% 二次展示差异 |
| 6 定格 | 末 ≥40f | 真静止 |

## 参数表
| 参数 | 典型值 | 调节手感 |
|------|--------|----------|
| 速度比 | 快甩 12f vs 慢扫 48f，约 5:1 | 比例 <3:1 节奏对比不可感 |
| 揭示 | after 层 clip-path inset 右边界跟随杆 x | 杆和揭示边界错位即穿帮 |
| 手柄 | 圆形手柄 + 速度差分驱动 scaleX 微拉伸（峰值 1.18），静止自动归 1 | 拉伸给手柄"被甩"的重量感 |
| before 处理 | 低对比灰蒙版 | before 太难看是自黑，"差"要可信（真实旧版/未优化态） |
| 角标 | BEFORE/AFTER 角标放内容区 | demo 判例：初版压住侧栏/头像穿帮 |

## 已知坑
- demo 在灰阶/占位素材上调校通过——参数是调校起点非实战定稿，
  首次实战须以真实素材回验
- 两版必须同布局同机位——布局不同读作两个页面，对比失效
  （theme-switch-moves 同款约束）
- 实战 before/after 都用真实截图（Q1）：before 是注入旧数据/关闭
  功能的真实态，不手搓"故意丑"的假 before
- 慢扫终点停 40% 而非 0%——留一段 after 在画面上定格（结论可见）
- 声音：快甩一声 whoosh + 回弹轻 tick，慢扫无声或极轻摩擦音（S4）

## 参考实现
demos/data/before-after-slider-scrub/
（BeforeAfterSliderScrub.tsx）

## Reference implementation (Remotion)

- demos/data/before-after-slider-scrub/BeforeAfterSliderScrub.tsx — https://raw.githubusercontent.com/Vincentwei1021/video-shotcraft/main/demos/data/before-after-slider-scrub/BeforeAfterSliderScrub.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/data/before-after-slider-scrub/BeforeAfterSliderScrub.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.