Feature Bento

Blocks & Slices

A bento-grid feature section whose cells span mixed footprints (wide, tall, 2x2) on a dense responsive grid, fade-rise into view with a per-cell stagger, and wake a soft accent glow that trails the pointer — written straight to CSS variables with one pointermove listener per cell and zero per-frame React state — while the border brightens on hover. Under prefers-reduced-motion the section is fully static: no stagger, no glow tracking, and the icon halo holds a single legible frame.

Inspired by Cult Pro — bento feature sections (pattern) — independently built, not affiliated. Attribution policy

Instant previews
Every branch deploys to its own URL in seconds.
SOC 2 ready
Audit logs and SSO on every plan.
Live analytics
Latency and usage in real time.

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/feature-bento.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/feature-bento.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div className="w-full max-w-xl p-6">
    <FeatureBento
      columns={2}
      items={[
        {
          icon: <Zap />,
          title: "Instant previews",
          description: "Every branch deploys to its own URL in seconds.",
          size: "wide",
          visual: (
            <div className="h-full w-full rounded-xl bg-gradient-to-br from-violet-500/25 via-fuchsia-500/10 to-transparent ring-1 ring-white/10" />
          ),
        },
        {
          icon: <ShieldCheck />,
          title: "SOC 2 ready",
          description: "Audit logs and SSO on every plan.",
        },
        {
          icon: <BarChart3 />,
          title: "Live analytics",
          description: "Latency and usage in real time.",
        },
      ]}
    />
  </div>

Props

FeatureBentoProps extends Omit<React.HTMLAttributes<HTMLUListElement>, "children">

Prop	Type	Default	Description
items*	FeatureBentoItem[]	—	The feature cells, in reading order.
columns	number	3	Column count on wide screens (clamped 1–6). Narrow screens step down.
accent	string	"#8b5cf6"	Accent for the icon tint, pulse halo, and hover glow. Mirrors `--pb-violet`.

npm dependencies

motion