02Pill slide indicator

The pill filling the active slot slides sideways by one fixed pixel stride at a time while the icons hold their places, so the whole row never twitches.

Best forBottom tab switching in app screens, where the moving background shows which slot you are on

@propertytranslateXflex

<main class="stage">
  <div class="pl is-demo" id="pl" style="--idx: 0">
    <nav class="pl__dock" aria-label="Main menu">
      <i class="pl__pill" aria-hidden="true"></i>
      <button class="pl__btn" type="button" aria-label="Home">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" aria-hidden="true"><g fill="currentColor"><path d="M216 120v96h-64v-64h-48v64H40v-96a8 8 0 0 1 2.34-5.66l80-80a8 8 0 0 1 11.32 0l80 80A8 8 0 0 1 216 120" opacity=".2"/><path d="m219.31 108.68l-80-80a16 16 0 0 0-22.62 0l-80 80A15.87 15.87 0 0 0 32 120v96a8 8 0 0 0 8 8h64a8 8 0 0 0 8-8v-56h32v56a8 8 0 0 0 8 8h64a8 8 0 0 0 8-8v-96a15.87 15.87 0 0 0-4.69-11.32M208 208h-48v-56a8 8 0 0 0-8-8h-48a8 8 0 0 0-8 8v56H48v-88l80-80l80 80Z"/></g></svg>
      </button>
      <button class="pl__btn" type="button" aria-label="Files">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" aria-hidden="true"><g fill="currentColor"><path d="M128 80H32V56a8 8 0 0 1 8-8h52.69a8 8 0 0 1 5.65 2.34Z" opacity=".2"/><path d="M216 72h-84.69L104 44.69A15.86 15.86 0 0 0 92.69 40H40a16 16 0 0 0-16 16v144.62A15.4 15.4 0 0 0 39.38 216h177.51A15.13 15.13 0 0 0 232 200.89V88a16 16 0 0 0-16-16M92.69 56l16 16H40V56ZM216 200H40V88h176Z"/></g></svg>
      </button>
      <button class="pl__btn" type="button" aria-label="Chat">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" aria-hidden="true"><g fill="currentColor"><path d="M224 128a96 96 0 0 1-144.07 83.11l-37.39 12.47a8 8 0 0 1-10.12-10.12l12.47-37.39A96 96 0 1 1 224 128" opacity=".2"/><path d="M128 24a104 104 0 0 0-91.82 152.88l-11.35 34.05a16 16 0 0 0 20.24 20.24l34.05-11.35A104 104 0 1 0 128 24m0 192a87.87 87.87 0 0 1-44.06-11.81a8 8 0 0 0-6.54-.67L40 216l12.47-37.4a8 8 0 0 0-.66-6.54A88 88 0 1 1 128 216"/></g></svg>
      </button>
      <button class="pl__btn" type="button" aria-label="Settings">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" aria-hidden="true"><g fill="currentColor"><path d="m207.86 123.18l16.78-21a99 99 0 0 0-10.07-24.29l-26.7-3a81 81 0 0 0-6.81-6.81l-3-26.71a99.4 99.4 0 0 0-24.3-10l-21 16.77a82 82 0 0 0-9.64 0l-21-16.78a99 99 0 0 0-24.21 10.07l-3 26.7a81 81 0 0 0-6.81 6.81l-26.71 3a99.4 99.4 0 0 0-10 24.3l16.77 21a82 82 0 0 0 0 9.64l-16.78 21a99 99 0 0 0 10.07 24.29l26.7 3a81 81 0 0 0 6.81 6.81l3 26.71a99.4 99.4 0 0 0 24.3 10l21-16.77a82 82 0 0 0 9.64 0l21 16.78a99.4 99.4 0 0 0 24.29-10.07l3-26.7a81 81 0 0 0 6.81-6.81l26.71-3a99.4 99.4 0 0 0 10-24.3l-16.77-21a82 82 0 0 0-.08-9.64M128 168a40 40 0 1 1 40-40a40 40 0 0 1-40 40" opacity=".2"/><path d="M128 80a48 48 0 1 0 48 48a48.05 48.05 0 0 0-48-48m0 80a32 32 0 1 1 32-32a32 32 0 0 1-32 32m88-29.84q.06-2.16 0-4.32l14.92-18.64a8 8 0 0 0 1.48-7.06a107.6 107.6 0 0 0-10.88-26.25a8 8 0 0 0-6-3.93l-23.72-2.64q-1.48-1.56-3-3L186 40.54a8 8 0 0 0-3.94-6a107.3 107.3 0 0 0-26.25-10.86a8 8 0 0 0-7.06 1.48L130.16 40h-4.32L107.2 25.11a8 8 0 0 0-7.06-1.48a107.6 107.6 0 0 0-26.25 10.88a8 8 0 0 0-3.93 6l-2.64 23.76q-1.56 1.49-3 3L40.54 70a8 8 0 0 0-6 3.94a107.7 107.7 0 0 0-10.87 26.25a8 8 0 0 0 1.49 7.06L40 125.84v4.32L25.11 148.8a8 8 0 0 0-1.48 7.06a107.6 107.6 0 0 0 10.88 26.25a8 8 0 0 0 6 3.93l23.72 2.64q1.49 1.56 3 3L70 215.46a8 8 0 0 0 3.94 6a107.7 107.7 0 0 0 26.25 10.87a8 8 0 0 0 7.06-1.49L125.84 216q2.16.06 4.32 0l18.64 14.92a8 8 0 0 0 7.06 1.48a107.2 107.2 0 0 0 26.25-10.88a8 8 0 0 0 3.93-6l2.64-23.72q1.56-1.48 3-3l23.78-2.8a8 8 0 0 0 6-3.94a107.7 107.7 0 0 0 10.87-26.25a8 8 0 0 0-1.49-7.06Zm-16.1-6.5a74 74 0 0 1 0 8.68a8 8 0 0 0 1.74 5.48l14.19 17.73a91.6 91.6 0 0 1-6.23 15l-22.6 2.56a8 8 0 0 0-5.1 2.64a74 74 0 0 1-6.14 6.14a8 8 0 0 0-2.64 5.1l-2.51 22.58a91.3 91.3 0 0 1-15 6.23l-17.74-14.19a8 8 0 0 0-5-1.75h-.48a74 74 0 0 1-8.68 0a8.06 8.06 0 0 0-5.48 1.74l-17.78 14.2a91.6 91.6 0 0 1-15-6.23L82.89 187a8 8 0 0 0-2.64-5.1a74 74 0 0 1-6.14-6.14a8 8 0 0 0-5.1-2.64l-22.58-2.52a91.3 91.3 0 0 1-6.23-15l14.19-17.74a8 8 0 0 0 1.74-5.48a74 74 0 0 1 0-8.68a8 8 0 0 0-1.74-5.48L40.2 100.45a91.6 91.6 0 0 1 6.23-15L69 82.89a8 8 0 0 0 5.1-2.64a74 74 0 0 1 6.14-6.14A8 8 0 0 0 82.89 69l2.51-22.57a91.3 91.3 0 0 1 15-6.23l17.74 14.19a8 8 0 0 0 5.48 1.74a74 74 0 0 1 8.68 0a8.06 8.06 0 0 0 5.48-1.74l17.77-14.19a91.6 91.6 0 0 1 15 6.23L173.11 69a8 8 0 0 0 2.64 5.1a74 74 0 0 1 6.14 6.14a8 8 0 0 0 5.1 2.64l22.58 2.51a91.3 91.3 0 0 1 6.23 15l-14.19 17.74a8 8 0 0 0-1.74 5.53Z"/></g></svg>
      </button>
      <button class="pl__btn" type="button" aria-label="Profile">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" aria-hidden="true"><g fill="currentColor"><path d="M192 96a64 64 0 1 1-64-64a64 64 0 0 1 64 64" opacity=".2"/><path d="M230.92 212c-15.23-26.33-38.7-45.21-66.09-54.16a72 72 0 1 0-73.66 0c-27.39 8.94-50.86 27.82-66.09 54.16a8 8 0 1 0 13.85 8c18.84-32.56 52.14-52 89.07-52s70.23 19.44 89.07 52a8 8 0 1 0 13.85-8M72 96a56 56 0 1 1 56 56a56.06 56.06 0 0 1-56-56"/></g></svg>
      </button>
    </nav>
    <p class="pl__cap">The active pill slides by a fixed pixel stride</p>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: $dur-base;
