B.189
clickpresstweenmotion
Story Viewer
A stories viewer with segmented progress, tap and hold gestures, a cube turn between people and a native <dialog> modal.
Cards & Containers · React / Motion / Tailwind
Media & Stories
Pictures, sound and sequence.
Media interfaces are about pacing: what comes next, how long it stays, and how to get back. These components give people control over that pace — pause, step, scrub, swipe — while keeping captions, progress and controls available to everyone, including when motion is reduced.
- B.190clickdragtweenzero deps
Lightbox Gallery
A thumbnail grid that opens a full-screen <dialog> lightbox: FLIP from the thumbnail, swipe, pinch / double-click zoom and a thumbnail strip.
Cards & Containers · React / CSS / Tailwind
- B.157scrolldragscroll-linkedzero deps
Snap Carousel
An accessible carousel on native CSS scroll-snap with peeking slides, dot or thumbnail pickers and pausable autoplay.
Cards & Containers · React / CSS / Tailwind
- H.152dragpointerspringmotion
Coverflow
The classic coverflow: a forward-facing centre cover with the rest turned away in depth, on one spring.
3D & Experimental · React / Motion / CSS / Tailwind
- B.67clickkeyboardtweenzero deps
Zoom Image
Click an image to zoom it from its exact on-page position to fit the viewport, in a native modal dialog.
Cards & Containers · React / CSS / Tailwind
- A.156clickdragspringmotion
Waveform Player
A compact audio player with a bar waveform you can click or drag to scrub, a morphing play button and a real slider for keyboards.
Buttons & Controls · React / Motion / Tailwind
- A.185clickpressspringmotion
Record Button
A voice-note record button: the circle morphs into a stop square, a ring pulses with the level, then play back or discard.
Buttons & Controls · React / Motion / SVG / Tailwind
- B.97hoverpointerspringmotion
Hover Image List
An editorial index list whose rows reveal a floating image that follows the pointer, tilts with velocity and crossfades.
Cards & Containers · React / Motion / Tailwind
- E.169pointerhovertweenzero deps
Halftone Image
Any image re-printed as a rotated halftone screen of dots, squares or lines, with a pointer lens that reveals the original.
Backgrounds & Effects · React / Canvas / Tailwind
Technology requirements
Everything this set needs, combined. Each component remains a separate, self-contained file.
ReactMotionTailwindCSSSVGCanvas
- npm dependencies
- motion
- Peer
- react, tailwindcss
npm install motion