---
name: dot-spiral-studio
description: Generate or adapt an offline dot spiral studio with direct controls, keyboard access, and downloadable SVG output.
---

# Dot Spiral Studio

Use this skill for a reusable, self-contained interactive visual study. Adapt text, palette, and parameters to the user's page while retaining the relationship between controls, visible state, and exported output.

Generate with Python 3.10+ from any working directory:

```bash
python3 /absolute/path/dot-spiral-studio/scripts/generate.py -o ./index.html --grid 31 --phase 44
```

`--title` sets a complete plain-text heading (1–300 characters); `--accent` accepts only a six-digit hex color. `--grid`: 17–41 cells per side. `--phase`: 0–100 percent of one cycle. `--mode`: `spiral`, `rings`, `wave` or `cycle` (three-form smooth blend). Open the resulting HTML directly; append `?lang=en` for English. No external assets, server, or package installation are needed.

The red–orange–yellow trail remains distinct from the cool-white matrix. Three-form cycle interpolates the three fields continuously and returns smoothly to its starting shape. Repeat loop is optional and off by default; playback starts only on request, pauses when hidden, and becomes a static step under reduced motion.

For changes to rendering or state behavior, read [the design notes](references/design.md), then edit `templates/index.template.html` and regenerate. Keep one live `#status` region, labeled controls, visible keyboard focus, meaningful static reduced-motion states, and SVG output consistent with the selected visual. When embedding, the frame needs script and download permissions for the intended controls and export.