Playhead Reel

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

"use client";

import * as React from "react";
import {
  cancelFrame,
  frame,
  useMotionValue,
  useReducedMotion,
  useScroll,
  useSpring,
} from "motion/react";

import { cn } from "@/lib/utils";

/* ─────────────────────────────────────────────────────────
 * PLAYHEAD REEL STORYBOARD   (driven by scroll progress, not time)
 *
 *  rest    every item sits small in one strip across the middle,
 *          in groups with a gap between them. A ruler underneath
 *          has a tick per item and a label per group
 *    0%    the section pins; the playhead stands on the first item
 *  0→100%  the playhead walks left → right along the ruler while
 *          the strip slides the other way under it, so the
 *          playhead is also a progress bar for the whole reel
 *  bloom   items near the playhead open out of the strip: they
 *          grow to about half the lane, spread apart and drift
 *          above or below the line into a loose collage, then
 *          shrink back as they pass. Later items lie on top,
 *          like prints dealt left to right
 *  skim    scroll fast and the collage folds flat into the strip,
 *          so you can see where you're going; slow down and it
 *          opens again
 *  edges   near either end the collage leans inward, so the item
 *          under the playhead never hangs off the stage
 *  point   hover an open item to lift it off the pile; click any
 *          item to glide it under the playhead
 *  scrub   drag along the ruler, or focus the handle and use the
 *          arrow keys (Shift or Page Up/Down jump a group).
 *          Group labels jump to their group
 *  reduce  no smoothing and no folding; jumps are instant
 *
 *  Every item is one element moved by a transform written once a
 *  frame, so scrolling never renders React.
 * ───────────────────────────────────────────────────────── */

const REEL = {
  thumbHeight: 40, // px, an item's height in the strip
  gap: 6, // px between items in a group
  groupGap: 40, // px between groups
  bloom: 0.46, // height of an open item, as a fraction of the lane
  maxWidth: 0.6, // widest an open item gets, as a fraction of the stage
  sizes: [0.8, 1.08], // open items vary between these sizes
  lifts: [0.3, 1], // and drift this much of their room off the line
  room: 0.6, // most room an item gets on each side, as a fraction of its open height
  reach: 2.5, // roughly how many items either side of the playhead open
  overlap: 0.55, // open neighbors sit this fraction of an item's width apart
  maxSpread: 0.25, // cap on how far the collage pushes the strip aside, as a fraction of the stage
  dim: 0.5, // opacity of strip items away from the playhead
  skim: [10, 36], // items per second where the collage starts to fold, and is flat
  settle: 140, // ms without scrolling before a folded collage opens again
  pad: [16, 32], // px between the ruler and the stage edge, narrow and wide
  edge: 12, // px kept between an open item and the lane's edges
  ruler: 48, // px, height of the band under the lane
  track: 14, // px from the top of the ruler to its line
  glide: 1200, // ms a keyboard step remembers its target while the scroll catches up
};

const SCROLL_SPRING = { stiffness: 170, damping: 32, mass: 0.4 };
const BLOOM_SPRING = { stiffness: 180, damping: 26 };

export interface PlayheadReelItem {
  /** Image URL. Leave it out and pass `content` to show your own markup instead. */
  src?: string;
  alt?: string;
  /** Width ÷ height. Sets the item's width in the strip and the shape it opens to. */
  aspect?: number;
  /** Rendered in place of an image, at the item's open size, then scaled with it. */
  content?: React.ReactNode;
}

export interface PlayheadReelGroup {
  /** Short name on the ruler, like "v2.4", "2019" or "Lisbon". */
  label: string;
  items: readonly PlayheadReelItem[];
}

export interface PlayheadReelActive {
  /** Index of the group under the playhead. */
  group: number;
  /** Index of the item under the playhead, within its group. */
  item: number;
}

