FancyUI
Saved GitHub Get started
Compare — drag the seam — preview

Compare — drag the seam

FancyUI FANCYUI

A before/after seam that is a blade of light, trailing a streak when you move it fast.

#glow#minimal#drag#hover

Open docs

Use in FancyUI

Type
Interaction
Interaction
Drag, Hover
Style
Glow, Minimal
Code availability
Open source

Why it works

Only the seam moves; both images stay anchored, so the comparison is about the difference, not the motion. The seam is drawn as light and leaves a velocity trail, which makes a quick drag feel weighted.

When to use it

Before/after comparisons: a retouch, a redesign, a filter.

Things to watch

The root is a real `role="slider"` with keyboard steps. The default size is a fixed 400×400 — override it with `class`. Autoplay is not gated by reduced motion and keeps running off-screen.

Implementation clues

  • clip-path inset
  • pointer capture
  • hover vs drag mode
  • beam trail from velocity