Two-Sided Card Flip
Three type-specimen cards (Fraunces, Inter Tight, JetBrains Mono) turn 180° on Y with 1200px perspective in 0.8s power3.inOut on hover, focus or click, dipping to 0.95 with a sheen mid-turn to reveal a back with character set, weights, licence and Copy CSS.
- Hover
- gsap
- intermediate
- light perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1243 words of exact values — rewritten live as you tune the Playground.
Prompts are for subscribers
Subscribe to copy this prompt in every format, rewritten live to match your Playground settings.
Loading prompt…
Couldn’t load the prompt
Check your connection and try again.
Source
Full source code
Source code is for subscribers
Subscribe to read, copy and download the full HTML, CSS and JavaScript of this demo.
Loading source code…
Couldn’t load the source code
Check your connection and try again.
light Animated Link Underlines
An essay page where every link draws a 2px lime underline from the left on hover or focus (0.5s power3.out) and, once complete, leaves through the right edge. Inline links in the body copy draw across wrapped lines in reading order.
- gsap
light 3D Tilt Card with Glare
Three product cards lean toward the pointer up to ±12° with quickTo-smoothed rotation, layered translateZ depth on image, title and badge, a specular glare that follows the pointer and a soft shadow that slides the opposite way; they relax flat on leave.
- gsap
light Card Lift on Hover
Six linked essay cards: on hover or keyboard focus the card's surface rises 10px (0.45s power3.out) while a separate shadow layer fades and spreads beneath it, the border brightens and the arrow slides; pressing sinks it, leaving settles it back.
- gsap
light Color Transition
A collection index whose rows flood with colour: surface, hairline and ink are each color-mix()ed from a 0–1 variable GSAP tweens (0.6s power3.out, ink 0.08s behind). Hover/focus, click-to-select or scroll-to-middle triggers.
- gsap
- scrolltrigger
- css-only