Cards
Crate Sleeve Lightbox
Record sleeve card that expands via FLIP geometry into a modal viewer with tracklist metadata and tap-to-zoom artwork.
cssmedium complexitymoderate motionpointer+keyboardmobile-readyaccessible
Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited
1
When to use it
Product image inspection, album sleeve previews, and media lightboxes.
When not to
Multi-image galleries needing thumbnail filmstrips.
Working with an AI agent
Every component ships agent-ready metadata. An example instruction for this one:
Edit --b/--i/--c/--l tokens in :root and [data-theme="light"].
Safe to edit
- theme CSS tokens (--b/--i/--c/--l), data arrays & timings
Keep intact
- IIFE + crNN- prefix, reduced-motion, visibilitychange, theme/demo-v1
Known limitations
- Demo state resets on remount
More Cards components
- 3D Tilt ParallaxDark card tilts in 3D toward the cursor; badge, orb, and text layers float at distinct Z-depths. A radial shine tracks the pointer; auto-rotates until…
- Frosted GlassA frosted glass card floats over three slowly drifting color blobs (gold, cream, tan); the panel lifts slightly on hover.
- Gradient-Border GlowDark card framed by a spinning conic powder-blue, tan and slate gradient border with a soft blurred aura glow behind it; auto-rotates continuously.
- Reveal on HoverDark gradient card that dims and zooms its background art on hover while a hidden title-and-copy panel slides up from the bottom.
- Holographic IridescentA 3D-tilting card with a warm iridescent sheen and conic foil chip that shift with pointer position; drifts idly until first deliberate input.
- Stacked Peeking CardsThree layered gradient cards auto-cycle and fan out with a springy rotation on hover; cards spread left and right then restack when cursor leaves.