# Deterministic browser-motion review recipe — tested on two Aixio projects

This is a manual recipe derived from credited public techniques. Tideglass and Cubic Bezier produced runnable exported source in two fresh Aixio Website workspaces, including desktop/390px hardest-frame checks. Tidewell was planned but not run, and several interaction/accessibility checks remain open. It is not a saved Aixio Skill, an automatic pipeline, or a three-case consistency claim.

## Before submitting

1. Write a short brief with audience, output, duration, aspect ratio, visual material, exact copy, interaction, and a hardest frame.
2. Set one bounded package cost plan covering every intended turn and at most one corrective turn. Record each preflight quote and balance before submission. Stop if a quote is missing or the total exceeds the accepted cap.
3. Start a fresh Website workspace for each brief. Do not paste another creator's code, composition, brand, or copy.

## Build contract shared by the planned cases

- Use only original HTML, CSS, JavaScript, SVG, Canvas2D, and Web Audio as appropriate. No remote images, fonts, scripts, analytics, or network requests.
- Expose `window.motionReview` with `duration`, `ready`, `seek(seconds)`, `play()`, `pause()`, and an array of named `marks`.
- Make every visual state depend only on clamped timeline time. Calling `seek(t)` twice, after a different time, or after reload must draw the same frame.
- Provide visible play/pause, replay, scrubber, elapsed/duration, and mute controls. Keyboard: Space toggles playback, Home seeks to zero, Left/Right step.
- Pause animation when the document is hidden. When `prefers-reduced-motion: reduce` is active, default to a paused representative frame and keep manual seeking available.
- Provide a clear `<title>`, one H1, readable focus styles, semantic control labels, and no essential meaning conveyed by color alone.
- Include a compact `README.md` with run steps, file map, timeline marks, known limits, and export/recording notes.

## Determinism inspection

For every named mark `t`:

1. Reload, wait for `ready`, call `seek(t)`, and capture frame A.
2. Seek to another mark, then back to `t`, and capture frame B.
3. Call `seek(t)` again and capture frame C.
4. Pixel-compare or visually overlay A/B/C. Any material change is a failure.

Inspect the declared hardest frame before reviewing the full sequence. Then capture a frame strip at 0%, 25%, 50%, 75%, and 100%, plus every transition boundary.

## Shared quality checks

- Desktop and 390px layouts have no horizontal overflow, clipped copy, hidden controls, or illegible type.
- Console has no errors. Network log after initial local load shows no remote dependency requests.
- Pause, replay, scrub, mute, keyboard controls, and reduced-motion behavior work.
- Copy remains readable long enough to perform its job.
- Transitions do not flash blank frames or reset the visual world accidentally.
- The downloaded ZIP opens offline and contains all source and binary files listed in the README.

## Case-specific acceptance

### Tideglass ambient loop

- Exactly 24 seconds at a 1080-square design coordinate system.
- Four named movements are visible without hard scene cuts.
- Frame at 16 seconds is the hardest frame: large translucent tideglass forms, two contrasting caustic layers, legible time mark, no muddy additive clipping.
- Loop seam at 24→0 seconds is visually quiet.
- Procedural audio is original, starts only after user action, mutes cleanly, and has no audible click at loop/replay.

### Cubic Bezier explainer

- Exactly 35 seconds; valid at 1280×720 and 390px.
- P0–P3, the curve, current point, tangent, `t`, and the cubic formula remain legible.
- Dragging control points updates path and labels without breaking time controls.
- The hardest frame at 21 seconds shows both construction lines and current point without label collision.
- Reduced motion pauses auto-advance but keeps point dragging and scrubber access.

### Tidewell launch page

This case is a proposed, untested extension. Do not cite it as execution evidence.

- Exactly 15 seconds and supports 9:16 and 1:1 modes without reload.
- Uses only three exact copy lines: “TIDEWELL”, “REFILL THE RITUAL”, “ONE POD. THIRTY SHOWERS.”
- The fictional pod remains recognizable through three scenes; Canvas accents do not obscure the product or text.
- The hardest frame at 10.5 seconds shows the pod, benefit copy, CTA, and motion accents within safe areas in both ratios.
- No unsupported sustainability, efficacy, or market claims.

## Correction rule

Use one correction only if a concrete acceptance check fails. Quote it before submission. Name the exact defect, file or component, mark, viewport, expected result, and what must remain unchanged. Re-run the entire shared check set afterward. A second failed case remains a documented failure; do not silently start another paid turn.

## Handoff

Export each Website project as a ZIP. Preserve real input text, agent response, file tree, before/after screenshots, acceptance record, console/network capture, ZIP hash, and cost ledger. Optional screen recordings are downstream demonstrations; they do not replace editable source or deterministic-frame proof.