Cards
Paper Tilt
A matte photo print on a paper table that tips toward the pointer or finger with one soft contact shadow and flips to a stamped back; no glare, no foil.
svgmedium 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
Hero imagery, gift or postcard moments, a single feature photo that should feel physical.
When not to
Grids of many cards or content that must stay perfectly flat and legible.
Working with an AI agent
Every component ships agent-ready metadata. An example instruction for this one:
Matte paper register (clay, sand, sage, slate, dusty blue on #1C1B18 / #F4F1EA). Edit --pt-* tokens; replace the .pt-pic SVG scene (keep .pt-l1/.pt-l2 layers); MAX sets the tilt.
Safe to edit
- --pt-* tokens
- front SVG scene, back note
- MAX tilt
Keep intact
- IIFE + prefix, reduced-motion, visibilitychange, theme hook, 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.