perf: build a shape mask once per composition, and give Motion its own section

[simien]

What does this change?

Two things that came out of today's audit follow-up.

The shape mask is built once per composition instead of once per frame. A layer's mask depends only on the shape, its direction, the grid size, and the layer's seed, so nothing in it changes with the animation phase. It was recomputed for every cell on every frame for both layers, and the radial shapes allocated a corner list and took four square roots per cell. On the default canvas a vignette doubled the frame time. The mask is now a cached keep/drop byte array, in the same shape of cache the flow field already uses, and a masked frame costs what an unmasked one does.

Motion gets its own section in the General tab, headed Animation, second after Settings, instead of being the last field under Settings. The heading is Animation rather than Motion so it does not repeat the field's own label directly beneath it; the field is still called Motion everywhere. It is what the site leads with, and it is one of the four controls that drive animation rather than a canvas setting. It sits second rather than first because size, colors, and mask come before how it moves, a still is the default, and the flash warning should not be the first line a new visitor reads. The guide's tab table now says where it lives.

generator.js moves to ?v=12 on the four pages that load it.

Related issue

None.

How was this tested?

• Output is byte-for-byte unchanged. A Node harness loaded the previous generator.js and this one side by side and hashed both grids from 1,620 generate() calls: twelve mask and direction pairs, three sizes, three texture pairings, five motions, three phases. Zero mismatches. Old links and exported SVGs render exactly as before.
• Timed in Chrome on the default 1200x630 canvas at block size 2, one animated frame:

Mask	Before	After
None	103 ms	53 ms
Circle	109 ms	50 ms
Stripes	126 ms	50 ms
Vignette	220 ms	50 ms
Corner vignette	222 ms	51 ms

The before and after columns are on different random compositions, so compare the spread within a column rather than across: before, a vignette cost more than double an unmasked frame; after, every mask costs the same as none.

• Sidebar checked in the browser: the General tab's headings read Settings, Animation, Auto-randomize, Saved states, with the Motion select and its Speed slider under the new heading.
• python3 .github/scripts/checks.py main passes, including the generator.js bump.

Checklist

• No new build step, package manager, framework, or CDN dependency introduced
• generator.js still has no dependency on the UI, if touched
• Tested locally in at least one browser

🤖 Generated with Claude Code

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	flield	68fd8e3	Commit Preview URL Branch Preview URL	Sep 13 2026, 09:40 PM