Carousels

Grayscale filmstrips, seamless marquees, drag-to-scroll tracks with momentum, and auto-advancing crossfades.

4 demos · hover a stage to interact · press Replay to re-run

Grayscale filmstrip

Each frame is struck as a vertical hairline that opens horizontally into the image. Pans with pointer position, and only the hovered frame carries colour.

  • clip-path
  • line reveal
  • pointer pan
  • grayscale
01Terrace
02Ascent
03Ridge
04Bloom
05Ribbon
06Almuerzo
07Ember
08Silk
09Dune
10Tide
11Atrium
12Nocturne
13Signal
14Bazaar
15Frost
16Cinder

move across to pan · hover a frame for colour

Infinite marquee

Duplicate the list once and loop to -50% — the wrap is invisible. Hover to inspect.

  • linear loop
  • duplicated track
  • mask-image
FramerVercelLinearStripeRaycastArcVitestFramerVercelLinearStripeRaycastArcVitest
FramerVercelLinearStripeRaycastArcVitestFramerVercelLinearStripeRaycastArcVitest

seamless — no gap on wrap

Drag track

Pointer-dragged with elastic edges and momentum handoff on release.

  • drag
  • dragConstraints
  • dragTransition
Aurora
Tidal
Ember
Fern
Dusk

drag the track ←→

Auto crossfade

Advances every four seconds with a progress bar per slide. Hover to pause.

  • AnimatePresence
  • popLayout
  • timers

Northern light

Shot on a 30s exposure.