Motion / Field guide
Meaning.
In motion.
A change should explain itself.
Four studies in authored motion. Follow the signal, keep the object, give the word weight, and make the passage coherent.
Start with the motion contractShared progress p draws the route and reveals the planes.
Read at rest. Play one study when you’re ready. Reset cancels immediately; reduced motion keeps the result without the journey.
M15 / Signal acquisition
Make arrival
visible.
Draw the route as the signal resolves. One bounded scalar owns both the path and the value; neither is an invented loading metric.
- Input → result
- Number 0–1 → normalized stroke length. A replay travels from 0 to 1 once.
- Interruption
- Replay replaces the previous run. Reset cancels it and returns to 0. No background clock remains.
- Reduced / unavailable
- Show the destination immediately. Reset remains exact. No simulated progress or forced animation.
Implementation pointer
// motion.js · createSignal
ProDynMotion.m15.replay();
ProDynMotion.m15.set(0.5);
ProDynMotion.m15.reset();M16 / Spatial continuity
Same object.
New position.
A reorder changes the document, not just its appearance. Keep the element’s identity and keyboard focus; use the old geometry only to explain the journey.
- Orient
Establish the starting state.
- Trace
Keep the object recognizable.
- Settle
Leave the destination readable.
- Input → result
- A permutation of three stable IDs → real DOM order. First, last, invert, play; transforms never become layout.
- Interruption
- Read the current visual position before canceling. Reorder the same nodes. Preserve focus; reset restores A → B → C.
- Reduced / unavailable
- Commit the new order immediately, with no displacement. The semantic result is identical.
Implementation pointer
// motion.js · createContinuity
ProDynMotion.m16.reorder(['settle', 'orient', 'trace']);
ProDynMotion.m16.replay(); // reverse current order
ProDynMotion.m16.reset();M17 / Kinetic typography
Emphasis,
not replacement.
Let the weight carry a thought, then release it. The sentence remains a sentence: selectable, readable, and present in the document from the start.
Keep meaning in the movement.
- Input → result
- One replay → transient visual text over the original. A bounded weight envelope returns to its resting value.
- Interruption
- Cancel and remove the temporary layer. Live copy edits invalidate it. Whole text is retained; grapheme clusters are never split.
- Reduced / unavailable
- The semantic text stays in its composed resting state. No visual duplicate, weight pulse, or displacement.
Implementation pointer
// motion.js · createTypography
ProDynMotion.m17.replay();
ProDynMotion.m17.reset();
// Original: [data-semantic-text]
// Temporary layer: [data-type-visual][aria-hidden]M18 / Aperture transit
One input.
A coherent passage.
Reveal the material where the traveler is. A single input controls the aperture and the route, so neither can drift out of step.
Drag, or use arrow keys. Home returns to the origin; End reaches the destination.
- Input → result
- Number 0–1 → path position and aperture radius. Direct input is immediate. Replay is one illustrative passage.
- Interruption
- A new input cancels the replay and takes ownership immediately. Reset returns both properties to the origin.
- Reduced / unavailable
- Keep direct manipulation; skip animated replay. No filter is used. The aperture remains bounded and the destination readable.
Implementation pointer
// motion.js · createAperture
ProDynMotion.m18.set(0.5); // immediate, clamped 0–1
ProDynMotion.m18.replay();
ProDynMotion.m18.reset();Beyond the specimen
Take the contract
with you.
Keep the original source, choose the smallest capable engine, and verify the result—not just the call.