Micro-interactions
Flip Card
ProA grid card that flips out of its cell — GSAP Flip carries it to viewport center while it rotates to reveal its back face, then returns on close.
Install
Props
What It Demonstrates
- 3D tilt / Flip
- Rotate in 3D space (rotateX / rotateY) to add depth.
- Shared element transition
- An element travels and transforms from one position into another, like a thumbnail expanding into a card.
- Layout animation
- When an element's size or position changes, it animates to the new spot instead of snapping.
- Perspective
- How strong the 3D effect looks — a lower value exaggerates depth, like the viewer is closer.
- Rotate
- Spin an element around a point.
Related Components
Spotlight Shell
A card shell with 3D magnetic tilt, radial glow, and a shimmer sweep.
Morph Dialog
A dialog that morphs open from its trigger via shared-layout animation, with elements that travel between card and panel.
Tilt
A machined card that leans toward the pointer in 3D while a specular sheet slides across its face.
Holofoil
Holographic trading-card foil over real content. The diffraction band travels against the tilt while the specular follows it, and the flake only lights where the rainbow currently falls, which is what stops the whole thing reading as one gradient sliding around.
Animated Hamburger
A three-bar hamburger that morphs to an X, driven by a toggle prop.
Hover List
A display-type list where a shared accent block springs between rows on hover while the text indents and inverts.