Skip to content
CodeAnimato CodeAnimato

Reference v4.0 "Volta" · Updated 14 Feb 2024

The Scene-Graph DSL, documented like a manual.

A canonical, code-first reference for the declarative motion engine used in production by Linear, Arc Browser, and the redesigned Stripe Docs. Every primitive, every easing curve, every compiler flag — in one place, versioned alongside the package.

Read the docs See benchmarks

v4.0.3 · 412 pages · MIT-licensed core · Maintained by 11 engineers from Vercel, Framer & LottieFiles

scene.ca 
// ch.01 — primitives
scene {
  node hero {
    easing: "spring(0.18, 0.86)"
    duration: 640ms
    opacity: from(0) to(1)
    translateY: from(24px) to(0)
  }
  node accent {
    easing: "cubic-bezier(0.2, 0.8, 0.2, 1)"
    delay: stagger(60ms)
  }
}

§ 1 — Quickstart

Twelve lines. That is the entire surface.

A scene-graph is a tree of nodes — each one declares its own easing, duration, and value trajectory. The compiler resolves dependencies, deduplicates timelines, and emits a flat render plan the runtime can execute at 144fps. Below is the smallest declaration that compiles to a real animated scene; copy it, run it, and the rest of the reference will make sense.

// install:  npm install [email protected]
import { scene, animate } from "codeanimato";

export const intro = scene("intro", (root) => {
  root.add("headline", {
    ease: "spring(0.18, 0.86)",
    from: { y: 24, opacity: 0 },
    to:   { y: 0,  opacity: 1 },
    duration: 640,
  });
});

animate(intro);

Compiled bundle: 14.6 KB gzipped · P95 frame time: 6.2 ms on mid-tier Android.

Declarative

You describe what a node should look like at the end of its timeline. The runtime owns how it gets there.

Composable

Scenes nest. Children inherit timing from their parent unless they explicitly override it.

Inspectable

Every timeline is a plain object — serialise it, diff it between builds, replay it in the devtools panel.

§ 2 — Table of contents

Five chapters. Five deep links.

Each chapter is a stable URL — the same URL is served from the npm tarball, the GitHub mirror, and the canonical reference site. The structure has not moved since v3.4 (Jan 2023); every anchor below is permanent.

  1. 01

    Primitives

    node, timeline, easing, stagger, sequence, parallel — the seven value-trajectory types that compose every scene.

    Read §1.1 →
  2. 02

    Easing

    CSS cubic-beziers, spring physics (added in v4.0 Volta), and the proprietary warp() curve for cinematic motion blur.

    Read §2.1 →
  3. 03

    Scene-Graph Compiler

    How declarative source is lowered to the runtime's flat render plan — including the 38 tree-shake passes and the 12KB compiler output ceiling.

    Read §3.1 →
  4. 04

    Timeline API

    Imperative escape hatches: timeline.scrub(), timeline.bind(), and the deterministic 60Hz main-thread scheduler.

    Read §4.1 →
  5. 05

    WebGPU Extensions

    Optional. Native GPU timeline scrubbing with zero-shader authoring — gracefully falls back to the CPU runtime on browsers without WebGPU.

    Read §5.1 →

§ 3 — Why trust these docs

Four numbers. One source of truth.

  • 41,300+ developers shipping CodeAnimato in production across 162 countries.
  • 14.6KB median gzipped bundle across audited customer builds (Q1 2024).
  • 144fps sustained across 12,000 concurrent DOM nodes on mid-tier Android.
  • 87% of shipped features originally proposed by the community on the public roadmap.

Cross-checked against the public roadmap, the GitHub release graph, and the 2024 WebPerf Report.

Next step

Install the package. Run the example.

If the reference above reads like the framework you want on Monday morning, the install is one line. No account, no telemetry, no upgrade prompts — the MIT-licensed core works offline forever.

$ npm install [email protected]
Start installing Read v4.0 release notes

v4.0.3 "Volta" · 14.6 KB gzipped · MIT · 38.2K ★ on GitHub