#383
Before and after slider
A before and after compare slider: a handle clips the old design over the new one, and a spring snaps it to 25%, 50% or 75% on release.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Before and after slider" pattern (@codeatlasdev/ui demo #383, motion/hero-ambient) in my app.
Call get_demo({ ids: ["#383"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Redesign showcases, image or theme comparisons, changelog visuals and onboarding that shows what a setting changes.
Keep these library parts, with the props and tokens the demo uses:
- MotionStage, MotionCtx from "@codeatlasdev/ui"
Behaviour to keep:
- `new Spring(50, { stiffness: 0.14, damping: 0.62 })` drives the divider position `pos`
- The before pane is revealed with `clip-path: inset(0 calc(100% - var(--p)) 0 0)`; the handle sits at `inset-inline-start: var(--p)`
- Drag: `{ instant: true }` follows the pointer, and on release `pos.target = nearest(pos.target)` snaps to `snaps` (`[25, 50, 75]`)
- Keyboard: `role="slider"` on the handle; ArrowLeft and ArrowRight move 10, with Shift 25, Home and End jump to 0 and 100
- Autoplay cycles `stops` (`[22, 78, 50]`) every `loop={2200}`; under reduced motion the divider rests at `50%`
Exact motion (do not approximate):
- clip-path (divider position): spring, spring, spring { stiffness: 0.14, damping: 0.62 }
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- MotionStage
@codeatlasdev/ui
How it is built
- `new Spring(50, { stiffness: 0.14, damping: 0.62 })` drives the divider position `pos`
- The before pane is revealed with `clip-path: inset(0 calc(100% - var(--p)) 0 0)`; the handle sits at `inset-inline-start: var(--p)`
- Drag: `{ instant: true }` follows the pointer, and on release `pos.target = nearest(pos.target)` snaps to `snaps` (`[25, 50, 75]`)
- Keyboard: `role="slider"` on the handle; ArrowLeft and ArrowRight move 10, with Shift 25, Home and End jump to 0 and 100
- Autoplay cycles `stops` (`[22, 78, 50]`) every `loop={2200}`; under reduced motion the divider rests at `50%`
Related
Loading source.