マグネティックドック

しくみ

1. moveInput が、トラック上のポインターの位置を -1 から 1 の値としてひとつの値に書き込みます。
2. follow が 2 つ目の値をそれにスプリングで追従させるので、速い動きもなめらかなままです。
3. 各アイコンは自分への近さを補間し、useAnimatedCSS でホバーの値と掛け合わせます。2 つの値の積は calc() 式にできないためです。
4. 幅が変わるので、隣のアイコンは通常のレイアウトで移動します。ポインターが動いている間、何も再レンダリングされません。