logo svelte /motion v1.5.1
FIG-001/ HOOK

one source, six personalities.

A single pointer-position MotionValue drives six useFollowValue outputs. Each follower has a different transition (spring crisp/bouncy/floaty/wobbly, tween short/long) so the comet trail visually shows how each animation type behaves under the same input. Move, tap, or use arrow keys to steer. Replay traces a shared route; Reset centers every follower.

  • The two source motion values (targetX, targetY) are plain useMotionValue instances driven directly from the pointermove handler. Every follower derives from these — no per-follower event wiring.
  • Each follower is a separate useFollowValue(source, options) call. The options.type is the only thing that differs — same source, different physics. That's the entire selling point of the hook: pick the personality, get a composable MotionValue back.
  • Replay uses animate() on the shared source values; Reset uses jump() on the source and every follower. Reduced-motion preferences make changes immediate.
↩ all examples
pattern · mixed-transition follow mode · live running source
// use-follow-value 6 followers / 1 source

Change direction before they catch up.

one source · six transition configs rings sized by lag
category · hook
sheet · sheet 01 / 01
⟳ to re-run

useFollowValue