Three-Dimensional Interfaces

Depth without the heavyweight runtime.

Depth helps people understand hierarchy, sequence and space. Every piece in this set uses CSS 3D transforms or Canvas 2D instead of a WebGL engine, remains operable from the keyboard, and flattens gracefully for reduced motion.

H.29
dragkeyboardcontinuouszero deps
Rotating Product Stage
A CSS 3D product stage with drag-to-rotate inertia, keyboard turns and per-face lighting presets.
3D & Experimental · React / CSS / Tailwind
H.31
dragclickspringmotion
3D Card Stack
A perspective card stack you can swipe, drag, click or arrow through — with spring physics.
3D & Experimental · React / Motion / Tailwind
H.61
dragpointerspringmotion
Ring Carousel
A 3D ring of cards you can drag, flick and snap, with keyboard control and a flat reduced-motion fallback.
3D & Experimental · React / Motion / CSS / Tailwind
H.91
pointerkeyboardtweenzero deps
Isometric Grid
A CSS-3D isometric field of blocks that rise and glow near the pointer — or a bar-chart city.
3D & Experimental · React / CSS / Tailwind
H.92
clickdragtweenmotion
Paper Fold
A panel that folds and unfolds like paper: 3D accordion creases with shading, toggled or scrubbed.
3D & Experimental · React / Motion / CSS / Tailwind
H.60
dragkeyboardcontinuouszero deps
Wireframe Globe
A rotating canvas globe with a depth-faded graticule, pulsing markers and travelling great-circle arcs.
3D & Experimental · React / Canvas
B.05
pointerhoverspringmotion
Tilt Card
A perspective card that tilts toward the pointer, with a spring-smoothed glare and layered depth.
Cards & Containers · React / Motion / Tailwind
B.07
clickkeyboardtweenzero deps
Flip Card
An accessible two-sided card that flips on click, Enter or Space — with the hidden face made inert.
Cards & Containers · React / CSS / Tailwind
H.121
dragpointerspringmotion
Cube Carousel
Slides on the faces of a 3D cube that turns with a spring — drag, keys, buttons or auto-rotate.
3D & Experimental · React / Motion / CSS / Tailwind
H.122
scrollclickscroll-linkedmotion
Depth Gallery
Cards on a loose spiral at increasing depth that fly toward the viewer as you scroll — a perspective tunnel.
3D & Experimental · React / Motion / CSS / Tailwind
H.151
dragpointertweenmotion
Page Flip
A CSS 3D book: drag a page's edge and it turns around the spine with curl shading, or falls back.
3D & Experimental · React / Motion / CSS / Tailwind
H.152
dragpointerspringmotion
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
H.181
pointerhoverspringmotion
Holo Card
A holographic foil card that tilts toward the pointer while rainbow foil, glitter and glare shift with the light.
3D & Experimental · React / Motion / CSS / Tailwind
H.182
pointerhoverspringmotion
Extruded Text
Display text with real 3D depth from stacked, shaded layers that turns toward the pointer on a spring.
3D & Experimental · React / Motion / CSS / Tailwind
C.163
hoverviewporttweenzero deps
Text Prism
Words printed on the faces of a 3D prism that tumbles to the next word, with the width reserved for the longest.
Typography & Text · React / CSS / Tailwind
H.211
clickkeyboardtweenmotion
Dice Roller
CSS 3D dice with real pips that hop and tumble through several turns, then settle on a random face and announce the total.
3D & Experimental · React / Motion / CSS / Tailwind
H.212
clickkeyboardspringmotion
Door Reveal
Doors that swing open in CSS 3D around their hinges, with shading and a slight overshoot, to reveal the content behind.
3D & Experimental · React / Motion / CSS / Tailwind

Technology requirements

Everything this set needs, combined. Each component remains a separate, self-contained file.

ReactCSSTailwindMotionCanvas

npm dependencies: motion
Peer: react, tailwindcss

npm install motion

Next collectionMobile Patterns