# Motion Design Playground

## Learning goal
Two actors share a destination and duration. Change the timing curve to see how motion communicates weight and intention.

## Model and limits
Analytic timing functions drive kinematic motion, not a rigid-body simulation. The CSS-like cubic Bezier uses x-coordinate inversion. Stretch changes one scale axis and compensates the other two to preserve scale volume; it is not a material model. Each loop includes a one-second end hold.

## Primary references
- [W3C: CSS easing functions](https://www.w3.org/TR/css-easing-1/)

## Experiment design
- **Ease into motion**: Smoothstep starts and stops with zero velocity. Parameters: `{"curve":"smooth"}`.
- **Anticipate the action**: Move backwards before committing to the destination. Parameters: `{"curve":"anticipate"}`.
- **Overshoot and settle**: Travel beyond the destination, then return. Parameters: `{"curve":"overshoot","overshoot":2.3}`.
- **CSS ease**: Invert the cubic Bezier time coordinate before evaluating its position. Parameters: `{"curve":"bezier","stretch":0}`.

These presets are design predictions to investigate, not claims from a usability study. All readouts, animation positions and exported observations come from the same local model. The 2D view uses the same state. Saved setups restart from their parameters, rather than claiming to resume exact progress. Captured baselines are stored separately and survive resets and preset changes.

## Verification
Run `node --test apps/shared/discovery/tests/models.test.cjs` for numerical invariants, limiting cases, determinism and failure-state checks. Run `node apps/shared/tests/catalog.test.cjs` for routes and references. Browser and keyboard validation must be reported separately from numerical tests; automated tests are not user research.

## Discovery studio interaction layer
The studio adds selectable model objects, ray-based 3D picking, keyboard-accessible object selection, an inspector, scene editing where appropriate, model-specific stepping, and 24 measured challenges across the twelve labs. This is an interaction redesign, not a claim of measured learning improvement.

Most parameter changes now preserve current state. Structural changes explicitly start a new run; the exact per-app list is in `apps/shared/discovery/studio-model.js`. Current settings, independently captured baselines and challenge progress retain separate storage. Undo/redo keeps up to 30 edit checkpoints; the timeline keeps the latest 80 model snapshots. Resuming from a historical state creates a new branch. Saved setups still restart from parameters; they do not claim to retain the timeline or local particle pin edits.

Additional instruments derive from the existing model and cited references. Camera and light sweeps hold the remaining inputs fixed; neural curves separate training and validation; compression uses actual coefficients and recomputed quality samples; traffic uses recorded car positions/speeds; factory queues and utilisation use actual events and busy time. Visible instruments can continue collecting data while the hidden 3D view stops drawing.

Run `node --test apps/shared/discovery/tests/studio.test.cjs` for live edits, preserved state, all challenge solutions, direct manipulation, rewind, picking, instrument exports and controller integration. These DOM/renderer-double checks do not replace rendered browser and device review.


## Detailed 3D apparatus
Shared procedural geometry in `apps/shared/discovery/apparatus.js` adds mechanical housings, lens and iris parts, cables, wheels, connectors, moving machine heads and subject-specific markings. The scene uses bevelled housings, smoother curved geometry, instanced material families, a key/fill/rim light arrangement and bounded soft shadows. Cloth has a procedural weave bump map attached to its original model coordinates.

Full detail can be switched to Essential detail without resetting the model. All movements use model state or model time: wheel markers use road position, machine heads use scheduled job progress, conveyors use accumulated worker time, iris blades use the illustrated aperture, and network packets use their scheduled flights. Signal and energy markers illustrate direction, not measured transit speed. The fan is an indicator of the wind setting; it does not add a fluid simulation. Shells, grippers, cables and surface textures do not change the underlying collision model. The 2D fallback retains the same state and geometry.

Additional checks: `node --test apps/shared/discovery/tests/apparatus.test.cjs`. Geometry, state preservation, bounded batching, semantic selection, pause/rewind consistency and fallback behavior are checked with renderer doubles; browser pixels and device frame rates remain unverified.


## Authored model assets
The physical-object labs now load original Blender-authored GLB assets through `model-assets.js` and `model-worlds.js`: articulated industrial arm, mirrorless camera, car (overview and inspection versions), network router, gantry station, optical laser and companion character. The geometry, authored material surfaces and packed texture maps replace corresponding primitive bodies only after loading succeeds. Source `.blend` files, reproducible Python generators, manifests and inspected Blender renders are retained in `assets/models/` and `scripts/`. Mathematical data surfaces stay tied to their original calculations.

The robot uses actual solved joints; camera iris hinges respond to the aperture and a Cutaway toggle exposes the sensor/rays; car wheels and brake lights follow model position/acceleration; factory heads use scheduled job progress. GLB equipment covers remain illustrative, not new collision or optical physics. Camera cutaway distances are display distances; numerical thin-lens readings remain authoritative. The companion uses the motion model's translation and squash/stretch.

Assets load on demand, repeated equipment shares instanced geometry/materials, and only the selected close-up car upgrades from the lighter road mesh. Failure preserves the diagram and exposes Retry model. Inspect model fits the selected geometry rather than applying a fixed camera distance. Full/Essential detail, pause, rewind and existing models/data remain available. A procedural studio reflection environment lights PBR surfaces without external network requests.

Run `node --test apps/shared/discovery/tests/model-assets.test.cjs` for real GLB parsing, file loading, texture/UV presence, hierarchy transforms, exact solver alignment, cutaways, pause/rewind, fitting and car detail selection. Asset product renders were visually inspected in Blender. Browser pixels and device frame rates are still unverified; product renders are not screenshots of the web app.

## Bespoke rebuild (2026-10)
The shared discovery template page was replaced by a purpose-built 2D page. There is no 3D view: motion timing is a 2D craft (a curve of position against time), and depth adds nothing to it. The page therefore has no 2D/3D toggle; the race and the timing graph sit side by side.

- `index.html`: the original SEO head block, with the hero, six question presets, playback toolbar, six live readouts, the race stage, the timing graph, labelled controls, “What’s happening”, three checked challenges and the model notes.
- `motion-derive.js`: adapter around `model.js` (unchanged). Curve shapes come from `ease()` and `bezier()`, including custom Bézier handles through `bezier(t,x1,y1,x2,y2)`. It adds speed (the slope, in multiples of average speed), frame sampling and spacing, overshoot and wind-up extents, a gravity bounce with a coefficient of restitution (fall time `(1−e)/(1+e)` so the bounce series ends exactly at t = 1), and a speed-driven, area-preserving squash-and-stretch rule. It keeps its own duration range (0.1–3 s) so interface timings can be tried; `validate()` still owns overshoot, stretch and trail.
- `stage-view.js`: canvas race. A linear reference actor and the chosen curve cover the same distance in the same time, with onion-skin ghosts per frame and an animator’s spacing chart, in a horizontal “slide” or a vertical “drop to the floor” scene.
- `curve-view.js`: SVG timing graph. Position against time, frame dots projected onto a spacing ruler, draggable and keyboard-movable Bézier handles, a playhead you can drag to scrub, and a speed-against-time pane with the linear reference.
- `app.js`, `styles.css`: controller and styling. Layout: on desktop (≥1100 px) the key controls (curve, strength/bounciness, duration, squash and stretch) sit in a column beside the stage, with frame rate, onion skin and exact handle values in a collapsible “More settings”; choosing a question scrolls so the cards, readouts, controls, race and graph share one 1366×900 view. On phones the race panel (scene toggle, stage, timeline) is sticky at the top with the controls directly under it, then the graph.

Limits: the bounce is ideal (no drag, instant contacts); squash and stretch is a drawing rule, not a material model; the model’s own time-based squash pattern and 1–8 s duration range are not used by this page; UI duration guidance (about 100–500 ms) is a rule of thumb from Material Design and Nielsen Norman Group, not a measured result. Playback is render-on-demand: it runs only while playing and visible, starts paused under reduced motion, and the frame ghosts and numbers are computed from the curve, not from the frame clock.