Glare Card
Card with realistic glare/shine effect that responds to mouse movement.
Preview
Glare Card
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Premium product cards and featured content.
Why this component matters
The glare mimics physical materials, creating a premium tactile feel on screen.
Usage guidance
Use for premium or featured content where a sense of material quality is important. Limit to 1-3 per viewport. Dark backgrounds enhance the glare visibility.
Installation
bash
npx shadcn@latest add @aceternity/glare-cardUsage
example.tsxtsx
import { GlareCard } from "@/components/ui/glare-card";
export default function Example() {
return (
<GlareCard>
{/* Your content here */}
</GlareCard>
);
}Source
glare-card.tsx
components/ui/glare-card.tsx