@autoaiai/aicut 0.0.0-stage → 0.1.7

package/skills/aicut-motion/references/design-systems/data-instrument.md

@@ -0,0 +1,71 @@
+# data-instrument
+
+Fits: explainers, finance, science, health, SaaS, any film carried by numbers or a process. Not for: pure mood pieces.
+
+## Palette
+
+- Paper white `#F7F7F5` or deep slate `#0F1419`; ink `#1C2430` or `#E6EDF3`.
+- One data accent: `#2F6BFF` on light, `#4CC2FF` on dark.
+- A second series colour `#F2994A`, only when comparing.
+- Grid and axes in ink at 15–25%.
+
+## Type
+
+- Inter or Geist 600–800 for headlines (90–160 px).
+- Geist Mono or IBM Plex Mono 400–500 for numbers and labels (20–28 px), `font-variant-numeric: tabular-nums`.
+
+## Marks, in a page
+
+- 1.5–2 px axes and leader lines; 3 px data lines; 8 px dots with a 2 px ring.
+- Bars with square ends (`<rect>`, no radius).
+- Diagrams from boxes with 8 px corners and 1.5 px strokes.
+- Lines draw on with `drawOn`; values roll with `counter()` (`references/pages.md`).
+
+```js
+const draw = prog(t, 1.0, 0.9, EASE.out);
+line.setAttribute('d', toPath(series.slice(0, Math.ceil(draw * series.length)), false));
+dot.setAttribute('cx', String(xAt(draw * (series.length - 1))));   // the dot rides the line's head, not a timer
+counter(valueEl, 0, 412, draw);
+```
+
+## Texture
+
+None, or one grain rect at 0.04. Precision is the look.
+
+## Layout
+
+- A 12-column grid with 150 px margins.
+- One chart or diagram per scene, about 60% of the frame.
+- Labels attach to their marks with leader lines, never a legend if avoidable.
+
+## Composition
+
+- Occupancy: one chart or diagram fills about 60% of the frame.
+- Labels attached to their marks; 150 px margins; nothing bleeds.
+
+## Motion character
+
+- 100–120 BPM. Axes first, then data, then the annotation, in that order — never all three at once.
+- `EASE.out` 0.4–0.7 s; `settle` without bounce. Numbers roll on `EASE.smooth`.
+
+## Transition grammar
+
+- A data point becomes the next scene's origin: zoom into the dot, the dot becomes a ring, the ring becomes a chart.
+- A line chart's line unbends into the next scene's timeline (one path, morphing through an intermediate shape).
+- A bar grows until it is the full-frame background colour (one `<rect>`, no cut).
+
+## Signature details
+
+- A live time code and a source line in mono at the bottom.
+- The key number repeated large at the end.
+- Thin crosshairs that track the value being discussed.
+
+## Sound
+
+- A soft pad; `tick` as counters roll and values land; a `bell` when the key number lands; `whoosh` on zoom
+  transitions.
+- 100–120 BPM.
+
+## Bans
+
+3D charts, pie charts with more than four slices, gradients, glow, invented numbers presented as real, chartjunk.

package/skills/aicut-motion/references/design-systems/drafting-table.md