export interface PlayheadReelProps extends Omit<React.HTMLAttributes<HTMLElement>, "children"> {
  groups: readonly PlayheadReelGroup[];
  /** Height of an item in the strip, in px. */
  thumbHeight?: number;
  /** Pixels of scroll it takes to move the playhead one item along. */
  scrollPerItem?: number;
  /** Roughly how many items on each side of the playhead open up. */
  reach?: number;
  /** Fold the collage flat while scrolling fast, and open it again on slowing down. */
  skim?: boolean;
  /**
   * Scroll container to track. Defaults to the window. The container must be
   * positioned (e.g. `relative`), or scroll progress is measured from the page.
   */
  containerRef?: React.RefObject<HTMLElement | null>;
  /** Classes for the pinned stage. Set its height and text color here. */
  stageClassName?: string;
  /** Classes for every item's frame, which defaults to rounded corners and a soft shadow. */
  itemClassName?: string;
  /** Pinned above the reel, in the flow: titles, counters, links. */
  header?: React.ReactNode;
  /** Pinned below the ruler, in the flow. */
  footer?: React.ReactNode;
  /** Called with the group and item under the playhead whenever they change. */
  onActiveChange?: (active: PlayheadReelActive) => void;
}

type Slot = {
  group: number;
  index: number;
  aspect: number;
  /** Center along the strip at rest, in px. */
  center: number;
  /** Open-size factor. */
  size: number;
  /** Where it drifts when open: −1 is the top of its room, 1 the bottom. */
  lift: number;
};

type Strip = {
  slots: Slot[];
  /** First item of each group that has any, in order. */
  starts: { group: number; slot: number }[];
  first: number;
  length: number;
  /** Average center-to-center distance, gaps included. */
  pitch: number;
};

type Geometry = {
  width: number;
  lane: number;
  /** Where the playhead starts, and how far it walks. */
  x0: number;
  travel: number;
  /** Open height and vertical room of each item. */
  open: number[];
  room: number[];
  radius: number;
  spread: number;
  /** Half the width of each item when open. */
  half: number[];
};

