@autoaiai/aicut 0.1.11 → 0.1.13

package/MANUAL.md

@@ -1,94 +1,94 @@
-# AICUT
-
-You make films. A film is a web page, `film.html`, that cuts pages, footage, pictures and sound together. A page is a web page that sets `window.film` and draws any moment t it is asked for.
-
-## The project
-
-A folder:
-- `film.html`: the film. The person edits it in Studio at any moment: read it right before you change it, and change only what you mean to.
-- Pages (`*.html`): pictures written as code, with the files they load by relative path.
-- A packed page (`compound-*.html`): several picture clips the person packed into one — a film of its own (see below). Its text is the JSON string in `#film-source`, not its body.
-- `assets/`: media files (video, pictures, sound). The person sees every one in Studio: keep only what the film can use, and delete the pieces you made them from.
-- A project made from a template already has its pages written (`pages/*.html`) and placed in film.html. A design-style template also brings the `aicut-motion` skill into `.pi/skills/`: read it before adding motion, and keep to the palette and type it names.
-- Files and folders starting with a dot (`.film`, `.git`) belong to the tools: leave them.
-
-## film.html
-
-    <!doctype html>
-    <html>
-    <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=1920, height=1080">
-    <style>
-      .card { object-fit: cover; border-radius: 24px; }
-    </style>
-    </head>
-    <body>
-    <section>
-      <iframe src="title.html"></iframe>
-      <img src="assets/logo.png#t=0,3" at="6" style="left: 1640px; top: 60px; width: 200px">
-    </section>
-    <section>
-      <video src="assets/a.mp4#t=2,8" at="2" class="card" style="left: 160px; top: 90px; width: 1600px; height: 700px"></video>
-    </section>
-    <section>
-      <audio src="assets/bed.mp3" volume="0.6"></audio>
-    </section>
-    </body>
-    </html>
-
-- The viewport is the film's frame, in CSS pixels; without it, 1920×1080.
-- Each `<section>` is a track of clips that do not overlap; any clip goes on any track. The sections are the tracks as Studio's timeline shows them, top first: the first one's pictures are on top, so titles go before the footage they cover, and the background last. What a page does not paint is transparent; a moment with no clip is black.
-- A track the person `locked` is theirs: change nothing on it. A `hidden` track shows and plays nothing; a `muted` one plays no sound.
-- A clip is an element: `<iframe>` a page, `<video>`, `<img>` a picture, `<audio>` a sound.
-  - `src`: its file, relative to film.html. `#t=in,out` says which seconds of it play, `#t=in` to its end; without it, all of them. A picture, or a page without a `duration`, needs `#t=0,length`: how long it stays.
-  - `at`: where it starts in the film, in seconds; without it, 0.
-  - `left`, `top`, `width`, `height` in its `style` (px) and `rotate` (degrees, clockwise): where it sits. Without them, a video or picture is the stage, and a page is its own size, centered. With only `width` or `height`, the other keeps its proportions.
-  - Its look is CSS, in `class` or `style`: a video or picture fits whole in its box unless you say otherwise (`object-fit: cover` crops it to the box). The film's CSS holds still; what moves is a page.
-  - `speed` (video and sound): 0.25 to 4. The clip lasts `(out − in) / speed` seconds. To make it faster or slower, change `speed` only: never make the file again at another speed, nor move its `.vtt`'s times. Its subtitles follow `speed` on their own.
-  - `volume` (video and sound): 1 is the file's own level; `muted` silences it.
-  - `id`: a name, unique in the film; without it, the file's name.
-  - `overrides`: the person's changes made in Studio. Keep them as they are.
-  - `size` (page): the px a page without its own `width` and `height` is laid out at; without it, the stage's. Studio sets it when the frame changes shape. Keep it as it is; remove it only when you lay the page out again for the new frame.
-- Cut a long recording by trimming it: every clip of it is the same file with its own `#t=`. Never cut, crop or re-encode media into new files; CSS crops.
-
-## A page
-
-    <script type="module">
-    window.film = {
-      frame(t) { /* draw the whole picture at t seconds */ },
-      duration: 6,                  // optional: the page's own length, in seconds
-      ready: loadEverything(),      // optional: a Promise; drawing starts once it settles
-      width: 480, height: 320,      // optional: a page that is only a part of the picture
-    };
-    </script>
-
-**The one rule: the picture depends only on t.** The same t always draws the same picture, whatever was drawn before and in whatever order.
-
-- One shot per page: a film of five shots is five pages cut together in film.html, so the person can trim, reorder and replace each one. What the pages share (fonts, colors, a logo) goes in a file they load.
-- Studio edits elements, not pixels: make what the person may change a DOM element.
-- Without `width` and `height`, a page is the size of the stage: lay it out for it. With them (a chart in a corner), it is that size, and its clip's style puts it in place.
-- A page's t is its own time, starting at 0. Where it sits in the film, and for how long, is film.html's.
-- The host calls `frame(t)`; a page never animates by itself (no animation loop, no autoplay).
-- The picture is captured once `frame` returns, or once the Promise it returns resolves. Create a WebGL context with `preserveDrawingBuffer: true`.
-- A page has no sound: every sound is a clip in film.html. A shot's sound effect goes at the film second it plays: the page clip's `at`, plus the page's t, less the clip's in point (a hit at t = 2 in a clip at 5 goes at 7). When you move the page clip, move its sounds with it.
-
-## A compound page
-
-The person can select picture clips and pack them into one (Studio's 新建复合片段). Studio writes `compound-<id>.html` beside film.html: a film of its own — sections are tracks, clips are elements, pages draw themselves — and film.html holds it as a single page clip.
-
-- Read it through `#film-source`: a JSON string holding the film text. Parse the string, then read that text as film.html. The body's `<script type="module" src="__film/timeline.mjs">` plays it and is not part of the film; neither is the JSON itself. The body is not readable as film.html.
-- Its time is its own. Inside the compound `at` starts at 0; the clip in film.html says when it plays and for how long. Trim, move and scale it there, not inside.
-- Packing and unpacking are the person's: Studio puts the clips back on the film's tracks. Never split a compound by hand unless asked, and never delete one — an undo may want it.
-
-## Tools
-
-Run them in the film's folder. Each one's `--help` lists its options:
-- `npx @autoaiai/aicut open <folder>`: first. A new film gets a folder of its own, named after it (`open launch-video`); an existing one opens, and a GitHub address of one (a repository, or `…/tree/main/<folder>`) is copied into the projects library and opened. It prints Studio's address: open it in your built-in browser before you write anything and keep it open, so the person watches every change land and edits too. Without a built-in browser, Studio opens in the person's default browser by itself. `open` alone shows the film you are in, else the last one: run it when the person only asks to open AICUT.
-- `npx @autoaiai/aicut look`: a contact sheet of the whole film with its sound, and a check that the same t draws the same picture. `look 4.5` is one frame at full size, `look 3-6` a stretch, `look assets/a.mp4` a media file.
-- `npx @autoaiai/aicut render`: the MP4, beside film.html (30 fps unless `--fps`). Only when the person asks for the file: you check with `look`, and the person exports from Studio.
-- `npx @autoaiai/aicut get`: voice-over, music, sound effects, transcripts, images, image search, video and web search. Each kind works only once the person has connected a service that makes it, with their own key, in Studio (Settings → Providers); Studio's subtitle translation too. Run it alone to see what works now and which services make the rest. When a kind is not connected, tell the person which services make it and where they connect one. A video clip costs a lot: the person confirms it in Studio first.
-
-The words of a sound or a video are a WebVTT beside it with the same name (`vo/1.wav` → `vo/1.vtt`): a cue per subtitle line, a timestamp tag at each word. Studio makes the film's subtitles from them; never draw subtitles in a page.
-
-Media can come from `get`, any service the person uses (with its API docs and their key), or your own code. Save it under `assets/`.
+# AICUT
+
+You make films. A film is a web page, `film.html`, that cuts pages, footage, pictures and sound together. A page is a web page that sets `window.film` and draws any moment t it is asked for.
+
+## The project
+
+A folder:
+- `film.html`: the film. The person edits it in Studio at any moment: read it right before you change it, and change only what you mean to.
+- Pages (`*.html`): pictures written as code, with the files they load by relative path.
+- A packed page (`compound-*.html`): several picture clips the person packed into one — a film of its own (see below). Its text is the JSON string in `#film-source`, not its body.
+- `assets/`: media files (video, pictures, sound). The person sees every one in Studio: keep only what the film can use, and delete the pieces you made them from.
+- A project made from a template already has its pages written (`pages/*.html`) and placed in film.html. A design-style template also brings the `aicut-motion` skill into `.pi/skills/`: read it before adding motion, and keep to the palette and type it names.
+- Files and folders starting with a dot (`.film`, `.git`) belong to the tools: leave them.
+
+## film.html
+
+    <!doctype html>
+    <html>
+    <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=1920, height=1080">
+    <style>
+      .card { object-fit: cover; border-radius: 24px; }
+    </style>
+    </head>
+    <body>
+    <section>
+      <iframe src="title.html"></iframe>
+      <img src="assets/logo.png#t=0,3" at="6" style="left: 1640px; top: 60px; width: 200px">
+    </section>
+    <section>
+      <video src="assets/a.mp4#t=2,8" at="2" class="card" style="left: 160px; top: 90px; width: 1600px; height: 700px"></video>
+    </section>
+    <section>
+      <audio src="assets/bed.mp3" volume="0.6"></audio>
+    </section>
+    </body>
+    </html>
+
+- The viewport is the film's frame, in CSS pixels; without it, 1920×1080.
+- Each `<section>` is a track of clips that do not overlap; any clip goes on any track. The sections are the tracks as Studio's timeline shows them, top first: the first one's pictures are on top, so titles go before the footage they cover, and the background last. What a page does not paint is transparent; a moment with no clip is black.
+- A track the person `locked` is theirs: change nothing on it. A `hidden` track shows and plays nothing; a `muted` one plays no sound.
+- A clip is an element: `<iframe>` a page, `<video>`, `<img>` a picture, `<audio>` a sound.
+  - `src`: its file, relative to film.html. `#t=in,out` says which seconds of it play, `#t=in` to its end; without it, all of them. A picture, or a page without a `duration`, needs `#t=0,length`: how long it stays.
+  - `at`: where it starts in the film, in seconds; without it, 0.
+  - `left`, `top`, `width`, `height` in its `style` (px) and `rotate` (degrees, clockwise): where it sits. Without them, a video or picture is the stage, and a page is its own size, centered. With only `width` or `height`, the other keeps its proportions.
+  - Its look is CSS, in `class` or `style`: a video or picture fits whole in its box unless you say otherwise (`object-fit: cover` crops it to the box). The film's CSS holds still; what moves is a page.
+  - `speed` (video and sound): 0.25 to 4. The clip lasts `(out − in) / speed` seconds. To make it faster or slower, change `speed` only: never make the file again at another speed, nor move its `.vtt`'s times. Its subtitles follow `speed` on their own.
+  - `volume` (video and sound): 1 is the file's own level; `muted` silences it.
+  - `id`: a name, unique in the film; without it, the file's name.
+  - `overrides`: the person's changes made in Studio. Keep them as they are.
+  - `size` (page): the px a page without its own `width` and `height` is laid out at; without it, the stage's. Studio sets it when the frame changes shape. Keep it as it is; remove it only when you lay the page out again for the new frame.
+- Cut a long recording by trimming it: every clip of it is the same file with its own `#t=`. Never cut, crop or re-encode media into new files; CSS crops.
+
+## A page
+
+    <script type="module">
+    window.film = {
+      frame(t) { /* draw the whole picture at t seconds */ },
+      duration: 6,                  // optional: the page's own length, in seconds
+      ready: loadEverything(),      // optional: a Promise; drawing starts once it settles
+      width: 480, height: 320,      // optional: a page that is only a part of the picture
+    };
+    </script>
+
+**The one rule: the picture depends only on t.** The same t always draws the same picture, whatever was drawn before and in whatever order.
+
+- One shot per page: a film of five shots is five pages cut together in film.html, so the person can trim, reorder and replace each one. What the pages share (fonts, colors, a logo) goes in a file they load.
+- Studio edits elements, not pixels: make what the person may change a DOM element.
+- Without `width` and `height`, a page is the size of the stage: lay it out for it. With them (a chart in a corner), it is that size, and its clip's style puts it in place.
+- A page's t is its own time, starting at 0. Where it sits in the film, and for how long, is film.html's.
+- The host calls `frame(t)`; a page never animates by itself (no animation loop, no autoplay).
+- The picture is captured once `frame` returns, or once the Promise it returns resolves. Create a WebGL context with `preserveDrawingBuffer: true`.
+- A page has no sound: every sound is a clip in film.html. A shot's sound effect goes at the film second it plays: the page clip's `at`, plus the page's t, less the clip's in point (a hit at t = 2 in a clip at 5 goes at 7). When you move the page clip, move its sounds with it.
+
+## A compound page
+
+The person can select picture clips and pack them into one (Studio's 新建复合片段). Studio writes `compound-<id>.html` beside film.html: a film of its own — sections are tracks, clips are elements, pages draw themselves — and film.html holds it as a single page clip.
+
+- Read it through `#film-source`: a JSON string holding the film text. Parse the string, then read that text as film.html. The body's `<script type="module" src="__film/timeline.mjs">` plays it and is not part of the film; neither is the JSON itself. The body is not readable as film.html.
+- Its time is its own. Inside the compound `at` starts at 0; the clip in film.html says when it plays and for how long. Trim, move and scale it there, not inside.
+- Packing and unpacking are the person's: Studio puts the clips back on the film's tracks. Never split a compound by hand unless asked, and never delete one — an undo may want it.
+
+## Tools
+
+Run them in the film's folder. Each one's `--help` lists its options:
+- `npx @autoaiai/aicut open <folder>`: first. A new film gets a folder of its own, named after it (`open launch-video`); an existing one opens, and a GitHub address of one (a repository, or `…/tree/main/<folder>`) is copied into the projects library and opened. It prints Studio's address: open it in your built-in browser before you write anything and keep it open, so the person watches every change land and edits too. Without a built-in browser, Studio opens in the person's default browser by itself. `open` alone shows the film you are in, else the last one: run it when the person only asks to open AICUT.
+- `npx @autoaiai/aicut look`: a contact sheet of the whole film with its sound, and a check that the same t draws the same picture. `look 4.5` is one frame at full size, `look 3-6` a stretch, `look assets/a.mp4` a media file.
+- `npx @autoaiai/aicut render`: the MP4, beside film.html (30 fps unless `--fps`). Only when the person asks for the file: you check with `look`, and the person exports from Studio.
+- `npx @autoaiai/aicut get`: voice-over, music, sound effects, transcripts, images, image search, video and web search. Each kind works only once the person has connected a service that makes it, with their own key, in Studio (Settings → Providers); Studio's subtitle translation too. Run it alone to see what works now and which services make the rest. When a kind is not connected, tell the person which services make it and where they connect one. A video clip costs a lot: the person confirms it in Studio first.
+
+The words of a sound or a video are a WebVTT beside it with the same name (`vo/1.wav` → `vo/1.vtt`): a cue per subtitle line, a timestamp tag at each word. Studio makes the film's subtitles from them; never draw subtitles in a page.
+
+Media can come from `get`, any service the person uses (with its API docs and their key), or your own code. Save it under `assets/`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autoaiai/aicut",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "publishConfig": {
     "access": "public"
   },

package/skills/aicut-motion/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: aicut-motion
-description: 'Design motion films that look authored rather than generated — brand films, showreels, kinetic typography, explainers, data stories, product and UI promos, character stories, music videos, abstract loops, title sequences. Use when a film needs art direction — a style, a palette and type system, real transformations, a plan laid out on beats, and a critique of its own frames. Works on AICUT films (film.html and pages with window.film).'
+description: 'Design motion films that look authored rather than generated — brand films, showreels, kinetic typography, explainers, data stories, product and UI promos, character stories, music videos, abstract loops, title sequences. Use when a film needs art direction — a style, a palette and type system, real transformations, a plan laid out on beats, and a critique of its own frames — and when someone gives a topic and wants a visual direction chosen first: eighty-six archived styles, three real covers in the chat question card, one pick, then a twenty-second sample. Works on AICUT films (film.html and pages with window.film).'
 license: MIT
 ---
 
@@ -94,8 +94,8 @@ Only where the prompt is silent; never override a ledger row.
 1. **The prompt states it** — palette, materials, type, references. The contract comes from the ledger alone.
 2. **The prompt names a feeling, medium or reference** ("like a newspaper", 水墨, "terminal", "Swiss poster") —
    start from the closest seed in `references/design-systems/` and adapt it.
-3. **The prompt is a bare idea** — synthesise a contract with the method below. Seeds are starting points, not
-   defaults.
+3. **The prompt is a bare idea** — take a direction from the archive of eighty-six looks (below), or synthesise a
+   contract with the method under it. Seeds are starting points, not defaults.
 
 **Synthesis method:**
 
@@ -118,6 +118,72 @@ stories, MVs).
 (tempo, named scenes, scene changes), characters if any, and a scene-by-scene storyboard with timestamps and
 numbers. That brief becomes the ledgers. In prompt-only mode, output it and stop.
 
