shadcn.io is not affiliated with official shadcn/ui
Tilt Parallax Card Grid Features Block for Radix UI
Six IDE-tool cards on a tinted panel beside a sticky header: each card's drawing is three layers at different depths that tilt in 3D toward the pointer and drift apart, flat on touch screens and with reduced motion.
Installation
Overview
A 3D feature grid for React with Radix UI. A start-aligned header with a sentence and an outline button stays pinned beside the cards from lg; the cards are six raised tiles on a tinted panel framed by hairlines with + marks on its corners, two across and then one on a phone. Each card's drawing is built in three layers: a pane (code, a terminal session, a flame graph), a popup lifted over it (completions, a build toast, a tooltip) and a filled badge over that (the language, the shell, the total time). Move the pointer over a card and it tilts toward it in 3D, so the layers drift apart at their different depths; tab to a card's title and it tilts a fixed few degrees. The tilt is two CSS variables, --rx and --ry, that a pointer handler writes: no animation loop and no library. On a touch screen, with a coarse pointer or with reduced motion, the cards stay flat. It's built from Guides and Button with your theme's tokens for every colour. For developer tools and any product whose features are layered interfaces.
FAQ
How does the tilt work?
Each list item is the perspective container, 1000 pixels deep. A handler on it turns the pointer's place in the box into two angles (up to 12 and 14 degrees at the edge) and writes them as --rx and --ry; the card inside has transform-style: preserve-3d and rotates by them with a 200 ms transition. The handler sits on the still outer box, not the card, so the hit area doesn't move under the pointer. When the pointer leaves, the variables are removed and the card settles flat.
How do the layers drift apart?
The back layer is on the card's own plane; the popup is moved 24 px toward the viewer with translateZ and the badge 48 px. When the card turns, a point nearer the viewer moves farther across the screen, so the three layers slide against each other. The cards deliberately have no overflow clipping, opacity or filter, which would flatten the 3D.
When does it stay flat?
The handlers check (prefers-reduced-motion: reduce), (pointer: coarse) and do nothing when it matches, and ignore touch pointers. The variables are then never set, so each card is simply a card and its drawing a flat composition. Nothing else in the block moves except the header's entrance, which is off with reduced motion.
Does it work from the keyboard?
Each card's title is a real link. When it takes focus the card tilts to a fixed angle and the layers part, and it settles when focus leaves, so a keyboard user sees what a pointer user does. The link has its own visible focus ring.