export function PlayheadReel({
  groups,
  thumbHeight = REEL.thumbHeight,
  scrollPerItem = 80,
  reach = REEL.reach,
  skim = true,
  containerRef,
  stageClassName,
  itemClassName,
  header,
  footer,
  onActiveChange,
  className,
  ...props
}: PlayheadReelProps) {
  const sectionRef = React.useRef<HTMLElement>(null);
  const deckRef = React.useRef<HTMLDivElement>(null);
  const playheadRef = React.useRef<HTMLDivElement>(null);
  const handleRef = React.useRef<HTMLDivElement>(null);
  const fillRef = React.useRef<HTMLDivElement>(null);
  const itemEls = React.useRef<(HTMLDivElement | null)[]>([]);
  const activeRef = React.useRef(0);
  const pendingRef = React.useRef<{ slot: number; until: number } | null>(null);
  const reduceMotion = useReducedMotion() ?? false;

  const strip = React.useMemo(() => layoutStrip(groups, thumbHeight), [groups, thumbHeight]);
  const deck = useElementSize(deckRef);
  const geometry = React.useMemo(
    () => measureReel(strip, deck.width, deck.height - REEL.ruler, thumbHeight, reach),
    [strip, deck.width, deck.height, thumbHeight, reach],
  );
  const near = useNearViewport(sectionRef);
  const [active, setActive] = React.useState(0);

  const { scrollYProgress } = useScroll({
    target: sectionRef,
    container: containerRef,
    offset: ["start start", "end end"],
  });
  const smoothProgress = useSpring(scrollYProgress, SCROLL_SPRING);
  const progress = reduceMotion ? scrollYProgress : smoothProgress;
  const bloomTarget = useMotionValue(1);
  const bloom = useSpring(bloomTarget, BLOOM_SPRING);

  const report = React.useEffectEvent((slot: number) => {
    setActive(slot);
    const { group, index } = strip.slots[slot];
    onActiveChange?.({ group, item: index });
  });

  const setItemEl = React.useCallback((index: number, el: HTMLDivElement | null) => {
    itemEls.current[index] = el;
  }, []);

  React.useLayoutEffect(() => {
    const g = geometry;
    if (!g) return;
    const { slots, first, length } = strip;
    const skimming = skim && !reduceMotion;
    if (!skimming) bloomTarget.set(1);
    let settle: ReturnType<typeof setTimeout> | undefined;

    const paint = () => {
      const p = clamp01(progress.get());
      const b = bloom.get();
      const focus = first + p * length;
      const x = g.x0 + p * g.travel;
      // Lean the collage inward near the ends, so the item under the playhead stays on stage.
      const reachOut = halfAt(slots, g.half, focus) * b + REEL.edge;
      const lean = Math.max(0, reachOut - x) - Math.max(0, x + reachOut - g.width);

      for (let i = 0; i < slots.length; i++) {
        const el = itemEls.current[i];
        if (!el) continue;
        const slot = slots[i];
        const d = slot.center - focus;
        const closeness = Math.exp(-(d * d) / (g.radius * g.radius));
        const open = b * closeness;
        const cx = x + lean + d + g.spread * b * Math.tanh(d / g.radius);
        const height = thumbHeight + (g.open[i] - thumbHeight) * open;
        const half = (height * slot.aspect) / 2;
        if (cx + half < 0 || cx - half > g.width) {
          el.style.visibility = "hidden";
          continue;
        }
        const cy = slot.lift * g.room[i] * open;
        const w = g.open[i] * slot.aspect;
        el.style.visibility = "visible";
        // Only the strip dims; anything opening up is fully opaque, so overlaps stay clean.
        el.style.opacity = String(REEL.dim + (1 - REEL.dim) * Math.min(1, closeness * 3));
        el.style.transform = `translate3d(${cx - w / 2}px, ${cy - g.open[i] / 2}px, 0) scale(${height / g.open[i]})`;
      }

      const playhead = `translate3d(${x}px, 0, 0)`;
      if (playheadRef.current) playheadRef.current.style.transform = playhead;
      if (handleRef.current) handleRef.current.style.transform = playhead;
      if (fillRef.current) fillRef.current.style.transform = `scaleX(${g.travel ? (x - g.x0) / g.travel : 0})`;

      const current = nearestSlot(slots, focus);
      const pending = pendingRef.current;
      if (pending && (pending.slot === current || performance.now() > pending.until)) {
        pendingRef.current = null;
      }
      if (current !== activeRef.current) {
        activeRef.current = current;
        report(current);
      }
    };

    const schedule = () => frame.render(paint);
    const onProgress = () => {
      if (skimming && strip.pitch > 0) {
        const speed = (Math.abs(progress.getVelocity()) * length) / strip.pitch;
        bloomTarget.set(1 - smoothstep(REEL.skim[0], REEL.skim[1], speed));
        clearTimeout(settle);
        settle = setTimeout(() => bloomTarget.set(1), REEL.settle);
      }
      schedule();
    };

    paint();
    const stops = [progress.on("change", onProgress), bloom.on("change", schedule)];
    return () => {
      stops.forEach((stop) => stop());
      cancelFrame(paint);
      clearTimeout(settle);
    };
  }, [bloom, bloomTarget, geometry, progress, reduceMotion, skim, strip, thumbHeight]);

  const scrollToProgress = (p: number, smooth: boolean) => {
    const section = sectionRef.current;
    if (!section) return;
    const container = containerRef?.current ?? null;
    const viewport = container ? container.clientHeight : window.innerHeight;
    const range = Math.max(0, section.offsetHeight - viewport);
    const origin = container ? container.getBoundingClientRect().top + container.clientTop : 0;
    const scrolled = container ? container.scrollTop : window.scrollY;
    const top = scrolled + section.getBoundingClientRect().top - origin + clamp01(p) * range;
    (container ?? window).scrollTo({ top, behavior: smooth && !reduceMotion ? "smooth" : "instant" });
  };

  const glideTo = (slot: number) => {
    const target = Math.min(Math.max(slot, 0), strip.slots.length - 1);
    if (target < 0) return;
    pendingRef.current = { slot: target, until: performance.now() + REEL.glide };
    scrollToProgress(strip.length ? (strip.slots[target].center - strip.first) / strip.length : 0, true);
  };

  const scrubTo = (clientX: number) => {
    const el = deckRef.current;
    if (!el || !geometry?.travel) return;
    const x = clientX - el.getBoundingClientRect().left;
    pendingRef.current = null;
    scrollToProgress((x - geometry.x0) / geometry.travel, false);
  };

  const onKeyDown = (event: React.KeyboardEvent) => {
    const { slots, starts } = strip;
    if (!slots.length) return;
    const from = pendingRef.current?.slot ?? activeRef.current;
    const at = starts.findLastIndex((start) => start.slot <= from);
    const nextGroup = () => starts[at + 1]?.slot ?? slots.length - 1;
    const previousGroup = () =>
      starts[at].slot < from ? starts[at].slot : (starts[at - 1]?.slot ?? 0);

    let to: number | null = null;
    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
      to = event.shiftKey ? nextGroup() : from + 1;
    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
      to = event.shiftKey ? previousGroup() : from - 1;
    } else if (event.key === "PageDown") to = nextGroup();
    else if (event.key === "PageUp") to = previousGroup();
    else if (event.key === "Home") to = 0;
    else if (event.key === "End") to = slots.length - 1;
    if (to === null) return;
    event.preventDefault();
    glideTo(to);
  };

  const activeSlot = strip.slots[active];
  const activeGroup = activeSlot ? groups[activeSlot.group] : undefined;
  const lane = geometry?.lane ?? 0;
  const tickX = (slot: number) =>
    geometry
      ? geometry.x0 +
        (strip.length ? (strip.slots[slot].center - strip.first) / strip.length : 0) * geometry.travel
      : 0;

  return (
    <section ref={sectionRef} className={cn("relative", className)} {...props}>
      <div className={cn("sticky top-0 flex h-dvh w-full flex-col overflow-hidden", stageClassName)}>
        {header}
        <div
          ref={deckRef}
          className="relative min-h-0 flex-1"
          // Hidden until measured, so items don't flash in a pile at the corner.
          style={{ visibility: geometry ? undefined : "hidden" }}
        >
          <div
            className="absolute inset-x-0 top-0 isolate"
            style={{ height: lane }}
            onClick={(event) => {
              const item = (event.target as Element).closest<HTMLElement>("[data-reel-item]");
              if (item) glideTo(Number(item.dataset.reelItem));
            }}
          >
            {geometry ? (
              <ReelItems
                groups={groups}
                strip={strip}
                open={geometry.open}
                load={near}
                className={itemClassName}
                setItemEl={setItemEl}
              />
            ) : null}
          </div>

          <div
            ref={playheadRef}
            aria-hidden
            className="pointer-events-none absolute top-0 left-0 z-10 w-px bg-current will-change-transform"
            style={{ height: lane + REEL.track }}
          >
            <span className="absolute top-0 left-1/2 size-[5px] -translate-x-1/2 rounded-full bg-current" />
          </div>

          {geometry ? (
            <div className="absolute inset-x-0 bottom-0" style={{ height: REEL.ruler }}>
              <div
                aria-hidden
                className="absolute h-px bg-current opacity-15"
                style={{ left: geometry.x0, width: geometry.travel, top: REEL.track }}
              />
              <div
                ref={fillRef}
                aria-hidden
                className="absolute h-px origin-left bg-current opacity-70"
                style={{ left: geometry.x0, width: geometry.travel, top: REEL.track }}
              />
              <svg aria-hidden className="pointer-events-none absolute inset-0 size-full overflow-visible">
                <path
                  d={strip.slots.map((_, i) => `M${tickX(i)} ${REEL.track - 5}v5`).join("")}
                  stroke="currentColor"
                  strokeOpacity={0.3}
                />
                <path
                  d={strip.starts.map(({ slot }) => `M${tickX(slot)} ${REEL.track - 8}v16`).join("")}
                  stroke="currentColor"
                  strokeOpacity={0.6}
                />
              </svg>

              {/* Drag anywhere along the line to scrub; the handle rides inside. */}
              <div
                className="absolute inset-x-0 top-0 h-7 cursor-ew-resize touch-none"
                onPointerDown={(event) => {
                  if (event.button !== 0) return;
                  event.currentTarget.setPointerCapture(event.pointerId);
                  handleRef.current?.querySelector<HTMLElement>("[role=slider]")?.focus({ preventScroll: true });
                  scrubTo(event.clientX);
                }}
                onPointerMove={(event) => {
                  if (event.currentTarget.hasPointerCapture(event.pointerId)) scrubTo(event.clientX);
                }}
              >
                <div ref={handleRef} className="absolute top-0 left-0 size-0 will-change-transform" style={{ top: REEL.track }}>
                  <div
                    role="slider"
                    tabIndex={0}
                    aria-label="Playhead"
                    aria-valuemin={0}
                    aria-valuemax={Math.max(strip.slots.length - 1, 0)}
                    aria-valuenow={active}
                    aria-valuetext={
                      activeSlot && activeGroup
                        ? `${activeGroup.label}, ${
                            activeGroup.items[activeSlot.index]?.alt ||
                            `${activeSlot.index + 1} of ${activeGroup.items.length}`
                          }`
                        : undefined
                    }
                    onKeyDown={onKeyDown}
                    className="absolute h-4 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-current outline-current outline-offset-2 focus-visible:outline-2 before:absolute before:-inset-x-3 before:-inset-y-2"
                  />
                </div>
              </div>

              {strip.starts.map(({ group, slot }, k) => {
                const left = tickX(slot);
                const next = strip.starts[k + 1];
                const right = next ? tickX(next.slot) - 8 : geometry.width - 8;
                const room = right - left - 4;
                if (room < 24) return null;
                return (
                  <button
                    key={group}
                    type="button"
                    data-active={activeSlot?.group === group ? "" : undefined}
                    onClick={() => glideTo(slot)}
                    className="absolute truncate rounded-sm px-0.5 text-left text-[11px] leading-4 font-medium opacity-45 transition-opacity duration-200 outline-current hover:opacity-100 focus-visible:outline-2 data-active:opacity-100"
                    style={{ left: left + 2, top: REEL.track + 10, maxWidth: room }}
                  >
                    {groups[group].label}
                  </button>
                );
              })}
            </div>
          ) : null}
        </div>
        {footer}
      </div>
      {/* Scroll runway: the stage stays pinned while this scrolls past. */}
      <div
        aria-hidden
        style={{ height: strip.pitch ? (strip.length / strip.pitch) * scrollPerItem : 0 }}
      />
    </section>
  );
}

