{"id":31481550,"url":"https://github.com/casoon/casoon-tailwind-effects","last_synced_at":"2025-10-02T07:02:10.296Z","repository":{"id":311403416,"uuid":"1043589951","full_name":"casoon/casoon-tailwind-effects","owner":"casoon","description":"Pure CSS effects library for Tailwind CSS v4. Glassmorphism, gradients, orbs, and scroll animations - no JavaScript required.","archived":false,"fork":false,"pushed_at":"2025-09-20T12:01:57.000Z","size":1242,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-09-20T13:25:52.810Z","etag":null,"topics":["css","css-effects","css-utilities","design-system","glassmorphism","gradients","modern-css","scroll-animations","tailwindcss","ui-components"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/casoon.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2025-08-24T07:27:00.000Z","updated_at":"2025-09-20T12:02:00.000Z","dependencies_parsed_at":"2025-08-24T14:32:16.480Z","dependency_job_id":"7e24a586-bde3-4581-b42e-ea8693628498","html_url":"https://github.com/casoon/casoon-tailwind-effects","commit_stats":null,"previous_names":["casoon/casoon-tailwind-effects"],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/casoon/casoon-tailwind-effects","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casoon%2Fcasoon-tailwind-effects","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casoon%2Fcasoon-tailwind-effects/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casoon%2Fcasoon-tailwind-effects/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casoon%2Fcasoon-tailwind-effects/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/casoon","download_url":"https://codeload.github.com/casoon/casoon-tailwind-effects/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casoon%2Fcasoon-tailwind-effects/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277968872,"owners_count":25907420,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-02T02:00:08.890Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-effects","css-utilities","design-system","glassmorphism","gradients","modern-css","scroll-animations","tailwindcss","ui-components"],"created_at":"2025-10-02T07:01:02.628Z","updated_at":"2025-10-02T07:02:10.287Z","avatar_url":"https://github.com/casoon.png","language":"CSS","readme":"# @casoon/tailwindcss-effects\n\n🎨 **Modern CSS Effects for Tailwind CSS v4** - Pure CSS approach with complete design system integration.\n\n## 🚀 Quick Start\n\n### Installation\n\n```bash\nnpm install @casoon/tailwindcss-effects\n```\n\n### Usage with Tailwind CSS v4\n\n**🎯 Tailwind v4 Integration (Recommended):**\n\n```css\n@import \"tailwindcss\";\n@import \"@casoon/tailwindcss-effects\";\n```\n\n**💎 Legacy/Standalone Version (~69KB minified):**\n\n```html\n\u003clink rel=\"stylesheet\" href=\"node_modules/@casoon/tailwindcss-effects/dist.min.css\"\u003e\n```\n\n**📦 Individual Core Packages:**\n\n```css\n@import \"tailwindcss\";\n@import \"@casoon/tailwindcss-animations\";\n@import \"@casoon/tailwindcss-glass\";\n@import \"@casoon/tailwindcss-utilities\";\n@import \"@casoon/tailwindcss-orbs\";\n```\n\n**That's it!** All CSS classes are ready to use with `cs-` prefix.\n\n## ✨ Version 0.9.0 - Consolidated Architecture\n\n**🎯 Streamlined from 16 to 4 Core Packages:**\n- `@casoon/tailwindcss-utilities` - Layout, forms, cards, typography, loading, navigation, micro-interactions, scroll\n- `@casoon/tailwindcss-animations` - 50+ animation classes and keyframes  \n- `@casoon/tailwindcss-glass` - Complete glassmorphism system\n- `@casoon/tailwindcss-orbs` - Floating orb backgrounds and effects\n\n**📦 Meta Package:** `@casoon/tailwindcss-effects` combines all core packages.\n\n**🏗️ Build System:**\n- `index.css` - For Tailwind v4 integration (includes `@import \"tailwindcss\"`)\n- `dist.css` - Standalone CSS for legacy projects (no Tailwind dependency)\n- Full minification and tree-shaking support\n\n## Common Variants \u0026 Usage Patterns\n\nUtilities\n- Focus rings and accessibility helpers:\n\n```\n\u003cbutton class=\"cs-focus-ring cs-focus-scale-105 contrast-more:cs-focus-ring\"\u003eClick me\u003c/button\u003e\n```\n\n- Layout and presets from `@casoon/tailwindcss-utilities` can be mixed with effect utilities:\n\n```\n\u003csection class=\"cs-surface cs-grid-cards dark:cs-surface-contrast motion-reduce:cs-transition-none\"\u003e…\u003c/section\u003e\n```\n\nTypography\n- Prose presets are additive; combine with effects and variants:\n\n```\n\u003carticle class=\"cs-prose-base cs-prose-blog dark:cs-prose-invert forced-colors:cs-prose-high-contrast\"\u003e…\u003c/article\u003e\n```\n\n- Inline emphasis and code blocks integrate with theme tokens; you can layer interactions:\n\n```\n\u003ccode class=\"cs-code cs-hover-highlight motion-safe:cs-pulse\"\u003enpm run build\u003c/code\u003e\n```\n\n### ⚠️ Important Setup Note\n\nFor **gradient effects** to work properly, you need to add the `cs-root` class to your HTML:\n\n```html\n\u003cbody class=\"cs-root\"\u003e\n  \u003c!-- Your content here --\u003e\n\u003c/body\u003e\n```\n\nOr alternatively to your root element:\n\n```html\n\u003chtml class=\"cs-root\"\u003e\n  \u003c!-- Your content here --\u003e\n\u003c/html\u003e\n```\n\nThis class provides the CSS variables needed for gradient backgrounds and text effects like `cs-gradient-sunset`, `cs-gradient-ocean`, `cs-gradient-fire`, etc.\n\n## ✨ What You Get\n\n- **🎯 Pure CSS Architecture** - No JavaScript plugins needed\n- **📦 4 Core Packages** - Consolidated and optimized\n- **🎨 200+ Ready-to-Use Classes** - Complete design system\n- **⚡ CSS Variables \u0026 @theme** - Fully customizable with Tailwind v4\n- **♿ Accessibility First** - Motion-safe variants, focus management\n- **🏗️ Modern Build System** - Both Tailwind v4 and standalone support\n- **🗜️ Optimized Sizes** - 69KB minified for full effects library\n\n## 📦 Available Packages (v0.9.0)\n\n| Package | Description | Source Size | Minified |\n|---------|-------------|-------------|----------|\n| **`@casoon/tailwindcss-effects`** | **Meta package - all utilities combined** | **98KB** | **69KB** |\n| `@casoon/tailwindcss-utilities` | Layout, forms, cards, typography, navigation, scroll, micro-interactions | 30KB | 21KB |\n| `@casoon/tailwindcss-animations` | 50+ animation classes and keyframes | 26KB | 18KB |\n| `@casoon/tailwindcss-glass` | Complete glassmorphism system | 33KB | 25KB |\n| `@casoon/tailwindcss-orbs` | Floating orb backgrounds and gradient effects | 7KB | 5KB |\n\n\u003e All CSS classes use the `cs-` prefix to avoid conflicts with Tailwind's built-in classes.\n\n## 🎨 Examples\n\n### Animations\n\n```html\n\u003c!-- Fade in animation --\u003e\n\u003cdiv class=\"cs-fade-in cs-anim-lg\"\u003e\n  Smooth fade in over 500ms\n\u003c/div\u003e\n\n\u003c!-- Slide up with spring easing --\u003e\n\u003cdiv class=\"cs-slide-up cs-ease-spring cs-anim-xl\"\u003e\n  Slides up with bounce effect\n\u003c/div\u003e\n\n\u003c!-- 3D reveal effect --\u003e\n\u003cdiv class=\"cs-reveal-3d-up cs-anim-lg\"\u003e\n  3D rotation reveal from top\n\u003c/div\u003e\n```\n\n### Glass Effects\n\n```html\n\u003c!-- Basic glass effect --\u003e\n\u003cdiv class=\"cs-glass\"\u003e\n  Standard glass morphism\n\u003c/div\u003e\n\n\u003c!-- Strong glass card with color --\u003e\n\u003cdiv class=\"cs-glass-strong cs-glass-blue cs-glass-rounded-xl\"\u003e\n  \u003ch2\u003eGlass Card\u003c/h2\u003e\n  \u003cp\u003eBeautiful glassmorphism with blue tint\u003c/p\u003e\n\u003c/div\u003e\n\n\u003c!-- Interactive glass button --\u003e\n\u003cbutton class=\"cs-glass-button cs-glass-green\"\u003e\n  Click me\n\u003c/button\u003e\n```\n\n### Gradients\n\n```html\n\u003c!-- Gradient backgrounds --\u003e\n\u003cdiv class=\"cs-gradient-sunset p-6\"\u003e\n  Beautiful sunset gradient\n\u003c/div\u003e\n\n\u003cdiv class=\"cs-gradient-ocean p-6\"\u003e\n  Ocean gradient background\n\u003c/div\u003e\n\n\u003cdiv class=\"cs-gradient-fire p-6\"\u003e\n  Fire gradient effect\n\u003c/div\u003e\n\n\u003c!-- Gradient text --\u003e\n\u003ch1 class=\"cs-gradient-text-sunset\"\u003e\n  Gradient text effect\n\u003c/h1\u003e\n\n\u003cp class=\"cs-gradient-text-ocean\"\u003e\n  Ocean colored text\n\u003c/p\u003e\n```\n\n### Hover Effects\n\n```html\n\u003c!-- Scale on hover --\u003e\n\u003cdiv class=\"cs-hover-scale-105 transition-transform\"\u003e\n  Scales to 105% on hover\n\u003c/div\u003e\n\n\u003c!-- Lift effect --\u003e\n\u003cdiv class=\"cs-hover-lift-sm\"\u003e\n  Lifts up on hover\n\u003c/div\u003e\n\n\u003c!-- Combined effects --\u003e\n\u003cdiv class=\"cs-hover-scale-110 cs-hover-lift-md transition-all duration-300\"\u003e\n  Scale and lift together\n\u003c/div\u003e\n```\n\n### Preset Components\n\n**Forms:**\n\n```html\n\u003c!-- Modern contact form --\u003e\n\u003cform class=\"cs-form-modern\"\u003e\n  \u003cdiv class=\"cs-form-group\"\u003e\n    \u003clabel for=\"email\" class=\"cs-label-modern\"\u003eEmail\u003c/label\u003e\n    \u003cinput type=\"email\" id=\"email\" class=\"cs-input-modern\" placeholder=\"your@email.com\"\u003e\n    \u003cdiv class=\"cs-input-validation cs-validation-error\"\u003e\n      \u003cspan class=\"cs-validation-icon\"\u003e⚠\u003c/span\u003e\n      Please enter a valid email\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \n  \u003cbutton type=\"submit\" class=\"cs-button-primary-modern\"\u003e\n    Send Message\n  \u003c/button\u003e\n\u003c/form\u003e\n\n\u003c!-- Glass form variant --\u003e\n\u003cform class=\"cs-form-glass\"\u003e\n  \u003cinput type=\"text\" class=\"cs-input-glass\" placeholder=\"Username\"\u003e\n  \u003cinput type=\"password\" class=\"cs-input-glass\" placeholder=\"Password\"\u003e\n  \u003cbutton class=\"cs-button-primary-glass\"\u003eSign In\u003c/button\u003e\n\u003c/form\u003e\n```\n\n**Cards:**\n\n```html\n\u003c!-- Product card --\u003e\n\u003cdiv class=\"cs-card-product\"\u003e\n  \u003cimg src=\"product.jpg\" alt=\"Product\" class=\"cs-card-image\"\u003e\n  \u003cdiv class=\"cs-card-content\"\u003e\n    \u003ch3 class=\"cs-card-title\"\u003ePremium Product\u003c/h3\u003e\n    \u003cp class=\"cs-card-description\"\u003eHigh-quality product with excellent features\u003c/p\u003e\n    \u003cdiv class=\"cs-card-price\"\u003e$99.99\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"cs-card-actions\"\u003e\n    \u003cbutton class=\"cs-button-primary-card\"\u003eAdd to Cart\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- Testimonial card with orbs --\u003e\n\u003cdiv class=\"cs-card-testimonial-orb\"\u003e\n  \u003cdiv class=\"cs-testimonial-quote\"\u003e\n    \"This product changed everything for our team.\"\n  \u003c/div\u003e\n  \u003cdiv class=\"cs-testimonial-author\"\u003e\n    \u003cimg src=\"avatar.jpg\" alt=\"Author\" class=\"cs-testimonial-avatar\"\u003e\n    \u003cdiv class=\"cs-testimonial-info\"\u003e\n      \u003cdiv class=\"cs-testimonial-name\"\u003eSarah Chen\u003c/div\u003e\n      \u003cdiv class=\"cs-testimonial-role\"\u003eCTO, TechCorp\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n**Typography:**\n\n```html\n\u003c!-- Blog content --\u003e\n\u003carticle class=\"cs-prose-blog\"\u003e\n  \u003ch1 class=\"cs-heading-blog\"\u003eAmazing Blog Post Title\u003c/h1\u003e\n  \u003cdiv class=\"cs-blog-meta\"\u003e\n    \u003cspan class=\"cs-blog-author\"\u003eBy John Doe\u003c/span\u003e\n    \u003cspan class=\"cs-blog-date\"\u003eMarch 15, 2024\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cp class=\"cs-blog-lead\"\u003eThis is the engaging introduction to the blog post...\u003c/p\u003e\n  \u003cp\u003eRegular blog content with perfect spacing and readability...\u003c/p\u003e\n\u003c/article\u003e\n\n\u003c!-- Marketing content --\u003e\n\u003csection class=\"cs-prose-marketing\"\u003e\n  \u003ch1 class=\"cs-heading-hero\"\u003eTransform Your Business\u003c/h1\u003e\n  \u003cp class=\"cs-marketing-subtitle\"\u003ePowerful tools for modern teams\u003c/p\u003e\n  \u003cdiv class=\"cs-features-grid\"\u003e\n    \u003cdiv class=\"cs-feature-item\"\u003e\n      \u003ch3 class=\"cs-feature-title\"\u003eFast Setup\u003c/h3\u003e\n      \u003cp class=\"cs-feature-description\"\u003eGet started in minutes\u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/section\u003e\n```\n\n### Advanced Patterns\n\n```html\n\u003c!-- Complex glass card with hover effects --\u003e\n\u003cdiv class=\"cs-glass-card-complex\"\u003e\n  \u003cdiv class=\"cs-card-header\"\u003e\n    \u003ch3\u003eAdvanced Card\u003c/h3\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"cs-card-content\"\u003e\n    \u003cp\u003eEnhanced glass morphism with structured layout\u003c/p\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"cs-card-actions\"\u003e\n    \u003cbutton\u003eAction\u003c/button\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003c!-- Enhanced disclosure with animations --\u003e\n\u003cdetails class=\"cs-disclosure-pattern\"\u003e\n  \u003csummary\u003eClick to expand\u003c/summary\u003e\n  \u003cdiv class=\"cs-disclosure-content\"\u003e\n    \u003cp\u003eContent with smooth animations\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/details\u003e\n\n\u003c!-- Responsive layout with container queries --\u003e\n\u003cdiv class=\"cs-responsive-layout-pattern\"\u003e\n  \u003cheader class=\"cs-layout-header\"\u003eHeader\u003c/header\u003e\n  \u003cnav class=\"cs-layout-sidebar\"\u003eSidebar\u003c/nav\u003e\n  \u003cmain class=\"cs-layout-main\"\u003eMain content\u003c/main\u003e\n  \u003caside class=\"cs-layout-aside\"\u003eAside\u003c/aside\u003e\n  \u003cfooter class=\"cs-layout-footer\"\u003eFooter\u003c/footer\u003e\n\u003c/div\u003e\n```\n\n### Theme System\n\n```html\n\u003c!-- Theme switching --\u003e\n\u003cbody data-theme=\"dark\"\u003e\n  \u003c!-- Dark theme applied --\u003e\n\u003c/body\u003e\n\n\u003cbody data-theme=\"high-contrast\"\u003e\n  \u003c!-- High contrast theme for accessibility --\u003e\n\u003c/body\u003e\n\n\u003c!-- Density controls --\u003e\n\u003cdiv data-density=\"compact\"\u003e\n  \u003c!-- Tighter spacing and smaller components --\u003e\n\u003c/div\u003e\n\n\u003cdiv data-density=\"comfortable\"\u003e\n  \u003c!-- More spacious layout --\u003e\n\u003c/div\u003e\n```\n\n### Debug Utilities\n\n```html\n\u003c!-- Debug outlines --\u003e\n\u003cdiv data-debug=\"outlines\"\u003e\n  \u003c!-- All elements get red outlines --\u003e\n\u003c/div\u003e\n\n\u003c!-- Debug grid --\u003e\n\u003cdiv data-debug=\"grid\"\u003e\n  \u003c!-- Shows alignment grid overlay --\u003e\n\u003c/div\u003e\n\n\u003c!-- Debug spacing --\u003e\n\u003cdiv data-debug=\"spacing\"\u003e\n  \u003c!-- Highlights element spacing --\u003e\n\u003c/div\u003e\n```\n\n### Utilities\n\n```html\n\u003c!-- Container with fluid padding --\u003e\n\u003cdiv class=\"cs-container-fluid\"\u003e\n  Full width with consistent padding\n\u003c/div\u003e\n\n\u003c!-- Screen reader only text --\u003e\n\u003cp class=\"cs-sr-only\"\u003e\n  Hidden from visual users, available to screen readers\n\u003c/p\u003e\n\n\u003c!-- Responsive visibility --\u003e\n\u003cdiv class=\"cs-hide-mobile\"\u003e\n  Hidden on mobile devices\n\u003c/div\u003e\n\n\u003cdiv class=\"cs-hide-desktop\"\u003e\n  Hidden on desktop devices\n\u003c/div\u003e\n```\n\n## 🔧 JavaScript Helpers (Optional)\n\nFor enhanced functionality, some packages provide JavaScript modules:\n\n### Navigation Helper\n\n```js\n// Enhanced navigation with accessibility features\nimport { initSidebarDrawer } from '@casoon/tailwindcss-navigation/nav.js';\n\nconst sidebar = initSidebarDrawer({\n  trigger: '[data-sidebar-toggle]',\n  drawer: '.sidebar',\n  overlay: '.sidebar-overlay'\n});\n```\n\n### Scroll Animations\n\n```js\n// Advanced scroll-triggered animations\nimport '@casoon/tailwindcss-scroll/scroll.js';\n\n// Auto-initializes on page load\n// Provides AOS (Animate On Scroll) compatibility\n// Custom events: 'scroll:enter', 'scroll:exit'\n```\n\n## 🎯 Customization\n\nAll effects use CSS custom properties for easy customization:\n\n```css\n:root {\n  /* Animation system */\n  --cs-anim-duration-md: 400ms;\n  --cs-anim-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);\n  \n  /* Glass effects */\n  --cs-glass-bg-light: color-mix(in srgb, #ffffff 10%, transparent);\n  --cs-glass-border-medium: color-mix(in srgb, #ffffff 20%, transparent);\n  \n  /* Container padding */\n  --cs-container-padding: 2rem;\n}\n```\n\n## 🔧 Development \u0026 Build\n\n**For maintainers and contributors:**\n\n```bash\n# Build all dist.css files for individual packages\nnpm run build:dist\n\n# Build meta package (effects) from all core packages  \nnpm run build:effects\n\n# Complete build pipeline (dist + effects + minification)\nnpm run build:all\n\n# Validate all packages (checks for cs- prefixed classes)\nnpm run validate\n\n# Pre-publish workflow (validate + build + minify)\nnpm run prepublish\n```\n\n**Architecture:**\n- **`index.css`** - Source files with `@import \"tailwindcss\"` for v4 integration\n- **`dist.css`** - Standalone CSS files without Tailwind dependency\n- **`dist.min.css`** - Minified versions for production\n\n## 📋 Requirements\n\n- **Tailwind CSS v4.0+**\n- **Modern CSS support**: CSS custom properties, `color-mix()`, `@container`\n- **Build tool**: Any CSS processor that supports `@import`\n\n## 🏗️ Architecture\n\nThis project has been completely rewritten for Tailwind CSS v4 with a sophisticated **7-layer CSS architecture**:\n\n### 🔧 **New 7-Layer CSS System**\n\n```css\n@layer cs-reset, cs-tokens, cs-base, cs-components, cs-patterns, cs-utilities, cs-overrides;\n```\n\n**Layer Structure:**\n\n1. **`cs-reset`** - CSS resets \u0026 normalization\n2. **`cs-tokens`** - Design tokens \u0026 CSS custom properties  \n3. **`cs-base`** - Base elements, keyframes, system styles\n4. **`cs-components`** - Simple UI components\n5. **`cs-patterns`** - Complex composed patterns\n6. **`cs-utilities`** - Atomic utility classes\n7. **`cs-overrides`** - Theme overrides, debug utils\n\n### 🎯 **Benefits of This Architecture**\n\n- **Better Organization**: Clear separation of concerns across layers\n- **Enhanced Theming**: Robust dark/light/high-contrast theme system\n- **Improved Performance**: Strategic layer ordering for optimal CSS cascade\n- **Developer Experience**: Debug utilities and maintainable structure\n- **Accessibility First**: Built-in reduced motion and high contrast support\n- **Future-Proof**: Scalable architecture for continued growth\n\n### 🛠️ **Technical Features**\n\n- **Pure CSS**: Each package exports a `dist.css` file with all CSS classes\n- **No Plugins**: CSS files are directly imported, no JavaScript build step needed  \n- **CSS Variables**: Complete design system using CSS custom properties\n- **Modern CSS**: Uses `color-mix()`, `@container`, `@layer`, and other modern features\n- **Tree Shakeable**: Import individual packages to reduce bundle size\n\n## 🧪 Testing\n\nA test project is included to verify all effects work correctly:\n\n```bash\n# Development server\nnpm run dev\n\n# Build test\nnpm run build:test\n```\n\n## 📄 License\n\nMIT - see [LICENSE](LICENSE)\n\n## 👨‍💻 Author\n\nCreated by [Jörn Seidel](https://github.com/jseidel19) - [@jseidel19](https://github.com/jseidel19)\n\n---\n\n**Ready for production** ✨ - All packages are stable and tested with Tailwind CSS v4.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcasoon%2Fcasoon-tailwind-effects","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcasoon%2Fcasoon-tailwind-effects","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcasoon%2Fcasoon-tailwind-effects/lists"}