{"id":31481482,"url":"https://github.com/casoon/atlas","last_synced_at":"2025-10-02T07:02:04.709Z","repository":{"id":315876569,"uuid":"1061112611","full_name":"casoon/atlas","owner":"casoon","description":"A complete toolkit of SSR-safe effects, headless components, and Tailwind v4-compatible styles designed for maximum flexibility and performance across all JavaScript frameworks.","archived":false,"fork":false,"pushed_at":"2025-09-21T09:57:06.000Z","size":123,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-09-21T11:32:07.029Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","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":null,"dco":null,"cla":null}},"created_at":"2025-09-21T09:11:25.000Z","updated_at":"2025-09-21T09:57:09.000Z","dependencies_parsed_at":"2025-09-21T11:32:23.016Z","dependency_job_id":"121ea47e-cc3f-44c8-8cea-4a5efc958fdf","html_url":"https://github.com/casoon/atlas","commit_stats":null,"previous_names":["casoon/atlas"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/casoon/atlas","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casoon%2Fatlas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casoon%2Fatlas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casoon%2Fatlas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casoon%2Fatlas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/casoon","download_url":"https://codeload.github.com/casoon/atlas/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/casoon%2Fatlas/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":[],"created_at":"2025-10-02T07:00:49.080Z","updated_at":"2025-10-02T07:02:04.702Z","avatar_url":"https://github.com/casoon.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🌟 CASOON Atlas\n\n**A comprehensive, modern UI effects library built for Tailwind v4 and the modern web.**\n\nCASOON Atlas provides a complete toolkit of **SSR-safe effects**, **headless components**, and **Tailwind v4-compatible styles** designed for maximum flexibility and performance across all JavaScript frameworks.\n\n[![npm version](https://img.shields.io/npm/v/@casoon/atlas-effects)](https://npmjs.com/package/@casoon/atlas-effects)\n[![GitHub](https://img.shields.io/badge/GitHub-casoon/atlas-181717?logo=github)](https://github.com/casoon/atlas)\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.6+-blue)](https://typescriptlang.org)\n[![Tailwind v4](https://img.shields.io/badge/Tailwind-v4-38bdf8)](https://tailwindcss.com)\n[![SSR Safe](https://img.shields.io/badge/SSR-Safe-green)](#ssr-compatibility)\n[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT)\n\n## 📦 Packages Overview\n\n| Package | Description | Size | Features |\n|---------|-------------|------|---------|\n| **[@casoon/atlas-styles](#casoon-atlas-styles)** | Complete Tailwind v4 design system | Purged by Tailwind | Glass effects, gradients, utilities |\n| **[@casoon/atlas-effects](#casoon-atlas-effects)** | Interactive JavaScript effects | ~2.2KB JS | 13+ effects, SSR-safe, tree-shakeable |\n| **[@casoon/atlas-components](#casoon-atlas-components)** | Headless UI components | ~1.8KB JS | 10+ components, framework-agnostic |\n| **[@casoon/atlas](#casoon-atlas)** | Meta-package for convenience | ~4KB JS | All packages combined |\n\n## 🚀 Quick Start\n\n### Installation\n\n```bash\n# Install individual packages\nnpm install @casoon/atlas-styles @casoon/atlas-effects @casoon/atlas-components\n\n# Or install everything at once\nnpm install @casoon/atlas\n\n# Using pnpm (recommended)\npnpm add @casoon/atlas-styles @casoon/atlas-effects @casoon/atlas-components\n```\n\n### Basic Usage\n\n```typescript\n// Import styles (recommended)\nimport '@casoon/atlas-styles';               // All styles\n// Or import specific modules\nimport '@casoon/atlas-styles/glass.css';     // Glass effects only\nimport '@casoon/atlas-styles/orbs.css';      // Orb effects only\nimport '@casoon/atlas-styles/effects';\n\n// Import effects\nimport { ripple, tilt, particles } from '@casoon/atlas-effects';\n\n// Import components  \nimport { createModal, createTabs } from '@casoon/atlas-components';\n\n// Initialize effects\nripple('.btn', { strength: 0.8 });\ntilt('.card', { intensity: 15 });\n\n// Create components\nconst modal = createModal();\nconst tabs = createTabs(['home', 'about', 'contact']);\n```\n\n### Astro Example\n\n```astro\n---\n// Component script (runs on server)\nimport { onMount } from 'astro:client';\nimport { ripple } from '@casoon/atlas-effects/ripple';\nimport '@casoon/atlas-styles/glass.css';\n---\n\n\u003cbutton id=\"cta\" class=\"glass\"\u003eClick me!\u003c/button\u003e\n\n\u003cscript\u003e\n  onMount(() =\u003e {\n    const dispose = ripple('#cta', { strength: 0.8 });\n    return () =\u003e dispose(); // Cleanup\n  });\n\u003c/script\u003e\n```\n\n### Svelte Example\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n  import { onMount } from 'svelte';\n  import { ripple } from '@casoon/atlas-effects/ripple';\n  \n  let button: HTMLButtonElement;\n  \n  onMount(() =\u003e {\n    const dispose = ripple(button, { strength: 0.8 });\n    return () =\u003e dispose();\n  });\n\u003c/script\u003e\n\n\u003cbutton bind:this={button} class=\"glass\"\u003eClick me!\u003c/button\u003e\n\n\u003cstyle\u003e\n  @import '@casoon/atlas-styles/glass.css';\n\u003c/style\u003e\n```\n\n## Architecture\n\n### 📦 Packages\n\n- **@casoon/atlas-styles** - Pure CSS, importable via subpaths\n- **@casoon/atlas-effects** - TypeScript effects, SSR-safe \n- **@casoon/atlas-components** - Framework-agnostic components (minimal for now)\n- **@casoon/atlas** - Meta-package that re-exports all TypeScript modules\n\n### 🎯 Design Principles\n\n1. **SSR-Safe**: No DOM access at module level\n2. **Tree-shakeable**: Named exports only, `sideEffects: false`\n3. **Subpath Exports**: Import only what you need\n4. **Framework Agnostic**: Works with any framework\n5. **Tailwind Compatible**: CSS classes can be purged\n\n### 📂 Subpath Imports\n\n```typescript\n// CSS Styles (recommended)\nimport '@casoon/atlas-styles';           // All styles\nimport '@casoon/atlas-styles/glass.css';     // Only glass effects\nimport '@casoon/atlas-styles/orbs.css';      // Only orb effects\nimport '@casoon/atlas-styles/animations.css'; // Only animations\nimport '@casoon/atlas-styles/core.css';      // Only core styles\n\n// JavaScript Effects\nimport { ripple } from '@casoon/atlas-effects/ripple';\nimport { orbs } from '@casoon/atlas-effects/orbs';\nimport { parallax } from '@casoon/atlas-effects/parallax';\n\n// Or import everything\nimport { ripple, orbs, parallax } from '@casoon/atlas-effects';\n```\n\n## 🎭 Available Effects (13+)\n\n### Core Effects\n- **Ripple** - Interactive click/touch ripple animations\n- **Orbs** - Floating animated orb particles with physics\n- **Parallax** - Scroll-based parallax movement effects\n\n### Advanced Effects\n- **Glass Effects** - Interactive glassmorphism with dynamic blur\n- **Scroll Reveal** - Elements animate in as they enter viewport\n- **Particles** - Configurable particle systems with connections\n\n### Interactive Effects\n- **Cursor Follow** - Elements that follow mouse movement\n- **Tilt** - 3D tilt effect with realistic physics and glare\n- **Magnetic** - Elements attracted to cursor with magnetic fields\n\n### Visual Effects\n- **Glow** - Dynamic glow and lighting effects\n- **Morphing** - Shape and border-radius morphing animations\n- **Wave** - Sine wave movement animations\n- **Typewriter** - Animated text typing with cursor\n\n### Quick Example\n```typescript\nimport { ripple, tilt, particles } from '@casoon/atlas-effects';\n\n// Add ripple effect to buttons\nripple('.btn', { strength: 0.8, color: '#3b82f6' });\n\n// Add 3D tilt to cards\ntilt('.card', { intensity: 15, glareEffect: true });\n\n// Add particle system to hero section\nparticles('#hero', { count: 30, interactive: true, connectLines: true });\n```\n\n## CSS Classes\n\n### Glass Effect\n```css\n.glass       /* Standard glass effect */\n.glass-dark  /* Dark variant */\n.glass-strong /* Enhanced blur */\n```\n\n### Orbs\n```css\n.orbs-container /* Container for orb effects */\n.orb           /* Individual orb styling */\n.orb-small     /* Small orb (20px) */\n.orb-medium    /* Medium orb (40px) */\n.orb-large     /* Large orb (80px) */\n```\n\n## Tailwind Integration\n\nCASOON Atlas classes are fully compatible with Tailwind's purge/content system. **The actual CSS bundle size depends entirely on which classes you use** - unused styles are automatically removed during build.\n\n### Bundle Size Optimization\n- Only classes actually used in your templates are included in the final build\n- Subpath imports allow importing only specific style modules (e.g., just glass effects)\n- The ~200KB source size becomes much smaller in production\n- CSS imports use package references instead of relative paths for better build compatibility\n\nIf you're using classes dynamically, add them to your safelist:\n\n```js\n// tailwind.config.js\nmodule.exports = {\n  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],\n  safelist: [\n    'glass',\n    'glass-dark', \n    'glass-strong',\n    'orb',\n    'orb-small',\n    'orb-medium',\n    'orb-large',\n    'orbs-container'\n  ]\n}\n```\n\n## 🧩 Available Components (10+)\n\n### Layout \u0026 Navigation\n- **Modal** - Accessible modal dialogs with focus management\n- **Dropdown** - Flexible dropdown menus with positioning\n- **Tabs** - Accessible tab interfaces with ARIA support\n- **Drawer** - Slide-in panels and sidebars\n\n### Content \u0026 Data\n- **Accordion** - Collapsible content sections\n- **Card** - Flexible card components with variants\n\n### Feedback \u0026 Overlays\n- **Tooltip** - Contextual tooltips with smart positioning\n- **Toast** - Non-blocking notification system\n\n### Forms \u0026 Inputs\n- **Form** - Form state management with validation\n- **Button** - Interactive button states and variants\n\n### Quick Example\n```typescript\nimport { createModal, createTabs, createToastManager } from '@casoon/atlas-components';\n\n// Create modal with backdrop\nconst modal = createModal({ closeOnBackdrop: true, trapFocus: true });\n\n// Create tabs system\nconst tabs = createTabs(['home', 'about', 'contact']);\n\n// Create toast notifications\nconst toast = createToastManager();\ntoast.show('Welcome to CASOON Atlas!', { type: 'success' });\n```\n\n## 🌎 Live Demo\n\n```bash\n# Start the interactive demo\npnpm demo\n\n# Visit http://localhost:3000\n# Explore all effects and components interactively!\n```\n\n## Development\n\n```bash\n# Clone and setup\ngit clone \u003crepo\u003e\ncd casoon-atlas\npnpm install\n\n# Build all packages\npnpm build\n\n# Start demo server\npnpm demo\n\n# Clean builds\npnpm clean\n\n### Project Structure\n\n```\ncasoon-atlas/\n├── packages/\n│   ├── styles/          # @casoon/atlas-styles\n│   │   ├── src/\n│   │   │   ├── index.css\n│   │   │   ├── glass.css\n│   │   │   └── orbs.css\n│   │   └── package.json\n│   ├── effects/         # @casoon/atlas-effects\n│   │   ├── src/\n│   │   │   ├── ripple/\n│   │   │   ├── orbs/\n│   │   │   ├── parallax/\n│   │   │   └── index.ts\n│   │   ├── tsup.config.ts\n│   │   └── package.json\n│   ├── components/      # @casoon/atlas-components\n│   └── all/            # @casoon/atlas\n├── pnpm-workspace.yaml\n└── package.json\n```\n\n## 🔧 Architecture \u0026 Design Principles\n\n### SSR Compatibility\nAll effects are designed to be SSR-safe:\n- No top-level DOM access\n- Function-based initialization only\n- Cleanup functions prevent memory leaks\n\n### Framework Agnostic\nWorks seamlessly with:\n- **React** - Custom hooks and effects\n- **Vue 3** - Composables and reactivity\n- **Svelte** - Actions and stores  \n- **Astro** - Client directives\n- **Vanilla JS** - Direct function calls\n\n### Tree Shaking\nOptimized for minimal bundle size:\n- Named exports only (no default exports)\n- `sideEffects: false` for JavaScript packages\n- Subpath imports for granular control\n- CSS modules can be imported individually\n\n## 📊 Bundle Sizes\n\n| Package | Raw Size | Modules | Notes |\n|---------|----------|---------|----------|\n| @casoon/atlas-styles | Purged by Tailwind | 6 CSS modules | Only used classes included in build |\n| @casoon/atlas-effects | ~2.2KB JS | 13 effects | Tree-shakeable, minified bundles |\n| @casoon/atlas-components | ~1.8KB JS | 10 components | Headless components, minimal JS |\n| @casoon/atlas | ~4KB JS | Re-exports | Combined size of effects + components |\n\n## 🌐 Browser Support\n\n| Feature | Chrome | Firefox | Safari | Edge |\n|---------|--------|---------|--------|---------|\n| Core Effects | 88+ | 94+ | 14+ | 88+ |\n| Backdrop Filters | 76+ | 103+ | 14+ | 79+ |\n| CSS Grid/Flexbox | 57+ | 52+ | 10.1+ | 16+ |\n| IntersectionObserver | 58+ | 55+ | 12.1+ | 17+ |\n\n## 🚀 Performance\n\n### Optimization Features\n- **RAF-based animations** for smooth 60fps performance\n- **Intersection Observer** for efficient scroll-based effects\n- **Passive event listeners** to improve scroll performance\n- **Automatic cleanup** prevents memory leaks\n- **Reduced motion support** respects user preferences\n\n### Best Practices\n```typescript\n// ✅ Good: Cleanup effects properly\nconst cleanupFunctions = [\n  ripple('.btn'),\n  tilt('.card'),\n  particles('#bg')\n];\n\n// Cleanup on page unload\nwindow.addEventListener('beforeunload', () =\u003e {\n  cleanupFunctions.forEach(cleanup =\u003e cleanup());\n});\n\n// ✅ Good: Conditional loading\nif (window.matchMedia('(hover: hover)').matches) {\n  tilt('.interactive-element');\n}\n```\n\n## 🎨 Styling Approach\n\n### Tailwind v4 Integration\n```css\n/* Your main CSS file */\n@import \"tailwindcss\";\n@import \"@casoon/atlas-styles\";\n\n/* Override design tokens */\n@theme {\n  --cs-brand: #your-brand-color;\n  --cs-radius: 12px;\n}\n```\n\n### Custom Properties\nAll styles use CSS custom properties for easy theming:\n```css\n:root {\n  /* Brand colors */\n  --cs-brand: #4f7cff;\n  --cs-success: #22c55e;\n  --cs-danger: #ef4444;\n  \n  /* Glass effects */\n  --cs-glass-blur: 16px;\n  --cs-glass-bg-light: rgba(255, 255, 255, 0.1);\n  \n  /* Animation timing */\n  --cs-transition: 180ms cubic-bezier(0.2, 0.6, 0.2, 1);\n}\n```\n\n## 🧪 Testing\n\n### Running Tests\n```bash\n# Run all tests\npnpm test\n\n# Test specific package\npnpm test --filter @casoon/atlas-effects\n\n# Watch mode\npnpm test --watch\n```\n\n### Demo \u0026 Development\n```bash\n# Start interactive demo\npnpm demo\n# Opens http://localhost:3000 with live examples\n\n# Build demo for production\npnpm demo:build\n\n# Development mode (watch all packages)\npnpm dev\n```\n\n## 🤝 Contributing\n\nWe welcome contributions! Please see our [Contributing Guide](./CONTRIBUTING.md) for details.\n\n### Development Setup\n```bash\n# Clone the repository\ngit clone https://github.com/casoon/atlas.git\ncd atlas\n\n# Install dependencies\npnpm install\n\n# Build all packages\npnpm build\n\n# Start demo for testing\npnpm demo\n```\n\n### Project Structure\n```\ncasoon-atlas/\n├── packages/\n│   ├── styles/          # CSS utilities and design system\n│   ├── effects/         # JavaScript effects\n│   ├── components/      # Headless UI components  \n│   └── all/            # Meta-package\n├── demo/               # Interactive demo application\n├── docs/               # Documentation\n└── tools/              # Build and development tools\n```\n\n## 📚 Documentation\n\n- **[Styles Documentation](./packages/styles/README.md)** - Complete CSS system guide\n- **[Effects Documentation](./packages/effects/README.md)** - JavaScript effects API\n- **[Components Documentation](./packages/components/README.md)** - Headless components guide\n- **[Interactive Demo](http://localhost:3000)** - Live examples (run `pnpm demo`)\n\n## 🔄 Changelog\n\nSee [CHANGELOG.md](./CHANGELOG.md) for detailed version history.\n\n## 🛡️ Security\n\nFor security concerns, please email joern.seidel@casoon.de\n\n## 📄 License\n\nMIT License - see [LICENSE](./LICENSE) file for details.\n\n## 👨‍💻 Author\n\n**Jörn Seidel**  \n🌐 [CASOON](https://www.casoon.de)  \n📧 joern.seidel@casoon.de  \n💼 [LinkedIn](https://www.linkedin.com/in/casoon)  \n🐙 [GitHub](https://github.com/casoon)\n\n---\n\n**Built with ❤️ for the modern web**\n\nCASOON Atlas is designed to make beautiful, interactive UIs accessible to every developer, regardless of framework choice or experience level.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcasoon%2Fatlas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcasoon%2Fatlas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcasoon%2Fatlas/lists"}