@@ -0,0 +1,76 @@
+# drafting-table
+
+Fits: designers, creative tools, process, engineering, "how it's made". Not for: luxury, emotional storytelling, food.
+
+## Palette
+
+- PAPER: background `#EDE6D5`, graphite line `#16161A`, accent blue `#1B3ED2`.
+- BLUEPRINT: background `#1B3ED2`, lines `#FFFFFF`, accent cyan `#45F0DD`.
+- HOLOGRAM: background `#07080A`, lines `#45F0DD`, white core `#FFFFFF`.
+- Rule: each material's accent is the next material's main colour — the film's transitions are already argued for.
+
+## Type
+
+Geist only. 900 for big words; 600–800 for labels at 24–28 px, tracked 0.14–0.3 em.
+
+## Marks, in a page
+
+- **Paper:** 4 px strokes with `filter="url(#rough)"` (baseFrequency 0.03, scale 5). Fills are a 45° `<pattern>` of
+  2 px blue rules on an 8–9 px pitch; big type is SVG `<text>` with `fill="url(#hatch)"` and a 2 px stroke.
+- **Blueprint:** clean 3–4 px white paths, drawn on with `drawOn(path, p)`; hidden edges 2 px dashed
+  (`stroke-dasharray: 10 8`); fine 1.2 px hatching as a `<pattern>`.
+- **Hologram:** the same path twice — cyan at full width, white at 30% of it on top. Fills are horizontal lines on an
+  8 px pitch; thicker means more lit. No blur, no glow.
+
+A material change is the same `d` with new paint, never a new shape:
+
+```js
+const d = toPath(morphPts(cube, panel, prog(t, 3.2, 0.5, EASE.inOut)));   // X02
+shape.setAttribute('d', d);
+shape.setAttribute('class', materialAt(t));   // .paper | .blueprint | .hologram — colour, stroke, filter only
+```
+
+## Texture
+
+A grain `<rect>` with `filter="url(#grain)"`, `mix-blend-mode: multiply`, opacity 0.15–0.2, on paper only. A 60 px
+grid at 13%, every fifth line at 26%, drawn in the current material's line colour.
+
+## Layout
+
+Locked camera, front-on. Safe area 150 / 90 px. Centred, with ruler-like rails running to the frame edge.
+
+## Composition
+
+- Occupancy: the subject fills 40–70% of the width.
+- Centred and symmetric; construction marks extend out from it.
+- No bleed except a scan line or a flood mask in transit.
+
+## Motion character
+
+120 BPM, an event on every beat. `settle(t, beat, { lead: 0.05 })` with no overshoot. `EASE.in` for presses and
+drops, `EASE.inOut` for scans. Holds ≤ 0.5 s.
+
+## Transition grammar
+
+- A carrier line morphs through shapes (line → circle → polygon → tiles) on equal point counts.
+- Paper → blueprint: a shape floods the frame — `revealCircle(p)` on a full-frame rect.
+- Blueprint → hologram: one horizontal scan line, `revealInset(p, 'top')` on the new material plus a drawn 4 px line
+  travelling with it.
+- Cubes unfold into dashboard panels (one path, morphing).
+
+## Signature details
+
+- Corner labels: "FIG. 07 — GEAR" top left, "BEAT 27 / 60" bottom right.
+- Pen-tool handles labelled EASE, ruler ticks, dimension lines with live numbers, gears labelled 16T.
+- Charts that describe the film itself.
+- A small box mascot holding a pencil.
+
+## Sound
+
+- A `scratch` under each line being drawn on; a `tick` on every beat; a `knock` on presses and claps; a `whoosh` on
+  floods and scans; a soft pad bed.
+- 120 BPM. One `<audio>` clip per hit, placed on the `T` block.
+
+## Bans
+
+Particles, glows, lens flares, camera shake, RGB split, crossfades, gradients, bounce.

package/skills/aicut-motion/references/design-systems/editorial-ink.md

