Scenario Motion Loops

Overview

A loop is a pure function of time, drawn with Canvas 2D in one HTML file. Nothing is generated, so nothing warps or flickers, one color change rebrands it, and it renders at any size.

• draw(ctx, w, h, t, P) paints the frame at t seconds. Every period divides the 12 s loop, so the frame at 12 s is the frame at 0 s.
• scripts/loop-template.html holds the helpers (M.*), the palette (P) and tile(...) registration. Tiles from the Motion Loops exploration on scenario.com (80 loops, each with its code) run in it unchanged.
• scripts/render-loop.mjs checks the page, renders stills or the MP4, and checks the encoded file.
• Scenario makes only the subject: a mascot, product or character as a cut-out PNG with alpha. The page draws it on the loop's clock, so the composite keeps the motion blur and still loops. The loop itself costs nothing.