Motion studies

Compare motion on one clock

Play both versions together, pause a fleeting difference, or scrub to the moment you want to discuss.

These drawings reproduce two illustrative studies from a Leaf UI review. They are timing sketches, not recordings or approved interface changes. Each starts with 250 ms before the gesture and holds the result for 200 ms.

Follow the Leaf as the panel folds

Play the fold, then scrub through its opening moments. The source study fades the mark in at its destination; the alternative carries it there with the panel.

Source timing 140 ms wait, then 160 ms fade
Comment on the page 2
Alternative sketch Leaf travels with the panel
Comment on the page 2

Compare two arrival cues at the same instant

Play the arrival, then slow it to quarter speed. The expanding ring and the tint share a duration; the unread dot remains in both.

Source timing Expanding ring · 520 ms
Thread in the margin New reply Unread dot remains after the cue.
Alternative sketch Tint in the existing pin · 520 ms
Thread in the margin New reply Unread dot remains after the cue.
Author a motion study

The optional motion package supplies the clock, Play/Pause, Reset, scrubbing and playback speed. The page draws the subject from the supplied time in milliseconds. Scrubbing changes only the view; it writes no decision to the page’s log. 

<lf-motion id="travel" duration="600" aria-label="Travel study">
  <svg viewBox="0 0 300 60" role="img" aria-label="Dot moving right">
    <circle cx="20" cy="30" r="10" fill="currentColor" />
  </svg>
</lf-motion>
import { PAGE_INTERFACE, keeps } from '/runtime/widget-api.js';

const mounted = new WeakSet();
await customElements.whenDefined('lf-motion');
function mount() {
  const study = document.getElementById('travel');
  if (!study || mounted.has(study)) return;
  mounted.add(study);
  const dot = study.querySelector('circle');
  study.renderFrame = (time) => {
    keeps(dot, 'cx', 20 + 260 * time / 600);
  };
}
mount();
document.addEventListener(PAGE_INTERFACE, mount);

Assigning renderFrame draws the current instant immediately. Draw every moving part from that time, so seeking backward and jumping forward produce the same scene as playback. Use currentTime to seek from your own controls.

The studies above preserve the source review’s timing and corrected continuous Leaf travel. Their page module owns those drawings; the reusable widget knows nothing about panels, unread markers or SVG.