Dock magnético

Os ícones crescem quando o ponteiro passa, empurram os vizinhos e se acomodam quando ele sai.

moveInputfollowuseAnimatedCSSmultiply

Preparando o exemplo…

O JavaScript está desativado. O código abaixo é o exemplo completo.

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;
}

Como funciona

moveInput grava em um valor a posição do ponteiro na faixa, de -1 a 1.
follow faz um segundo valor segui-lo com uma mola, então movimentos rápidos continuam suaves.
Cada ícone interpola a própria proximidade e a multiplica por um valor de hover com useAnimatedCSS, porque o produto de dois valores não é uma expressão calc().
A largura muda, então os vizinhos se movem no layout normal. Nada renderiza de novo enquanto o ponteiro se move.

Dock magnético

Como funciona

Mais exemplos

Pesquisar