Post-audit reliability hardening — wave 1 (critical + high) (#108)

* fix(css): parse every common colour and length form

Colours written `#fff`, `#FFF`, `white` or `rgb(255,255,255)` deserialised
without error and then fell back to SColor::BLACK when painting. On the dark
backgrounds this engine targets that is invisible text, and `validate` still
reported "Valid scenario" — the worst possible failure mode. Only the 6-digit
hex form actually worked.

Add `parse_css_color` covering 3/4/6/8-digit hex, rgb/rgba, hsl/hsla and the
CSS named-colour set, and route the paint pass through it. An unresolvable
colour now warns on stderr and renders as opaque magenta rather than black:
black is a legitimate colour choice and disappears into a dark frame, magenta
never blends in.

Lengths had the same shape of bug — an unparseable value silently became 0px.
Add fallible `try_parse` counterparts so callers can detect it.

Alpha now rounds in both notations, so `0.5` and `50%` agree on 128. The old
parser truncated to 127; that was an artefact of the formula rather than a
decision, and it made the two spellings of one value disagree.

Refs #104

* feat(layout): wire grid track definitions through to taffy

The grid component accepted `grid-template-columns`, the validator made it
mandatory, and taffy was never told about it — the only grid reference in
taffy_bridge was the Display::Grid mapping. Taffy therefore laid out a grid
with no tracks and collapsed every child into one implicit column, so a
three-column KPI row rendered as three stacked full-width rows while
validation reported no problem.

Translate grid-template-columns/rows, grid-column, grid-row and grid-auto-flow
into their taffy equivalents.

Also reorder GridTrack's untagged variants. Length's inner String arm matched
any JSON string or number, so it swallowed bare numbers meant for Fr and
keywords meant for Keyword, leaving both unreachable. That is why [1,1,1] used
to mean three 1px tracks instead of three equal fractions.

Single fr values use taffy's flex() helper (minmax(0, Nfr)) rather than fr(),
so tracks stay evenly sized regardless of content — matching the flex-row
equivalent byte for byte, which matters for a video renderer.

Refs #105

* feat(schema): export the component schema and load fonts before validating

`rustmotion schema` described none of the 57 components: Scene.children is a
Vec<serde_json::Value>, so schemars emitted "items": true — literally any JSON.
Constrained generation was therefore impossible, which is the structural reason
the authoring surface needs tens of thousands of words of prose rules to be
usable. The full schema already existed internally, built by validate_attrs to
populate a warning allowlist and never surfaced.

Merge schema_for!(Component) into the exported document and type Scene.children
as a $ref to it. Definitions go from 38 to 178, with a 57-variant oneOf.

Validation also measured text through the Helvetica/Arial fallback while the
render used the declared face, because load_custom_fonts only ran on render
paths. Call it in run_checks, before any measurement.

Delete LayerStyle and its orphaned siblings (BlendMode, Overflow, CardDisplay,
Size). LayerStyle is the pre-CSS style model: dead code, but still exported and
still carrying wrap/motion-path/size, which kept that vocabulary alive in the
documentation long after the code stopped accepting it.

Refs #106

* fix(validate): make --fix non-destructive and close geometry blind spots

--fix wrote style.wrap on an unwrappable_text_overflow. CssStyle is
deny_unknown_fields and has no wrap field, so the component failed to
deserialise and was dropped from the render — and because the geometry walker
then saw nothing left to check, validation reported clean. The auto-fixer
turned text that overflowed into text that was absent, and certified it.
Remove style.white-space instead, which falls back to the wrapping default.

Violation paths indexed the post-filter child vector while navigate() indexed
raw JSON, so a single malformed sibling made --fix patch an unrelated
component. Preserve the raw index.

container_clips was computed and never read. Honouring it fixes both
directions at once: content clipped by an ancestor is no longer a false
positive, which is what made deliberate frame-bleeding typography — the
signature of the reference style — impossible to author. Its old heuristic
also treated a background as clipping, which would have suppressed real
overflow on any card that had one.

Add ContentOverflowsBox: wrapping text measured against the box it was
actually assigned. A paragraph in a fixed-height card paints far outside it
while both boxes stay inside the frame, so the viewport check never saw it.

--strict-anim discarded t=0 through an opacity guard, and every entrance
preset ramps opacity from zero — so the frame of maximum displacement was
always the one skipped. It also forked the renderer's effect resolution and
re-timed on start_at, which the renderer does not do. Reuse effective_effects
and resolve_props_for_effects, and sample proportionally to scene duration.

Static css.transform and non-keyframed scene.camera now contribute to bboxes;
both were silently ignored. Camera folding is skipped when a scene uses
per-plane depth, where the global formula would not apply.

Refs #103

* docs(skills): realign the authoring guide with the schema

The skills corpus is the de-facto schema an LLM generates from, and it had
drifted onto the pre-CSS style model. Because CssStyle is deny_unknown_fields,
every stale property silently drops the whole component — so the guide was
teaching people to write invisible scenarios. Its canonical Example 1 produced
a dropped shape.

Move fill/stroke, timeline/stagger and text-background to component root; fix
box-shadow to an array with kebab keys; flex-wrap to an enum; transform to an
array of functions; reduce grid-template-columns to its one valid syntax;
remove motion-path and style.size, which do not exist.

Rewrite geometry-safety around white-space, document the fifth violation kind
and the clipping exemptions, and correct --fix now that it is safe to use.

Resolve the contradictions: position inside card, end_at on counters (the
checklist forbade it and two examples used it), the preset counts (31/45/39,
actually 40) and the easing count (11, actually 17 plus cubic_bezier).

Component count 51 to 57, qrcode to qr_code, and document qr_code, waveform
and audio_spectrum, which appeared nowhere.

Link the orphaned rules and reference examples/, which is more accurate than
the prose was: extracting the 217 fenced JSON blocks and validating each takes
failures from 26 to 14, with the remainder being illustrative paths and
deliberately-invalid teaching examples.

Refs #107

* chore(fmt): apply rustfmt across the wave-1 changes

Author: LeadcodeDev

.claude/skills/rustmotion/SKILL.md

@@ -95,28 +95,29 @@ Pick the palette in Phase 2. Every scene, every card, every text element uses co
 
 ### Rule P2: Use $ref for backgrounds
 
-If the same gradient background appears in multiple scenes, define it once and reference it:
+If the same gradient background appears in multiple scenes, define it once and reference it. Entries under the top-level `backgrounds` map are stored as raw JSON and only get type-checked when a scene actually resolves the `$ref` — at that point they must deserialize as an `AnimatedBackground`, which **requires a `preset`** (`gradient_shift`, `grid_dots`, `concentric_circles`, `halo`, or `heropattern`) plus that preset's config nested under its own name key. A template shaped like `{ "type": "gradient", "gradient": {...} }` is not an `AnimatedBackground` at all — `rustmotion validate` does not catch this (the `backgrounds` map and `background.$ref` overrides are permissive `serde_json::Value`s at the schema level), so the file validates clean but **renders a flat, ungra­dient background** at render time:
 
 ```json
 {
   "backgrounds": {
     "dark_radial": {
-      "type": "gradient",
-      "gradient": {
-        "type": "radial",
+      "preset": "gradient_shift",
+      "gradient_shift": {
         "colors": ["#1e1b4b", "#0f172a"],
-        "center_x": 0.5,
-        "center_y": 0.4
-      }
+        "gradient_type": "radial"
+      },
+      "speed": 10
     }
   },
   "scenes": [
-    { "background": { "$ref": "dark_radial" }, ... },
-    { "background": { "$ref": "dark_radial" }, ... }
+    { "background": { "$ref": "dark_radial" }, "duration": 3.0, "children": [] },
+    { "background": { "$ref": "dark_radial" }, "duration": 3.0, "children": [] }
   ]
 }
 ```
 
+`speed` defaults to `0` (static) if omitted — set it low for a near-static gradient, higher for a visibly rotating one (degrees/sec for `gradient_shift`). Per-scene overrides merge on top of the template (e.g. `{ "$ref": "dark_radial", "gradient_shift": { "colors": [...] } }` swaps just the colors) — everything except `$ref` and `transition` deep-merges into the referenced template.
+
 ### Rule P3: Accent color as the single highlight
 
 Use the accent color for: CTAs, icon fills, badge backgrounds, glow effects, border highlights.

.claude/skills/rustmotion/rules/color-palettes.md

@@ -102,16 +102,18 @@ Background elements feel farther away when slightly blurred. Use `backdrop-filte
 
 ## Scale + opacity gradient across siblings
 
-When cards or icons are in a row, give back-row items a smaller scale and lower opacity to simulate perspective receding.
+When cards or icons are in a row, give back-row items a smaller scale and lower opacity to simulate perspective receding. `transform` is an **array of tagged transform functions** (`{ "fn": "scale", "x": ..., "y": ... }`), never a CSS string like `"scale(0.82)"` — a string fails to deserialize and drops the component.
 
 ```json
 [
-  { "type": "card", "style": { "opacity": 0.4, "transform": "scale(0.82)" }, "..." : "back" },
-  { "type": "card", "style": { "opacity": 0.7, "transform": "scale(0.91)" }, "..." : "mid" },
-  { "type": "card", "style": { "opacity": 1.0, "transform": "scale(1.00)" }, "..." : "front" }
+  { "type": "card", "style": { "opacity": 0.4, "transform": [{ "fn": "scale", "x": 0.82, "y": 0.82 }] } },
+  { "type": "card", "style": { "opacity": 0.7, "transform": [{ "fn": "scale", "x": 0.91, "y": 0.91 }] } },
+  { "type": "card", "style": { "opacity": 1.0, "transform": [{ "fn": "scale", "x": 1.00, "y": 1.00 }] } }
 ]
 ```
 
+(Back/mid/front comment above each entry omitted here for brevity — each object above is a separate sibling `card`, e.g. inside a `div` with `flex-direction: "row"`.)
+
 Use `scale` steps of ~0.08–0.12 between planes. More than 3 planes starts looking mechanical.
 
 ---

.claude/skills/rustmotion/rules/depth-layering.md

@@ -14,7 +14,11 @@ Entrance presets already use appropriate easing internally.
 
 ## Available Easing Functions
 
-`linear`, `ease_in`, `ease_out`, `ease_in_out`, `ease_in_quad`, `ease_out_quad`, `ease_in_cubic`, `ease_out_cubic`, `ease_in_expo`, `ease_out_expo`, `spring`
+17 named easings, plus `cubic_bezier` for a custom curve — 18 total:
+
+`linear`, `ease_in`, `ease_out`, `ease_in_out`, `ease_in_quad`, `ease_out_quad`, `ease_in_cubic`, `ease_out_cubic`, `ease_in_expo`, `ease_out_expo`, `ease_in_out_quad`, `ease_in_out_expo`, `ease_in_back`, `ease_out_back`, `ease_out_elastic`, `bounce`, `spring`
+
+`cubic_bezier` takes a parameter object instead of a bare string — `{ "cubic_bezier": { "x1": 0.4, "y1": 0.0, "x2": 0.2, "y2": 1.0 } }` — anywhere an `easing` value is accepted (top-level `animation.easing`, per-keyframe `easing`).
 
 ### Spring Physics
 

.claude/skills/rustmotion/rules/easing-guidelines.md

@@ -2,15 +2,15 @@
 
 No textual content may bleed out of the device viewport. The renderer enforces this through three opt-in mechanisms, all checked by `rustmotion validate`.
 
-## 1. Text wrapping (`style.wrap`)
+## 1. Text wrapping (`style.white-space`)
 
-`text` is constraint-aware: it wraps to its parent's allocated width by default. Set `style.wrap: false` only when you intentionally want the text to render on one line and you guarantee it fits (e.g. a marquee that bleeds, a ticker, a title with a fixed `max-width`).
+`text` is constraint-aware: it wraps to its parent's allocated width by default. There is no `style.wrap` field — that boolean belonged to the pre-CSS `LayerStyle` model and no longer exists in `CssStyle` (`deny_unknown_fields` rejects it and silently drops the component). Wrapping is controlled by the standard CSS `white-space` property instead:
 
-- Default: `wrap: true` (wraps at parent or `max_width`, whichever is smaller).
-- `wrap: false` → validator fails with `unwrappable_text_overflow` if the natural width exceeds the box.
+- Default: unset / `"normal"` (and `"pre-line"`, `"pre-wrap"`, `"break-spaces"`) — wraps at parent width or `max-width`, whichever is smaller.
+- `white-space: "nowrap"` or `"pre"` → the text renders on one line. The validator measures its natural (unbounded) width and fails with `unwrappable_text_overflow` if that width exceeds the box. Only set this when you intentionally want a single line and a finite `max-width` + reasonable `font-size` guarantee it fits (e.g. a title, a ticker-like label — not a marquee, which has its own component).
 
 ```json
-{ "type": "text", "content": "Long sentence...", "style": { "wrap": true, "max-width": 800 } }
+{ "type": "text", "content": "Long sentence...", "style": { "white-space": "nowrap", "max-width": 800 } }
 ```
 
 ## 2. Codeblock / Terminal `auto_scroll`
@@ -39,38 +39,41 @@ CSS-like semantics: `visible` (default) lets children bleed; `hidden` clips at t
 
 ## What the validator catches
 
-`rustmotion validate scenario.json` reports three geometry violation kinds:
+`rustmotion validate scenario.json` reports five geometry violation kinds:
 
 - `viewport_overflow` — absolute bbox crosses the device edge
-- `unwrappable_text_overflow` — `wrap: false` but natural width > available width
+- `unwrappable_text_overflow` — `white-space: "nowrap"`/`"pre"` but natural width > available width
+- `content_overflows_box` — wrapping text needs more room than the box it was actually assigned, typically a paragraph inside a card with a fixed `height` too small for it. Text painters never clip themselves, so this paints outside its box even when the box sits comfortably inside the frame — which is why the viewport check alone never caught it.
 - `auto_scroll_disabled_overflow` — `auto_scroll: false` but content > box
+- `animated_text_overflow` — an animated transform (scale/translate/wiggle/orbit) pushes the bbox out of the viewport at some sampled time. Only checked with `--strict-anim` (default runs check the resting, untransformed layout only).
 
-`marquee` and `cursor` are exempt (their job is to bleed).
+`marquee` and `cursor` are exempt (their job is to bleed). A node is also exempt when it clips itself, or when any ancestor clips it — `overflow` set to anything other than `visible`. Deliberate bleed under a clipping parent is a composition technique, not a defect: that is how you get giant type running off the frame.
 
 ## CLI usage
 
 ```bash
 rustmotion validate scenario.json                       # human-readable
 rustmotion validate scenario.json --report report.json  # JSON report
 rustmotion validate scenario.json --fix                 # safe auto-fixes
-rustmotion validate scenario.json --strict-anim         # per-frame check
+rustmotion validate scenario.json --strict-anim         # per-frame check, adds animated_text_overflow
 rustmotion validate scenario.json --lenient             # warnings only
 ```
 
-`--fix` rewrites the file in place. It only applies *safe* mutations:
-- sets `style.wrap: true` on text that overflowed because wrap was off
-- sets `auto_scroll: true` on codeblock/terminal with overflow
+`--fix` rewrites the file in place:
+- `auto_scroll_disabled_overflow` → sets `auto_scroll: true`. Safe.
+- `unwrappable_text_overflow` → removes `style.white-space`, so the text falls back to the `normal` default and wraps again. Non-destructive: it only ever deletes the property that caused the violation. If you want the line to stay unbroken, widen the box or lower `font-size` by hand instead of running `--fix`.
 
-Position/size clamping is never auto-applied — fix those by hand.
+Position/size clamping (`viewport_overflow`) is never auto-applied — fix those by hand too.
 
 ## When to use what
 
 | Symptom | Fix |
 |---|---|
-| Long sentence cut at viewport edge | leave `wrap: true` (default) and ensure parent has finite width |
-| Need a single-line title that must fit | set `max-width` and a small enough `font-size`, leave `wrap: true` |
-| Marquee / ticker text that intentionally scrolls past edges | use `marquee` (exempt) — never `text` with `wrap: false` |
+| Long sentence cut at viewport edge | leave `white-space` unset (default wraps) and ensure parent has finite width |
+| Need a single-line title that must fit | set `max-width` and a small enough `font-size`, leave `white-space` unset |
+| Marquee / ticker text that intentionally scrolls past edges | use `marquee` (exempt) — never `text` with `white-space: "nowrap"` |
 | Code listing taller than its box | leave `auto_scroll: true` (default) |
 | Terminal log streaming many lines | leave `auto_scroll: true` |
 | Badge protruding from a card on purpose | container has `overflow: visible` (default) — no change needed |
 | Hard-clip children to a card border | container `style.overflow: "hidden"` |
+| Animated element (wiggle/orbit/keyframe scale) might drift off-screen | run `rustmotion validate --strict-anim` to sample frames, not just the resting layout |

.claude/skills/rustmotion/rules/geometry-safety.md

@@ -236,10 +236,11 @@ La bordure et l'ombre reprennent la teinte accent — le verre a une couleur.
 
 ```json
 {
-  "video": { "background": "#0f172a" },
+  "video": { "width": 1080, "height": 1920, "fps": 30, "background": "#0f172a" },
   "scenes": [{
+    "duration": 3.0,
     "children": [
-      { "type": "card", "style": { "backdrop-filter": [{ "fn": "blur", "radius": 24 }], "background": "#FFFFFF18" } }
+      { "type": "card", "style": { "width": 800, "height": 400, "backdrop-filter": [{ "fn": "blur", "radius": 24 }], "background": "#FFFFFF18" } }
     ]
   }]
 }
@@ -252,6 +253,6 @@ Fond uni `#0f172a` + verre → on ne voit rien à travers le flou, la carte est
 `backdrop-filter` floute ce qui est **derrière le composant dans le viewport**, pas ce qui est dans le parent. Si appliqué à un `text` ou `icon` enfant d'une carte opaque, il n'a aucun effet visible.
 
 ```json
-{ "type": "text", "style": { "backdrop-filter": [{ "fn": "blur", "radius": 20 }], "color": "#fff" } }
+{ "type": "text", "content": "Label", "style": { "backdrop-filter": [{ "fn": "blur", "radius": 20 }], "color": "#fff" } }
 ```
 Aucun effet — `backdrop-filter` est uniquement pertinent sur les éléments directement superposés à une texture/image/blob de fond. ✗

.claude/skills/rustmotion/rules/glassmorphism.md

@@ -100,19 +100,28 @@ Each card is 230px = 77px CSS → icon and text completely unreadable.
 
 ## GOOD: 2×2 grid on mobile
 
+`grid-template-columns` takes an array (`["1fr", "1fr"]`), never a raw CSS shorthand string like `"1fr 1fr"` — a bare string fails to deserialize (`Vec<GridTrack>` expected) and drops the card. Grid containers also need an explicit `height` (not `"auto"`) — see [rules/grid-card-height.md](grid-card-height.md).
+
 ```json
 {
   "type": "card",
-  "style": { "width": 984, "display": "grid", "grid-template-columns": "1fr 1fr", "gap": 24 },
+  "style": {
+    "width": 984,
+    "height": 640,
+    "display": "grid",
+    "grid-template-columns": ["1fr", "1fr"],
+    "grid-template-rows": ["1fr", "1fr"],
+    "gap": 24
+  },
   "children": [
-    { "type": "card", "style": { "width": 480, "padding": 40 }, "children": [...] },
-    { "type": "card", "style": { "width": 480, "padding": 40 }, "children": [...] },
-    { "type": "card", "style": { "width": 480, "padding": 40 }, "children": [...] },
-    { "type": "card", "style": { "width": 480, "padding": 40 }, "children": [...] }
+    { "type": "card", "style": { "padding": 40 }, "children": [] },
+    { "type": "card", "style": { "padding": 40 }, "children": [] },
+    { "type": "card", "style": { "padding": 40 }, "children": [] },
+    { "type": "card", "style": { "padding": 40 }, "children": [] }
   ]
 }
 ```
-480px per card = 160px CSS → readable content. 24px gap. ✓
+Each cell fills its grid track (~480px wide here) = 160px CSS → readable content. 24px gap. ✓
 
 ## BAD: Icon inconsistency across scenes
 

.claude/skills/rustmotion/rules/icon-sizing-hierarchy.md

@@ -7,7 +7,7 @@ The workspace is split into three crates:
 | Crate | Role |
 |---|---|
 | `rustmotion-core` | Engine, CSS model, schema types, Painter trait |
-| `rustmotion-components` | 51 component structs + Painter impls + box builder |
+| `rustmotion-components` | 57 component structs + Painter impls + box builder |
 | `rustmotion-cli` | CLI commands (render, validate, schema, info) |
 
 ---

.claude/skills/rustmotion/rules/module-structure.md

@@ -1,6 +1,6 @@
 # Rule: Prefer Presets Over Manual Keyframes
 
-Presets are simpler, less error-prone, and produce consistent motion design. Only use `keyframes` animation effects for custom behavior not covered by the 31 built-in presets.
+Presets are simpler, less error-prone, and produce consistent motion design. Only use `keyframes` animation effects for custom behavior not covered by the 40 built-in presets (+ 6 char-only presets on `text`).
 
 **GOOD:**
 ```json

.claude/skills/rustmotion/rules/prefer-presets.md

@@ -129,9 +129,9 @@ Reference: Tailwind CSS default spacing (4px base unit).
 
 Sizing rules above are guidelines — `rustmotion validate` is the source of truth. It refuses any scenario whose layout tree leaves the device viewport. See [geometry-safety.md](geometry-safety.md):
 
-- `text` wraps automatically at the parent's max width — leave `style.wrap` at its default (`true`) unless you have a finite `max-width`.
+- `text` wraps automatically at the parent's max width — leave `style.white-space` unset (default wraps) unless you have a finite `max-width`.
 - `codeblock` / `terminal` auto-scroll when content exceeds their `size` — leave `auto_scroll: true` (default).
-- Long single-line content that should bleed must use `marquee`, never `text` with `wrap: false`.
+- Long single-line content that should bleed must use `marquee`, never `text` with `white-space: "nowrap"`.
 
 ## BAD: Using desktop sizes on mobile