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
3D Cube - happy face3D Cube - Happy Face
$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:

PropertyTypeDefaultDescription
childrenReactNode-The content inside the card
classNamestring""Additional CSS classes
speednumber0.7Animation duration in seconds
intensitynumber0.25Shine opacity (0-1)
colorstring"#444444"Shine effect color
strokeColorstring"#666666"Top stroke color
borderRadiusstring"20px"Border radius of the card
backgroundstring"rgba(22, 22, 22, 0.3)"Card background with transparency
backdropBlurstring"3px"Backdrop blur amount
borderstring"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.