Before After Slider Scrub
Before After Slider Scrub is a data & metrics Remotion shot (with a public demo.tsx). Watch the video preview, read the recipe notes, and copy the agent brief to implement it from tuned TSX.
- Category
- Data & Metrics
- Duration
- 4–5s
- Energy
- Medium (the fast whip is the impact beat; the slow sweep is the reading period)
- Styles
- 1
Recipe notes
Before/after comparison slider — the "before/after" versions stack on top of each other; the divider handle first whips across, then slowly sweeps back, revealing the new version like a photo developing under the bar
When to use it
Effect-comparison segments for AI enhancement/optimization/refactoring features (one shot that makes "before vs after" clear)
Intent
The standard comparison idiom in AI image product launch films: the same frame stacks "before" (low-contrast, grayish) under "after" (the clean version). A vertical divider with a round handle first whips from the left end to 70% (with an overshoot bounce-back), pauses a beat, then slowly sweeps back at about 1/5 the speed so the viewer can read the difference — **the speed contrast between the whip and the sweep is the rhythm**: the whip announces "it changed", the sweep proves "where it changed".