Magnetisk docka

Ikonerna växer när pekaren passerar, knuffar undan grannarna och lägger sig när den lämnar.

moveInputfollowuseAnimatedCSSmultiply

Förbereder exemplet…

JavaScript är avstängt. Koden nedan är hela exemplet.

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

Så fungerar det

moveInput skriver pekarens position på banan, från -1 till 1, till ett värde.
follow får ett andra värde att följa efter med en fjäder, så snabba rörelser förblir mjuka.
Varje ikon interpolerar sin egen närhet och multiplicerar den med ett hovringsvärde via useAnimatedCSS, eftersom produkten av två värden inte är ett calc()-uttryck.
Bredden ändras, så grannarna flyttas i vanlig layout. Ingenting renderas om medan pekaren rör sig.

Magnetisk docka

Så fungerar det

Fler exempel

Sök