Shine Card
MAX
A glassmorphism card with animated shine effect on hover
Demo
Card Glass
Hover over the card to see the shine effect
Exclusive Launch 50% offspots left: 0 / 50


$39.99
$19.99
Payment once and get lifetime access
Access to all animations
All updates
All animations
No subscriptions
Usage Example
// Basic shine card
<ShineCard className="w-[400px] h-[300px]">
<div className="flex flex-col items-center justify-center h-full">
<h1 className="text-3xl font-bold text-white">Shine Card</h1>
<p className="text-white text-center">Hover to see the effect</p>
</div>
</ShineCard>
// ------------------------------------------------------------
// Custom blue shine with vertical layout
<ShineCard
className="w-80 h-96"
speed={1.2}
intensity={0.4}
color="#60a5fa"
direction="tr"
typeCard="vertical"
>
<div className="p-6 h-full flex flex-col justify-between">
<h2 className="text-xl font-bold text-white">Custom Card</h2>
<p className="text-blue-400 text-sm">Blue shine effect</p>
</div>
</ShineCard>
// ------------------------------------------------------------
// Horizontal card with golden shine
<ShineCard
className="w-[500px] h-32"
speed={0.5}
intensity={0.6}
color="#f59e0b"
strokeColor="#fbbf24"
background="rgba(15, 23, 42, 0.4)"
direction="tl"
typeCard="horizontal"
>
<div className="p-4 h-full flex items-center justify-between">
<h3 className="text-lg font-semibold text-white">Horizontal Card</h3>
<span className="text-yellow-400">⚡</span>
</div>
</ShineCard>
Properties
The ShineCard
component accepts the following props:
Property | Type | Default | Description |
---|---|---|---|
children | ReactNode | - | The content inside the card |
className | string | "" | Additional CSS classes |
speed | number | 0.7 | Animation duration in seconds |
intensity | number | 0.25 | Shine opacity (0-1) |
color | string | "#444444" | Shine effect color |
strokeColor | string | "#666666" | Top stroke color |
borderRadius | string | "20px" | Border radius of the card |
background | string | "rgba(22, 22, 22, 0.3)" | Card background with transparency |
backdropBlur | string | "3px" | Backdrop blur amount |
border | string | "1px solid #333333" | Border style |
direction | "bl" | "tl" | "br" | "tr" | "tl" | Direction of the shine effect |
typeCard | "vertical" | "horizontal" | "vertical" | Card orientation for shine scaling |
Shine Directions
The direction
prop controls the angle and direction of the shine effect:
tl
(top-left): Shine moves from top-left to bottom-right (-45°)tr
(top-right): Shine moves from top-right to bottom-left (225°)bl
(bottom-left): Shine moves from bottom-left to top-right (45°)br
(bottom-right): Shine moves from bottom-right to top-left (135°)
Usage Examples
Vertical Card
This is a vertical card with custom blue shine effect and slower animation.
Custom styling
✓
Square Card
Slow green shine with emerald theme
Horizontal Card
Fast golden shine effect
⚡
User Profile
@username
This card adapts to its content automatically. The shine effect works regardless of the card dimensions.