NEW: Load your scripts through Anime UI →

The Developer-First Animated Website

Anime UI is the open source web standard for animation. Built for modern web apps with full developer control.

Get Started in 30 Seconds
OR
Quick Start with CLI:
npx anime-ui-cli@beta init
$ npx anime-ui-cli@beta init

# Choose your framework and components
# Automatic setup with GSAP animations

import {
FadeIn,
SlideUp,
ParallaxSection
} from "@/components/anime-ui";

export default function Home() {
return (
<ParallaxSection
speed
={0.5}
>
<FadeIn delay={0.2}>
<h1>Beautiful Animations</h1>
</FadeIn>
<SlideUp duration={0.8}>
<p>Powered by GSAP</p>
</SlideUp>
</ParallaxSection>
);
}
GSAP Powered Animations

Why Anime UI?

Anime UI brings professional GSAP-powered animations to your React projects with zero configuration. Use our CLI to scaffold animated components in seconds, or import pre-built animations and customize them to match your design system perfectly.

GSAP Powered

Built on top of GSAP, the industry-standard animation library. Get professional-grade animations with silky-smooth 60fps performance out of the box.

FadeIn60fps
Smooth
SlideUp60fps
Smooth
Parallax60fps
Smooth
ScaleIn60fps
Smooth

Fully Customizable

Every animation is customizable with props. Control duration, delay, easing, and more. Style components with Tailwind or your own CSS.

<FadeIn
duration={1}
delay={0.2}
ease="power2.out"
className="my-custom-class"
>
<h1>Animated Content</h1>
</FadeIn>

// Works with any component
<SlideUp from="bottom">
<Card content />
</SlideUp>

TypeScript First

Built with TypeScript for superior DX. Get full autocomplete, type checking, and inline documentation right in your editor.

// Full type safety
import { FadeIn } from 'anime-ui';

type Props = {
duration?: number;
delay?: number;
ease?: string;
}

// IntelliSense support
<FadeIn
duration={...
// ^ Autocomplete available
/>

Rich Animation Library

Choose from dozens of pre-built animations: FadeIn, SlideUp, ParallaxSection, RevealText, and more. Each optimized for performance and accessibility.

FadeIn
SlideUp
ScaleIn
Parallax

Framework Compatible

Works seamlessly with React, Next.js, and any React-based framework. Server-side rendering ready with proper hydration support.

React
Next.js
Remix
Gatsby
Vite
CRA

Ready to get started?

Choose your framework and start building animated experiences with GSAP-powered components in minutes.

CHOOSE YOUR FRAMEWORK
OR
QUICK START WITH CLI
npx anime-ui-cli@beta init
Scaffold a complete setup with your preferred framework and animation components