proNew111 lines · framer-motion

Feature Bento Glow

A bento grid that glows where you linger. An asymmetric bento-style feature grid over a slow ambient aura, where each cell grows a soft colour-matched glow and an accent underline on hover instead of a flat border change.

Use it for: A denser features section for a platform page, where several capabilities need unequal visual weight (one or two larger cells, several smaller ones) and a bit more atmosphere than a plain grid.
Themes: Light + dark
License: Commercial use

Live

Platform

A grid that glows where it matters

One source of truth

Every agent reads the same state, so two of them never disagree about what already happened.

Typed tool contracts

Arguments are checked before a call leaves the process.

Replayable runs

Step back through any run exactly as it happened.

Cost ceilings

A run stops itself before it stops making sense.

Portable memory

Move a workspace to another model without losing its history.

tsx

"use client";

import * as React from "react";
import { motion, useReducedMotion } 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 GlowCell {
  title: string;
  description: string;
  span?: "sm" | "lg";
  accent?: "signal" | "info" | "lime" | "ok";
}

export interface FeatureBentoGlowProps {
  eyebrow?: string;

The rest is in Pro.

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

Get Pro

How it behaves

→A large blurred aura drifts behind the whole section on a slow opacity loop, independent of any single cell.
→Each cell grows a radial glow in its own accent colour on hover, plus a bottom underline that widens — both reset together on pointer leave.
→Cells spring into view with a stagger on mount, so the grid reads cleanly with no scrolling required.
→The ambient aura's loop and every cell's hover glow are skipped under prefers-reduced-motion.

Accessibility

✓The ambient aura and per-cell glow layers are `aria-hidden` and `pointer-events-none`.
✓Each cell's index badge is decorative; the heading carries the actual label for screen readers.
✓Honours prefers-reduced-motion.