About this component

A card with extreme depth, resembling looking into a layered canyon. Multiple planes of content exist at different Z-depths. Hover creates strong parallax—foreground planes shift dramatically while background planes barely move. Clicking drops a marker stone into the canyon that falls through each layer. Atmospheric perspective fades distant layers into a blue haze.

Difficulty

Advanced

Style

3D Perspective

Frameworks

HTML/CSS, Tailwind, React, Vue, Angular, Svelte, LWC

Embed this component

Paste this snippet into any site — the design renders in a sandboxed iframe served from /embed/parallax-canyon-card.