WindFlow Advanced Components Examples

Interactive Dashboard Card

Website Analytics

Last 30 days

Live

24.5K

Visitors

+12%

Growth

3.2s

Avg Time

                
<div class="bg-theme-surface border border-theme-border rounded-2xl p-6 card-hover-float perspective-lg">
  <div class="flex items-center justify-between mb-6">
    <div>
      <h3 class="text-xl font-bold text-theme-text">Website Analytics</h3>
      <p class="text-theme-text-muted">Last 30 days</p>
    </div>
    <div class="bg-green-500 text-white px-3 py-1 rounded-full text-sm animate-pulse">Live</div>
  </div>
  
  <div class="grid grid-cols-3 gap-4 mb-6">
    <div class="text-center p-4 bg-theme-background rounded-lg hover:animate-bounce">
      <div class="text-2xl font-bold text-theme-primary animate-glow">24.5K</div>
      <div class="text-sm text-theme-text-muted">Visitors</div>
    </div>
  </div>
</div>
                
            

Cyberpunk Login Form

ACCESS TERMINAL

USERNAME

PASSWORD

ESTABLISHING CONNECTION...

                
<div class="theme-cyberpunk">
  <div class="bg-theme-surface border-2 neon-border rounded-xl p-8 cyber-grid">
    <h3 class="text-2xl font-bold text-center mb-6 neon-text animate-glow">ACCESS TERMINAL</h3>
    
    <input class="w-full bg-theme-background border neon-border rounded-lg px-4 py-3 focus:animate-pulse">
    <button class="w-full bg-theme-primary text-white py-3 rounded-lg hover:animate-glitch">CONNECT</button>
    
    <div class="loading-dots text-theme-secondary"><div></div><div></div><div></div></div>
  </div>
</div>
                
            

Glassmorphism Media Player

Synthwave Dreams

RetroWave Artist

2:34 4:12

                
<div class="theme-glassmorphism bg-gradient-to-br from-purple-400 to-red-500">
  <div class="glass-card p-6">
    <div class="flex items-center space-x-4 mb-6">
      <div class="w-16 h-16 bg-gradient-conic from-purple-500 to-pink-500 rounded-full animate-spin"></div>
      <div>
        <h4 class="text-lg font-bold text-white">Synthwave Dreams</h4>
        <p class="text-white/70">RetroWave Artist</p>
      </div>
    </div>
    
    <button class="bg-white text-purple-600 rounded-full p-3 hover:animate-tada">▶️</button>
  </div>
</div>
                
            

Advanced Loading States

Skeleton Loader

Progress Ring

Loading 75%

Matrix Loading

01001001
11010001
10101010

Floating Orbs

Typewriter Effect

Loading your data...

System Status

All systems online

                
<!-- Skeleton Loader -->
<div class="space-y-3">
  <div class="h-4 bg-gray-300 rounded animate-pulse"></div>
  <div class="h-4 bg-gray-300 rounded w-3/4 animate-pulse delay-100"></div>
  <div class="h-4 bg-gray-300 rounded w-1/2 animate-pulse delay-200"></div>
</div>

<!-- Progress Ring -->
<div class="loading-pulse-ring text-blue-500"></div>

<!-- Floating Orbs -->
<div class="flex justify-center space-x-2">
  <div class="w-3 h-3 bg-purple-500 rounded-full animate-float"></div>
  <div class="w-3 h-3 bg-blue-500 rounded-full animate-float delay-300"></div>
  <div class="w-3 h-3 bg-pink-500 rounded-full animate-float delay-700"></div>
</div>

<!-- Typewriter -->
<p class="text-typewriter font-mono">Loading your data...</p>
                
            

Interactive Button Gallery

Primary Actions

Animated Effects

Special Effects

Loading Button States

                
<!-- Hover Effects -->
<button class="bg-blue-500 text-white py-3 px-6 rounded-lg btn-hover-lift">Hover Lift</button>
<button class="bg-purple-500 text-white py-3 px-6 rounded-lg btn-hover-glow">Hover Glow</button>
<button class="bg-pink-500 text-white py-3 px-6 rounded-lg btn-hover-scale">Hover Scale</button>

<!-- Animation Effects -->
<button class="bg-green-500 text-white py-3 px-6 rounded-lg hover:animate-rubber-band">Rubber Band</button>
<button class="bg-orange-500 text-white py-3 px-6 rounded-lg hover:animate-jello">Jello Wobble</button>
<button class="bg-red-500 text-white py-3 px-6 rounded-lg hover:animate-tada">Tada Celebration</button>

<!-- Loading States -->
<button class="bg-blue-500 text-white py-3 px-6 rounded-lg flex items-center space-x-2">
  <div class="loading-spinner w-4 h-4 border-white"></div>
  <span>Processing...</span>
</button>
                
            

3D Card Gallery

🚀

Hover to Flip

Back Side

3D transforms with WindFlow!

🎭

3D Tilt

Hover for tilt effect

✨

Levitating

Always floating

                
<!-- 3D Flip Card -->
<div class="relative h-64 perspective-lg">
  <div class="absolute inset-0 transform hover:rotate-y-180 transition-transform duration-700 transform-3d">
    <!-- Front -->
    <div class="absolute inset-0 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl p-6 backface-hidden">
      Front Content
    </div>
    <!-- Back -->
    <div class="absolute inset-0 bg-gradient-to-br from-purple-600 to-pink-600 rounded-xl p-6 backface-hidden rotate-y-180">
      Back Content
    </div>
  </div>
</div>

<!-- Tilt Card -->
<div class="bg-theme-surface border border-theme-border rounded-xl p-6 card-hover-tilt">
  Content
</div>

<!-- Levitating Card -->
<div class="bg-gradient-to-br from-green-400 to-blue-500 rounded-xl p-6 animate-levitate">
  Content
</div>
                
            

Advanced Text Effects

GLITCH EFFECT

Cyberpunk-style glitch text

NEON GLOW

Animated neon effect

$ npm install windflow-css --save

GRADIENT TEXT

Animated gradient text

F L O A T I N G

Each letter floats independently

                
<!-- Glitch Text -->
<h3 class="text-4xl font-bold text-glitch text-red-500" data-text="GLITCH EFFECT">
  GLITCH EFFECT
</h3>

<!-- Neon Text -->
<h3 class="text-4xl font-bold animate-neon text-pink-500">NEON GLOW</h3>

<!-- Typewriter Text -->
<span class="text-typewriter font-mono">npm install windflow-css --save</span>

<!-- Gradient Text -->
<h3 class="text-5xl font-bold bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 text-transparent bg-clip-text animate-pulse">
  GRADIENT TEXT
</h3>

<!-- Floating Letters -->
<span class="inline-block animate-float">F</span>
<span class="inline-block animate-float delay-100">L</span>
<span class="inline-block animate-float delay-200">O</span>
<span class="inline-block animate-float delay-300">A</span>
<span class="inline-block animate-float delay-400">T</span>
                
            