Glow Card Grid – Akshit Rana

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.

Scarlet

@scarlet

USADesigner

Yuji Tanaka

@yujitech

CanadaAI Engineer

Emma Walker

@emmawalker

USADeveloper

Sofia Martinez

@sofiadesigns

SpainProduct Designer

Noah Fischer

@noahdev

GermanyBackend Engineer

Hassan

@hassan

UAEDesigner

Examples

Card

Sofia Martinez

@sofia

Installation

$ 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.