Components›Glare Card

Glare Card

An Aceternity component with a holographic rainbow glare effect and 3D tilt that follows the mouse. Uses CSS custom properties for real-time glare positioning and a foil texture overlay.

AceternityAnimationInteractiveCard

Interactive Demo

Move your mouse across the cards to see the holographic glare follow your cursor and the card tilt subtly in 3D.

Heart Health

Monitor cardiovascular fitness with real-time tracking and personalized insights.

Performance

Peak performance metrics and optimization strategies for athletes.

tsx

import { GlareCard } from "@/components/ui/glare-card";

<GlareCard>
  <div className="flex flex-col items-center justify-center h-full p-6">
    <h3 className="text-white text-lg font-bold">Heart Health</h3>
    <p className="text-neutral-400 text-sm mt-2">
      Monitor cardiovascular fitness with real-time tracking.
    </p>
  </div>
</GlareCard>

Custom Background

$99/month

Get Started

tsx

<GlareCard className="bg-gradient-to-br from-emerald-950 to-slate-950">
  <div className="flex flex-col items-center justify-center h-full p-8">
    <span className="text-4xl font-bold text-emerald-400">$99</span>
    <span className="text-neutral-400 text-sm">/month</span>
  </div>
</GlareCard>

Props

Prop	Type	Default	Description	Required
children	`React.ReactNode`	--	Content rendered inside the card. Sits below the glare overlay layers.	Yes
className	`string`	--	Additional classes on the inner content container (default bg: bg-slate-950).	Yes

Usage Guidelines

Use for hero feature cards, testimonials, or premium content highlights.
The card has a fixed aspect ratio of 17:21 and a width of 320px by default.
The holographic foil effect uses layered CSS gradients with mix-blend-mode for the rainbow sheen.
3D tilt is controlled via CSS custom properties (--r-x, --r-y) updated on pointer move.
Works best with centered, minimal content. Avoid complex layouts inside glare cards.
On mobile, the effect gracefully degrades to a static card since there is no hover.