Getting Started

Wiggle makes motion graphics from a script. You write a composition in TypeScript and the Studio previews it live as you edit, then exports it to a video file, all in a native macOS app.

A composition

A composition is a single .ts file that calls composition(...) once. The Studio runs the file to produce the document and renders it live as you edit.

composition({ width: 1920, height: 1080, fps: 30, duration: "3s", background: "#0E1116" }, (comp) => {
  const [cx, cy] = comp.center;
  comp.add(text("Hello, Wiggle", { size: 96, weight: 700, color: "#FFFFFF" }))
    .x(cx)
    .y(cy)
    .enter.rise({ by: 24, ease: { damping: 200 } });
});

The Studio

You work entirely in the Studio. Open a composition and it shows a live preview beside the editor: as you type, the canvas updates, you can scrub the timeline, and you can drag a layer or its anchor point directly on the canvas. Use File to open an existing script or create a new one.

The editor understands the API, so there is no setup or build step. It completes names as you type, shows a symbol's type and documentation when you hover over it, and shows a call's parameters as you fill them in.

When the motion is right, use Export to write a video file. Choose H.264 (.mp4) for delivery, or ProRes 4444 (.mov) for an editing-grade master with alpha.