+## The archive of eighty-six looks
+
+`assets/atlas/` is a reference collection, not a program: eighty-six visual styles that exist, each with its own cover,
+what it is made of, how it moves, and the canvas source that drew it. What is archived is a **look and a way of
+moving** — a palette, a material, a set of gestures. What the film is about comes from the person's topic and from
+nowhere else.
+
+- `references/style-index.json` — all 86, one row each: `id`, `name`, `nameZh`, `family`, `familyZh`, `folder`.
+- `assets/atlas/styles/<folder>/poster.jpg` — the style's own cover, 800×450, the picture the person sees.
+- `assets/atlas/styles/<folder>/style.json` — `description` (the look), `motionNotes` (how it moves),
+  `explainerNotes` (how it explains), `code` (the file below).
+- `assets/atlas/styles/<folder>/code.js` — the reference animation, `draw(ctx, W, H, t)`: a pure function of time, the
+  same `t` always giving the same pixels.
+- `assets/atlas/lib/harness.js`, `assets/atlas/lib/sound.js` — the helpers those files share (seeded randomness,
+  gradient noise, easing), here once.
+- `scripts/atlas.mjs` — the index as commands: `--list`, `--id 26`, `--verify`, `--pick 32,26,2`.
+- `scripts/atlas-viewer.html` — open it in any browser: the 86 styles play, scrubbable, each with its own notes beside
+  it. No build, no AICUT, no network — the three pieces the film needs (the harness, one `code.js`, a `t`). Use it to
+  look at a style before recommending it, and to see where a beat starts before reading the code for it.
+
+Nothing here is an instruction to run. Check what a file does before reusing any of it. The viewer is the one exception:
+it only plays files that are already here.
+
+**When the prompt is a bare idea, the order is four steps and exactly two confirmations.**
+
+1. **Recommend three.** Say in one sentence what the person should understand by the end. If a fact the film will
+   state is not certain, check it first. Read `references/style-index.json` in full — all 86, not the nine whose names
+   you already know — and pick three that differ in **how they explain**: one whose mechanism is drawing (whiteboard,
+   isotype, blueprint, transit map), one made of a material (watercolour, paper cut, clay, felt), one graphic or
+   photographic (halftone, riso, editorial chart, neon). Open the three posters and their `style.json` before
+   recommending; never recommend from a name alone. Give each a letter, its name, and one sentence of why it suits
+   *this* topic.
+2. **Show the covers, then ask with the card.** Copy the three covers into the project and ask with the picture card —
+   `references/style-selection.md` has the exact command (`atlas.mjs --pick 32,26,2`) and the exact `ask` shape. The
+   pictures are the archive's own covers: say so — the subject in them is not their topic, and the sample will be.
+   **Confirmation 1 is the pick.** An unanswered card, a default selection, or time passing is not a pick. If the
+   person already named a style, in this message or an earlier one, take it and do not ask again.
+3. **A sample they can judge.** Read `references/style-research.md` and study the chosen style properly: its
+   `style.json`, its `code.js`, and the shared `lib/` files it uses. Then write the film's opening — 4 to 6 beats, about
+   20 seconds — as a real page in `film.html`, in that style, about their topic. Not a title card, not three stills
+   pushed and pulled: the mechanism has to move. Look at it (`aicut look`), read the frames, fix what is wrong, look
+   again, then show it and say what part of the film it is and what is still missing. **Confirmation 2 is the approved
+   sample.** A chosen style is not an approved sample, and “颜色可以” is not approval of the whole sample.
+4. **The whole film.** Keep the approved sample's code and rules; write the rest of the film in them. Length comes from
+   the content, not from a rule. Do not change the style, redo approved beats, or add a third confirmation. Check the
+   whole timeline against `references/motion-delivery.md` before saying what the film is.
+
+Everything else here still holds: the ledgers (stage 0), the gaps (stage 1), the timeline (stage 3), the stills before
+the motion (stage 4), the jury (stage 6). The sample is stage 5's first cut of the opening beats, not a separate film.
+
+### Reading a style's time from its code
+
+`code.js` is a function of time: everything that happens is written in it as a function of `t`. That is the same shape
+an AICUT page has (`frame(t)`), which is why this archive is useful here at all:
+
+- find what is drawn as a function of `t` and what is drawn once — the material, the camera, the objects, the text;
+- find the beats: where a value is a `smoothstep`/`ease` of `t` between two numbers, that is a beat, and the two numbers
+  are its start and end;
+- the palette, the texture and the finishing pass are the look; keep them.
+
+Port the technique, not the file. The archive's renderer is its own harness; the film is an AICUT page. A style named
+after a medium is a set of decisions (paper, pigment, edges, drying), not a shader to paste.
+
+The archive is from Futurepedia's AI Style Atlas — `THIRD_PARTY_NOTICES.md` travels with it. Keep the source line in
+what you deliver, and never present the covers as pictures made for this film.
+
 ## Stage 3 — the timeline before the code
 
 1. One row per scene: `start–end s · name · what the viewer learns · carried element in → out · transition out (X##)`.

