Cards
Page Turn
A small cloth-bound picture book of wordless scenes: drag a corner across the spine or tap to turn. A spread on wide screens, one page on phones.
csshigh 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
A short visual story, onboarding pictures, a portfolio of a few images.
When not to
Long text, or content people must scan quickly.
Working with an AI agent
Every component ships agent-ready metadata. An example instruction for this one:
Matte paper register (cream pages, duskier reverse, moss cloth on #1C1B18 / #F4F1EA). Edit --pg-* tokens; P holds the page SVGs in reading order.
Safe to edit
- --pg-* tokens
- P page SVG list
Keep intact
- IIFE + prefix, reduced-motion, visibilitychange, theme hook, demo-v1
Known limitations
- A layout change closes the book
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.