A comprehensive, modern UI effects library built for Tailwind v4 and the modern web.
CASOON 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.
| Package | Description | Version |
|---|---|---|
| @casoon/atlas-styles | Complete Tailwind v4 design system | 0.1.0 |
| @casoon/atlas-effects | Interactive JavaScript effects | 0.2.0 |
| @casoon/atlas-components | Headless UI components | 0.1.0 |
| @casoon/atlas | Meta-package with namespaces | 0.2.0 |
# Install everything
npm install @casoon/atlas
# Or individual packages
npm install @casoon/atlas-styles @casoon/atlas-effects @casoon/atlas-componentsimport { ui, fx, effects, utils, atlas } from '@casoon/atlas';
// UI Components
const modal = ui.modal(element, { size: 'lg' });
const tabs = ui.tabs(container);
const toast = ui.toast();
// Effect Composition with fx builder
fx(element)
.add(effects.ripple())
.add(effects.tilt({ intensity: 15 }))
.apply();
// For state management, we recommend nanostores:
// npm install nanostores
import { atom } from 'nanostores';
const count = atom(0);
// Quick Init (auto-discovers data-atlas attributes)
atlas.init();// Effects
import { ripple, tilt, parallax, particles } from '@casoon/atlas-effects';
// Components
import { createModal, createTabs, createToastManager } from '@casoon/atlas-components';
// Styles
import '@casoon/atlas-styles';
import '@casoon/atlas-styles/glass.css';| Effect | Description |
|---|---|
ripple |
Interactive click/touch ripple animations |
tilt |
3D tilt effect with physics and glare |
parallax |
Scroll-based parallax movement |
magnetic |
Cursor-attracted magnetic fields |
glow |
Dynamic glow and lighting |
| Effect | Description |
|---|---|
particles |
Configurable particle systems |
orbs |
Floating animated orb particles |
glassEffects |
Interactive glassmorphism |
morphing |
Shape and border-radius morphing |
wave |
Sine wave movement animations |
| Effect | Description |
|---|---|
cursorFollow |
Elements following mouse |
scrollReveal |
Viewport-triggered animations |
typewriter |
Animated text typing |
| Effect | Description |
|---|---|
viewTransition |
View Transitions API wrapper |
gesture |
Touch gesture recognition |
customCursor |
Custom cursor effects |
themeTransition |
Smooth theme switching |
grain |
Film grain overlay |
scrollEffects |
Advanced scroll animations |
accordion card separator resizable scrollArea sidebar bentoGrid
breadcrumb menu menubar navigationMenu tabs pagination
button checkbox input inputOtp label radioGroup select combobox slider switch textarea form
avatar avatarGroup badge calendar carousel progress skeleton table marquee
dialog drawer dropdown modal popover sheet tooltip
command datePicker toast toggle toggleGroup
Factory pattern for standardized component creation with lifecycle hooks:
import { createComponentFactory } from '@casoon/atlas-components';
const MyComponent = createComponentFactory({
name: 'my-component',
defaultOptions: { theme: 'light' },
setup(element, options) {
return {
state: { active: false },
methods: {
toggle() {
this.state.active = !this.state.active;
},
},
};
},
});Fluent builder for combining multiple effects:
import { fx } from '@casoon/atlas-effects';
// Chain effects
const cleanup = fx(element)
.add(ripple({ color: '#3b82f6' }))
.add(tilt({ intensity: 10 }))
.add(glow({ color: '#8b5cf6' }))
.apply();
// Use presets
fx(element).preset('interactive').apply();
fx(element).preset('hero').apply();For state management, we recommend established libraries:
// nanostores (~1KB) - Framework-agnostic, minimal
import { atom, computed } from 'nanostores';
const count = atom(0);
const doubled = computed(count, (c) => c * 2);
count.subscribe((value) => console.log(value));
count.set(5);Recommended libraries:
- nanostores - Minimal, framework-agnostic
- zustand - React-focused but vanilla-compatible
- @preact/signals - Fast reactive primitives
Centralized keyframes and spring physics:
import {
registerAnimation,
animate,
animateWithSpring,
EASING_PRESETS,
} from '@casoon/atlas-components';
// Register custom animation
registerAnimation('customFade', {
keyframes: [
{ opacity: 0, transform: 'translateY(20px)' },
{ opacity: 1, transform: 'translateY(0)' },
],
options: { duration: 300, easing: EASING_PRESETS.spring },
});
// Use animation
await animate(element, 'customFade');
// Spring physics
animateWithSpring({
from: 0,
to: 100,
stiffness: 200,
damping: 20,
onUpdate: (value) => (element.style.left = `${value}px`),
});Extend components and effects with lifecycle hooks:
import { registerPlugin } from '@casoon/atlas-components';
registerPlugin({
name: 'analytics',
onComponentCreate(component) {
track('component_created', { name: component.name });
},
onEffectApply(effect, element) {
track('effect_applied', { effect: effect.name });
},
});
// Built-in plugins
import { debugPlugin, performancePlugin, a11yPlugin } from '@casoon/atlas-components';
registerPlugin(debugPlugin);Schema-based runtime validation:
import { schema, validate } from '@casoon/atlas-components';
const optionsSchema = schema.object({
size: schema.enum(['sm', 'md', 'lg']).default('md'),
duration: schema.number().min(0).max(5000).default(300),
enabled: schema.boolean().default(true),
});
const result = validate(userOptions, optionsSchema);
if (result.valid) {
// Use result.value with defaults applied
}.glass /* Standard glass effect */
.glass-dark /* Dark variant */
.glass-strong /* Enhanced blur */:root {
--cs-brand: #4f7cff;
--cs-glass-blur: 16px;
--cs-transition: 180ms cubic-bezier(0.2, 0.6, 0.2, 1);
}import { useEffect, useRef } from 'react';
import { fx, effects } from '@casoon/atlas';
function InteractiveCard({ children }) {
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!ref.current) return;
return fx(ref.current).add(effects.tilt()).add(effects.glow()).apply();
}, []);
return <div ref={ref}>{children}</div>;
}<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import { fx, effects } from '@casoon/atlas';
const card = ref(null);
let cleanup;
onMounted(() => {
cleanup = fx(card.value).add(effects.tilt()).apply();
});
onUnmounted(() => cleanup?.());
</script>
<template>
<div ref="card">Interactive Card</div>
</template><script>
import { onMount } from 'svelte';
import { fx, effects } from '@casoon/atlas';
let element;
onMount(() => {
return fx(element)
.add(effects.ripple())
.add(effects.tilt())
.apply();
});
</script>
<div bind:this={element}>Interactive Element</div># Clone and setup
git clone https://github.com/casoon/atlas.git
cd atlas
pnpm install
# Build all packages
pnpm build
# Run tests
pnpm test
# Lint
pnpm lint| Feature | Chrome | Firefox | Safari | Edge |
|---|---|---|---|---|
| Core Effects | 88+ | 94+ | 14+ | 88+ |
| View Transitions | 111+ | - | 18+ | 111+ |
| Backdrop Filters | 76+ | 103+ | 14+ | 79+ |
See CHANGELOG.md for version history.
- Base Component System with lifecycle hooks
- Effect Composition API (fx builder)
- Recommends nanostores for state management
- Animation Registry with spring physics
- Plugin System for extensibility
- Config Validation with schemas
- 40+ UI Components
- 20+ Effects including View Transitions, Gestures, Custom Cursor
MIT License - see LICENSE
Built with care for the modern web