Tilt Parallax Card Grid Features Block for React

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.

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.

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.

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.

From lg the header is sticky at 4 rem from the top and aligned to the start of its grid cell, so it stays beside the cards as you scroll through the panel. Below lg it sits above the panel and scrolls normally.

It's an outline button that links to your tool list. It renders the link it's given with render, with nativeButton={false}.