A "glassmorphism" card component with a "crazy" interactive, mouse-following aurora effect. The effect glows as a border and as a background shimmer on hover, built to be composable like shadcn/ui components.
import AuroraCard from "@/components/ui/aurora-card"; const settings = { title: "Aurora Card", description: "Move your cursor across the card to reveal a soft aurora glow that follows your pointer.", }; export default function Demo(props: Partial<typeof settings>) { const s = { ...settings, ...props }; return ( <div className="h-screen w-screen flex items-center justify-center bg-background p-8"> <AuroraCard className="max-w-xl"> <h3 className="text-2xl font-bold text-white">{s.title}</h3> <p className="mt-3 text-zinc-400">{s.description}</p> </AuroraCard> </div> ); }