Carousel Slide Advance
Slides advance with the neighbours peeking, dots tracking position.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useId, useState } from "react";
import { motion, useAnimationControls, useReducedMotion } from "motion/react";
/**
* Vibary · Carousel Slide Advance
*
* A gallery that moves one slide at a time. The neighbours stay visible
* at the edges so the strip reads as a row you are moving along ratherAbout this pattern
A gallery you move along rather than page through. Two choices do the work: the viewport is narrower than the track so the neighbour on each side stays visible, and the accent dot is a single marker with a shared layout id, so it travels to the position you landed on instead of blinking out and back. Arrows, dots and a horizontal drag all funnel into one settle function, which is why a flick that does not commit snaps back through exactly the same spring as a button press. Neighbours recede with opacity alone — scaling them down would scale their captions, and text that resizes as it drifts past is the tell of a cheap gallery.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Product page
Photos advance one at a time with dots underneath marking the position.
Related patterns
- Gallery Lightbox OpenThe pressed thumbnail flies out of the grid into the large view while the backdrop dims behind it.
- Swipe Back PeelAn edge drag peels the top page away under your finger and snaps to whichever side the gesture was heading for.
- Detail Close ReturnClosing a detail view returns the tile to the exact row it came from.