USAL.js

Quick Start

<script src="https://cdn.usal.dev/latest"></script>

# Install
npm install usal

# Framework-specific packages:
npm install @usal/react
npm install @usal/solid
npm install @usal/svelte
npm install @usal/vue
npm install @usal/lit
npm install @usal/angular

Framework Setup

// Installed via CDN, initializes automatically, instance in window.USAL

// React (Next.js)
import { USALProvider } from '@usal/react';
<USALProvider>{children}</USALProvider>

// Solid (SolidStart)
import { USALProvider } from '@usal/solid';
<USALProvider>{props.children}</USALProvider>

// Svelte (SvelteKit)
import { usal, createUSAL } from '@usal/svelte';
const usalInstance = createUSAL();

// Vue (Nuxt)
export default defineNuxtConfig({
modules: ['@usal/vue/nuxt']

// Lit
import { usal, useUSAL } from '@usal/lit';
const usalInstance = useUSAL();

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

Basic Animations

<div data-usal="fade-u">Fade Up</div>
<div data-usal="fade-dr duration-800">Fade Down-Right</div>

Zoom Animations

<div data-usal="zoomin">Scale from 60% to 100%</div>
<div data-usal="zoomout-ur blur duration-1200">Complex zoom</div>

Flip Animations

<div data-usal="flip-u">3D flip from top</div>
<div data-usal="flip-dr duration-1500">Diagonal flip</div>

Text Split Animations

Each Word Appears Separately

Each Letter Appears Separately

Zoom Out With Blur Per Word

Modern web development is all about smooth user experiences. Dream big, code bigger, animate everything in between.

Fluid Weight Animation

SHIMMER LETTER BY LETTER

<p data-usal="fade-u split-word split-delay-200">Each Word</p>
<p data-usal="fade-u split-letter split-delay-50">Each Letter</p>
<h2 data-usal="text-fluid split-letter duration-2500">Fluid Weight</h2>
<p data-usal="text-shimmer split-letter duration-1000">Shimmer</p>

Count Animations

<div data-usal="count-[1234] duration-2000">1234</div>
<div data-usal="count-[98.5] duration-2500">98.5%</div>

Modifiers & Options

<div data-usal="fade-u once">Animate only once</div>
<div data-usal="zoomin linear">Linear easing</div>
<div data-usal="fade-ul blur duration-2000">With blur</div>

Cards & Timing

Split Items Animation

• Item A
• Item B
• Item C
• Item D
• Item E
• Item F
• Item G
• Item H

<ul data-usal="split-item split-fade-r split-delay-100">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Dynamic Content Test

// Add items dynamically
const item = document.createElement('div');
item.textContent = 'New Item';
item.setAttribute('data-usal', 'fade-u duration-800');
parent.appendChild(item);

API Documentation

// Basic animations
fade, fade-u, fade-d, fade-l, fade-r
fade-ul, fade-ur, fade-dl, fade-dr

// Zoom in animations
zoomin, zoomin-u, zoomin-d, zoomin-l, zoomin-r
zoomin-ul, zoomin-ur, zoomin-dl, zoomin-dr

// Zoom out animations
zoomout, zoomout-u, zoomout-d, zoomout-l, zoomout-r
zoomout-ul, zoomout-ur, zoomout-dl, zoomout-dr

// Flip animations
flip, flip-u, flip-d, flip-l, flip-r
flip-ul, flip-ur, flip-dl, flip-dr

// Split by words
split-word

// Split by letters
split-letter

// Split by child items
split-item

// Split with custom animation
split-fade-r, split-fade-u, split-zoomin

// Split delay in milliseconds
split-delay-50, split-delay-100

// count-[1234], count-[98.5], count-[42,350]
count-[number]

// Duration in milliseconds
duration-500, duration-1000, duration-2000

// Delay in milliseconds
delay-200, delay-500, delay-1000

// Easing functions
linear, ease, ease-in, ease-out

// Other modifiers
blur, once, threshold-50

// Shimmer effect
text-shimmer

// Fluid weight animation
text-fluid

<!-- Vanilla JS -->
<div data-usal="fade duration-500">Content</div>

<!-- React/Next.js -->
<div data-usal="fade duration-500">Content</div>

<!-- Solid/SolidStart -->
<div data-usal="fade duration-500">Content</div>

<!-- Svelte/SvelteKit -->
<div use:usal={'fade duration-500'}>Content</div>

<!-- Vue/Nuxt -->
<div v-usal="'fade duration-500'">Content</div>

<!-- Lit -->
<div ${usal('fade duration-500')}>Content</div>

<!-- Angular -->
<div [usal]="'fade duration-500'">Content</div>

<!-- Automatic ID (re-animates when element is recreated) -->
<div data-usal="fade-u">Auto ID</div>

<!-- Custom ID (prevents re-animation) -->
<div data-usal="fade-u" data-usal-id="unique-element">Fixed ID</div>

// Initial configuration
window.USAL.config({
  maxConcurrent: 100,    // Max concurrent animations
  duration: 1000,       // Default duration (ms)
  delay: 0,             // Default delay (ms)
  threshold: 30,        // Default threshold (%)
  splitDelay: 30,       // Default split delay (ms)
  once: false           // Run animation only once
});

// Can be reconfigured later
window.USAL.config({
  duration: 2000,       // Change duration
  threshold: 50         // Change threshold
});

// Clean up when done
window.USAL.destroy();

Framework Comparison