Magnetic dock

Icons grow as the pointer passes, pushing their neighbors aside, and settle when it leaves.

moveInputfollowuseAnimatedCSSmultiply

Preparing the example…

JavaScript is off. The code below is the complete example.

App.jsx

import { useRef } from 'react';
import {
  follow,
  input,
  moveInput,
  multiply,
  spring,
  useAnimated,
  useAnimatedCSS,
  useAnimatedValue,
} from '@kkwaenggwari/animated';
import './styles.css';

const apps = [
  ['M', '#2854ff'],
  ['C', '#8fb0ff'],
  ['P', '#5c7cff'],
  ['N', '#16181d'],
  ['S', '#4a6bff'],
  ['T', '#7d9bff'],
  ['F', '#1a33c7'],
  ['V', '#3d63ff'],
  ['K', '#1f3fd6'],
  ['R', '#1f2937'],
];

const size = 52;

function Icon({ letter, color, index, count, pointer, presence, magnify }) {
  // Where this icon sits on the track, in the same [-1, 1] units as the pointer.
  const center = ((index + 0.5) / count) * 2 - 1;
  const reach = 5 / count;
  const proximity = pointer.interpolate({
    inputRange: [center - reach, center, center + reach],
    outputRange: [0, 1, 0],
    extrapolate: 'clamp',
  });
  const grow = useAnimatedCSS(multiply(proximity, presence));
  const extra = size * (magnify - 1);

  return (
    <div
      className="icon"
      style={{
        background: color,
        width: `calc(${size}px + ${grow} * ${extra}px)`,
        height: `calc(${size}px + ${grow} * ${extra}px)`,
      }}
    >
      {letter}
    </div>
  );
}

export default function App({ count = 8, magnify = 1.8, stiffness = 300, damping = 26 }) {
  const track = useRef(null);
  const pointer = useAnimatedValue(0);
  const presence = useAnimatedValue(0);

  useAnimated(
    0,
    () => {
      input(track, moveInput({ x: pointer, relative: true }));
    },
    [pointer],
  );

  // The icons follow a smoothed copy of the pointer.
  const smooth = useAnimated(
    0,
    (value) => {
      follow(value, pointer, { stiffness, damping });
    },
    [pointer, stiffness, damping],
  );

  const show = (toValue) => spring(presence, { toValue, stiffness: 260, damping: 24 }).start();

  return (
    <div className="stage">
      <div
        ref={track}
        className="track"
        style={{ width: count * (size + 10) }}
        onPointerEnter={() => show(1)}
        onPointerLeave={() => show(0)}
      >
        <div className="dock">
          {apps.slice(0, count).map(([letter, color], index) => (
            <Icon
              key={letter}
              letter={letter}
              color={color}
              index={index}
              count={count}
              pointer={smooth}
              presence={presence}
              magnify={magnify}
            />
          ))}
        </div>
      </div>
      <p>Move the pointer along the dock.</p>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 18px;
  min-height: 300px;
  padding: 28px 16px 32px;
  background: #eef2ff;
}

.track {
  position: relative;
  height: 150px;
}

.dock {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px #e4e6ef;
  transform: translateX(-50%);
}

.icon {
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 28%;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
}

.stage p {
  margin: 0;
  color: #5b6070;
  font-size: 14px;
}

How it works

moveInput writes the pointer's position on the track, from -1 to 1, into one value.
follow makes a second value spring after it, so fast movement stays smooth.
Each icon interpolates its own proximity and multiplies it by a hover value with useAnimatedCSS, because the product of two values is not a calc() expression.
The width changes, so neighbors move in normal layout. Nothing re-renders while the pointer moves.

Magnetic dock

How it works

More examples

Search