$easing: $ease-spring;
$color: $subject-blue;

@include stage($stage-ink);

// 등록해야 --idx 가 숫자로 보간된다 — 등록 안 하면 문자열이라 칸 사이를 못 건넌다
@property --idx {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}

.pl {
  --idx: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: $sp-4;
}
.pl__dock {
  position: relative;
  display: flex;
  gap: $sp-2;
  padding: $sp-2;
  border-radius: $r-pill;
  background: rgba(255, 255, 255, .08);
}
.pl__pill {
  position: absolute;
  top: $sp-2;
  left: $sp-2;
  width: 48px;
  height: 48px;
  border-radius: $r-pill;
  background: $color;
  // 한 칸 = 항목 48px + gap 8px = 56px. 고정 px 이므로 항목은 flex: 0 0 auto 여야 한다
  transform: translateX(calc(var(--idx) * 56px));
  transition: transform $duration $easing;
}
.pl__btn {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: $r-pill;
  background: none;
  color: rgba(255, 255, 255, .55);
  cursor: pointer;
  transition: color $duration $easing;
}
.pl__btn svg { width: 24px; height: 24px; display: block; }
.pl__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pl__btn[aria-current="page"] { color: #fff; }
.pl__cap {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .62);
}

/* 자동 재생 — 알약이 다섯 칸을 돌고 90% 안에 첫 칸으로 복귀 */
.is-demo .pl__pill {
  animation-name: pl-slide;
  animation-duration: 2s;
  animation-timing-function: $ease-spring;
  animation-iteration-count: infinite;
}
.is-demo .pl__btn {
  animation-name: pl-dim;
  animation-duration: 2s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}
