Micro-interactions that reward the smallest gesture.
11 effects
light 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.
light 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.
light 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.
light 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.
light 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.
light 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.
light 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.
light 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.
light 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.
light An editorial index of six project rows; hovering a row unclips a floating image that follows the pointer with lag and tilts with its velocity, crossfades between rows, nudges the row text right and dims the others.
WebGL 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.
No effects match these filters.
Try “pinned”, “SplitText”, “WebGL”, “cursor”…