✨ Features

- 🎯 40+ animations (fade, zoom, flip with all directions)
- 📝 Text animations (split by word/letter)
- 🔢 Number counters
- 🎨 Text effects (shimmer, fluid)
- 📦 Only 8KB Gzipped
- 🚀 Zero dependencies
- ♾ 60fps performance
- 🪤 Web components supported
- 🔧 Framework agnostic
- ⚡ CDN powered by jsDelivr & Cloudflare

📦 Installation

$3

``html

`

$3

`bash
npm install usal

Framework-specific packages


npm install @usal/react # For React/Next.js
npm install @usal/solid # For Solid/SolidStart
npm install @usal/svelte # For Svelte/SvelteKit
npm install @usal/vue # For Vue/Nuxt
npm install @usal/lit # For Lit
npm install @usal/angular # For Angular
`

🚀 Framework Setup

$3

`jsx
import { USALProvider } from '@usal/react';
{children};
`

$3

`jsx
import { USALProvider } from '@usal/solid';
{props.children};
`

$3

`js
import { usal } from '@usal/svelte';
// USAL auto-initializes globally
`

$3

`js
import { USALPlugin } from '@usal/vue';
createApp(App).use(USALPlugin).mount('#app');
//for Nuxt
export default defineNuxtConfig({
modules: ['@usal/vue/nuxt']
//...
`

$3

`js
import { usal } from '@usal/lit';
// USAL auto-initializes globally
`

$3

`js
import { USALModule } from '@usal/angular';
@Component({imports: [USALModule]})
export class AppComponent
`

📐 Basic Usage

`html










`

📖 Complete API Documentation or https://usal.dev/#api

🎲 Demos

!Animations

!Text Animations

!Count Animations

!Split Animations

📊 Packages Overview

| Package | Version |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| usal | !npm |
| @usal/react | !npm |
| @usal/solid | !npm |
| @usal/svelte | !npm |
| @usal/vue | !npm |
| @usal/lit | !npm |
| @usal/angular` | !npm |

📈 JavaScript Animation Frameworks Comparison (2025)

$3

| Framework | Bundle Size (gzip) | React | Vue | Angular | Svelte | Solid | Lit | Vanilla |
| -------------- | ------------------ | --------- | --------- | --------- | --------- | --------- | --------- | ------- |
| 🚀 USAL.js | ~8KB | ✅ Native | ✅ Native | ✅ Native | ✅ Native | ✅ Native | ✅ Native | ✅ |
| Motion One | Variable (~small) | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ✅ |
| GSAP | ~28KB | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Anime.js v4 | ~27KB | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Lottie | ~60KB | ⚠️ | ⚠️ | ⚠️ | ⚠️ | ⚠️ | ⚠️ | ✅ |
| AOS | ~8KB | ⚠️ | ⚠️ | ⚠️ | ❌ | ❌ | ❌ | ✅ |
| SAL.js | ~2.7KB | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ |

$3

| Framework | Split (Letters/Words/Items) | Counters | Scroll Trigger | Timeline | SVG | Learning |
| ----------- | --------------------------- | --------- | -------------- | ----------- | --------- | ------------- |
| USAL.js | ✅ Core | ✅ Core | ✅ Core | ✅ Core | ❌ | Very Easy |
| Motion | ❌ | ❌ | ✅ Core | ⚠️ Variants | ✅ Core | Medium |
| GSAP | ⚠️ Plugin | ⚠️ Plugin | ✅ Plugin | ✅ Advanced | ⚠️ Plugin | Complex |
| Anime.js v4 | ✅ Core | ✅ Core | ✅ Core | ✅ Core | ✅ Core | Medium |
| Lottie | ⚠️ via AE | ⚠️ via AE | ❌ | ✅ Core | ✅ Core | Complex |
| AOS | ❌ | ❌ | ✅ Core | ❌ | ❌ | Very Easy |
| SAL.js | ❌ | ❌ | ✅ Core | ❌ | ❌ | Very Easy |

Legend:

- ✅ Native/Core support
- ⚠️ Plugin/Wrapper required
- ❌ Not supported

🙏 Acknowledgments

USAL.js was inspired by:

- AOS.js - Pioneering attribute-based animations
- SAL.js - Lightweight performance optimization
- Tailwind CSS - Utility-first naming conventions

---

📄 License

MIT License © 2025 Italo Almeida (@italoalmeida0)