Magnifying dock

npm i lucide-react

"use client";
// Dock: icons swell toward the pointer on a cosine falloff while one name pill slides between them. Touch: drag across and lift.
import { useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
import { Bookmark, Folder, Home, Search, User } from "lucide-react";

export type DockItem = {
  /** Stable key reported to onChange. */
  key: string;
  /** Name shown in the pill and used as the aria-label. */
  label: string;
  /** Icon, drawn 20px. */
  icon: ReactNode;
};

export type DockCue = "pip" | "push";

export type DockProps = {
  /** The icons, left to right. */
  items?: DockItem[];
  /** Picked key (controlled). */
  value?: string;
  /** Initially picked key when uncontrolled. Defaults to the first item. */
  defaultValue?: string;
  /** Called with the key of a newly picked item. */
  onChange?: (key: string) => void;
  /** Scale of the icon under the pointer. */
  magnify?: number;
  /** How many neighbours on each side swell too. */
  spread?: number;
  /** How far the nearest icon lifts, px. */
  lift?: number;
  /** Show the sliding name pill. */
  labels?: boolean;
  /** Accessible name of the dock. */
  label?: string;
  /** Sound hook: "pip" as a pressed pointer crosses icons (hover is silent), "push" on pick; `at` is the icon position 0..1. */
  onSound?: (cue: DockCue, opts?: { at?: number }) => void;
  className?: string;
  style?: CSSProperties;
};

export const DEFAULT_DOCK_ITEMS: DockItem[] = [
  { key: "home", label: "Home", icon: <Home /> },
  { key: "search", label: "Search", icon: <Search /> },
  { key: "files", label: "Files", icon: <Folder /> },
  { key: "saved", label: "Saved", icon: <Bookmark /> },
  { key: "you", label: "You", icon: <User /> },
];

const DRAG_SOUND_GAP = 150;

/** The pill that slides under the hovered icon. It only starts animating after its first placement. */
function NameTag({ icons, focus, names }: { icons: (HTMLElement | null)[]; focus: number | null; names: string[] }) {
  const [shown, setShown] = useState(0);
  const [slot, setSlot] = useState<{ left: number; width: number } | null>(null);
  const [armed, setArmed] = useState(false);
  const textRef = useRef<HTMLSpanElement>(null);
  if (focus !== null && focus !== shown) setShown(focus);

  useLayoutEffect(() => {
    const icon = icons[shown];
    const text = textRef.current;
    if (!icon || !text) return;
    const width = Math.ceil(text.scrollWidth) + 24;
    setSlot({ left: icon.offsetLeft + icon.offsetWidth / 2 - width / 2, width });
  }, [shown, icons]);
  useLayoutEffect(() => {
    if (!slot || armed) return;
    const id = requestAnimationFrame(() => setArmed(true));
    return () => cancelAnimationFrame(id);
  }, [slot, armed]);

  return (
    <span className="tdk-tip" aria-hidden data-on={focus !== null && slot ? "" : undefined} data-ready={armed || undefined} style={slot ? { width: slot.width, transform: `translateX(${slot.left}px)` } : undefined}>
      <span ref={textRef}>{names[shown]}</span>
    </span>
  );
}

export function Dock({ items = DEFAULT_DOCK_ITEMS, value, defaultValue, onChange, magnify = 1.32, spread = 2, lift = 8, labels = true, label = "Dock", onSound, className, style }: DockProps) {
  const [under, setUnder] = useState<number | null>(null);
  const [own, setOwn] = useState(defaultValue ?? items[0]?.key);
  const current = value ?? own;
  const icons = useRef<(HTMLButtonElement | null)[]>([]);
  const pressing = useRef(false);
  const swiped = useRef(false);
  const lastSound = useRef(-Infinity);
  const place = (i: number) => (items.length > 1 ? i / (items.length - 1) : 0);

  const closestTo = (clientX: number) => {
    const distances = items.map((_, i) => {
      const box = icons.current[i]?.getBoundingClientRect();
      return box ? Math.abs(clientX - box.left - box.width / 2) : Infinity;
    });
    const nearest = Math.min(...distances);
    return nearest === Infinity ? null : distances.indexOf(nearest);
  };
  const hover = (i: number | null) =>
    setUnder((was) => {
      const now = performance.now();
      if (i !== null && i !== was && pressing.current && now - lastSound.current >= DRAG_SOUND_GAP) {
        lastSound.current = now;
        onSound?.("pip", { at: place(i) });
      }
      return i;
    });
  const choose = (k: string, i: number) => {
    if (k === current) return;
    onSound?.("push", { at: place(i) });
    if (value === undefined) setOwn(k);
    onChange?.(k);
  };

  return (
    <nav
      className={`tdk-root${className ? ` ${className}` : ""}`}
      aria-label={label}
      style={style}
      onPointerDownCapture={(e) => {
        pressing.current = true;
        swiped.current = false;
        hover(closestTo(e.clientX));
      }}
      onPointerMoveCapture={(e) => (e.pointerType === "mouse" || pressing.current) && hover(closestTo(e.clientX))}
      onPointerUpCapture={(e) => {
        const touch = e.pointerType !== "mouse";
        if (pressing.current && touch) {
          const i = closestTo(e.clientX);
          if (i !== null) {
            swiped.current = true;
            choose(items[i].key, i);
          }
        }
        pressing.current = false;
        if (touch) hover(null);
      }}
      onPointerCancelCapture={() => {
        pressing.current = false;
        hover(null);
      }}
      onPointerLeave={() => pressing.current || hover(null)}
    >
      {items.map((it, i) => {
        const away = under === null ? 99 : Math.abs(i - under);
        const swell = away > spread ? 0 : (1 + Math.cos((Math.PI * away) / (spread + 1))) / 2;
        const active = current === it.key;
        return (
          <button key={it.key} ref={(el) => void (icons.current[i] = el)} type="button" className="tdk-item" aria-label={it.label} aria-current={active ? "page" : undefined} data-near={away <= 1 ? away : undefined} data-active={active || undefined} onPointerDown={(e) => e.stopPropagation()} onFocus={(e) => e.currentTarget.matches(":focus-visible") && hover(i)} onBlur={() => hover(null)} onClick={() => swiped.current || choose(it.key, i)}>
            <span className="tdk-glyph" style={{ transform: `translateY(${(-lift * swell).toFixed(2)}px) scale(${(1 + (magnify - 1) * swell).toFixed(3)})` }}>
              {it.icon}
            </span>
            <span className="tdk-dot" data-on={active || undefined} />
          </button>
        );
      })}
      {labels && <NameTag icons={icons.current} focus={under} names={items.map((it) => it.label)} />}
    </nav>
  );
}

/* Dock. Prefix tdk-. */
.tdk-root, .tdk-root * { box-sizing: border-box; }
.tdk-root { font-family: var(--ts-font, system-ui, sans-serif); }
:where(.tdk-root) button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
}
:where(.tdk-root) :focus-visible { outline: 2px solid var(--ts-focus, #3446eb); outline-offset: 2px; }

.tdk-root {
  --tdk-ease: cubic-bezier(0.22, 1, 0.36, 1);
  align-items: flex-end;
  background: var(--ts-raised);
  border-radius: 999px;
  box-shadow: var(--ts-edge);
  color: var(--ts-fg);
  display: inline-flex;
  gap: 12px;
  isolation: isolate;
  padding: 12px 16px;
  position: relative;
  touch-action: pan-y;
}
.tdk-item {
  -webkit-tap-highlight-color: transparent;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: grid;
  height: 44px;
  opacity: 0.42;
  place-items: center;
  position: relative;
  transition: opacity 0.22s var(--tdk-ease);
  width: 44px;
}
.tdk-item[data-near="1"] {
  opacity: 0.66;
}
.tdk-item[data-near="0"],
.tdk-item[data-active] {
  opacity: 1;
}
.tdk-item:focus-visible {
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--ts-raised), 0 0 0 4px var(--ts-accent);
  outline: 0;
}
.tdk-glyph {
  display: grid;
  place-items: center;
  transform-origin: bottom;
  transition: transform 0.42s var(--tdk-ease);
}
.tdk-glyph svg {
  width: 20px;
  height: 20px;
}
.tdk-dot {
  background: currentColor;
  border-radius: 50%;
  bottom: 3px;
  height: 3px;
  left: 50%;
  margin-left: -1.5px;
  opacity: 0;
  position: absolute;
  transform: scale(0.4);
  transition: opacity 0.22s var(--tdk-ease), transform 0.42s cubic-bezier(.24, 1.34, .38, 1);
  width: 3px;
}
.tdk-dot[data-on] {
  opacity: 0.55;
  transform: scale(1);
}
.tdk-tip {
  align-items: center;
  background: var(--ts-fg);
  border-radius: 999px;
  bottom: calc(100% + 8px);
  color: var(--ts-raised);
  display: inline-flex;
  font-size: 12px;
  height: 32px;
  justify-content: center;
  left: 0;
  line-height: 32px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  transition: transform 0.16s var(--tdk-ease), width 0.16s var(--tdk-ease), opacity 0.16s var(--tdk-ease);
  white-space: nowrap;
  z-index: 2;
}
.tdk-tip > span {
  flex: none;
}
.tdk-tip:not([data-ready]) {
  transition: opacity 0.16s var(--tdk-ease);
}
.tdk-tip[data-on] {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  /* magnification and the tip snap to place instead of travelling */
  .tdk-glyph,
  .tdk-dot,
  .tdk-tip[data-ready] {
    transition: opacity 0.16s var(--tdk-ease);
  }
}

/*
 * Teseria tokens — the only colours, fonts and corner radii a block reads.
 *
 * Every name sits under --ts- so it never collides with your app's own variables. Include this file once, or point
 * the names at your theme (e.g. --ts-accent: var(--brand)). Light by default; dark follows [data-theme="dark"] on
 * any ancestor, or the OS setting unless [data-theme="light"] is set.
 *
 *   Surfaces   page → raised (cards, popovers) · sunken (wells, tracks) · tint-1..3 (neutral fills, light to deep)
 *   Text       fg → secondary → tertiary → muted → faint · fg-inverse sits on an fg-coloured fill
 *   Lines      border · edge (the box-shadow a filled surface uses instead of an outline: soft in light, nothing in
 *              dark; composes with other shadows)
 *   Signals    accent · focus · success · warning · danger
 *   Corners    controls are always pills · r-panel (dialogs, sheets, cards) · r-pop (menus, popovers, toasts) · r-inner
 *              (thumbnails, inner cards); a row inside a panel uses the panel radius minus the panel padding
 */
:root {
  --ts-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ts-r-panel: 24px;
  --ts-r-pop: 18px;
  --ts-r-inner: 12px;

  --ts-page: #ffffff;
  --ts-raised: #ffffff;
  --ts-sunken: #f3f2f0;
  --ts-tint-1: #f5f4f2;
  --ts-tint-2: #ecebe8;
  --ts-tint-3: #e3e1dd;

  --ts-fg: #161514;
  --ts-fg-rgb: 22, 21, 20;
  --ts-fg-secondary: #3a3836;
  --ts-fg-tertiary: #585552;
  --ts-fg-muted: #6d6a66;
  --ts-fg-faint: #89857f;
  --ts-fg-inverse: #ffffff;

  --ts-border: rgba(22, 21, 20, 0.1);
  --ts-edge: 0 0 0 1px rgba(22, 21, 20, 0.07), 0 1px 2px rgba(22, 21, 20, 0.05);

  --ts-accent: #3446eb;
  --ts-focus: #3446eb;
  --ts-success: #13804a;
  --ts-warning: #a9650b;
  --ts-danger: #df474e;
}

:root[data-theme="dark"] {
  --ts-page: #0b0a09;
  --ts-raised: #24221f;
  --ts-sunken: #0d0c0b;
  --ts-tint-1: #131211;
  --ts-tint-2: #1b1a18;
  --ts-tint-3: #2b2926;

  --ts-fg: #f6f5f3;
  --ts-fg-rgb: 246, 245, 243;
  --ts-fg-secondary: #bab8b4;
  --ts-fg-tertiary: #9e9b97;
  --ts-fg-muted: #8e8b86;
  --ts-fg-faint: #72706c;
  --ts-fg-inverse: #0b0a09;

  --ts-border: rgba(246, 245, 243, 0.1);
  --ts-edge: 0 0 #0000;

  --ts-accent: #3446eb;
  --ts-focus: #7f8cff;
  --ts-success: #3ccf80;
  --ts-warning: #efa130;
  --ts-danger: #df474e;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ts-page: #0b0a09;
    --ts-raised: #24221f;
    --ts-sunken: #0d0c0b;
    --ts-tint-1: #131211;
    --ts-tint-2: #1b1a18;
    --ts-tint-3: #2b2926;

    --ts-fg: #f6f5f3;
    --ts-fg-rgb: 246, 245, 243;
    --ts-fg-secondary: #bab8b4;
    --ts-fg-tertiary: #9e9b97;
    --ts-fg-muted: #8e8b86;
    --ts-fg-faint: #72706c;
    --ts-fg-inverse: #0b0a09;

    --ts-border: rgba(246, 245, 243, 0.1);
    --ts-edge: 0 0 #0000;

    --ts-accent: #3446eb;
    --ts-focus: #7f8cff;
    --ts-success: #3ccf80;
    --ts-warning: #efa130;
    --ts-danger: #df474e;
  }
}

import { Dock } from "./Dock";
import "./Dock.css";

export default function Demo() {
  return <Dock />;
}