/**
 * Every item, at its open size. The paint loop scales each one down to the
 * strip and back, so this only renders again when the stage resizes.
 */
const ReelItems = React.memo(function ReelItems({
  groups,
  strip,
  open,
  load,
  className,
  setItemEl,
}: {
  groups: readonly PlayheadReelGroup[];
  strip: Strip;
  open: number[];
  load: boolean;
  className?: string;
  setItemEl: (index: number, el: HTMLDivElement | null) => void;
}) {
  return strip.slots.map((slot, i) => {
    const item = groups[slot.group].items[slot.index];
    const height = open[i];
    return (
      <div
        key={`${slot.group}-${slot.index}`}
        ref={(el) => setItemEl(i, el)}
        data-reel-item={i}
        className="group/item absolute top-1/2 left-0 z-(--z) cursor-pointer will-change-transform hover:z-[10000]"
        style={{ width: height * slot.aspect, height, "--z": i } as React.CSSProperties}
      >
        <div
          className={cn(
            "size-full overflow-hidden rounded-lg bg-current/8 shadow-[0_12px_32px_-14px_rgb(0_0_0/0.4)] transition-[scale,box-shadow] duration-300 ease-out group-hover/item:shadow-[0_28px_56px_-18px_rgb(0_0_0/0.5)] motion-safe:group-hover/item:scale-[1.035]",
            className,
          )}
        >
          {item.content ??
            (item.src && load ? (
              <img
                src={item.src}
                alt={item.alt ?? ""}
                draggable={false}
                decoding="async"
                className="size-full object-cover"
              />
            ) : null)}
        </div>
      </div>
    );
  });
});

