A media-frame grid where hovering a frame expands its row and column (the whole grid reflows smoothly) and tilts that single card in 3D toward the cursor with a glare. Bring your own clips/images. Framer Motion.
- React 19
- React
- TypeScript
Dynamic Frame Layout is an interactive grid of media frames. Hovering a frame expands its row and column — the whole grid re-flows smoothly via framer-motion — while that single card tilts in 3D toward the cursor with a moving glare. Other cards stay flat. Each frame's media can be a video URL, image URL, or any React node; the built-in defaults are original animated gradient tiles (no third-party assets bundled), so it looks great before you add content. Configurable columns, gap and hover-expand amount. Self-contained CSS, accessible focus support, prefers-reduced-motion friendly. React 19 + TypeScript. Requires framer-motion. Original work for Assetzaar.
- Grid
- Media
- 3D Tilt
- Framer Motion
- Gallery