Aaroh

Beautiful motion inspired by timeless craftsmanship.

A production-grade, open-source motion engine for the modern web.
Built by Quilonix.

Documentation · Playground · Changelog · Contributing

---

What is Aaroh?

Aaroh is a motion engine designed for developers who care about the feel of their product — not just its function. It provides an elegant, tree-shakeable API for animating anything on the web: DOM elements, SVG, CSS custom properties, and plain JavaScript objects.

Every API, every default, every easing curve is designed to produce motion that feels deliberate, refined, and alive.

Features

• 🌿 < 5 KB for a basic animate() call (gzipped)
• ⚡ Zero-allocation hot path — 60fps without GC pressure
• 🌲 Fully tree-shakeable — pay only for what you import
• 🔵 TypeScript-first — source-of-truth types, not afterthoughts
• 🧲 Spring physics — analytical solver, frame-rate-independent
• 📜 Scroll animation — scroll() + inView() with IntersectionObserver
• ✍️ Text splitting — accessible character/word animation
• 🔌 Plugin system — extend the engine without forking it
• ♿ Accessible — respects prefers-reduced-motion by default
• 🔒 SSR-safe — works in Next.js, Astro, and edge runtimes
• 🌐 Framework adapters — React, Vue, Svelte

---

Quick Start

npm install aaroh
# or
pnpm add aaroh

import { animate } from 'aaroh';

// Animate an element — returns a promise-based control object
const controls = animate(
  '#hero',
  {
    opacity: [0, 1],
    y: [30, 0],
  },
  {
    duration: 600,
    easing: 'ease-out-quint',
  },
);

// Await completion
await controls.finished;
console.log('Animation complete.');

Subpath Imports (Tree-Shaking)

// Only spring solver (~2 KB)
import { createSpringSolver, SPRING_PRESETS } from 'aaroh/spring';

// Only easing functions (~1 KB)
import { easings, cubicBezier } from 'aaroh/easing';

// Scroll & InView (~3 KB)
import { scroll, inView } from 'aaroh/scroll';

// Text splitting (~2 KB)
import { splitText } from 'aaroh/text';

// Low-level engine (plugin authors) (~4 KB)
import { scheduler, interpolate } from 'aaroh/engine';

Framework Adapters

// React
import { useAnimate, useInView } from '@aaroh/react';

function Hero() {
  const { scope, animate } = useAnimate<HTMLDivElement>();

  return (
    <div ref={scope}>
      <button onClick={() => animate('.title', { opacity: [0, 1] })}>
        Reveal
      </button>
      <h1 className="title">Hello World</h1>
    </div>
  );
}

Spring Physics

import { createSpringSolver, SPRING_PRESETS } from 'aaroh/spring';

// Use a named preset
const solver = createSpringSolver(SPRING_PRESETS.snappy, 0, 100);

// Get position at t = 0.3 seconds
const state = solver(0.3);
console.log(state.value); // → 97.3 (nearly settled)
console.log(state.velocity); // → 8.2

Stagger

import { animate, stagger } from 'aaroh';

// Animate 20 cards with cascading delay from center
animate(
  '.card',
  {
    opacity: [0, 1],
    y: [20, 0],
  },
  {
    duration: 500,
    delay: stagger({ each: 40, from: 'center', easing: 'ease-in-quart' }),
  },
);

---

UI Ecosystem

Aaroh includes a complete, themeable UI component library for React, Vue, and Svelte — all powered by a shared design system core.

Quick Install

# React
npm install @aaroh/react-ui @aaroh/ui

# Vue
npm install @aaroh/vue-ui @aaroh/ui

# Svelte
npm install @aaroh/svelte-ui @aaroh/ui

Which Package Do I Need?

Your Framework	Install	Components
React	@aaroh/react-ui + @aaroh/ui	27 React components
Vue	@aaroh/vue-ui + @aaroh/ui	27 Vue components
Svelte	@aaroh/svelte-ui + @aaroh/ui	27 Svelte utilities
Vanilla / Other	@aaroh/ui	CSS + tokens only

Packages

• @aaroh/ui — Framework-independent design system core. Provides design tokens, three built-in themes (heritage, modern, minimal), a runtime theme engine, 27 component CSS files, accessibility primitives, and icon primitives.

• @aaroh/react-ui — 27 accessible, themeable React components. Uses forwardRef, supports all standard React patterns. Works with Next.js, Remix, and Astro.

• @aaroh/vue-ui — 27 Vue components (A-prefix naming: AButton, AInput, etc.) with v-model support and slot-based content. Vue 3.4+ and Nuxt 3 compatible.

• @aaroh/svelte-ui — 27 props-builder functions (e.g., buttonProps()) that return attributes to spread onto native elements. Svelte 5 runes-ready, SvelteKit compatible.

Usage (React example)

import '@aaroh/ui/themes/heritage';
import '@aaroh/ui/components/button';
import { Button } from '@aaroh/react-ui';

function App() {
  return (
    <Button variant="solid" size="md">
      Get Started
    </Button>
  );
}

Full documentation: aaroh.dev/ui

---

Architecture

Aaroh is a monorepo with a clear separation of concerns:

packages/
  aaroh/          # Core motion engine (aaroh on npm)
  react/          # @aaroh/react — motion hooks
  vue/            # @aaroh/vue — motion composables
  svelte/         # @aaroh/svelte — motion actions + stores
  ui/             # @aaroh/ui — design system core (tokens, themes, CSS)
  react-ui/       # @aaroh/react-ui — React UI components
  vue-ui/         # @aaroh/vue-ui — Vue UI components
  svelte-ui/      # @aaroh/svelte-ui — Svelte UI components
  tsconfig/       # Shared TypeScript config (internal)
  tsconfig/       # Shared TypeScript config (internal)

apps/
  docs/           # Documentation site (Astro + Starlight)

Ecosystem

Aaroh is a modular ecosystem — use exactly what you need:

Package	Status	Description
Aaroh Motion (aaroh)	✅ Available	Core animation engine
Aaroh UI (@aaroh/ui)	✅ Available	Design tokens, theme engine, component CSS
Aaroh React UI (@aaroh/react-ui)	✅ Available	React components
Aaroh Vue UI (@aaroh/vue-ui)	✅ Available	Vue components
Aaroh Svelte UI (@aaroh/svelte-ui)	✅ Available	Svelte components
Aaroh Icons	🗺️ Roadmap	Icon pack library
Aaroh Themes	🗺️ Roadmap	Community theme marketplace
Aaroh Angular	🗺️ Roadmap	Angular adapter
Aaroh Web Components	🗺️ Roadmap	Framework-agnostic components
Aaroh Studio	🗺️ Roadmap	Visual motion design tool

Performance

Metric	Target
Single animation overhead	< 0.1ms / frame
100 concurrent animations	< 2ms / frame
Scheduler tick (idle)	< 0.01ms
Allocations in hot path	0 (zero-allocation)

Browser Support

Browser	Minimum Version
Chrome / Edge	90+
Firefox	90+
Safari	15.4+
Safari iOS	15.4+
Chrome Android	90+

---

Contributing

We welcome contributions of all kinds. Please read CONTRIBUTING.md before opening a PR.

git clone https://github.com/quilonix/aaroh.git
cd aaroh
pnpm install
pnpm build
pnpm test

License

MIT © Quilonix

---

Made with craft by Quilonix