proNew221 lines · framer-motion

Bento Feature Grid

Six features, one grid, each cell doing its own small trick. A bento-style feature grid with mixed cell sizes, each holding a tiny animated visual (bars, pulse, grid, orbit, waveform, live number) plus a title and description, with a cursor-tracking spotlight on hover.

Use it for: A features section that needs more visual variety than a plain icon grid, for products with several distinct capabilities worth a glance each.
Themes: Light + dark
License: Commercial use

Live

Features

Built for the way agents actually run

Real-time sync

Every change streams to every client in under 100ms.

Usage analytics

See exactly where load comes from.

Granular permissions

Row-level access, down to the field.

Global edge network

40+ regions, automatic failover.

Audio-ready pipelines

Stream and transcode without extra infra.

Live billing ticker

Costs update the instant usage does.

tsx

"use client";

import * as React from "react";
import { motion, useMotionValue, useReducedMotion, useTransform } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

export interface BentoCell {
  title: string;
  description: string;
  span?: "sm" | "md" | "lg";
  visual?: "bars" | "pulse" | "grid" | "orbit" | "waveform" | "ticker";
  accent?: "signal" | "ok" | "info" | "warn";
}

export interface BentoFeatureGridProps {

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Six built-in visual kinds (bars, pulse, grid, orbit, waveform, ticker) animate continuously and independently inside their cell.
→The ticker visual cycles through a fixed sequence of cent values on an interval; it never uses Math.random so server and client render match.
→Cells use span: 'sm' | 'md' | 'lg' to vary width across the 3-column grid; the first cell is the large hero slot.
→A radial-gradient spotlight follows the pointer inside each cell on hover (spotlight prop can turn this off).
→heroAccent recolours the large hero cell's visual and bar colour, using the --signal/--ok/--info/--warn tokens.
→Cells spring into view on scroll with a staggered delay; prefers-reduced-motion skips the entrance and hover animations.

Accessibility

✓All decorative visuals and the hover spotlight are aria-hidden; only headings and descriptions are in the accessibility tree.
✓Colour is never the only signal — every cell also has a title and description in plain text.
✓Honours prefers-reduced-motion by disabling scroll-in and spotlight motion.
✓Honours prefers-reduced-motion.