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.

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.
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 for details.
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.

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.

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.