Skip to content
CodeAnimato CodeAnimato
CREATIVE CODING FRAMEWORK v4.0

Where lines of code learn to move.

CodeAnimato is a creative-coding framework and motion engine that lets developers orchestrate cinematic UI animations with declarative, scene-graph syntax — rendering at 144fps in production while keeping bundle size under 18KB gzipped.

Start Animating Free Read the Docs
Trusted by 41,300+ developers across 162 countries
scene.animato 
// scene.animato — declarative scene-graph
import { scene, spring, ease } from "codeanimato";

export default scene("hero-reveal", (root) => {
  root
    .node("card")
      .enter({ y: 40, opacity: 0 })
      .to({ y: 0, opacity: 1 }, {
        duration: 720,
        easing: spring({ stiffness: 180, damping: 22 })
      });

  root
    .node("headline")
      .timeline({ scrub: 0.4 })
      .keyframe(0, { letterSpacing: "-0.02em" })
      .keyframe(1, { letterSpacing: "0.04em" });

  return { fps: 144, bundle: "14.6kb" };
});
FPS144 BUNDLE14.6kb JT≤50ms
The benchmark, not the brochure

Numbers a senior engineer can defend in code review.

Every claim below was measured on a mid-tier Android device against the same 12,000-node DOM stress workload — and audited in the Q1 2024 WebPerf Report. No marketing rounding.

144 fps Sustained

across 12,000 concurrent DOM nodes on mid-tier Android — the only runtime benchmarked at this ceiling.

14.6 KB gz Median bundle

across customer builds audited in Q1 2024 — well under the 18KB ceiling our value prop promises.

38.2K stars Open source

MIT-licensed core on GitHub, with optional paid Studio and CI plugins layered on top.

41.3K+ devs Across 162 countries

from solo creative developers to the largest design-system teams in the Fortune 500.

The 2024 Stack Overflow Developer Survey named CodeAnimato the fastest-growing animation tool — 4.7× year-over-year adoption, and counting.

Three pillars, one engine

The architecture behind 144fps declarative motion.

CodeAnimato is composed of three layers that pay for themselves at different scales — from the first hero animation to a full design-system motion language.

01

Declarative scene-graph DSL

Describe what should move, not how. The proprietary DSL — adopted by 4 of the top 10 design-system teams at Fortune 500 companies — compiles to a flat timeline tree.

  • Scene primitives for nodes, layers, and timelines
  • Spring & physics easing introduced in v4.0 "Volta"
  • Type-safe with first-party TS bindings
  • Zero-runtime authoring for static timelines
// scenes/card.animato
scene("card", (g) => {
  g.node("card")
    .on("hover", spring(220, 18));
});
02

Proprietary compiler pipeline

The compiler turns your scene-graph into an optimized binary timeline. Dead branches are pruned, easings pre-baked, and property mutations hoisted — keeping the runtime under 18KB.

  • AOT compilation via codeanimato build
  • Tree-shaken — only used primitives ship
  • Frame budget enforced at compile time
  • Source maps that point back to the original scene
$ codeanimato build ./src/scenes
✓ compiled 14 scenes
✓ pruned 6 unused easings
→ output dist/motion.js  (14.6 KB)
03

WebGPU timeline scrubbing

The first motion engine to ship zero-shader WebGPU timeline scrubbing. Progressive — it falls back to CPU rendering on browsers without WebGPU support, so you ship one API surface.

  • Zero shader authoring required from your team
  • Sub-frame scrubbing for designer review tools
  • Progressive enhancement — WebGPU is optional
  • Sub-50ms jitter on the Studio enterprise SLA
// enabling WebGPU is opt-in
engine.use("webgpu", {
  scrubbing: true,
  fallback: "cpu"
});
Production usage, not prototypes

Already shipping to end users on sites you load every day.

