Momentum Drag Carousel
Grab the track and fling it, it glides and settles
Grab and fling
Create a momentum drag carousel. A horizontal track of cards you grab and fling: it keeps gliding after release with real inertia, decelerates naturally, and bounces softly at the ends. Implementation with Framer Motion: a clipping viewport (overflow: hidden) holding a motion track with drag='x', dragConstraints {left: -(trackWidth - viewportWidth), right: 0}, dragElastic ~0.12 (soft edge resistance), and dragTransition {power ~0.35, timeConstant ~260} for the glide feel. Vanilla: track pointer velocity yourself and continue movement in rAF with exponential decay (velocity *= ~0.95 per frame), clamping to bounds with a spring back. Details: cursor: grab, grabbing while held; user-select: none on cards so text doesn't highlight mid-drag; touch-action: pan-y so vertical page scrolling still works on mobile; distinguish a click from a drag (suppress card clicks if the pointer moved more than ~5px); optional edge fade with a CSS mask. Keyboard fallback: arrow keys scroll the track in card-width steps. Under prefers-reduced-motion, use a plain native overflow-x scroller. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.