logo svelte /motion v0.6.4
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.

  • 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.
  • Layer with mix-blend-mode: screen + a soft box-shadow per follower so the colours add up where they overlap — the same trick framer-motion's docs use to make the trail legible. The animation is real; only the visual treatment is decorative.
↩ all examples
pattern · mixed-transition follow mode · live running source

Move your cursor over this card

  • crisp spring
  • bouncy spring
  • floaty spring
  • quick tween
  • long tween
  • wobbly spring
category · hook
sheet · sheet 01 / 01
⟳ to re-run