Glow Bento

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.