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.
- Hover
- gsap
- beginner
- light perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1255 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 Shadow and Glow
Three pricing cards rise 8px on hover or focus while a pre-rendered cast-shadow layer and a blurred halo fade in (0.5s power3.out); buttons interpolate their box-shadow directly, and the featured card's halo breathes on a pausable loop.
- gsap
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 Overlay Reveal
Six project tiles: hovering or focusing slides a dark veil in from the edge the pointer entered (0.55s expo.out, opacity → 0.72), pushes the artwork to 1.06× and lifts kicker, title and actions in with a 0.06s stagger; on touch the actions stay visible.
- gsap
- svg
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