function layoutStrip(groups: readonly PlayheadReelGroup[], thumbHeight: number): Strip {
  const slots: Slot[] = [];
  const starts: Strip["starts"] = [];
  let x = 0;
  groups.forEach((group, g) => {
    if (!group.items.length) return;
    if (slots.length) x += REEL.groupGap - REEL.gap;
    starts.push({ group: g, slot: slots.length });
    group.items.forEach((item, index) => {
      const aspect = item.aspect ?? 4 / 3;
      const width = thumbHeight * aspect;
      const n = slots.length;
      slots.push({
        group: g,
        index,
        aspect,
        center: x + width / 2,
        size: lerp(REEL.sizes[0], REEL.sizes[1], hash(n + 0.5)),
        // Alternate above and below the line, by a different amount each time.
        lift: (n % 2 ? 1 : -1) * lerp(REEL.lifts[0], REEL.lifts[1], hash(n)),
      });
      x += width + REEL.gap;
    });
  });
  const first = slots[0]?.center ?? 0;
  const length = (slots.at(-1)?.center ?? 0) - first;
  return { slots, starts, first, length, pitch: slots.length > 1 ? length / (slots.length - 1) : 0 };
}

function measureReel(
  strip: Strip,
  width: number,
  lane: number,
  thumbHeight: number,
  reach: number,
): Geometry | null {
  if (!width || lane <= 0 || !strip.slots.length) return null;
  const pad = width < 640 ? REEL.pad[0] : REEL.pad[1];
  // A short reel doesn't stretch: the strip stays put and the playhead walks its length.
  const travel = Math.min(Math.max(0, width - 2 * pad), strip.length);
  const target = lane * REEL.bloom;
  const open = strip.slots.map((slot) =>
    Math.max(
      thumbHeight,
      Math.min(target * slot.size, lane - 2 * REEL.edge, (width * REEL.maxWidth) / slot.aspect),
    ),
  );
  // On tall stages, stay near the line rather than scattering to the edges.
  const room = open.map((height) =>
    Math.max(0, Math.min((lane - height) / 2 - REEL.edge, height * REEL.room)),
  );
  const half = open.map((height, i) => (height * strip.slots[i].aspect) / 2);
  const meanWidth = (2 * half.reduce((sum, h) => sum + h, 0)) / half.length;
  const pitch = strip.pitch || thumbHeight;
  const radius = Math.max(1, reach * pitch);
  // Spread neighbors so they sit `overlap` of a width apart at the playhead:
  // the strip's slope there is 1 + spread / radius.
  const spread = Math.min(
    radius * Math.max(0, (REEL.overlap * meanWidth) / pitch - 1),
    width * REEL.maxSpread,
  );
  return {
    width,
    lane,
    x0: (width - travel) / 2,
    travel,
    open,
    room,
    radius,
    spread,
    half,
  };
}

