Components Gallery

Fancy Card

Glassmorphism card with cosmic glow.

<div className="group relative max-w-sm rounded-2xl overflow-hidden bg-white/80 backdrop-blur-2xl p-6 shadow-xl border border-white/30 hover:shadow-2xl transition-all duration-300">
  <div className="absolute inset-0 bg-gradient-to-br from-purple-400/10 to-pink-400/10 opacity-0 group-hover:opacity-100 transition-opacity blur-xl" />
  <h3 className="text-xl font-bold mb-2 text-indigo-600">Fancy Card</h3>
  <p className="text-gray-700">Glassmorphism card with cosmic glow.</p>
</div>

Animated Button

<button className="relative px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-bold rounded-xl shadow-lg overflow-hidden group">
  <span className="relative z-10 flex items-center gap-2">
    <Sparkles className="w-5 h-5" /> Click Me
  </span>
  <div className="absolute inset-0 bg-white/20 -translate-x-full group-hover:translate-x-0 transition-transform duration-500" />
</button>

Simple Chart (SVG)

<svg viewBox="0 0 220 120" className="w-full h-36 drop-shadow-xl">
  <defs>
    <linearGradient id="chartGrad" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stopColor="#8b5cf6" />
      <stop offset="100%" stopColor="#3b82f6" />
    </linearGradient>
  </defs>
  <polyline fill="none" stroke="url(#chartGrad)" strokeWidth="4" points="10,100 50,60 90,80 130,30 170,50 210,40" />
  <circle cx="130" cy="30" r="7" fill="#8b5cf6" />
</svg>

Wiggle Text

I wiggle!

<div className="text-4xl font-bold animate-[var(--animate-wiggle)] hover:animate-[var(--animate-heartbeat)] transition-all duration-300 text-indigo-600">
  I wiggle!
</div>

Bouncing Ball

<div className="animate-bounce bg-gradient-to-br from-blue-500 to-cyan-500 w-16 h-16 rounded-full shadow-lg" />

Spinner

<div className="w-10 h-10 border-4 border-purple-500 border-t-transparent rounded-full animate-spin" />

Online Indicator

<div className="relative inline-block">
  <div className="w-4 h-4 bg-green-500 rounded-full shadow-md" />
  <div className="absolute inset-0 w-4 h-4 bg-green-500 rounded-full animate-ping" />
</div>

Loading Card

<div className="h-32 w-64 bg-gradient-to-r from-gray-200 to-gray-300 rounded-xl animate-pulse shadow-lg" />

Bouncing Arrow

<div className="animate-bounce text-5xl text-purple-600">
  <ArrowDown className="w-12 h-12 mx-auto" />
</div>

Fade In Text

Hello!

<div className="animate-[var(--animate-fade-in)] text-2xl font-medium text-gray-700">
  Hello!
</div>

Spin Ring

<div className="animate-[var(--animate-spin)] w-14 h-14 border-4 border-t-blue-500 border-r-cyan-500 border-b-purple-500 border-l-pink-500 rounded-full" />

Live Icon

<div className="relative w-6 h-6">
  <span className="absolute inset-0 rounded-full bg-red-500 opacity-80 animate-[var(--animate-live)]" />
  <span className="relative inline-block w-6 h-6 bg-red-600 rounded-full shadow-md" />
</div>

30° Spin

<div className="animate-[var(--animate-spin-30)] text-3xl font-bold text-indigo-600">
  30° Spin
</div>

Hover to 30°

Hover Me to 30°

<div className="
  inline-block p-6 bg-gradient-to-r from-purple-600 to-pink-600 
  text-white rounded-xl font-bold text-xl shadow-lg
  hover:animate-[var(--animate-rotate-30-hover)]
  transition-transform duration-400
">
  Hover Me to 30°
</div>

Slide-in Hover Button

<button className="group relative overflow-hidden w-52 h-12 text-lg font-bold text-blue-600 bg-white border-2 border-blue-600 rounded-xl shadow-inner shadow-gray-500/50 cursor-pointer transition-colors duration-500 hover:text-white">
  <span className="absolute inset-0 bg-green-500 transform -translate-x-full transition-transform duration-500 ease-in-out group-hover:translate-x-0"></span>
  <span className="relative z-10">Hover Me</span>
</button>