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.
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
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.
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.
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.
Vraj Parikh
