# nittygrid (AT3000) — Full Documentation Bundle

Source index: https://docs.nittygrid.com/docs/llms.txt
Auto-generated tables (formats, SVG sanitization rules, render_code API, and built-in generators) are derived directly from the app itself, so they always match it.

<!-- PAGE: index (https://docs.nittygrid.com/docs) -->

# Welcome to nittygrid

> Design, preview, and export LED matrix animations on standard pixel grids or custom SVG layouts—with optional background image alignment, AI generation, and offline exports.

**nittygrid** is a browser tool for making animations for LED displays. You describe what you want (or draw it), see it play on a preview of your display, and export it for your hardware or as a video.

An **LED matrix** is simply a display made of many small lights (LEDs) in a grid, like a tiny screen. Yours can be a plain rectangle (for example 16×16 lights) or any custom shape, like a car light bar, drawn as an SVG file.

> [!IMPORTANT] **Your projects live in your browser.** Nothing is uploaded to an account yet. If you clear your browser data or switch computers, your projects are gone unless you downloaded a **`.ngproj`** file first. Optional accounts and cloud sync are planned.

## How it works

1. **Set up your display**
   Pick a grid size (such as `16×16`) or upload an SVG where each shape is one LED. You can also import a photo of your product and place the LEDs on top of it, so the preview looks like the real thing.
2. **Create an animation**
   Each animation is a block on the canvas called an **animation node**. Make one by asking the AI, picking a built-in effect, writing a little JavaScript, painting pixels, drawing a path, or mapping a video.
3. **Connect and export**
   Wire your nodes from `Start` to `End` to set the playback order. Then export a `.ngrender.zip` for LED controllers or an `.mp4` video for presentations.

## Where to go next

- [File & Export Formats](/docs/formats) — What gets saved where, and which file to use for what.
- [SVG Matrices & Layouts](/docs/svg-matrices) — How to prepare an SVG for a custom-shaped display.
- [Animations & render_code](/docs/animations) — How animations work, and the full JavaScript API.
- [Main Product Tools](/docs/tools) — A tour of every tool in the studio.

## Four ideas to remember

- **Recipe vs. frames.** Inside a project, an animation is stored as a small *recipe* (settings or code), so you can always tweak it. Only when you export does it become a fixed list of colors per frame.
- **Position vs. playback.** Where a node sits on the canvas is just for your own tidiness. Playback follows the wires from `Start` to `End`.
- **One coordinate system.** Every animation draws on a simple grid starting at the top-left `(0, 0)`. Custom SVG layouts are converted to this once, so effects work on any display shape.
- **Built to last.** A `.ngrender.zip` contains plain JSON, the exact `layout.svg`, schemas, and a written spec. You can read it decades from now without nittygrid.

## For AI agents and scripts

Every page here is plain Markdown, with tables generated from the app itself, so the details always match the app.

- **[`/docs/llms.txt`](/docs/llms.txt)** — short index of all pages with raw `.md` links.
- **[`/docs/llms-full.txt`](/docs/llms-full.txt)** — all pages in one plain-text file, including every table and the `render_code` API.
- **Raw Markdown per page:** add `.md` to any URL (for example [`/docs/formats.md`](/docs/formats.md)), or use **Copy Markdown** at the top of a page.

---

<!-- PAGE: formats (https://docs.nittygrid.com/docs/formats) -->

# File & Export Formats

> How nittygrid saves your work in the browser today, how to back up projects (.ngproj) and recipes (.ngrecipe), and how rendered exports (.ngrender.zip, .ngrender.json, MP4) work.

Before the file types, one important thing: **where does your work live while you create?**

## How Project Persistence Works Today (Browser-Only)

nittygrid has no accounts or cloud storage yet. Everything is saved **in your browser, on this device**.

- **Autosave.** Every change (animation nodes, wires, chat history, background alignment) is written to your browser's `localStorage` 300 ms after your last edit. Matrix setup presets live in `IndexedDB`.
- **Tied to this browser.** A different browser, a private window, or another computer starts empty. Clearing your site data erases projects you have not downloaded.
- **Videos can expire.** A video you loaded but did not bake only exists until you close the tab. Click **Bake to pixel animation**, or download a **`.ngproj`** while the tab is open, to keep it.

> [!NOTE] **Coming later: Optional Accounts & Cloud Sync.** Optional accounts and cloud storage are planned. Downloadable `.ngproj` files and offline exports will keep working, so you never depend on our servers.

---

## Two kinds of files

- **Editable files (`.ngproj`, `.ngrecipe`).** They keep your animations as recipes, so you can open and change them later. Use them for backups, moving computers, or sharing.
- **Rendered files (`.ngrender.zip`, `.ngrender.json`, `.mp4`).** They contain the finished result as colors per frame, or as a video. Use them to play the animation on hardware or in other software, without nittygrid.

## Which file do I need?

- [Save or share a whole project → `.ngproj`](#1-editable-project-bundles-ngproj) — The full canvas, matrix setup, background photo, and every node's history in one ZIP.
- [Reuse one animation elsewhere → `.ngrecipe`](#2-reusable-recipe-bundles-ngrecipe) — One editable animation with its source matrix and media.
- [Drive LEDs or archive for the long term → `.ngrender.zip`](#3-rendered-rgba-exports-nittygrid-animation-v1-0) — Exact colors per LED, timing, the SVG layout, schemas, and a written spec.
- [Share a preview → `.mp4`](#4-mp4-video-export-mp4) — A normal video in the LED look, optionally on top of your product photo.

---

## 1. Editable Project Bundles (`.ngproj`)

Download a project from the **Projects** overlay to get a **`.ngproj`** file. Older `.at3proj` files still import.

> [!NOTE] A `.ngproj` is an ordinary **ZIP archive**. Rename it to `.zip` to look inside.

```text
<project-slug>.ngproj (ZIP archive)
├── manifest.json                   Format ID ("at3proj"), schemaVersion (2), and asset inventory
├── project.json                    Matrix setup, animation recipes, canvas graph & chat history
├── notes.md                        Human-readable project summary
├── thumbnail.png|jpg|webp          Project preview thumbnail (optional)
├── background/image.png|jpg|webp   Aligned product/vehicle background photo (optional)
├── matrix/layout.svg               Standalone sanitized SVG hardware layout (when using an SVG matrix)
└── assets/session-1.mp4|webm|...   Embedded video/image assets used by animations (optional)
```

**Good to know**

- **No broken links.** Temporary browser links (`blob:`, `data:`) are replaced by real files inside the ZIP, referenced like this:
  ```json
  { "__at3AssetRef": "background/image.png", "mimeType": "image/png" }
  ```
- **Canvas and chat are kept (schema v2).** `project.json` stores node positions, the `Start` → `End` wires, and each node's chat and dated versions. Older schema v1 projects import as unconnected nodes, because nittygrid will not guess a playback order.
- **SVG in both forms.** `project.json` keeps the complete matrix, including its SVG code. `matrix/layout.svg` is an identical standalone copy for other SVG tools. Import reads and cleans the JSON copy; changing only the standalone file does not change the project.
- **Safe import.** Every restored SVG is cleaned the same way as an uploaded one. Missing referenced background images, thumbnails, or session media stop import instead of silently losing content.

---

## 2. Reusable Recipe Bundles (`.ngrecipe`)

Export a single animation as a **`.ngrecipe`** to reuse it in another project. Older `.at3anim` files still import.

```text
<animation-slug>.ngrecipe (ZIP archive)
├── manifest.json                   format: "at3anim", schemaVersion: 1, entry: "animation.json"
├── animation.json                  Label, timestamp, AgentAnimation recipe & source matrixConfig
├── notes.md
├── preview.png|jpg|webp            Still preview when available (optional)
├── matrix/layout.svg               Source SVG layout snapshot when saved from an SVG matrix (optional)
└── assets/session-1.*              Embedded session media (optional)
```

A recipe stores the generator or `render_code`, not fixed-size pixels, so most recipes adapt to the new project's width `W` and height `H`. If the recipe includes its source matrix (`matrixContext: "saved-with-recipe"`), nittygrid compares it with your current project on import and warns about differences. It never overwrites your project's matrix.

SVG matrices use the same storage rule as projects: `animation.json` keeps the SVG code and LED metadata, and `matrix/layout.svg` is an identical copy for use elsewhere. Import reads the matrix from the JSON. Older recipes with only the JSON copy still import.

---

## 3. Rendered RGBA Exports (`nittygrid-animation` v1.0)

A hardware controller or script should not need to run JavaScript or know nittygrid's generators. It only needs to know **which LEDs exist, how fast frames advance, and the color of each LED in each frame**. That is exactly what this format contains.

> [!IMPORTANT] The `nittygrid-animation` (`"version": "1.0"`) format and the self-contained **`.ngrender.zip`** (or a lone **`.ngrender.json`**) are designed to be readable offline, even if nittygrid no longer exists. The full specification is also at [`/formats/animation/1.0/FORMAT.md`](/formats/animation/1.0/FORMAT.md).

1. **One color model**
   Every LED in every frame is 4 bytes: `R, G, B, A`, each `0`–`255`. Monochrome uses the same layout with `R = G = B`. Bytes are written exactly as rendered, with no gamma change and no premultiplied alpha (`rgba8`, `srgb`, `straight`).
2. **Two ways to name LEDs**
   - **Regular grid (`layout.type: "grid"`):** just `rows`, `cols`, and `order: "row-major"`. LED IDs (`r0c0`, `r0c1`, ...) are derived from the top-left, so the file stays small.
   - **Irregular or SVG layout (`layout.type: "explicit"`):** only the real LEDs are listed in `layout.pixels`, such as `[{ "id": "a", "row": 0, "col": 0 }, ...]`. Gaps never create fake black pixels.
3. **Shapes stay in `layout.svg`**
   The JSON holds colors and timing only. Outlines live in the companion `layout.svg`, linked by `layout.reference.sha256`.
4. **Frames are Base64**
   Each entry in `frames.data` is one full frame in standard RFC 4648 Base64. Its decoded length is always `ledCount * 4` bytes.

### What is inside a `.ngrender.zip`

Unzip it with any tool. The JSON is self-describing, and `README.txt` and `FORMAT.md` include a short Python 3 example for reading it.

```text
<name>.ngrender.zip
├── README.txt                      Plain-text offline decoding guide + short Python 3 teaching example
├── manifest.json                   Package format ("nittygrid-animation-package" v1.0) & SHA-256 checksums
├── animation.nganim.json           The rendered RGBA frames, timing, and LED mapping
├── preview.apng                    Full-color LED-look animated PNG preview for instant viewing
├── FORMAT.md                       Bundled offline copy of the v1.0 format specification
├── animation.schema.json           JSON Schema for animation.nganim.json
├── manifest.schema.json            JSON Schema for manifest.json
├── LICENSE-MIT.txt & LICENSE-CC0.txt Free-license notices for the bundled schemas and specification
└── layout.svg                      Included for SVG matrices; matches layout.reference.sha256
```

### Example: regular 2×2 grid (`layout.type: "grid"`)

Two frames at 20 FPS (50 ms each, 100 ms loop). Each Base64 string decodes to `2 × 2 × 4 = 16` bytes in `r0c0`, `r0c1`, `r1c0`, `r1c1` order:

```json
{
  "format": "nittygrid-animation",
  "version": "1.0",
  "meta": {
    "name": "Four LEDs",
    "exporter": { "name": "nittygrid", "version": "0.10.0-alpha.1" },
    "exportedAt": "2026-10-17T10:00:00Z"
  },
  "layout": {
    "type": "grid",
    "rows": 2,
    "cols": 2,
    "order": "row-major"
  },
  "timing": {
    "mode": "fixed",
    "fps": 20,
    "loop": true
  },
  "frames": {
    "pixelFormat": "rgba8",
    "colorSpace": "srgb",
    "alphaMode": "straight",
    "encoding": "base64",
    "data": [
      "/wAA/wD/AP8AAP///////w==",
      "/////wAA//8A/wD//wAA/w=="
    ]
  }
}
```

### Example: irregular or SVG layout (`layout.type: "explicit"`)

Three real LEDs (`a`, `b`, `c`) over two rows, with a gap in the middle of row 0. Each frame decodes to `3 × 4 = 12` bytes. No fake LED is written for the gap:

```json
{
  "format": "nittygrid-animation",
  "version": "1.0",
  "layout": {
    "type": "explicit",
    "reference": {
      "path": "layout.svg",
      "sha256": "ede530d5b43f5d15bdde4b7b99af5559a9c753971ae98048db88effbba1a4ba4"
    },
    "pixels": [
      { "id": "a", "row": 0, "col": 0 },
      { "id": "b", "row": 0, "col": 2 },
      { "id": "c", "row": 1, "col": 1 }
    ]
  },
  "timing": {
    "mode": "fixed",
    "fps": 20,
    "loop": true
  },
  "frames": {
    "pixelFormat": "rgba8",
    "colorSpace": "srgb",
    "alphaMode": "straight",
    "encoding": "base64",
    "data": [
      "/wAA/wD/AP8AAP//",
      "/////wAA//8A/wD/"
    ]
  }
}
```

---

## 4. MP4 Video Export (`.mp4`)

The video looks like the studio preview, including round or square LEDs, SVG shapes, and optional monochrome.

On browsers with a supported video encoder, frames are calculated and encoded one at a time with fixed timestamps. A slow export takes longer to finish, but the resulting video's duration still follows the selected FPS. H.264 MP4 is preferred; when only VP9 is available, the download uses `.webm`. Older browsers use the existing real-time recorder with a limited frame buffer, so timing can vary slightly.

> [!TIP] Turn on **Include preview image** in the Export panel to place your aligned background photo under the glowing LEDs. The video uses the photo's size, rounded to even numbers as H.264 requires.

---

## Export memory and cancellation

Portable JSON and ZIP exports process each frame immediately and retain only the actual LEDs' encoded color values. They do not collect a complete rectangular image for every frame. The file data and ZIP/APNG work still need memory.

Use **Cancel export** to stop a running export. If an export exceeds a resource budget, nittygrid shows a message instead of continuing to allocate larger buffers. Use a shorter clip, fewer frames per second, smaller sampling addresses, or a smaller video output as appropriate.

Limits protect nittygrid's own buffers; they cannot measure or reserve the system's free RAM. Browser/encoder resources and animation-owned state use additional memory, and an exhausted system can still terminate a tab. Rendering and export currently run locally; optional server export is planned.

---

## Technical reference: all formats and limits

Generated from the app's own export code, so it always matches what nittygrid writes and reads. This table is for technicians and AI agents.

| File / Export | Format Identifier | Purpose | Key Rules & Budgets |
| :--- | :--- | :--- | :--- |
| `.ngproj` (legacy `.at3proj`) | ZIP archive (`at3proj`, schema v2; reads v1) | Editable project snapshot: matrix setup, `matrix/layout.svg`, background alignment, animation recipes, canvas graph (`nodes`/`edges`), and per-node chat/version history. | Embedded binary assets under `background/`, `assets/`, and `thumbnail.*` referenced via `__at3AssetRef`. SVG code stays in the JSON; `matrix/layout.svg` is a standalone copy. |
| `.ngrecipe` (legacy `.at3anim`) | ZIP archive (`at3anim`, schema v1) | Reusable single-animation recipe (`animation.json`) with source `matrixConfig` (`matrixContext: "saved-with-recipe"`), optional `matrix/layout.svg` snapshot, still thumbnail, and embedded session media. | Compares saved matrix context on import without replacing project settings; media hydrated from `__at3AssetRef`. SVG code stays in the JSON with an optional standalone copy; still previews use `preview.*`. |
| `.ngrender.zip` & `.ngrender.json` *(v1.0 spec)* | ZIP (`nittygrid-animation-package` `"1.0"`) + JSON (`nittygrid-animation` `"1.0"`) | Self-contained rendered RGBA animation for regular grids (`grid`) and irregular/SVG matrices (`explicit` LED ID order). | Required ZIP entries: `README.txt`, `animation.nganim.json`, `preview.apng`, `FORMAT.md`, `animation.schema.json`, `manifest.schema.json`, `LICENSE-MIT.txt`, `LICENSE-CC0.txt` (+ `manifest.json` and `layout.svg` for SVG matrices). Budgets: ≤ 1,000,000 LEDs, ≤ 36,000 frames, ≤ 64 MiB RGBA, ≤ 96 MiB JSON, ≤ 8 MiB SVG, ≤ 128 MiB expanded ZIP. |
| `.mp4` Video | H.264 / MP4 (`video/mp4`) | Rendered matrix video in the configured LED look (regular grid or physical SVG shapes). | Fixed-timestamp, frame-by-frame encoding where supported (H.264 MP4 preferred, VP9 WebM fallback); older browsers use a real-time recorder. Video canvases: ≤ 8192 px per side and ≤ 8,294,400 pixels each. Encoded output: ≤ 64 MiB. Optional **Include preview image** composites the aligned background. |
| Browser export working buffers | Local resource budgets; independent of file format versions | Render/encode one frame before producing more; keep only encoded LED data for portable outputs. | Up to four full-raster render buffers: ≤ 64 MiB combined. Legacy JSON and older-browser video frame retention: ≤ 64 MiB. Final file data, encoder/browser resources and generator-owned state use additional memory; free system RAM cannot be guaranteed. |

---

<!-- PAGE: svg-matrices (https://docs.nittygrid.com/docs/svg-matrices) -->

# SVG Matrices & Layouts

> How nittygrid maps animations onto custom-shaped displays drawn as SVG, how to import a background image in Matrix Setup, and how SVGs are kept safe offline.

Real displays are rarely a neat rectangle. A car light bar curves, a wearable follows the body, a sign has gaps. nittygrid handles this by splitting the problem in two:

- **Where animations draw:** a plain grid of cells, like a tiny screen.
- **How your display looks:** an **SVG** file (a vector drawing) where each shape is one physical LED.

Each frame, nittygrid reads the color of a grid cell and paints it onto the matching SVG shape. Effects never need to know your display's shape.

---

## Add a background image

In **Matrix setup** you can import a photo or render of your product (PNG, JPG, WebP) behind your LEDs. This works for both regular grids and SVG layouts.

- **Align by dragging.** Move and resize the LED overlay on the photo until it matches the real LEDs. Grids can be stretched freely (hold **Shift** on a corner to keep proportions). SVG layouts always keep their aspect ratio.
- **Image scale vs. Preview zoom.** *Image scale* changes how big the photo is in the saved result. *Preview zoom* (or trackpad pinch) only magnifies your view while aligning.
- **It is saved with your work.** The image and alignment are stored in matrix presets and in `.ngproj` files. An `.mp4` export can include it too (**Include preview image**).

---

## How to prepare an SVG

SVG can contain almost anything. For LED layouts, **keep it simple**.

> [!IMPORTANT] **Basic shapes, with clear addresses when order matters.**
> - **One simple shape per LED.** Use `<rect>`, `<circle>`, `<ellipse>`, `<polygon>`, or a clean closed `<path>`.
> - **Label rows and columns for precise control.** Without addresses, nittygrid sorts shapes by their center points, top to bottom and then left to right. SVG layer order does not define hardware wiring.
> - **Avoid masks and effects.** Do not use `<mask>`, `<clipPath>`, `<filter>`, `<pattern>`, or `<use>` to form LEDs. In Illustrator, Figma, or Inkscape, turn them into plain shapes before exporting.

1. **Draw one shape per LED**
   Shapes inside `<defs>`, `<clipPath>`, `<mask>`, or `<symbol>` are ignored. Standalone `<use>` copies are rejected, so expand them into real shapes first.
2. **Optionally label rows and columns**
   Add `id="px-ROW-COL"` (or `data-row` and `data-col`) with numbers that start at `0` in the **top-left**:
   ```xml
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 40">
     <rect id="px-0-0" data-led-id="px-0-0" data-row="0" data-col="0" x="4"  y="4" width="28" height="12" rx="2" />
     <rect id="px-0-1" data-led-id="px-0-1" data-row="0" data-col="1" x="44" y="4" width="28" height="12" rx="2" />
     <rect id="px-0-2" data-led-id="px-0-2" data-row="0" data-col="2" x="84" y="4" width="28" height="12" rx="2" />
   </svg>
   ```
3. **Or upload it without labels**
   nittygrid sorts shapes by their center points: ascending `y`, then ascending `x`. It assigns the resulting list to consecutive grid cells. This is a spatial fallback, not a wiring order; add row and column labels when you need a specific mapping.
4. **Split cells (optional)**
   If one cell holds two separately wired LEDs, such as an upper and a lower triangle, mark them `data-part="0"` and `data-part="1"`. They stay two separate LEDs in exports.

> [!NOTE] **Bottom-up files are fixed automatically.** If your SVG uses `id="led-r00-c000"` with row 0 at the **bottom**, nittygrid flips it to the standard top-left start on import and keeps the original name in `data-source-id`.

---

## Safety and cleanup

SVG files are XML and could in theory contain scripts or links to the internet. nittygrid cleans every SVG you upload, restore, or import from a project file.

- **No code runs.** Scripts and animations are removed. The layout is shown inside an isolated shadow root and never parsed as HTML, so its styles cannot change the app.
- **Fully offline.** External images, fonts, and stylesheets are removed, so the layout looks the same years from now.
- **Common editor exports just work.** Standard `DOCTYPE` lines, comments, and missing `xmlns` are fixed, and wrapper tags like Illustrator's `<switch>` are unwrapped.

### Technical reference: the exact rules

Generated from the app's own SVG import code, so it always matches what nittygrid does. This is for technicians and AI agents.

| Rule Category | Specification |
| :--- | :--- |
| **Eligible LED geometry (`SHAPE_TAGS`)** | `<path>`, `<circle>`, `<rect>`, `<ellipse>`, `<polygon>`, `<polyline>`, `<line>` |
| **Preserved geometry attributes** | `d`, `points`, `x`, `y`, `width`, `height`, `cx`, `cy`, `r`, `rx`, `ry`, `x1`, `y1`, `x2`, `y2`, `transform`, `fill-rule`, `clip-rule`, `pathLength` |
| **Excluded definition contexts & `<use>` policy** | Shapes inside `<defs>`, `<clipPath>`, `<mask>`, `<marker>`, `<pattern>`, or `<symbol>` are presentation definitions, never LEDs. Standalone `<use>` instances are rejected—expand instances into independent shapes before importing. |
| **Canonical LED metadata & group inheritance** | `data-led-id` (stable portable LED identity), `id="px-ROW-COL"`, `data-row="ROW"`, `data-col="COL"`, optional `data-part="PART"` (0-based top-left origin). Logical addresses on ancestor `<g>` or `<svg>` elements are inherited during normalization; unusable or duplicate metadata attributes are stripped cleanly on import instead of rejecting the file. |
| **Untagged sampling order & identity** | Without sampling addresses, LEDs are sorted by center `cy`, then `cx` and sampled from consecutive grid cells. Addressed layouts sort by sampling `y`, then `x`. When a row/col/part address lands on a cell another LED already uses, explicit `data-x`/`data-y` addresses keep their cell and the other LED moves to a spare row below the grid. `data-parts-per-cell` counts only as a positive whole number. IDs remain paired with their source shapes; SVG element order is not a hardware wiring order. |
| **Accepted import aliases & editor cleanup** | `id="led-rNN-cNNN"` (automatically flipped from bottom-left to top-left origin on import). Standard DOCTYPEs, XML comments, and CDATA markers are stripped; missing SVG namespaces are added; unsupported containers like Illustrator `<switch>` are unwrapped. |
| **Shadow DOM isolation & removed active elements** | Layouts render inside an isolated shadow root imported from the XML parse (never re-parsed as HTML, and SVG `<style>` rules cannot restyle the app). Strips `<script>`, `<foreignObject>`, `<iframe>`, `<embed>`, `<object>`, `<audio>`, `<video>`, SMIL animation tags, `<handler>`, and `<listener>`. |
| **Offline link, raster & buffer budgets** | External `href` / `xlink:href` / CSS `url(...)` and `@import` rules are stripped. Only local `#...` fragments and header-verified `data:image/(png\|jpeg\|gif\|webp);base64` rasters (≤ 4 MiB, ≤ 4 MP, ≤ 4096 px/side) are allowed. Sampling addresses are capped at a `2048 × 2048` render buffer (`≤ 8 MiB` UTF-8 SVG for portable export). |

### What each LED stores

Each LED in an SVG layout keeps four separate pieces of information:

1. **Identity (`data-led-id`):** its permanent, unique name across saves and `.ngrender.json` / `.ngrender.zip` exports.
2. **Logical address (`row`, `col`, `part`):** optional 0-based grid position, starting top-left.
3. **Sample position (`x`, `y`):** the integer slot in the `W × H` grid that the renderer reads its color from.
4. **Shape (`tag`, `attrs`, `cx`, `cy`):** the actual outline and center point inside the SVG `viewBox`.

LED identities are assigned before sorting and remain paired with their original shapes. For addressed layouts, the pixel list is sorted by sampling `y`, then `x`; for unaddressed layouts, it is sorted by center `cy`, then `cx`. Exported frame colors follow the explicit LED list in the animation JSON. Consumers should use that list, not the SVG element order, to interpret the frames.

---

<!-- PAGE: animations (https://docs.nittygrid.com/docs/animations) -->

# Animations, Generators & render_code

> How nittygrid animations work, the five ways to build one, and the complete render_code JavaScript API and all built-in generators.

Every animation in nittygrid, no matter how you made it, does the same simple thing: on every frame it fills a grid of colored cells. That grid is called the **`PixelMatrix`**. Your display then shows those colors.

## The grid and its colors

The `PixelMatrix` has `W` columns and `H` rows. Cell `(0, 0)` is the **top-left**. Each cell holds four numbers from `0` to `255`: red, green, blue, and alpha (`[r, g, b, a]`).

> [!TIP] **How brightness works.** An LED is **off** when red, green, and blue are all `0`, or when alpha is `0`. Otherwise `a = 255` is full brightness and lower values dim it (`a / 255`). Exports keep all four values exactly.

## Five ways to build an animation

Each animation node stores a small **recipe** (so you can always edit it), made in one of five ways:

| Way | Good for | Stored as |
| :--- | :--- | :--- |
| **Built-in generator** | Fast effects such as Fire, Plasma, Rain, or Text, with ready-made sliders. | `type: "generator"` + `generatorId` + `params` |
| **JavaScript `render_code`** | Custom scenes, or anything the AI writes for you. | `type: "code"` + `code` + optional `codeParams` |
| **Drawn frames and sprites** | Hand-painted pixel art and short loops. | `generatorId: "draw-frame"` or `"sprite-anim"` |
| **Vector path** | Light sweeps and glows travelling along a line. | `generatorId: "path_animation"` |
| **Video** | Sampling a video clip across your LEDs, live or baked into frames. | `generatorId: "video-input"` or `"flattened-animation"` |

---

## Write your own effect with `render_code`

`render_code` is a short piece of JavaScript that runs once per frame. The AI writes it for you, and you can also edit it in the Animation Editor. This complete example draws a soft breathing glow in the middle of any display:

```js
// 1. Start every frame with opaque black
clear([0, 0, 0, 255]);

// 2. A smooth 0 → 1 → 0 pulse every 2 seconds
const pulse = easeInOut(pingpong(t, 2.0));
const radius = map(pulse, 0, 1, 2, Math.min(W, H) * 0.35);

// 3. Draw a glow at the center
glow(W / 2, H / 2, [80, 180, 255, 255], radius);
```

> [!TIP] **Want more control? Ask the AI for sliders.** Say something like *"add a slider for the radius and a color picker for the glow"*. The AI turns those numbers into live controls in the sidebar (`codeParams`), so you can fine-tune without generating again.

### Combine drawing and AI (`_targetFrame`)

You can lock a picture you drew as the exact start or end of an AI animation:

1. Paint a logo, icon, or pattern with the **Draw** tool.
2. Open the AI chat on that animation node and ask for an intro or transition, for example *"assemble this icon from drifting embers"*.
3. nittygrid locks your painted pixels as `_targetFrame`, so both the preview and the export land exactly on your artwork.

---

## Technical reference

The tables below are generated from the code, so they always match the app. They are for technicians and AI agents.

### `render_code` API

The same reference as the in-app **References** modal.

### Core scope
> [!NOTE] Always available — no import or prefix needed.

| Name | Type | Description |
| :--- | :--- | :--- |
| `matrix` | PixelMatrix | Full matrix object — use top-level helpers instead where possible |
| `frame` | number | Frame counter, increments ~30×/s (normalized to 60 fps ticks during sequence export) |
| `t` | number | Elapsed seconds |
| `W, H` | number | Matrix width and height in pixels |
| `state` | object | Plain object persisting between frames — store particles, flags, etc. here |
| `params` | object | Live values of any codeParams you declared |

### Drawing
> [!WARNING] Frame buffer is not auto-cleared each frame. Call clear() or fade() yourself.

| Call | Description |
| :--- | :--- |
| `set(x, y, [r,g,b,a])` | Overwrite a single pixel. a=255 for fully opaque. |
| `clear([r,g,b,a])` | Fill the whole matrix. Use at frame start for clean effects. |
| `fade(factor)` | Darken all pixels (0–1). Creates decay trails. Affected by global Trail slider. |
| `additive(x, y, [r,g,b,a])` | Additive blend onto existing pixel — stacks light sources. |
| `glow(cx, cy, [r,g,b,a], radius)` | Radial additive glow, brightness falls off with distance². Sub-pixel center OK. Affected by global Glow Intensity/Radius sliders. |

### Shapes

| Call | Description |
| :--- | :--- |
| `line(x0, y0, x1, y1, color)` | Bresenham pixel line between two points. |
| `circle(cx, cy, r, color, filled=false)` | Rasterized circle — outline by default, pass true for filled. |
| `rect(x, y, w, h, color, filled=true)` | Rectangle — filled by default, pass false for outline only. |

```js
// Spinning clock hand
clear([0,0,0,255]);
const angle = t * 2;
line(W/2, H/2,  W/2 + Math.cos(angle)*6,  H/2 + Math.sin(angle)*6,  [0,255,180,255]);
```

### Easings
> [!NOTE] Input and output are both 0–1. Use map() to scale to any range.

| Function | Behaviour |
| :--- | :--- |
| `easeIn(t)` | Slow start, accelerates (quadratic) |
| `easeOut(t)` | Fast start, decelerates — most natural feel |
| `easeInOut(t)` | Smooth S-curve |
| `easeElastic(t)` | Springy overshoot at end |
| `easeBounce(t)` | Bouncy landing |
| `easeBack(t)` | Slight recoil before moving forward |

```js
// Pulsing circle with eased size
const phase = (t % 1.5) / 1.5;            // 0→1 over 1.5s
const r = map(easeInOut(phase), 0, 1, 1, 8);
clear([0,0,0,255]);
circle(W/2, H/2, r, [255,120,0,255], true);
```

### Spring physics
> [!NOTE] Smooth elastic follow. Call once per frame; store {val, vel} in state.

| Parameter | Default | Effect |
| :--- | :--- | :--- |
| `stiffness` | 0.1 | How strongly it pulls toward target — higher = snappier |
| `damping` | 0.8 | How quickly it settles — lower = more oscillation |

```js
// Dot that springs to a moving target
if (!state.s) state.s = { val: W/2, vel: 0 };
const target = W/2 + Math.sin(t * 0.8) * (W/2 - 2);
const r = spring(state.s.val, target, state.s.vel, 0.08, 0.75);
state.s.val = r.value;  state.s.vel = r.velocity;
clear([0,0,0,255]);
glow(state.s.val, H/2, [100,200,255,255], 3);
```

### Math helpers

| Call | Description |
| :--- | :--- |
| `map(v, i0, i1, o0, o1)` | Remap v from input range to output range |
| `lerp(a, b, t)` | Linear interpolate between a and b |
| `constrain(v, lo, hi)` | Clamp v to [lo, hi] |
| `dist(x1, y1, x2, y2)` | 2D Euclidean distance |
| `lerpColor(a, b, t)` | Interpolate two [r,g,b,a] colors |
| `hsb(h, s, b, a?)` | h 0–360 · s/b 0–100 → [r,g,b,a]. Great for hue cycling. |

```js
// Rainbow hue cycle across columns
clear([0,0,0,255]);
for (let x = 0; x < W; x++) {
  const hue = (x / W * 360 + t * 60) % 360;
  for (let y = 0; y < H; y++) set(x, y, hsb(hue, 100, 80));
}
```

### Noise & random

| Call | Description |
| :--- | :--- |
| `noise(x, y, z=0)` | Perlin-style smooth noise → -1..1. Pass t as z to animate. |
| `noise01(x, y, z=0)` | Same but → 0..1, easier for brightness and opacity. |
| `random(lo=0, hi=1)` | Random float in [lo, hi). |

```js
// Organic flowing colour field
for (let y = 0; y < H; y++) for (let x = 0; x < W; x++) {
  const v = noise01(x * 0.15, y * 0.15, t * 0.4);
  set(x, y, hsb(v * 240, 80, v * 100));
}
```

### Time & loop helpers

| Call | Description |
| :--- | :--- |
| `phase(t, period)` | 0..1 sawtooth — resets every period seconds. Clean loop phase. |
| `pingpong(t, period)` | 0..1..0 triangle — breathe/pulse/bounce without writing modulo math. |
| `palette(t, colors[])` | Sample a multi-stop gradient at t (0..1). Each stop is [r,g,b,a]. |

```js
// Pulsing fire-palette glow at centre
const fireColors = [[0,0,0,255],[180,20,0,255],[255,120,0,255],[255,255,100,255]];
for (let y = 0; y < H; y++) for (let x = 0; x < W; x++) {
  const d = 1 - constrain(dist(x, y, W/2, H/2) / (H/2), 0, 1);
  const pulse = pingpong(t, 1.2);           // 0→1→0 every 1.2s
  set(x, y, palette(d * easeOut(pulse), fireColors));
}
```

### Live UI controls — codeParams
> [!NOTE] Declare tweakable parameters. They appear as sliders/pickers in the details panel and are always accessible via params.key.

| Type | Extra fields | UI rendered |
| :--- | :--- | :--- |
| `"number"` | min, max, step | Slider |
| `"color"` | default is "#rrggbb" | Color picker |
| `"boolean"` | — | Toggle |
| `"select"` | options: string[] | Dropdown |

```js
codeParams: [
  { key: "speed", type: "number", label: "Speed", default: 1, min: 0.1, max: 5, step: 0.1 },
  { key: "color", type: "color",  label: "Color", default: "#ff6600" },
]
// In code:
const spd = params.speed;
const hex = params.color.replace('#','');
const cr = parseInt(hex.slice(0,2),16), cg = parseInt(hex.slice(2,4),16), cb = parseInt(hex.slice(4,6),16);
```

### Universal controls (details panel)
> [!NOTE] These are always available for any code animation — no codeParams needed.

| Control | What it does |
| :--- | :--- |
| `Speed (0.1–4×)` | Scales the engine FPS (30 fps base) |
| `Glow Intensity (0–3)` | Multiplies the alpha of every glow() call |
| `Glow Radius (0–3)` | Multiplies the radius of every glow() call |
| `Trail (0–2)` | Scales the decay factor of every fade() call (0 = clear, 1 = original, 2 = very persistent) |
| `Scale / Offset X-Y / Rotation` | Pixel-level backward-mapping transform applied after each frame |

### Built-in generators

Every built-in generator with its parameter names, types, ranges, and defaults, read live from the app.

### Basic

| Generator ID | Name | Parameters (`key`: type = default) |
| :--- | :--- | :--- |
| `solid-color` | **Solid Color** | `color`: color = `"#ffffff"`, `brightness`: number (0..1) = `1` |
| `gradient-sweep` | **Gradient Sweep** | `colorA`: color = `"#ffffff"`, `colorB`: color = `"#aaaaaa"`, `colorC`: color = `"#555555"`, `useThreeColors`: boolean = `false`, `angle`: number (0..360) = `0`, `speed`: number (0..3) = `0.5`, `loop`: boolean = `true` |
| `draw-frame` | **Draw Frame** | `frame`: pixeldata = `""` |
| `flattened-animation` | **Flattened Animation** | `data`: flatteneddata = `""` |

### Effects

| Generator ID | Name | Parameters (`key`: type = default) |
| :--- | :--- | :--- |
| `rain` | **Rain** | `color`: color = `"#ffffff"`, `speed`: number (0.05..1) = `0.3`, `density`: number (0.1..1) = `0.6`, `direction`: select = `"down"`, `trailLength`: number (1..20) = `4` |
| `twinkle` | **Twinkle / Stars** | `color`: color = `"#ffffff"`, `density`: number (0.01..1) = `0.3`, `speed`: number (0.005..0.2) = `0.04`, `minBrightness`: number (0..1) = `0.05`, `maxBrightness`: number (0..1) = `1` |
| `fire` | **Fire** | `intensity`: number (0.1..1) = `0.7`, `wind`: number (-2..2) = `0`, `palette`: select = `"classic"`, `cooling`: number (0.1..1) = `0.4` |
| `matrix-rain` | **Matrix Rain** | `color`: color = `"#ffffff"`, `speed`: number (0.05..2) = `0.4`, `density`: number (0.1..1) = `0.7`, `trailLength`: number (2..32) = `8`, `glitch`: number (0..0.5) = `0.05` |
| `pulse` | **Pulse / Ripple** | `color`: color = `"#ffffff"`, `bgColor`: color = `"#000000"`, `speed`: number (0.1..5) = `1`, `rings`: number (1..10) = `3`, `decay`: number (0.05..1) = `0.5`, `originX`: number (0..1) = `0.5`, `originY`: number (0..1) = `0.5` |
| `bouncing-balls` | **Bouncing Balls** | `count`: number (1..20) = `3`, `radius`: number (0.5..8) = `1.5`, `speed`: number (0.05..3) = `0.5`, `trailLength`: number (0..30) = `5`, `rainbow`: boolean = `true`, `color`: color = `"#ffffff"` |
| `physics-balls` | **Physics Balls** | `count`: number (1..15) = `4`, `radius`: number (1..8) = `2`, `restitution`: number (0.1..1) = `0.9`, `gravity`: number (-2..3) = `0.5`, `trailLength`: number (0..20) = `4` |

### Procedural

| Generator ID | Name | Parameters (`key`: type = default) |
| :--- | :--- | :--- |
| `plasma` | **Plasma** | `speed`: number (0.1..5) = `1`, `scale`: number (0.2..5) = `1`, `palette`: select = `"rainbow"`, `phase`: number (0..6.28) = `0` |
| `perlin-flow` | **Perlin Flow** | `scale`: number (0.2..6) = `1.5`, `speed`: number (0.05..3) = `0.5`, `colorA`: color = `"#1a0533"`, `colorB`: color = `"#ff6bff"`, `contrast`: number (0.1..3) = `1` |
| `waveform` | **Waveform** | `amplitude`: number (0.05..1) = `0.7`, `frequency`: number (0.1..10) = `2`, `speed`: number (0.1..5) = `1`, `layers`: number (1..5) = `2`, `palette`: select = `"viridis"`, `direction`: select = `"horizontal"`, `filled`: boolean = `true` |
| `heatmap` | **Heatmap / Cellular** | `palette`: select = `"hot"`, `scale`: number (0.2..8) = `2`, `speed`: number (0.01..2) = `0.3`, `spread`: number (0.1..4) = `1` |

### Cellular

| Generator ID | Name | Parameters (`key`: type = default) |
| :--- | :--- | :--- |
| `game-of-life` | **Game of Life** | `density`: number (0.05..0.8) = `0.35`, `speed`: number (0.02..1) = `0.15`, `liveColor`: color = `"#ffffff"`, `deadColor`: color = `"#000000"`, `trailColor`: color = `"#666666"`, `trailLength`: number (0..20) = `4` |

### Creative

| Generator ID | Name | Parameters (`key`: type = default) |
| :--- | :--- | :--- |
| `text` | **Text** | `text`: textarea = `"HELLO"`, `color`: color = `"#ffffff"`, `bg`: color = `"#000000"`, `scroll`: boolean = `true`, `speed`: number (0.1..6) = `0.5`, `size`: number (0.3..2) = `0.75`, `bold`: boolean = `true` |
| `emoji` | **Emoji** | `emoji`: textarea = `"🔥"`, `size`: number (0.2..2) = `0.85`, `anim`: select = `"none"`, `speed`: number (0.1..5) = `1`, `bg`: color = `"#000000"` |
| `pixel-icon` | **Pixel Icon** | `icon`: select = `"heart"`, `color`: color = `"#ffffff"`, `size`: number (0.1..2) = `0.8`, `anim`: select = `"none"`, `speed`: number (0.1..5) = `1`, `bg`: color = `"#000000"` |
| `keyframe-anim` | **Keyframe Anim** | `data`: flatteneddata = `""` |
| `formula` | **Formula (tixy-style)** | `expression`: textarea = `"(t,i,x,y,a,b,c,d) => ..."`, `a`: number (-16..16) = `2`, `b`: number (-16..16) = `8`, `c`: number (-1..1) = `0`, `d`: number (0..1) = `0.35`, `fgColor`: color = `"#ffffff"`, `bgColor`: color = `"#000000"`, `negColor`: color = `"#ff3333"`, `scale`: number (0.1..5) = `1` |
| `sprite-anim` | **Sprite Animation** | `framesJson`: spritedata = `"[]"`, `fps`: number (1..30) = `6`, `loop`: select = `"loop"` |
| `sprite-scene` | **Sprite Scene** | `objectsJson`: textarea = `"[   {     "kind": "em..."`, `bg`: color = `"#000000"`, `speed`: number (0.1..5) = `1` |
| `path-anim` | **Path Animation** | `pathJson`: pathdata = `"[]"`, `pathsJson`: textarea = `"[]"`, `element`: select = `"glow"`, `elementColor`: color = `"#ffffff"`, `elementSize`: number (1..12) = `2`, `animationLengthMs`: number (1000..20000) = `5000`, `trail`: boolean = `true`, `trailDecay`: number (0.5..1) = `0.85`, `trailLength`: number (0..1) = `0.25`, `trailIntensity`: number (0..2) = `1`, `blur`: number (0..12) = `3`, `speed`: number (0.1..5) = `1`, `staggerMs`: number (0..2000) = `0`, `timingMode`: select = `"distance"`, `loop`: select = `"loop"` |

### Geometric

| Generator ID | Name | Parameters (`key`: type = default) |
| :--- | :--- | :--- |
| `scanner` | **Scanner Sweep** | `color`: color = `"#22d3ee"`, `bgColor`: color = `"#020617"`, `direction`: select = `"horizontal"`, `speed`: number (0.1..5) = `1`, `beamWidth`: number (0.01..0.35) = `0.08`, `glow`: number (0..1.5) = `0.65`, `bounce`: boolean = `true` |
| `chase` | **Chase Lights** | `color`: color = `"#ffffff"`, `bgColor`: color = `"#020617"`, `track`: select = `"perimeter"`, `lights`: number (1..12) = `4`, `speed`: number (0.1..5) = `1`, `glow`: number (1..6) = `2`, `trail`: number (0..1) = `0.35` |
| `wave-interference` | **Wave Interference** | `colorA`: color = `"#38bdf8"`, `colorB`: color = `"#f472b6"`, `bgColor`: color = `"#020617"`, `layout`: select = `"corners"`, `sources`: number (2..6) = `4`, `frequency`: number (1..20) = `7`, `speed`: number (0.1..5) = `1`, `contrast`: number (0.5..4) = `1.4`, `falloff`: number (0..6) = `1.6` |

### Input

| Generator ID | Name | Parameters (`key`: type = default) |
| :--- | :--- | :--- |
| `video-input` | **Video Input** | `videoUrl`: videoupload = `""`, `speed`: number (0.1..4) = `1`, `placementMode`: select = `"fit"`, `fitMode`: select = `"stretch"`, `scale`: number (0.1..4) = `1`, `offsetX`: number (-100..100) = `0`, `offsetY`: number (-100..100) = `0`, `overlayScale`: number (0.1..2) = `1`, `overlayX`: number (-100..100) = `0`, `overlayY`: number (-100..100) = `0`, `tintColor`: color = `"#ffffff"`, `tintAmount`: number (0..1) = `0`, `brightness`: number (0..3) = `1`, `contrast`: number (0..3) = `1`, `saturation`: number (0..3) = `1`, `sampleRadius`: number (0..4) = `1`, `grayscale`: boolean = `false`, `cropX`: number (0..1) = `0`, `cropY`: number (0..1) = `0`, `cropW`: number (0.01..1) = `1`, `cropH`: number (0.01..1) = `1` |
| `json-sequence` | **JSON Sequence** | `json`: textarea = `""`, `fps`: number (0..120) = `0`, `loop`: boolean = `true` |

---

<!-- PAGE: tools (https://docs.nittygrid.com/docs/tools) -->

# Main Product Tools

> A short tour of the nittygrid studio, from setting up your display and asking the AI to painting sprites, drawing paths, mapping video, and exporting.

nittygrid is built around one **canvas**. Every animation idea sits on it as a block called an **animation node**. Editors open on top when you need them, and you never have to dig through menus.

---

## 1. Set up your display (Matrix setup)

Click **Matrix setup** in the top bar to tell nittygrid what display you are designing for.

1. **Pick a grid or upload an SVG**
   Choose a size such as `8×8`, `16×16`, `64×64`, or `250×12`, enter your own, or upload an SVG for a custom shape. For grids you can also set the LED shape (`square`, `circle`, `rounded`), size, and gap.
2. **Add a background image (optional)**
   Under **Image**, import a photo of your product and drag the LEDs into place on top of it. See [SVG Matrices & Layouts](/docs/svg-matrices) for details.
3. **Save it as a preset**
   **Save preset** stores the grid, image, and placement in your browser. Applying a preset copies it into your project, so changing the preset later does not touch old projects. If you edit an active preset, an **Update preset** button lets you save the change on purpose.

---

## 2. Arrange and play (the canvas)

- **Position is not order.** Drag nodes anywhere to organize ideas. Only the wires from **`Start`** through your nodes to **`End`** set the playback order.
- **Transitions.** Connect Node A to Node B and a badge appears on the wire. Click it to pick a transition (such as **Crossfade** or **Curtain**) and its duration. Press **Play** there to preview just that pair.
- **Duplicate and autosave.** Hold **Option / Alt** and drag a node to copy it, including its history. Everything autosaves 300 ms after your last edit.

---

## 3. Create with AI

Click **New animation**, or double-click a node, to open the **Animation Editor**.

- **Built-in AI** works right away with a free daily allowance.
- **Your own AI:** enter your own API key (Gemini, OpenAI, Anthropic, DeepSeek, OpenRouter) or connect a local server (LM Studio, Ollama, `llama.cpp`). Keys stay in your browser.
- **History per node.** Every prompt creates a dated version in that node's own chat. Click an old one to replay it.
- **Nothing changes until you say so.** Edits stay in a draft until you click **Apply to canvas** (update this node) or **Add as new** (create another node).
- **Live sliders.** Every parameter shows up as a slider, color picker, toggle, or dropdown.

> [!TIP] **Ask the AI to add sliders.** If you want finer control, say so in the chat, for example *"add sliders for wave width, spark density, and ring color"*. The AI adds them as live controls, so you can tune the look without generating again.

---

## 4. Create by hand

These three editors share the same view (**Space-drag** to pan, **Ctrl-wheel** to zoom).

- **Draw & Sprite Editor.** Paint pixels with brushes, fill, eyedropper, and mirror tools. Build multi-frame loops with **onion skinning** (a faint view of neighboring frames). Lock a frame as a **Target Frame** and ask the AI to animate into or out of it.
- **Vector Path Tool.** Draw lines or curves over your display. Make glows travel along them, or draw them on, with start times, durations, and easing on the Path Timeline.
- **Video Mapper & Baker.** Load a video and place the LED area over it, with brightness, contrast, saturation, and tint sliders. **Bake to pixel animation** turns it into fixed frames (12, 24, 30, or 60 FPS, up to 64 MiB), so it plays and exports without the original file.

---

## 5. Preview and export

Click **Export** in the top bar (or the `End` node).

- Switch between **Full Color** and **Monochrome** previews.
- Export one node or the whole `Start → End` sequence as a **`.ngrender.zip`**, a **`.ngrender.json`**, or an **`.mp4`** video, optionally on top of your background photo. See [File & Export Formats](/docs/formats).

---

## Technical reference: all tools at a glance

Generated from the code, for technicians and AI agents.

| Tool / Surface | Where to Open | Output / Recipe Type | Key Behavior |
| :--- | :--- | :--- | :--- |
| **Canvas & Sequence Graph** | Top-level workspace | Project workspace (`nodes`, `edges`, transitions) | Free animation node arrangement; explicit `Start` → animation node → `End` edges define playback order. Autosaves after 300 ms. |
| **Matrix Setup & Presets** | Top bar → Matrix setup | `MatrixConfig` + `BgAlignSettings` | Configures regular Grid (`8×8`, `16×16`, `64×64`, `250×12`, custom) or uploaded SVG layout, background image alignment, and reusable IndexedDB presets. |
| **AI Assistant & Code Editor** | New animation / Editor Chat | `type: "code"` (`render_code`) or `type: "generator"` | Built-in AI (Gemini Flash / Claude Haiku) or Bring-Your-Own key/local server. Scoped per-animation history, live `codeParams`, and explicit `Apply` / `Add as new`. |
| **Draw & Sprite Editor** | New animation → Draw / Sprite | `draw-frame` / `sprite-anim` / `_targetFrame` | Direct pixel painting, multi-frame sprite timeline with onion skinning, and target-frame locking for AI transitions. |
| **Path Animation Tool** | New animation → Path | `path_animation` generator recipe | Interactive vector paths over Grid or SVG layouts with keyframe timing, stroke reveals, and travelling glow objects. |
| **Video Mapper & Baker** | New animation → Video | `video-input` (live) or `flattened-animation` (baked) | Maps video over Grid/SVG coordinates. **Bake to pixel animation** captures exact RGBA frames (12/24/30/60 FPS, up to 64 MiB) for standalone playback and export. |
| **Export Panel** | Top bar → Export / End node | `.ngrender.zip`, `.ngrender.json`, `.mp4` | Renders single animations or connected sequences with color/monochrome toggle and optional background image compositing for MP4. |