Depth Project Card

About Depth Project Card

A card with a thickness. Background, media, gradient, texture, metadata, title, call to action and a reflection each answer the cursor at their own rate, on a plane that leans no more than five degrees. The picture drifts the other way inside its frame; the sheen follows the pointer across the glass; a click brings the case study up from the bottom. Image or video, three CSS textures, no libraries, and a press instead of a tilt on touch.

Features

• Seven layers moving at seven rates, plus a reflection that follows the cursor.

• A lean capped at five degrees, in the control and in the code.

• Internal parallax on the media, with a gentle hover scale.

• An optional case study that rises from the bottom, with Escape and a Close button.

• Grain, Lines and Dots textures drawn in CSS — nothing to load.

• Image or video, with video paused off screen and under reduced motion.

• A single tab stop named for the whole card, and a focus ring that lifts it.

• No tilt on touch; a press animation instead.

• Container queries, so the same card works in a grid and at full width.

• Unsafe links and media URLs refused; empty slots labelled rather than blank.

• One standalone React + TypeScript file.

• 24 controls in the Framer properties panel

• Respects prefers-reduced-motion

• Renders correctly on the Framer canvas and in export

Created by LUNAUT Studio.