# Motion patterns

[Guide](guide.md) · [Visual specimens](index.html) · [Engines](engines.md) · [Verification](verification.md)

Patterns compose approved primitives; they are not additional registry entries. Follow the [authority boundary](guide.md#authority-and-scope): adopt M15–M18 from the integrated DSM v2.2 manual, [registry](registry.json), tokens and specimens. Existing M1–M14 definitions and M13's per-page gate remain unchanged.

## M15 · Signal acquisition

**Use when:** one user-triggered acquisition or bounded progress relationship needs explanation. A demonstration is labeled illustrative; a real operation owns its own status.

**Compose:** keep the title, source label and result visible. Place a single SVG progress element beside its DOM value, not behind the whole page. Emphasize one cyan route against quiet linework. The status must be understandable without reading a moving path.

**Implement:** validate the progress range; commit the semantic value; cancel the previous visual job; animate only the owned presentation. A normalized SVG `pathLength` can align dash progress with the shared value. On reset, invalidate completion callbacks before returning to the initial pose. On failure, show the actual error and last valid state. Do not interpret animation completion as server confirmation.

**Reduced/static:** show the correct current or settled value immediately with a complete path/pose. No-JS retains the explanation and a labeled static figure. A genuinely JS-only demo control starts disabled and is enabled only after successful initialization.

**Proof:** observe an intermediate dash/value and the final state; reset midflight; activate twice; deny WAAPI; toggle reduced motion while running. Old completion must not overwrite the new state. The absence of animation does not mean the operation failed.

## M16 · Spatial continuity

**Use when:** persistent items change their actual semantic order and the reader would otherwise lose identity.

**Compose:** conserve the item's label and visual identity. Keep movement within the inventory/list surface. Avoid enlarging everything, adding depth rotation or making the selected object fly across unrelated sections.

**Implement:** measure First; change the actual DOM order; measure Last; Invert the geometric delta on an effect wrapper; Play back to the resting layout. Batch reads and writes. Reuse the same elements or stable framework keys; do not replace the list with regenerated HTML. Cancel or settle an existing transition before taking a new measurement. The new semantic order exists immediately, not only after completion.

**Focus:** retain the active item/control node. If an item is removed as a separate application behavior, select a deliberate fallback destination before removal. Do not use CSS `order` as a substitute for document order. A View Transition or framework projection may be an alternative implementation only after it proves the same semantics and scoped visual result; a full router transition is not granted here.

**Reduced/static:** reorder immediately and remove temporary transforms. Resizing, changed labels and failed layout measurement leave a normal list, not absolutely positioned remnants.

**Proof:** verify element identity, DOM order, intermediate displacement, settled rectangles, rapid reverse reorder and focus continuity. Repeat with a changed item count, long labels and a breakpoint crossing.

## M17 · Kinetic typography

**Use when:** a short heading or selected label earns a finite typographic resolution. Never animate a reading passage, legal notice, essential instruction or live status character by character.

**Compose:** let type mass carry the hierarchy. Use the exact display family and real supported axis; control the region so wrapping remains deliberate. A weight or glyph treatment should settle into the final text, not become its own looping ornament.

**Implement:** preserve the original semantic text and accessible name. If visual glyphs are needed, create a temporary `aria-hidden` presentation layer, segment by grapheme, and keep it out of pointer/focus interaction. Measure after font readiness; remeasure or abandon the effect after a resize/content/language change. Restore ordinary selectable text and remove wrappers on finish, cancel, reset and teardown. Do not clone an interactive heading subtree and hide its semantics.

**Weight:** inspect the supplied font before using an axis. The studied Oxanium file has `wght` only; a variable-font guide is not evidence that this asset supports width or optical-size animation. Keep the canonical family/weight bounds and never serve license-gated PPNM. Reserve stable layout or choose immediate weight change if interpolation causes disruptive reflow.

**Reduced/static:** render the original text at its correct final weight. If segmentation, font loading or measurement fails, leave the same ordinary heading—not an empty visual layer.

**Proof:** inspect the accessible name and actual rendered glyph family; test combining marks, emoji clusters, longer localized copy, blocked fonts and a content update during animation. Confirm no stale wrappers or duplicate announcements survive.

## M18 · Aperture transit

**Use when:** one control must make the relation between an aperture and a path position visible.

**Compose:** contain the illustration in one figure. Keep the control and numeric/text result outside its SVG clipping boundary. Opening size and marker transit share a cause; they are not separately timed decorations.

**Implement:** validate and clamp one scalar, then derive both aperture geometry and position from it. Record units and endpoints. Keep the path/mask geometry from the specimen; replacing it with an arbitrary morph is a new design. Ensure mask IDs are unique per instance and the viewBox/sizing contract survives relocation. Invalid input preserves the last valid figure.

**Reduced/static:** direct input updates the meaningful still without inertial trailing. Unsupported mask/path presentation falls back to the same value and an annotated static figure. No visual mask may clip essential text or focus outlines.

**Proof:** sample both endpoints and an interior value; assert aperture and position agree with the same input. Test pointer and keyboard range changes, invalid/out-of-range values, resize and reduced-motion changes. Test actual pixels, not only a changed `d` attribute.

## Compositions that remain within the grammar

| Pattern | Primitive mapping | Choreography | Guardrail |
|---|---|---|---|
| Explorable service path | M15; static SVG labels | Select a route → progress illustrates acquisition → settled explanation | Public approved topology; no invented health state |
| Reordered evidence inventory | M16 | Actual list reorder → continuity movement → stop | Reading order and focus are authoritative |
| Editorial chapter emphasis | M17, optionally M18 in a separate figure | Resolve one heading; later let the reader manipulate one aperture | No forced pacing, scroll trapping or body-text animation |
| Acquisition beside an inventory | M15 + M16 | Acquire a result, then reorder only if the application's state calls for it | Separate owners; no concurrent unrelated foreground events |
| Quiet operational page | Exact M8; eligible M15–M18 locally; exact M1 footer | Atmosphere stays subordinate to each local event | Do not increase defaults' density or retune timing |
| Real telemetry inspection | Existing M2/M5/M11 as permitted by the manual | Localize a real update inside the surface | A synthetic design demo does not authorize a production live-data claim |
| Meaningful cutout asset | Exact M14 | Preserve the canonical contained drift | Not a spring, card swarm or new holographic material |

## Escalate rather than relabel

A scrolling camera journey, liquid transition, magnetic cursor, elastic drag toy, audio-reactive field, shader material, arbitrary SVG morph or rigid-body scene is **not** M15–M18 merely because it uses progress, layout, type or a scalar. Write the purpose, proposed new behavior, static counterpart, rights and performance budget; request a registry review. Until approved, ship the existing primitive or static alternative. Three-dimensional memory-manifold work also retains M13's explicit page approval.