.is-demo .pl__btn:nth-of-type(2) { animation-delay: .32s; }
.is-demo .pl__btn:nth-of-type(3) { animation-delay: .64s; }
.is-demo .pl__btn:nth-of-type(4) { animation-delay: .96s; }
.is-demo .pl__btn:nth-of-type(5) { animation-delay: 1.28s; }
@keyframes pl-slide {
  0%, 12% { transform: translateX(0); }
  16%, 28% { transform: translateX(56px); }
  32%, 44% { transform: translateX(112px); }
  48%, 60% { transform: translateX(168px); }
  64%, 76% { transform: translateX(224px); }
  86%, 100% { transform: translateX(0); }
}
@keyframes pl-dim {
  0% { color: rgba(255, 255, 255, .55); }
  4% { color: #fff; }
  16% { color: rgba(255, 255, 255, .55); }
  100% { color: rgba(255, 255, 255, .55); }
}

@media (prefers-reduced-motion: reduce) {
  .is-demo .pl__pill,
  .is-demo .pl__btn { animation-name: none; }
  .pl__pill,
  .pl__btn { transition: none; }
}

@charset "UTF-8";
html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

@property --idx {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
.pl {
  --idx: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.pl__dock {
  position: relative;
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.pl__pill {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #2f6df6;
  transform: translateX(calc(var(--idx) * 56px));
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pl__btn {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: color 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pl__btn svg {
  width: 24px;
  height: 24px;
  display: block;
}

.pl__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.pl__btn[aria-current=page] {
  color: #fff;
}

.pl__cap {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

/* 자동 재생 — 알약이 다섯 칸을 돌고 90% 안에 첫 칸으로 복귀 */
.is-demo .pl__pill {
  animation-name: pl-slide;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-iteration-count: infinite;
}

.is-demo .pl__btn {
  animation-name: pl-dim;
  animation-duration: 2s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

.is-demo .pl__btn:nth-of-type(2) {
  animation-delay: 0.32s;
}

.is-demo .pl__btn:nth-of-type(3) {
  animation-delay: 0.64s;
}

.is-demo .pl__btn:nth-of-type(4) {
  animation-delay: 0.96s;
}

.is-demo .pl__btn:nth-of-type(5) {
  animation-delay: 1.28s;
}

@keyframes pl-slide {
  0%, 12% {
    transform: translateX(0);
  }
  16%, 28% {
    transform: translateX(56px);
  }
  32%, 44% {
    transform: translateX(112px);
  }
  48%, 60% {
    transform: translateX(168px);
  }
  64%, 76% {
    transform: translateX(224px);
  }
  86%, 100% {
    transform: translateX(0);
  }
}
@keyframes pl-dim {
  0% {
    color: rgba(255, 255, 255, 0.55);
  }
  4% {
    color: #fff;
  }
  16% {
    color: rgba(255, 255, 255, 0.55);
  }
  100% {
    color: rgba(255, 255, 255, 0.55);
  }
}
@media (prefers-reduced-motion: reduce) {
  .is-demo .pl__pill,
  .is-demo .pl__btn {
    animation-name: none;
  }
  .pl__pill,
  .pl__btn {
    transition: none;
  }
}

// 실제 동작: 클릭 → --idx 값 교체. 알약은 translateX(var(--idx) * 56px) 로 이동(항목 폭 48 + gap 8).
var root = document.getElementById('pl');
var btns = Array.prototype.slice.call(root.querySelectorAll('.pl__btn'));
btns.forEach(function (b, i) {
  if (i === 0) b.setAttribute('aria-current', 'page');
  b.addEventListener('pointerdown', function () { root.classList.remove('is-demo'); });
  b.addEventListener('click', function () {
    root.style.setProperty('--idx', i);
    btns.forEach(function (x) { x.removeAttribute('aria-current'); });
    b.setAttribute('aria-current', 'page');
  });
});

import { useState } from "react";
import type { CSSProperties } from "react";
import styles from "./PillSlideDock.module.scss";

export type PillSlideDockProps = {
  /** 처음 켜 둘 칸 (0부터) */
  start?: number;
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & {
  "--idx"?: string;
  "--duration"?: string;
  "--easing"?: string;
  "--color"?: string;
};

const ICONS = [
  {
    label: "Home",
    svg: (
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" aria-hidden="true"><g fill="currentColor"><path d="M216 120v96h-64v-64h-48v64H40v-96a8 8 0 0 1 2.34-5.66l80-80a8 8 0 0 1 11.32 0l80 80A8 8 0 0 1 216 120" opacity=".2"/><path d="m219.31 108.68l-80-80a16 16 0 0 0-22.62 0l-80 80A15.87 15.87 0 0 0 32 120v96a8 8 0 0 0 8 8h64a8 8 0 0 0 8-8v-56h32v56a8 8 0 0 0 8 8h64a8 8 0 0 0 8-8v-96a15.87 15.87 0 0 0-4.69-11.32M208 208h-48v-56a8 8 0 0 0-8-8h-48a8 8 0 0 0-8 8v56H48v-88l80-80l80 80Z"/></g></svg>
    ),
  },
  {
    label: "Files",
    svg: (
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" aria-hidden="true"><g fill="currentColor"><path d="M128 80H32V56a8 8 0 0 1 8-8h52.69a8 8 0 0 1 5.65 2.34Z" opacity=".2"/><path d="M216 72h-84.69L104 44.69A15.86 15.86 0 0 0 92.69 40H40a16 16 0 0 0-16 16v144.62A15.4 15.4 0 0 0 39.38 216h177.51A15.13 15.13 0 0 0 232 200.89V88a16 16 0 0 0-16-16M92.69 56l16 16H40V56ZM216 200H40V88h176Z"/></g></svg>
    ),
  },
  {
    label: "Chat",
    svg: (
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" aria-hidden="true"><g fill="currentColor"><path d="M224 128a96 96 0 0 1-144.07 83.11l-37.39 12.47a8 8 0 0 1-10.12-10.12l12.47-37.39A96 96 0 1 1 224 128" opacity=".2"/><path d="M128 24a104 104 0 0 0-91.82 152.88l-11.35 34.05a16 16 0 0 0 20.24 20.24l34.05-11.35A104 104 0 1 0 128 24m0 192a87.87 87.87 0 0 1-44.06-11.81a8 8 0 0 0-6.54-.67L40 216l12.47-37.4a8 8 0 0 0-.66-6.54A88 88 0 1 1 128 216"/></g></svg>
    ),
  },
  {
    label: "Settings",
    svg: (
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" aria-hidden="true"><g fill="currentColor"><path d="m207.86 123.18l16.78-21a99 99 0 0 0-10.07-24.29l-26.7-3a81 81 0 0 0-6.81-6.81l-3-26.71a99.4 99.4 0 0 0-24.3-10l-21 16.77a82 82 0 0 0-9.64 0l-21-16.78a99 99 0 0 0-24.21 10.07l-3 26.7a81 81 0 0 0-6.81 6.81l-26.71 3a99.4 99.4 0 0 0-10 24.3l16.77 21a82 82 0 0 0 0 9.64l-16.78 21a99 99 0 0 0 10.07 24.29l26.7 3a81 81 0 0 0 6.81 6.81l3 26.71a99.4 99.4 0 0 0 24.3 10l21-16.77a82 82 0 0 0 9.64 0l21 16.78a99.4 99.4 0 0 0 24.29-10.07l3-26.7a81 81 0 0 0 6.81-6.81l26.71-3a99.4 99.4 0 0 0 10-24.3l-16.77-21a82 82 0 0 0-.08-9.64M128 168a40 40 0 1 1 40-40a40 40 0 0 1-40 40" opacity=".2"/><path d="M128 80a48 48 0 1 0 48 48a48.05 48.05 0 0 0-48-48m0 80a32 32 0 1 1 32-32a32 32 0 0 1-32 32m88-29.84q.06-2.16 0-4.32l14.92-18.64a8 8 0 0 0 1.48-7.06a107.6 107.6 0 0 0-10.88-26.25a8 8 0 0 0-6-3.93l-23.72-2.64q-1.48-1.56-3-3L186 40.54a8 8 0 0 0-3.94-6a107.3 107.3 0 0 0-26.25-10.86a8 8 0 0 0-7.06 1.48L130.16 40h-4.32L107.2 25.11a8 8 0 0 0-7.06-1.48a107.6 107.6 0 0 0-26.25 10.88a8 8 0 0 0-3.93 6l-2.64 23.76q-1.56 1.49-3 3L40.54 70a8 8 0 0 0-6 3.94a107.7 107.7 0 0 0-10.87 26.25a8 8 0 0 0 1.49 7.06L40 125.84v4.32L25.11 148.8a8 8 0 0 0-1.48 7.06a107.6 107.6 0 0 0 10.88 26.25a8 8 0 0 0 6 3.93l23.72 2.64q1.49 1.56 3 3L70 215.46a8 8 0 0 0 3.94 6a107.7 107.7 0 0 0 26.25 10.87a8 8 0 0 0 7.06-1.49L125.84 216q2.16.06 4.32 0l18.64 14.92a8 8 0 0 0 7.06 1.48a107.2 107.2 0 0 0 26.25-10.88a8 8 0 0 0 3.93-6l2.64-23.72q1.56-1.48 3-3l23.78-2.8a8 8 0 0 0 6-3.94a107.7 107.7 0 0 0 10.87-26.25a8 8 0 0 0-1.49-7.06Zm-16.1-6.5a74 74 0 0 1 0 8.68a8 8 0 0 0 1.74 5.48l14.19 17.73a91.6 91.6 0 0 1-6.23 15l-22.6 2.56a8 8 0 0 0-5.1 2.64a74 74 0 0 1-6.14 6.14a8 8 0 0 0-2.64 5.1l-2.51 22.58a91.3 91.3 0 0 1-15 6.23l-17.74-14.19a8 8 0 0 0-5-1.75h-.48a74 74 0 0 1-8.68 0a8.06 8.06 0 0 0-5.48 1.74l-17.78 14.2a91.6 91.6 0 0 1-15-6.23L82.89 187a8 8 0 0 0-2.64-5.1a74 74 0 0 1-6.14-6.14a8 8 0 0 0-5.1-2.64l-22.58-2.52a91.3 91.3 0 0 1-6.23-15l14.19-17.74a8 8 0 0 0 1.74-5.48a74 74 0 0 1 0-8.68a8 8 0 0 0-1.74-5.48L40.2 100.45a91.6 91.6 0 0 1 6.23-15L69 82.89a8 8 0 0 0 5.1-2.64a74 74 0 0 1 6.14-6.14A8 8 0 0 0 82.89 69l2.51-22.57a91.3 91.3 0 0 1 15-6.23l17.74 14.19a8 8 0 0 0 5.48 1.74a74 74 0 0 1 8.68 0a8.06 8.06 0 0 0 5.48-1.74l17.77-14.19a91.6 91.6 0 0 1 15 6.23L173.11 69a8 8 0 0 0 2.64 5.1a74 74 0 0 1 6.14 6.14a8 8 0 0 0 5.1 2.64l22.58 2.51a91.3 91.3 0 0 1 6.23 15l-14.19 17.74a8 8 0 0 0-1.74 5.53Z"/></g></svg>
    ),
  },
  {
    label: "Profile",
    svg: (
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" aria-hidden="true"><g fill="currentColor"><path d="M192 96a64 64 0 1 1-64-64a64 64 0 0 1 64 64" opacity=".2"/><path d="M230.92 212c-15.23-26.33-38.7-45.21-66.09-54.16a72 72 0 1 0-73.66 0c-27.39 8.94-50.86 27.82-66.09 54.16a8 8 0 1 0 13.85 8c18.84-32.56 52.14-52 89.07-52s70.23 19.44 89.07 52a8 8 0 1 0 13.85-8M72 96a56 56 0 1 1 56 56a56.06 56.06 0 0 1-56-56"/></g></svg>
    ),
  },
];

export default function PillSlideDock({
  start = 0,
  duration = 300,
  easing = "cubic-bezier(.2,.8,.2,1)",
  color = "#2f6df6",
}: PillSlideDockProps) {
  // 실제 동작: 클릭 → --idx 값 교체. 알약은 translateX(var(--idx) * 56px) 로 이동(항목 폭 48 + gap 8).
  const [idx, setIdx] = useState(start);

  const vars: Vars = {
    "--idx": `${idx}`,
    "--duration": `${duration}ms`,
    "--easing": easing,
    "--color": color,
  };

  return (
    <div className={styles.pl} style={vars}>
      <nav className={styles.dock} aria-label="Main menu">
        <i className={styles.pill} aria-hidden="true" />
        {ICONS.map((it, i) => (
          <button
            key={it.label}
            className={styles.btn}
            type="button"
            aria-label={it.label}
            aria-current={i === idx ? "page" : undefined}
            onClick={() => setIdx(i)}
          >
            {it.svg}
          </button>
        ))}
      </nav>
      <p className={styles.cap}>The pill slides a fixed number of pixels to the active slot</p>
    </div>
  );
}

Open in a new tab

02 Pill slide indicator — Measured area 7.554% · moving frames 16/23Original by GODRICH · SCSS and React ship in the zip · Mac Dock CSS — 9 Floating Dock Styles, No Library

The post this demo lives in

Mac Dock CSS — 9 Floating Dock Styles, No Library - preview of all 9 demos

Mac Dock CSS — 9 Floating Dock Styles, No LibraryMac dock CSS is the plain-CSS way to rebuild that floating strip of icons at a screen edge: a short bar, a few icon butt See all demos in this post

02Pill slide indicator

The post this demo lives in

If you like this effect - similar demos