santycss 1.8.0 → 2.0.1

package/README.md

@@ -3,7 +3,7 @@
 [![npm version](https://img.shields.io/npm/v/santycss.svg?style=flat-square)](https://www.npmjs.com/package/santycss)
 [![npm downloads](https://img.shields.io/npm/dm/santycss.svg?style=flat-square)](https://www.npmjs.com/package/santycss)
 [![license](https://img.shields.io/npm/l/santycss.svg?style=flat-square)](https://github.com/ChintuSanty/santyCSS/blob/main/LICENSE)
-[![bundle size](https://img.shields.io/badge/full_bundle-744KB-blue?style=flat-square)](https://www.npmjs.com/package/santycss)
+[![bundle size](https://img.shields.io/badge/full_bundle-776KB-blue?style=flat-square)](https://www.npmjs.com/package/santycss)
 
 **Plain-English utility-first CSS framework.**
 Class names read like sentences. No build step. No configuration. Just link and use.
@@ -16,7 +16,111 @@ Class names read like sentences. No build step. No configuration. Just link and
 </div>
 ```
 
-> 🌐 **[santycss.santy.in](https://santycss.santy.in)** · 📖 **[Class Reference](https://santycss.santy.in/classes.html)** · 🎬 **[Animations](https://santycss.santy.in/animations.html)** · 📦 **[npm Docs](https://santycss.santy.in/docs.html)**
+> 🌐 **[santycss.santy.in](https://santycss.santy.in)** · 📖 **[Class Reference](https://santycss.santy.in/classes.html)** · 🌊 **[Webflow](https://santycss.santy.in/webflow.html)** · 🎬 **[Animations](https://santycss.santy.in/animations.html)** · 📦 **[npm Docs](https://santycss.santy.in/docs.html)**
+
+---
+
+## What's New in v2.0
+
+### 🦇 Creature Animations — Premium Free
+
+10 hand-crafted creature animations included free in v2.0. No extra import, no paywall — just add the class.
+
+| Class | Creature | Description |
+|---|---|---|
+| `animate-bat-fly` | 🦇 Bat | Flies across screen with arcing path |
+| `animate-bat-wings` | 🦇 Bat wings | Wing flap loop (combine with `animate-bat-fly`) |
+| `animate-butterfly` | 🦋 Butterfly | Wing flap using scaleX |
+| `animate-butterfly-drift` | 🦋 Butterfly drift | Drifts through the air while flapping |
+| `animate-firefly` | 🌟 Firefly | Erratic glowing float |
+| `animate-firefly-glow` | ✨ Firefly glow | Pulsing yellow glow effect |
+| `animate-spider-drop` | 🕷️ Spider | Descends on thread and ascends |
+| `animate-spider-swing` | 🕷️ Spider swing | Pendulum swing on thread |
+| `animate-fish-swim` | 🐟 Fish | Swims with tail-wave body motion |
+| `animate-jellyfish` | 🎐 Jellyfish | Pulsing bell contraction + float |
+| `animate-jellyfish-tendrils` | 🎐 Tendrils | Trailing tendril sway |
+| `animate-bird-flock` | 🐦 Bird | Soaring arc with rotation |
+| `animate-bird-flock-2` / `animate-bird-flock-3` | 🐦🐦 Flock | Staggered offsets for formation effect |
+| `animate-bee-hover` | 🐝 Bee | Hovering with natural drift |
+| `animate-bee-buzz` | 🐝 Buzz | Rapid wing-buzz shake |
+| `animate-snake-slither` | 🐍 Snake | Sinusoidal slithering path |
+| `animate-dragon-fire` | 🔥 Dragon fire | Fire burst expanding and fading |
+| `animate-fire-flicker` | 🔥 Flicker | Rapid flame flicker |
+
+```html
+<!-- Bat flying across -->
+<span class="animate-bat-fly animate-bat-wings">🦇</span>
+
+<!-- Butterfly flapping and drifting -->
+<span class="animate-butterfly animate-butterfly-drift">🦋</span>
+
+<!-- Firefly with glow -->
+<span class="animate-firefly animate-firefly-glow">✨</span>
+
+<!-- Bird flock formation (3 birds) -->
+<span class="animate-bird-flock">🐦</span>
+<span class="animate-bird-flock-2">🐦</span>
+<span class="animate-bird-flock-3">🐦</span>
+
+<!-- Dragon fire breath -->
+<span class="animate-dragon-fire animate-fire-flicker">🔥</span>
+```
+
+> 🎬 **[See all creature animations live →](https://santycss.santy.in/animations.html#creature-animations)**
+
+---
+
+## What's New in v1.9
+
+### 🌊 Scroll & Scrollbar Utilities
+
+| Class | Description |
+|---|---|
+| `scroll-smooth` | `scroll-behavior: smooth` |
+| `scroll-auto` | `scroll-behavior: auto` |
+| `scrollbar-thin` | Narrow scrollbar (webkit + standard) |
+| `scrollbar-dark` | Dark-themed scrollbar |
+| `scrollbar-hidden` | Hide scrollbar, keep scroll functionality |
+
+### 🪟 Glass Morphism
+
+| Class | Description |
+|---|---|
+| `glass` | Frosted glass effect (blur + semi-transparent white) |
+| `glass-dark` | Dark frosted glass |
+| `glass-light` | Light frosted glass |
+
+### 🌈 Radial Gradients
+
+```html
+<div class="gradient-radial-blue-purple">...</div>
+<div class="gradient-radial-pink-orange">...</div>
+```
+
+All `gradient-radial-*` utilities use CSS `radial-gradient()` matching the existing linear gradient palette.
+
+### 🎬 New Animation Utilities
+
+| Class | Description |
+|---|---|
+| `animate-spin-slow` | Slow clockwise rotation |
+| `animate-spin-fast` | Fast clockwise rotation |
+| `animate-spin-cw` | Explicit clockwise spin |
+| `animate-spin-ccw` | Counter-clockwise spin |
+| `animate-spin-xslow` | Very slow rotation |
+| `animate-pulse-dot` | Pulsing dot indicator |
+| `skill-bar-animated` | Animated skill/progress bar fill |
+
+```html
+<!-- Pulsing status indicator -->
+<span class="animate-pulse-dot background-green-500"></span>
+
+<!-- Animated skill bar -->
+<div class="skill-bar-animated" style="--skill-width: 80%"></div>
+
+<!-- Counter-clockwise spinner -->
+<div class="animate-spin-ccw">↺</div>
+```
 
 ---
 
@@ -26,7 +130,11 @@ Class names read like sentences. No build step. No configuration. Just link and
 
 Inspect any Figma layer and get the exact SantyCSS classes in one click.
 
-**Install (local development):**
+**Download / Install:**
+
+> 🌐 **[Download from santycss.santy.in/docs.html](https://santycss.santy.in/docs.html#figma-plugin)** — full setup guide and one-click download
+
+**Local development install:**
 1. Clone this repo — the plugin lives in `figma-plugin-santycss/`
 2. Open **Figma Desktop** → Plugins → Development → **Import plugin from manifest**
 3. Select `figma-plugin-santycss/manifest.json`
@@ -111,9 +219,9 @@ Inspect any Figma layer and get the exact SantyCSS classes in one click.
 | `.date-picker` / `.date-picker-grid` / `.date-picker-day` | Full calendar date picker |
 | `.date-picker-day.today` / `.selected` / `.in-range` | Day state modifiers |
 
-### 🎨 Figma Plugin _(coming soon)_
+### 🎨 Figma Plugin
 
-A **SantyCSS Figma Plugin** is in development — inspect Figma designs and get the exact SantyCSS classes that match. Inspired by the Tailwind CSS Figma plugin workflow.
+The **SantyCSS Figma Plugin** is live — inspect Figma designs and get the exact SantyCSS classes that match. See [What's New in v1.8](#-santycss-inspector--figma-plugin) above for full details and the download link.
 
 ---
 
@@ -309,6 +417,14 @@ The **built-in AI Generator** converts plain English → SantyCSS classes in the
 
 ---
 
+## Webflow
+
+Use SantyCSS on **[Webflow](https://webflow.com/)** without a build step: add the CDN `<link>` in **Project settings → Custom Code → Head**, then enter utility classes in the **Style → Selector** field on any element.
+
+- **[Webflow guide + copy-paste snippets + sidebar class index](https://santycss.santy.in/webflow.html)** — head/footer code, optional split bundles, scroll-animation helper, design tokens.
+
+---
+
 ## Installation
 
 ```bash
@@ -532,10 +648,12 @@ The file `santycss.context.md` (in the GitHub repo) is a ready-made system promp
 
 - 🌐 Website: [santycss.santy.in](https://santycss.santy.in)
 - 📖 Class Reference: [santycss.santy.in/classes.html](https://santycss.santy.in/classes.html)
+- 🌊 Webflow: [santycss.santy.in/webflow.html](https://santycss.santy.in/webflow.html)
 - 🎬 Animations: [santycss.santy.in/animations.html](https://santycss.santy.in/animations.html)
 - 🎮 Live Demo: [santycss.santy.in/demo.html](https://santycss.santy.in/demo.html)
 - 📦 npm Docs: [santycss.santy.in/docs.html](https://santycss.santy.in/docs.html)
 - 🐛 Issues: [github.com/ChintuSanty/santyCSS/issues](https://github.com/ChintuSanty/santyCSS/issues)
+- 💬 Discussions: [GitHub Discussions](https://github.com/orgs/community/discussions/190269)
 
 ---