@@ -0,0 +1,83 @@
+# editorial-ink
+
+Fits: culture, food and tea, books, craft, heritage, Chinese and East Asian themes, slow luxury. Not for: tech
+launches, sport.
+
+## Palette
+
+- Rice paper `#F3EEE3`, ink black `#1A1814`.
+- Washes of ink at 8–40% opacity.
+- Seal red `#B8322A` as the only accent.
+- Optional tea or ochre `#A7774A`.
+
+## Type
+
+- Serif with character. Latin: Fraunces 300–600, or Noto Serif SC for Chinese, at 120–260 px.
+- Captions: Noto Sans SC or Inter 400, 22–26 px, tracked 0.1 em.
+- Vertical Chinese titles are welcome: `writing-mode: vertical-rl` on the block, one column per line, right to left
+  across the frame.
+
+## Marks, in a page
+
+- **Brush strokes:** a `<path>` stroked 10–40 px, round caps, drawn on with `drawOn(path, p)`. Dry edges come from
+  `filter="url(#rough)"` with `baseFrequency` 0.02–0.04 and `scale` 4–10: crisper and denser for small or near
+  marks, softer and fainter for large or far ones.
+- **Washes and mountains:** layered shapes far to near, 15–40% opacity far and 80–90% near, each layer with its own
+  filter `seed`. A wash spreads by morphing outward from a drop (`morphPts` from a small ring to the wash's
+  outline) — never by scaling, which reads as a zoom.
+- **Mist:** thin horizontal strokes 10–25 px tall at 10–15% opacity, drifting with `wobble(seed, i, t, 0.15)`. Never
+  blurred blobs.
+- **Seals:** a red rounded square with knocked-out characters (`<rect>` plus white `<text>`).
+
+```js
+const spread = prog(t, 1.2, 1.4, EASE.out);          // a wash arriving
+wash.setAttribute('d', toPath(morphPts(dropRing, washRing, spread)));
+wash.style.opacity = String(0.15 + 0.5 * spread);    // opacity is part of the same move
+```
+
+## Texture
+
+Paper is the background: a full-frame rect of `#F3EEE3` under one grain rect (multiply, 0.2). Ink carries its own
+grain through `url(#rough)`. Keep the two textures separate — never one noise layer over everything.
+
+## Layout
+
+Generous negative space; asymmetric, the subject on a third. Columns of vertical text; a seal near a corner of the
+title.
+
+## Composition
+
+- Occupancy: the subject within about 60% of the width.
+- At least 50% of the frame is empty paper; nothing bleeds.
+- Mist and washes stay inside the safe area.
+- Title on the right or left third, never centred over the subject.
+
+## Motion character
+
+- 60–80 BPM; breathing, never snappy. `EASE.smooth` over 0.8–1.6 s.
+- Ink spreads on `EASE.out`. Holds of 1–2 s are allowed for reading.
+- No overshoot, no bounce.
+
+## Transition grammar
+
+- A wash spreads until it fills the frame, then thins into the next scene's paper — one full-frame rect whose
+  `clip-path` grows, then fades.
+- A brush stroke sweeps across as a wipe (`revealInset(p, 'left')` clipped to the stroke's path).
+- A shape (a leaf, a mountain) dissolves into wash and re-forms as the next shape: one path, two morphs, wash in
+  between.
+
+## Signature details
+
+- A seal that stamps on beat 1 of the title (scale down onto the frame with `settle`, no bounce).
+- Small vertical captions with dates or places.
+- One slow drifting element: steam, a petal, mist.
+
+## Sound
+
+- A low drone on the root; a `pluck` on a pentatonic scale (for example D E F# A B) once per bar.
+- `drop` for ink and water; `knock` for seals and stamps; a light `scratch` under brush strokes.
+- 60–80 BPM, long reverb.
+
+## Bans
+
+Neon, gradients, glossy 3D, fast cuts, sans-serif titles, emoji, more than one red element per scene.

package/skills/aicut-motion/references/design-systems/riso-halftone.md

@@ -0,0 +1,70 @@
+# riso-halftone
+
+Fits: indie brands, zines, retro, nostalgia, playful education, small makers. Not for: corporate, luxury.
+
+## Palette
+
+- Two or three spot inks on paper `#F4EFE4`: fluorescent pink `#FF48B0`, blue `#0078BF`, yellow `#FFE800`, or teal
+  `#00838A`.
+- Overlaps multiply (`mix-blend-mode: multiply`) to make the third colour — that is what the third ink is for, so
+  never use it as a flat fill where two others already overlap.
+
+## Type
+
+- Chunky grotesk or rounded at 700–900 (Space Grotesk, Archivo, or ZCOOL KuaiLe for Chinese) at 140–300 px.
+- Typewriter-like mono for captions (IBM Plex Mono, 22 px).
+
+## Marks, in a page
+
+- **Halftone fills:** a `<pattern>` of dots 4–10 px in pitch, dot radius scaled per area to fake tone
+  (`patternTransform="scale(0.7)"` on lighter areas, 1.3 on darker ones). Two patterns are enough for a whole film.
+- **Misregistration:** each ink layer is its own element, offset 2–6 px, drifting with
+  `wobble(seed, layer, t, 0.3)` — the offset is what makes it read as printed.
+- **Shapes:** simple and blobby, flat fill, drawn as paths — no outlines.
+
+```html
+<g style="mix-blend-mode: multiply">
+  <circle cx="820" cy="520" r="260" fill="url(#dotsPink)" style="transform: translate(3px, -2px)"/>
+  <circle cx="1080" cy="560" r="300" fill="url(#dotsBlue)"  style="transform: translate(-4px, 2px)"/>
+</g>
+```
+
+## Texture
+
+Paper grain at 0.2, plus a mottled `feTurbulence` mask on large fills so some paper shows through
+(`<mask>` with a `feTurbulence` + `feComponentTransfer` alpha ramp). Never a clean vector fill at full opacity.
+
+## Layout
+
+Collage-like, slightly off-grid; elements tilted ±3°; tape and sticker motifs; printed margins.
+
+## Composition
+
+- Occupancy 50–80%, collage-like and slightly off-grid.
+- Printed margins: a 120 px paper border; nothing bleeds unless it is a page turn.
+
+## Motion character
+
+- 100–120 BPM, stepped: positions update on twos — `stepped(t, 12)` — which reads as hand-made.
+- Mild overshoot allowed (`settle(..., { bounce: 0.2 })`). Layers slide into register on the beat: from a 4–6 px
+  offset to 0, in 0.12 s.
+
+## Transition grammar
+
+- A page turn or a new "sheet" sliding in over the old one.
+- One ink layer wipes across and the next scene is printed in it.
+- A halftone dot grows until it becomes the next background (`revealCircle`, with the dot pattern behind it).
+
+## Signature details
+
+Registration crosses in the corners; a print-run counter ("№ 027 / 300"); colour separations shown briefly before
+they combine.
+
+## Sound
+
+- A lo-fi `pluck` figure; `knock` when a layer slides into register; `scratch` for paper slides; `tick` on beats.
+- 100–120 BPM.
+
+## Bans
+
+Smooth gradients, glossy effects, perfect vector precision everywhere, more than three inks.

package/skills/aicut-motion/references/design-systems/storybook-scene.md

@@ -0,0 +1,75 @@
+# storybook-scene
+
+Fits: short stories, characters, music videos and lyric clips, picture books, emotional moments, mascots acting. Not
+for: data, product specs.
+
+## Palette
+
+- One dominant mood colour for sky and air (night `#2B3150`–`#4A4F7A`, dusk `#5B6A8F`, day `#BFD8E6`).
+- Darker values of it for ground and silhouettes.
+- Two or three accents carry the story: the key object's colour, the light colour (warm lamp `#F2C46D`), skin or
+  material tones.
+- Characters are told apart by one flat colour each.
+
+## Type
+
+- Title: brush or serif display in a corner, vertical for Chinese (Ma Shan Zheng, Noto Serif SC 700).
+- Captions: Noto Serif SC or Noto Sans SC at 40–48 px, warm white or lamp yellow, with an optional word-by-word
+  highlight (one `<span>` per word, `color` swapped on the beat — never a fade).
+
+## Marks, in a page
+
+- Flat shapes, one darker shade per object for volume, corners slightly rounded.
+- **Characters are drawn for the story, not rigged from a library.** Give each one a silhouette the story suggests,
+  a shade side, clothing or material details, and an expressive face (eyes, brows, mouth). Never a stick figure
+  unless asked. Interpolate between named poses with the `poseAt` pattern in `references/pages.md`; anything they hold
+  is drawn at the hand's grip point.
+- Weather as many thin streaks (rain) or drifting dots (snow) across the whole frame, in two depths, each offset by
+  `rand(seed + i)` so no two are in step.
+- Light as translucent wedge shapes under lamps, lit windows, and reflections as vertical streaks in puddles — no
+  blur, no glow.
+
+## Texture
+
+Grain at 0.06, or paper at low strength; a soft `url(#rough)` on ground and foliage for a cut-paper edge when the
+story is gentle.
+
+## Composition
+
+- Occupancy: the world fills the frame, characters about 25–40% of its height.
+- Wide and locked: horizon on the lower third, characters on a third line, the key object at the focal point.
+- Layers back to front: sky or wall, far (skyline, hills, shelves), mid (the main set), ground, foreground (posts,
+  plants, puddles, objects).
+- Captions in the lower third, never over a face.
+
+## Motion character
+
+- 60–90 BPM, character-led.
+- Acting in small readable poses: a hand over, a head turn, a wave, a slump. `settle` with `{ bounce: 0.15 }` for
+  gestures only.
+- Weather and ambient elements move continuously. The big moves (an arrival, a departure, a gift handed over, a
+  reveal) get the most screen time.
+
+## Transition grammar
+
+- One continuous shot: the story changes by action inside the world — something arrives or leaves, lights switch on,
+  time of day shifts — not by cuts.
+- A slow push-in is allowed only on the emotional beat, and returns to wide for the ending. Push in by scaling the
+  world group, holding the characters' scale, so the depth reads.
+
+## Signature details
+
+- A sign, label or object in the world that names the place or the theme.
+- A written word inside the world (on fogged glass, a letter, a ticket) that echoes the caption.
+- A final title card over the emptied scene.
+
+## Sound
+
+- An ambience bed matching the environment (rain, wind, room) for the whole film, plus event sounds on the story's
+  hits: `knock` for doors and objects, `boom` for vehicles or big arrivals, `drop` for water.
+- An optional soft pluck or pad motif under the captions.
+
+## Bans
+
+Camera shake, fast cuts, gradients, glow effects (bloom, neon halos), grey captions on a grey sky, characters cropped
+by the frame at rest.

package/skills/aicut-motion/references/design-systems/swiss-kinetic.md

@@ -0,0 +1,67 @@
+# swiss-kinetic
+
+Fits: brand statements, launches, conferences, tech, manifestos. Not for: cosy, handmade, heritage.
+
+## Palette
+
+- Off-white `#F2F0EB`, near-black `#0E0E0E`, one hot accent picked for the brand (default signal red `#FF3B1F`).
+- Optional support grey `#9A9A96`.
+- Full-frame inversions (black ↔ white) count as scene changes: they are the transition, so do not also wipe.
+
+## Type
+
+- One grotesk: Inter Tight, Space Grotesk or Geist. 800–900 for words at 180–420 px, set tight (−0.03 to −0.05 em),
+  often cropped by the frame.
+- 500 labels at 22–26 px, tracked 0.08 em, all caps.
+
+## Marks, in a page
+
+- Solid rectangles and rules (2–12 px) snapped to the grid — plain `<rect>`, no filter, no radius.
+- Circles only as solid dots.
+- Arrows built from rules (a shaft `<rect>` plus two short strokes).
+- No outlines on type except one deliberately outlined word (`-webkit-text-stroke: 2px currentColor; color: transparent`).
+
+## Texture
+
+None, or one grain rect at opacity 0.05. Sharpness is the texture.
+
+## Layout
+
+- A 12-column grid: 120 px columns, 40 px gutters, 150 px margins; a 24 px baseline grid.
+- Asymmetric: hang type from the top-left column, keep big negative space.
+- Numbers (01, 02, 03) mark sections.
+
+## Composition
+
+- Occupancy: type fills 60–100% and may bleed off an edge on purpose.
+- Everything else snaps to the grid.
+- At least 30% of the frame is empty background in every scene.
+
+## Motion character
+
+- 120–128 BPM. Decisive: `EASE.snap` or `EASE.out`, 0.25–0.45 s moves, no bounce.
+- Words slide in on rails along grid lines, letters stagger 0.02–0.04 s (`letters(el, t, beat)` in
+  `references/pages.md`).
+- A block wipes on, the word appears behind it, then the block wipes off — three beats, one element each.
+
+## Transition grammar
+
+- Hard-edged block wipes along columns: one full-frame rect per column, `revealInset(p, 'bottom')` staggered by
+  0.04 s, on the beat.
+- Inversion cuts on the beat — the background and the type swap colour in one frame, holding for at least a beat.
+- A word scales until the counter of its O becomes the next frame (scale the whole `<svg>` group, then cut).
+- A rule extends to become the next scene's baseline (one path, `drawOn`).
+
+## Signature details
+
+Running section numbers; a thin ticker line at the bottom with a time code; the accent used for exactly one thing per
+scene.
+
+## Sound
+
+- `kick` on bar 1; `tick` or `hat` on each beat; a short `clap` on word slams; `whoosh` on block wipes.
+- No pads, or one very low drone. 120–128 BPM.
+
+## Bans
+
+Gradients, drop shadows, rounded cards, more than one accent, centred-title-over-three-cards, decorative icons.