Features

📱 Adaptive & Responsive Power

• 📱 RESPONSIVE BOX: Use the 'responsive' attribute on any parent to instantly create a mobile-ready flex layout! 📲🔥

• 🤖 FLEX-AUTO: The smartest layout tool! Automatically switches from row to column at 1200px. Perfect for Hero sections that need to look great on desktop AND mobile! 💻➡️📱

• 📐 LAYOUT MASTER: Use rows, columns, and center attributes to align everything perfectly without ever writing display: flex again! 🧩🎯

✨ Animation & Special Effects

• 🦋 THE ICONIC "FLY": Use butterfly="fly" to make elements soar in beautiful, random paths across your screen! 🌬️📍

• 🔮 FLOATING BALLS: Add glowing, animated orbs with ball-move-1 to ball-move-5 for that high-end "glassmorphism" look! 🔮✨

• 🎉 BIRTHDAY MAGIC: Instantly create a party vibe with the birthday-paper confetti animation! 🎊🥳

• 🪄 STANDARD PACK: spin, bounce, pulse, swing, flip, and shake—all ready with one word! 🃏💫

🎨 Visual & Styling Sorcery

• 🌑 PRO DARK MODE: Use d{color} and l{color} (e.g., dpurple lpurple) to set smart backgrounds that switch instantly with a dark-btn! 🌙💡

• ❤️ SHAPE SHIFTER: Morph elements into Hearts, Stars, Hexagons, Messages, or Home shapes using simple Clip-Path attributes! 🌟📐

• 🌈 GRADIENT GLORY: 10 pre-designed, stunning gradients (gradient-1 to gradient-10) to make your UI pop! 🎨💎

• ✏️ HAND-DRAWN VIBES: Give your site a "sketchy," artistic personality with the handdrawn filter! 🎨✍️

🛠️ Utility & Performance

• 🚀 INSANELY LIGHT: A mind-blowing 35kb! vf.js handles your sizing, df.js handles your dark mode. Fast, modular, and clean! ⚡💨

• 📏 PRECISION SIZING: Control width (w-100) and height (h-200) in REMs or percentages (w-80p) directly in your HTML! 📐📏

• 🎨 SHADOW & GLOW: Add colored shadows with s{color} (like sred) or a classic shadow to make elements float! ☁️✨

• 🧭 NAVBAR READY: Use navbar, top, or bottom to pin your menus instantly! 📍📌

Don't just build a website... Let it fly! 🦋🔥

Use Cases

• Interactive Hero Sections: Use butterfly="fly" and ball-move for high-engagement landing pages. 🦋✨

• Creative Portfolios: Apply handdrawn and Clip-Path shapes (Heart ❤️/Star ⭐) for unique branding.

• Rapid Prototyping: Build layouts instantly with responsive, flex-auto, and btn attributes. ⏱️⚡

• Celebration & Event Sites: Trigger birthday-paper confetti for instant party vibes. 🎉🥳

• Educational Coding: A "visual-first" tool for teaching children HTML/CSS logic. 👶💻

• Dynamic Sales Funnels: Use pulse and grow on CTA buttons to boost click-through rates. 📈🎯

• Instant Dark-Mode Apps: Deploy d{color} and dark-btn for seamless theme switching. 🌙📲

• Micro-Interaction Sites: Add bounce, swing, or shake to UI elements for a tactile feel. 🃏💫

• Ultra-Lightweight Mobile Webs: Leverage the 35kb footprint for lightning-fast loading. 📱