SkillGitHub
All components
before-after-comparison

Before and after comparison

Compares two complete image states through a stable boundary.

  • Keyboard ready
  • Reduced motion
  • TypeScript
Scene
editorial · warm
Runtime cost
Light
Motion engine
motion
Installnpx shadcn@latest add https://motion-lexicon.pages.dev/r/before-after-comparison.json

Component behavior

Stable boundary reveals both states without layout shift Compares two complete image states through a stable boundary.

Suitable events

Use for browsing, focusing, scrolling, and dragging media.

Runtime information

Motion engine
motion
Runtime cost
Light
Dependencies
motion
Open public Registry JSON