Glow Card Grid
A high-performance card grid with a shared, cursor-tracking glow that dynamically reacts across neighboring cards. Built with a single animation loop and zero re-renders for smooth, scalable interactions.
Examples
Card
Sofia Martinez
@sofiaInstallation
$ npx shadcn@latest add https://akshitr.com/r/glow-card-grid.json
Usage
import { GlowCard, GlowCardGrid } from "@/registry/components/glow-card";
export default function GlowCardGridDemo() {
return (
<GlowCardGrid>
<GlowCard />
<GlowCard />
<GlowCard />
</GlowCardGrid>
);
}Component API
GlowCardGrid
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | — | The GlowCard elements to render inside the grid. |
| glowSize? | number | 600 | Controls the radius of the glow effect and interaction range. |
| className? | string | — | Additional Tailwind classes for layout customization. |
GlowCard
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Used for avatar alt text (accessibility). |
| avatar | string | — | Image source for the card background. |
| children? | React.ReactNode | — | Custom content inside the card. |
| glowSize? | number | 600 | Size of the glow element (should match grid for consistency). |
| className? | string | — | Additional Tailwind classes. |
Use Cases
- SaaS Feature & Bento Grids: Create a unified, continuous cursor-tracking radial glow spanning across feature cards like Stripe and Linear.
- Pricing Tier Comparisons: Guide customer attention smoothly across Free, Pro, and Enterprise tiers with reactive light spotlights.
- Portfolio & Case Study Grids: Elevate standard project preview cards with rich luminous border illumination.
- Developer Tools & Documentation Portals: Add subtle high-tech ambiance to SDK documentation hubs or integration catalogs.
