Glow Cards

new

Linear-style grid: one pointer lights the borders of every nearby card, so the light appears to slide across the gaps.

pointercss-varsgrid4 files · 213 locdeps: clsx, tailwind-merge

Cycles

Plan work in focused, timeboxed iterations.

Triage

Route incoming issues to the right team.

Insights

Real-time analytics on throughput.

Roadmaps

Share direction with the whole company.

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/glow-cards.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs glow-cards

Usage

import { GlowGroup, GlowCard } from "@/components/opus/effects/glow-cards";

<GlowGroup className="grid grid-cols-3 gap-3">
  <GlowCard className="p-6">…</GlowCard>
</GlowGroup>

API

Prop	Type	Default	Description
color	string	"rgba(167,139,250,0.9)"	On <GlowGroup>: glow colour.
radius	number	300	On <GlowGroup>: glow radius (px).

Notes

Pointer position is written to CSS variables from one rAF loop — React never re-renders while you move, and the loop sleeps when idle.

← PreviousMagnetic Next →Lens