# 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.