depth floating stack 3d hover product mockup stacks layered hero visuals premium showcase cards stacked cards still look flat need suspended depth without JS want a stronger premium hero composition
Floating Stack
Fetch snippet JSON:
curl https://webspire.de/snippets/depth/floating-stack.json Depth
Floating Stack
A lighter suspended stack for cards that should feel detached from the page plane.
Background
Customize
Quick Start
<div class="floating-stack h-72 rounded-[2rem]"><div></div><div></div><article></article></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 873 bytes · 37 lines
- Custom Properties
-
--stack-perspective--stack-duration - Classes
-
.floating-stack
depth floating stack 3d hover
This is a stronger, more suspended variant of a depth stack. It works best when you want the front plane to feel like it is hanging over the background layers.