Shining Card tilts in 3D toward the cursor while a soft sheen sweeps across its surface, positioned to follow the pointer in real time. Tilt strength, sheen intensity, and the card radius are props. Built with Framer Motion and Tailwind CSS. A go to treatment for premium feature cards, product showcases, and pricing highlights that should feel physical under the cursor.
Installation
Usage
import { ShiningCard } from "@/components/ui/shining-card";<div className="relative h-[500px] bg-neutral-100">
<ShiningCard imageUrl="/img.jpg" title="Hover me" />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
imageUrl | string | — | Background image URL for the card. |
title | string | — | Optional heading overlaid at the top of the card. |
tiltStrength | number | 17.5 | Maximum tilt in degrees (both axes). |
shineStrength | number | 0.5 | Maximum shine overlay opacity (0–1). |
shineColor | string | #d4d4d8 | Color of the shine overlay. |
imageOverlayOpacity | number | 0 | Opacity of the dark scrim over the image (0–1). |
width | number | 320 | Card width in px. |
aspectRatio | string | "9/13" | CSS aspect ratio for the card. |
perspective | number | 1500 | Perspective in px — bigger = subtler 3D. |
className | string | — | Classes for the perspective wrapper. |
cardClassName | string | — | Classes for the tilted card face. |
titleClassName | string | — | Classes for the title label. |