Image Zoom on Hover
A ceramics shop grid: hovering or focusing a tile scales its photograph to 1.15× inside a clipped 4:5 frame over 1s expo.out. The scale origin follows the cursor, a scrim and 'View piece' label fade in, and the badge, name and price never move.
- Hover
- gsap
- canvas2d
- beginner
- light perf
- mobile: full
- reduced-motion ✓
AI prompt
Recreate this effect with any AI tool
Paste into Claude, Cursor, v0, Lovable or Bolt. 1256 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 Image Swap Crossfade
A four-product shop grid where each frame stacks a studio shot and an alternate view (detail, colourway or in situ); hover, focus or tap dissolves the alternate in (0.6s power2.inOut) as it settles from 1.06× while the primary fades out underneath.
- gsap
- canvas2d
WebGL RGB-Shift Image Hover
Four image tiles share one WebGL renderer; hovering a tile splits its red and blue channels along the pointer's direction (offset scales with velocity), zooms the UVs 1 → 1.08 over 0.8s and tears the first 150ms into glitched horizontal slices.
- threejs
- glsl
- gsap
- canvas2d
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 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