Scrubbing and gestures

Progress does not have to come from the driver. seek renders a pair frozen at any value, so a drag, a scroll position or a pointer distance can own it directly.

The primitive

morph.seek("menu", "cross", 0.4);

Nothing recompiles as the value changes. seek interpolates the baked keyframes and writes d, so it is the same cost at any value and safe to call from a pointer move handler.

In React

Use controlled mode, which is the same thing behind a prop.

import { MorphIcon } from "@/lib/morph/react";
import { coreBundle } from "@/lib/morphs.generated";

export function Controlled({ drag }: { drag: number }) {
  // While `from` and `to` are both present the pair owns the path, nothing animates, and
  // `icon` is ignored. Progress is yours to drive.
  return <MorphIcon bundle={coreBundle} from="menu" to="cross" progress={drag} />;
}

Direction is yours

seek(from, to, t) takes the pair in the order you mean it, regardless of which direction the track happens to be stored in. The driver flips it internally, so you never have to know that a bundle stores menu>cross and not the reverse.

Handing back to the driver

A morphTo after a scrub picks up from wherever the scrub left off, with the tween retargeting along the same track. Releasing a drag halfway and letting it settle needs no special handling.