package/skills/aicut-motion/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,14 @@
+# Third-party notices
+
+The 86 visual styles in `assets/atlas/` — their covers, their descriptions and the reference code — come from
+[Futurepedia — AI Style Atlas](https://www.futurepedia.io/resources/ai-style-atlas/view), archived 2026-10-26.
+
+Copyright Futurepedia LLC, as displayed on the source site. They are kept here as reference material for a film's art
+direction: the covers are shown to the person choosing a direction, and the code is read, never executed by AICUT.
+Bundling them is not a claim of ownership or permission to redistribute.
+
+What this skill adds is this folder's own writing — `SKILL.md`, `references/` and `scripts/atlas.mjs` — and the
+conversion of the archive's per-style folders into one look-up table with de-duplicated shared code.
+
+The archive shipped 86 explainer videos and 86 style clips (about 400 MB); they are not here. A style's time is in its
+`code.js`, which is a pure function of `t` — a better record than a video, and small enough to travel with the skill.

package/skills/aicut-motion/assets/atlas/lib/harness.js

@@ -0,0 +1,116 @@
+// Shared helpers + style registry for the style-frame explorations.
+// Every style is a pure function of time: draw(ctx, W, H, t). Same t => same pixels.
+(function () {
+  const STYLES = (window.STYLES = window.STYLES || []);
+  window.registerStyle = (s) => STYLES.push(s);
+
+  const H = (window.H = {});
+
+  // ---------- seeded randomness ----------
+  // H.rng(seed) -> r() in [0,1). Extras: r.range(a,b), r.int(a,b), r.pick(arr), r.gauss(), r.chance(p)
+  H.rng = function (seed = 1) {
+    let a = typeof seed === 'string' ? hashStr(seed) : (seed >>> 0) || 1;
+    const r = function () {
+      a |= 0; a = (a + 0x6d2b79f5) | 0;
+      let t = Math.imul(a ^ (a >>> 15), 1 | a);
+      t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+      return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+    r.range = (lo, hi) => lo + r() * (hi - lo);
+    r.int = (lo, hi) => Math.floor(lo + r() * (hi - lo + 1));
+    r.pick = (arr) => arr[Math.floor(r() * arr.length)];
+    r.chance = (p) => r() < p;
+    r.gauss = () => { let u = 0, v = 0; while (!u) u = r(); while (!v) v = r(); return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v); };
+    return r;
+  };
+  function hashStr(s) { let h = 2166136261; for (let i = 0; i < s.length; i++) { h ^= s.charCodeAt(i); h = Math.imul(h, 16777619); } return h >>> 0; }
+
+  // ---------- gradient noise ----------
+  // H.makeNoise(seed) -> { n2(x,y), n3(x,y,z), fbm2(x,y,oct), fbm3(x,y,z,oct) }  (outputs roughly -1..1)
+  H.makeNoise = function (seed = 1) {
+    const r = H.rng(seed), p = new Uint8Array(512), perm = [...Array(256).keys()];
+    for (let i = 255; i > 0; i--) { const j = Math.floor(r() * (i + 1)); [perm[i], perm[j]] = [perm[j], perm[i]]; }
+    for (let i = 0; i < 512; i++) p[i] = perm[i & 255];
+    const fade = (t) => t * t * t * (t * (t * 6 - 15) + 10);
+    const lerp = (a, b, t) => a + (b - a) * t;
+    const g3 = (h, x, y, z) => { h &= 15; const u = h < 8 ? x : y, v = h < 4 ? y : h === 12 || h === 14 ? x : z; return ((h & 1) ? -u : u) + ((h & 2) ? -v : v); };
+    function n3(x, y, z) {
+      const X = Math.floor(x) & 255, Y = Math.floor(y) & 255, Z = Math.floor(z) & 255;
+      x -= Math.floor(x); y -= Math.floor(y); z -= Math.floor(z);
+      const u = fade(x), v = fade(y), w = fade(z);
+      const A = p[X] + Y, AA = p[A] + Z, AB = p[A + 1] + Z, B = p[X + 1] + Y, BA = p[B] + Z, BB = p[B + 1] + Z;
+      return lerp(lerp(lerp(g3(p[AA], x, y, z), g3(p[BA], x - 1, y, z), u), lerp(g3(p[AB], x, y - 1, z), g3(p[BB], x - 1, y - 1, z), u), v),
+        lerp(lerp(g3(p[AA + 1], x, y, z - 1), g3(p[BA + 1], x - 1, y, z - 1), u), lerp(g3(p[AB + 1], x, y - 1, z - 1), g3(p[BB + 1], x - 1, y - 1, z - 1), u), v), w);
+    }
+    const n2 = (x, y) => n3(x, y, 0.5);
+    const fbm3 = (x, y, z, oct = 4) => { let s = 0, a = 0.5, f = 1, norm = 0; for (let i = 0; i < oct; i++) { s += a * n3(x * f, y * f, z * f); norm += a; a *= 0.5; f *= 2; } return s / norm; };
+    const fbm2 = (x, y, oct = 4) => fbm3(x, y, 0.5, oct);
+    return { n2, n3, fbm2, fbm3 };
+  };
+
+  // ---------- math ----------
+  H.lerp = (a, b, t) => a + (b - a) * t;
+  H.clamp = (v, lo = 0, hi = 1) => Math.max(lo, Math.min(hi, v));
+  H.map = (v, a, b, c, d) => c + ((v - a) / (b - a)) * (d - c);
+  H.smooth = (e0, e1, x) => { const t = H.clamp((x - e0) / (e1 - e0)); return t * t * (3 - 2 * t); };
+  H.ease = {
+    inOut: (t) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2),
+    out: (t) => 1 - Math.pow(1 - t, 3),
+    in: (t) => t * t * t,
+    back: (t) => { const c = 1.70158; return 1 + (c + 1) * Math.pow(t - 1, 3) + c * Math.pow(t - 1, 2); },
+  };
+
+  // ---------- color ----------
+  H.hex = (h) => { h = h.replace('#', ''); if (h.length === 3) h = h.split('').map((c) => c + c).join(''); const n = parseInt(h, 16); return [(n >> 16) & 255, (n >> 8) & 255, n & 255]; };
+  H.rgba = (hexOrArr, a = 1) => { const [r, g, b] = Array.isArray(hexOrArr) ? hexOrArr : H.hex(hexOrArr); return `rgba(${r | 0},${g | 0},${b | 0},${a})`; };
+  H.mix = (c1, c2, t) => { const a = Array.isArray(c1) ? c1 : H.hex(c1), b = Array.isArray(c2) ? c2 : H.hex(c2); return [0, 1, 2].map((i) => a[i] + (b[i] - a[i]) * t); };
+
+  // ---------- canvas utilities ----------
+  // Offscreen canvas of the same logical size (use for layers, masks, compositing).
+  H.layer = (W, H_, ) => { const c = document.createElement('canvas'); c.width = W; c.height = H_; return c; };
+  // Monochrome grain / film noise over the whole canvas. amount ~ 0.03-0.15
+  H.grain = function (ctx, W, Hh, amount = 0.08, seed = 7, mono = true) {
+    const img = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height), d = img.data, r = H.rng(seed), k = amount * 255;
+    for (let i = 0; i < d.length; i += 4) {
+      const n = (r() - 0.5) * k;
+      if (mono) { d[i] += n; d[i + 1] += n; d[i + 2] += n; }
+      else { d[i] += (r() - 0.5) * k; d[i + 1] += (r() - 0.5) * k; d[i + 2] += (r() - 0.5) * k; }
+    }
+    ctx.putImageData(img, 0, 0);
+  };
+  // Paper-ish texture tile: fills with base color + fibrous noise (cheap; drawn into ctx).
+  H.paper = function (ctx, W, Hh, base = '#f3ecdc', seed = 3, strength = 0.06) {
+    ctx.save(); ctx.fillStyle = base; ctx.fillRect(0, 0, W, Hh);
+    const nz = H.makeNoise(seed), cell = 4, [br, bg, bb] = H.hex(base);
+    for (let y = 0; y < Hh; y += cell) for (let x = 0; x < W; x += cell) {
+      const v = nz.fbm2(x * 0.01, y * 0.01, 3) * 0.6 + nz.n2(x * 0.15, y * 0.04) * 0.4;
+      const s = 1 + v * strength * 2;
+      ctx.fillStyle = `rgb(${br * s | 0},${bg * s | 0},${bb * s | 0})`; ctx.fillRect(x, y, cell, cell);
+    }
+    ctx.restore();
+  };
+  // Vignette
+  H.vignette = function (ctx, W, Hh, strength = 0.5, color = '0,0,0') {
+    const g = ctx.createRadialGradient(W / 2, Hh / 2, Math.min(W, Hh) * 0.3, W / 2, Hh / 2, Math.hypot(W, Hh) * 0.6);
+    g.addColorStop(0, `rgba(${color},0)`); g.addColorStop(1, `rgba(${color},${strength})`);
+    ctx.save(); ctx.fillStyle = g; ctx.fillRect(0, 0, W, Hh); ctx.restore();
+  };
+
+  // ---------- rendering entry ----------
+  // Renders style into canvas at logical 1280x720 (canvas can be any pixel size; it is scaled).
+  H.W = 1280; H.H = 720;
+  H.loadFonts = async function (style) {
+    const specs = style.fonts || [];
+    try { const sample = 'AaZz09' + (window.FONT_SAMPLE || '');
+      await Promise.all(specs.map((f) => document.fonts.load(f, sample))); await document.fonts.ready; } catch (e) { /* render anyway */ }
+  };
+  H.render = function (style, canvas, t) {
+    const ctx = canvas.getContext('2d', { willReadFrequently: !!style.readsPixels });
+    const sx = canvas.width / H.W, sy = canvas.height / H.H;
+    ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.globalAlpha = 1; ctx.globalCompositeOperation = 'source-over'; ctx.filter = 'none';
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.save(); ctx.scale(sx, sy);
+    style.draw(ctx, H.W, H.H, t == null ? style.frameT || 0 : t);
+    ctx.restore();
+  };
+})();