WindFlow CSS

The modern utility-first CSS framework with superpowers

50+ Advanced Animations 8 Beautiful Themes 3D Transforms Glassmorphism

Install via npm:

npm install -g windflow-css

Why Choose WindFlow?

Built on Tailwind's foundation but enhanced with modern features developers actually want.

🎬

50+ Advanced Animations

From subtle micro-interactions to eye-catching effects. Rubber band, jello, glitch, neon glow, and more.

🎨

8 Beautiful Themes

Pre-built themes with smart CSS variables. Switch themes instantly with zero configuration.

🎭

3D Transforms

Full 3D support with perspective, rotation, and transforms. Create immersive experiences.

Hover me!

Loading Components

Beautiful, animated loading states. No JavaScript required.

💨

Glassmorphism

Built-in backdrop filters and glass effects. Perfect for modern UI designs.

Glass Navigation
🔧

VS Code Extension

Intelligent autocomplete, hover documentation, and theme previews.

class="animate-rubber-band"

Animation Showcase

Click any button to see the animation in action

Usage Example:

<button class="hover:animate-rubber-band bg-purple-500 text-white px-4 py-2 rounded"> Hover Animation </button> <div class="animate-float animate-infinite"> Floating Element </div>

Themes System

8 carefully crafted themes. Switch instantly with CSS classes.

Dark

Modern dark theme with enhanced contrast

Cyberpunk

Futuristic neon-inspired theme

Glassmorphism

Transparent glass-like effects

Retro

80s vintage aesthetic

Theme Usage:

<body class="theme-cyberpunk"> <div class="bg-theme-background text-theme-text"> <h1 class="text-theme-primary">Themed Title</h1> <div class="bg-theme-surface border-theme-border"> Content adapts to active theme </div> </div> </body>

Documentation

Everything you need to get started with WindFlow