/** Half-width of the open item at `x` along the strip, blended between neighbors. */
function halfAt(slots: Slot[], half: number[], x: number) {
  const next = slots.findIndex((slot) => slot.center >= x);
  if (next <= 0) return half[next < 0 ? half.length - 1 : 0];
  const t = (x - slots[next - 1].center) / (slots[next].center - slots[next - 1].center);
  return lerp(half[next - 1], half[next], t);
}

function nearestSlot(slots: Slot[], x: number) {
  let lo = 0;
  let hi = slots.length - 1;
  while (lo < hi) {
    const mid = (lo + hi) >> 1;
    if (slots[mid].center < x) lo = mid + 1;
    else hi = mid;
  }
  return lo > 0 && x - slots[lo - 1].center < slots[lo].center - x ? lo - 1 : lo;
}

function useElementSize(ref: React.RefObject<HTMLElement | null>) {
  const [size, setSize] = React.useState({ width: 0, height: 0 });

  React.useLayoutEffect(() => {
    const el = ref.current;
    if (!el) return;

    const update = () => setSize({ width: el.clientWidth, height: el.clientHeight });
    update();

    const observer = new ResizeObserver(update);
    observer.observe(el);
    return () => observer.disconnect();
  }, [ref]);

  return size;
}

/** True once the element comes within a screen of the viewport, and stays true. */
function useNearViewport(ref: React.RefObject<HTMLElement | null>) {
  const [near, setNear] = React.useState(false);

  React.useEffect(() => {
    const el = ref.current;
    if (!el || near) return;
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (!entry?.isIntersecting) return;
        setNear(true);
        observer.disconnect();
      },
      { rootMargin: "100% 0px" },
    );
    observer.observe(el);
    return () => observer.disconnect();
  }, [ref, near]);

  return near;
}

function hash(n: number) {
  const s = Math.sin(n * 127.1 + 311.7) * 43758.5453;
  return s - Math.floor(s);
}

function lerp(a: number, b: number, t: number) {
  return a + (b - a) * t;
}

function clamp01(v: number) {
  return v < 0 ? 0 : v > 1 ? 1 : v;
}

function smoothstep(a: number, b: number, v: number) {
  const x = clamp01((v - a) / (b - a));
  return x * x * (3 - 2 * x);
}