InertiaGrid transforms a static image layout into a living interaction layer. Each tile computes cursor proximity and applies tuned spring motion so the grid feels tactile and high-end, not generic hover animation.
It includes three interaction presets out of the box:
- Drift: subtle floating response for elegant editorial pages.
- Repel: magnetic push-away effect for stronger interactivity.
- Glitch: chaotic micro-scatter for bold creative direction.
You get a full control surface for content, entrance animation, layout, alignment, background styling, and breakpoints. The component supports desktop/tablet/mobile sizing for columns, gaps, and item dimensions, plus configurable tablet/mobile breakpoints.
The defaults are optimized for immediate drop-in use: semantic button structure, ARIA label control, reduced-motion compatibility, SSR-safe behavior, and zero external dependencies (Framer + Framer Motion only).
---
Most gallery grids look premium only in screenshots. Once users interact, they feel flat. Kern_InertiaGrid gives your media layout real physical response from the first hover.
Instead of one canned hover state, each card continuously reacts to cursor distance with motion values and spring interpolation. This creates depth and intentional movement that visual-only editors cannot reproduce with the same nuance.
- Three interaction personalities: Drift, Repel, and Glitch presets for different brand tones.
- Physics control: Global intensity slider plus spring-based motion behavior tuned for smoothness and control.
- Designer-friendly panel: Content array, entrance presets, layout system, background system, breakpoints, and accessibility settings.
- Responsive by design: Independent desktop/tablet/mobile controls for columns, gaps, and item size.
- Production guardrails: `useIsOnFramerCanvas`, `useReducedMotion`, cleanup-safe listeners, and SSR-safe initialization.
- Marketplace-ready foundation: No external npm dependencies, semantic interaction elements, strong defaults out of the box.
Add physical depth to your galleries without sacrificing performance or editor usability. Built brutally well by KERN.
---
## Features (Bullet List for Panel)
- 3 physics presets: Drift, Repel, Glitch
- Cursor-distance based motion per tile
- Spring-based translate, rotate, and scale response
- Intensity control (0-100)
- Configurable entrance animation presets
- Responsive layout controls (desktop/tablet/mobile)
- Breakpoint controls for tablet and mobile thresholds
- Content array with image + alt + border radius per item
- Background modes: solid, transparent, gradient
- Placeholder styling controls for empty media slots
- Alignment controls (vertical + horizontal)
- ARIA label control for accessibility
- Reduced-motion fallback
- Canvas-safe behavior for Framer editor
- Zero external dependencies
BuiltByKern