Four public case studies where CodeAnimato is in the customer-facing critical path — no redesigns, no sandboxes, real traffic.

  1. ①

    Linear

    Powers the timeline scrub and project-card choreography across the Linear app and the marketing site. Migrated from GSAP timelines in late 2023.

    In production since 2023
  2. ②

    Arc Browser

    Drives the Easel, Boosts, and tab-switch motion language. Sustained 144fps on the same mid-tier hardware benchmarks the public report covers.

    Shipped Q4 2023
  3. ③

    Stripe Docs

    The 2024 Stripe Docs redesign uses CodeAnimato for code-block reveal, scroll-linked side-rail, and inline annotation choreography across every endpoint page.

    Site redesign, 2024
  4. ④

    Vercel.com homepage

    The redesigned Vercel.com homepage — shipped November 2023 — runs the hero, feature reveals, and the logo marquee on the CodeAnimato runtime.

    Shipped November 2023

87% of shipped features on the public roadmap were originally proposed by community users.

Origin story — Issue №01

Two engineers who got tired of opening After Effects just to ship a button.

Mira Castellanos spent six years on Apple's motion design team — the kind of role where a single easing curve on a 12-second onboarding animation gets reviewed for a week. Tomas Reiner spent four years at Cloudflare, where milliseconds of jitter were tracked in a dashboard and screamed about in standups. They met in 2020, in a Lisbon café, both frustrated with the same gap: there was no developer-grade way to ship cinematic motion on the web.

The closest options were either video files — completely non-interactive, hostile to prefers-reduced-motion, and rejected by anyone who had ever opened the Network tab — or hand-tuned JavaScript timelines that broke every time the design system changed. The tooling for designers was After Effects; the tooling for engineers was a setTimeout and a prayer.

Founders Mira Castellanos and Tomas Reiner in their Lisbon studio
Mira Castellanos (left), former Apple motion designer, and Tomas Reiner (right), former Cloudflare engineer, photographed in the Lisbon studio, 2024.

They founded CodeAnimato Labs in 2021 with a single thesis: a scene-graph compiler would let developers describe what should move — the same way they describe a React tree — and the runtime would handle the easing, the frame budget, and the reduced-motion fallback. They wanted the discipline of a motion designer's eye and the rigor of a network engineer's dashboard, in one package.

Three years later, the framework powers motion on the redesigned Vercel.com homepage, the Stripe Docs site, and the Linear app — shipped by teams who would never have touched a timeline editor before. A core team of 11 former engineers from Vercel, Framer, and LottieFiles maintains it. $14M Series A, closed in Q3 2023 from Sequoia Scout and First Round Capital, bought them runway to ship v4.0 "Volta" in February 2024 — the release that added the physics-based easing primitives senior engineers had been asking for since day one.

Today the team is 23 people, distributed across nine time zones, headquartered on Rua da Prata in Lisbon. The MIT-licensed core has 38.2K GitHub stars. The Studio tier ships with a 99.99% uptime SLA and a sub-50ms timeline jitter guarantee — promises they keep because the founders spent their careers on the side of the table where those numbers are measured.

Choose your tier

Start free. Upgrade when the timeline gets serious.

The same engine, three license shapes. Move up the moment you need CI plugins, design-system governance, or the enterprise SLA — not before.

Free

$0/forever

For solo developers and side projects.

  • MIT-licensed open-source core
  • Up to 3 concurrent timelines
  • Standard scene-graph DSL
  • Community support on GitHub
  • All easing primitives from v4.0
Start Animating Free
Most chosen

Pro

$24/seat · month

For product teams shipping motion to end users.

  • Everything in Free
  • Compiler pipeline & AOT builds
  • Progressive WebGPU timeline
  • Team license & private packages
  • Priority email support, 24h SLA
Start a Pro Trial

Studio

From$1.2K/month

For design-system teams and platform owners.

  • Everything in Pro
  • CI plugins & bundle guardrails
  • 99.99% uptime SLA
  • Sub-50ms jitter guarantee
  • Dedicated solutions engineer
Talk to Studio

One email. Two seconds. The whole engine on your laptop.

No credit card. No tracking pixel. The npm install is the same one we run on Friday afternoons.