Tick Nav

"use client";

// A section list laid along a ruler. Each item has a tick; finer ticks sit
// between them. Under the pointer the ticks lengthen like a dock, easing off
// with distance, and each label slides out with its tick. The current item
// keeps a longer tick and full contrast. Arrow keys move focus, and focus
// swells the ruler the same way the pointer does.

import {
  animate,
  motion,
  useMotionValue,
  useReducedMotion,
  useSpring,
  useTransform,
  type MotionValue,
} from "motion/react";
import { useEffect, useRef, useState, type KeyboardEvent, type ReactNode } from "react";
import { cn } from "@/lib/utils";

export type TickNavItem = string | { label: string; href?: string };

export type TickNavProps = {
  items: readonly TickNavItem[];