Anatomy

The section wraps a centered header (badge, h2, subtitle) and a 3×3 CSS grid. Six MagneticCell components occupy grid areas a through f, two cells span two columns each, giving the layout its asymmetry. Each cell carries one of five content variants (stat, feature, quote, visual, cta) rendered by a stateless CellContent component. A single hoveredId state at the section level drives the dimming of non-active cards.

How it works

Inside each MagneticCell, two motion values track the normalized cursor offset within the card: mx and my range from -0.5 to 0.5. useTransform maps them to rotateX/rotateY (±8 degrees), and useSpring smooths both with the same spring config (stiffness 220, damping 28, mass 0.6). A separate spring on scale goes from 1 to 1.025 on enter. On mouse leave, all values reset to 0 and the card snaps back through the same spring. The visual cell adds a secondary animation: its gradient blob scales to 1.15 and rotates 15 degrees on hover, using Framer Motion's animate prop with the custom EASE curve.

How to build it in React

1. Set up the asymmetric grid

   Define the layout with grid-template-areas so cell sizes vary without media queries. Assign each BentoCell an area string that matches the template. Three rows and three columns are enough for six cells with two spanning two columns.

   style={{
     display: "grid",
     gridTemplateColumns: "repeat(3, 1fr)",
     gridTemplateAreas: `"a a b" "c d d" "e e f"`,
     gap: "0.875rem",
   }}

2. Track normalized cursor position inside each card

   On mousemove, compute the cursor's X and Y offset relative to the card with getBoundingClientRect, then divide by width/height to get a value between 0 and 1. Subtract 0.5 so the center maps to 0, the edges to ±0.5. Write these into two useMotionValue instances.

   const mx = useMotionValue(0);
   const my = useMotionValue(0);
   
   function handleMove(e: React.MouseEvent) {
     const r = ref.current?.getBoundingClientRect();
     if (!r) return;
     mx.set((e.clientX - r.left) / r.width - 0.5);
     my.set((e.clientY - r.top) / r.height - 0.5);
   }

3. Map cursor offset to rotateX/Y with springs

   Pass mx and my through useTransform to produce rotation angles, then wrap each in a useSpring for smooth inertia. Apply rotateX and rotateY on the motion.div together with perspective:'900px' and transformStyle:'preserve-3d' so the 3D effect renders correctly.

   const SPRING = { stiffness: 220, damping: 28, mass: 0.6 };
   const rotateX = useSpring(useTransform(my, [-0.5, 0.5], [8, -8]), SPRING);
   const rotateY = useSpring(useTransform(mx, [-0.5, 0.5], [-8, 8]), SPRING);
   const scale   = useSpring(1, SPRING);
   
   // on enter
   scale.set(1.025);
   // on leave
   mx.set(0); my.set(0); scale.set(1);

4. Add the grid-level hover spotlight

   Lift a hoveredId string state to the parent section. Each MagneticCell calls onHover(cell.id) on enter and onHover(null) on leave. Cards where hoveredId is set but does not match their own id animate to opacity 0.6 via Framer Motion's animate prop, creating a focus effect across the whole grid without any CSS class juggling.

When to use it

Reach for this section when you want to present a product's key facts (a metric, a feature, a testimonial, a CTA) together in one visual statement, SaaS landing pages, agency showcases, AI tool launches. The mixed cell types keep scanning interesting. Skip it for content-heavy editorial pages or dashboards where information density matters more than craft. Because the tilt is pointer-driven, plan a clean static fallback for mobile visitors.

Used by

• Vercel, Uses asymmetric bento-style grid layouts to display product capabilities, metrics, and social proof on its homepage.
• Linear, Combines mixed-size feature cards with subtle hover depth effects to surface product capabilities across its marketing pages.
• Stripe, Uses grid-based multi-cell layouts mixing stats, feature highlights, and CTAs within a single section on product and feature pages.
• Loom, Employs bento-style feature grids with varied card sizes and interactive hover states to communicate product value on landing pages.

FAQ