Glow Bento

Glowing bento with cursor-tracking

Aurora Bento — the bento grid that lights up under your cursor. Built for indie hackers and SaaS founders who want a feature section that converts . Aurora Bento ships an asymmetric grid with two cursor-driven effects working together — a soft accent backdrop that follows the pointer and a luminous arc that traces the border of every card the cursor passes near. Both share one global mouse-move tracker a single light source moving across the layout. ✨ Six animated visual presets Every card picks a visual that animates the moment your cursor approaches: Stat counter — large number with accent indicator dot Bar chart — bars spring up and flip to accent on hover Custom icon — upload your own PNG or SVG, with a default checkmark fallback Dot grid — radial reveal, distance-based stagger animation Orbit — three nested rings rotating with shared cursor activation Pulse badge — animated ping ring for "live" indicators 🎨 One color, full theming Pick one accent color in the right panel — the border glow, accent backdrop, eyebrow text, and indicator dots all auto-build from it with luminance-aware tints. No palette work, no broken styling when you change brand colors. 🧱 Four card sizes, asymmetric grid Each card picks Small (1×1), Wide (2×1), Tall (1×2), or Large (2×2). The grid is a 3-column CSS grid that stacks to a single column below 1024px using @container queries — so it stays responsive inside Framer's mobile and tablet variants where the page viewport stays desktop-sized. 🎛️ Every prop in the right panel Cards array (title, description, eyebrow, size, visual, custom icon, link, open-in-new-tab, optional per-card accent override), 6 color tokens, gap, radius, bleed opacity (0–1), bleed size (0–80px), font family, plus toggles for hover-lift and spotlight. Works in light and dark themes — just flip the background and card colors. Tested on Chrome, Safari, and Firefox. Drop it in, pick your accent, and ship.

Glowing bento with cursor-tracking