Tracing Beam

.tb { view-timeline: --tb-view block; }
.tb-rail { position: relative; container-type: size; }
/* база (вне gvarda supports): луч дорисован — так же выглядит reduced-motion */
.tb-draw { stroke-dashoffset: 0; }
.tb-dot {
  position: absolute; left: 50%; top: 4px;
  width: 12px; height: 12px; margin-left: -6px;
  border-radius: 999px;
  background: var(--tb-bright);
  box-shadow: 0 0 12px var(--tb-bright);
}
@supports (animation-timeline: view()) {
  /* contain, не cover: у колонки выше экрана это ровно «прогресс чтения» —
     0 когда её верх коснулся верха экрана, 1 когда низ дошёл до низа.
     cover требовал бы, чтобы коробка целиком ПОКИНУЛА экран, — на странице,
     которая кончается вместе с колонкой, луч не дорисовывался никогда. */
  .tb-draw {
    stroke-dashoffset: 1;
    animation: tb-draw linear both;
    animation-timeline: --tb-view;
    animation-range: contain;
  }
  .tb-dot {
    animation: tb-move linear both;
    animation-timeline: --tb-view;
    animation-range: contain;
  }
  @keyframes tb-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes tb-move { from { transform: translateY(0); } to { transform: translateY(calc(100cqh - 16px)); } }
}
@media (prefers-reduced-motion: reduce) {
  .tb-draw { animation: none; stroke-dashoffset: 0; }
  .tb-dot { display: none; }
}

const css = `.tb { view-timeline: --tb-view block; }
.tb-rail { position: relative; container-type: size; }
/* база (вне gvarda supports): луч дорисован — так же выглядит reduced-motion */
.tb-draw { stroke-dashoffset: 0; }
.tb-dot {
  position: absolute; left: 50%; top: 4px;
  width: 12px; height: 12px; margin-left: -6px;
  border-radius: 999px;
  background: var(--tb-bright);
  box-shadow: 0 0 12px var(--tb-bright);
}
@supports (animation-timeline: view()) {
  /* contain, не cover: у колонки выше экрана это ровно «прогресс чтения» —
     0 когда её верх коснулся верха экрана, 1 когда низ дошёл до низа.
     cover требовал бы, чтобы коробка целиком ПОКИНУЛА экран, — на странице,
     которая кончается вместе с колонкой, луч не дорисовывался никогда. */
  .tb-draw {
    stroke-dashoffset: 1;
    animation: tb-draw linear both;
    animation-timeline: --tb-view;
    animation-range: contain;
  }
  .tb-dot {
    animation: tb-move linear both;
    animation-timeline: --tb-view;
    animation-range: contain;
  }
  @keyframes tb-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes tb-move { from { transform: translateY(0); } to { transform: translateY(calc(100cqh - 16px)); } }
}
@media (prefers-reduced-motion: reduce) {
  .tb-draw { animation: none; stroke-dashoffset: 0; }
  .tb-dot { display: none; }
}
`;
import type { CSSProperties, ReactNode } from "react";

export interface TracingBeamProps {
  /** Тон луча, градусы oklch. */
  hue?: number;
  /** Контент, вдоль которого рисуется луч. */
  children?: ReactNode;
}

/**
 * Луч вдоль контента, прорисовываемый прокруткой: у линии pathLength = 1, поэтому
 * dash-паттерн задан долями, и прогресс — это просто stroke-dashoffset 1 → 0.
 * Прогресс отдаёт браузер (именованный view-timeline на внешней коробке — она и
 * проходит через экран), скрипта нет вовсе, откат прокрутки отматывает луч.
 * Без поддержки animation-timeline и в reduced-motion луч дорисован полностью.
 */
export function TracingBeam({ hue = 300, children }: TracingBeamProps = {}) {
  const bright = `oklch(0.72 0.14 ${hue})`;
  return (
    <div className="tb" style={{ display: "grid", gridTemplateColumns: "22px minmax(0, 1fr)", gap: 22, width: "100%" }}>
      <style href="motiva-tracing-beam" precedence="medium">{css}</style>
      <div className="tb-rail" style={{ "--tb-bright": bright } as CSSProperties}>
        <svg width="22" height="100%" style={{ position: "absolute", inset: 0, display: "block" }} aria-hidden="true">
          <line x1="11" y1="8" x2="11" y2="100%" stroke="oklch(0.32 0.02 270 / 0.8)" strokeWidth="2" />
          <line
            className="tb-draw"
            x1="11"
            y1="8"
            x2="11"
            y2="100%"
            pathLength={1}
            strokeDasharray="1"
            stroke={bright}
            strokeWidth="2"
            strokeLinecap="round"
          />
        </svg>
        <span className="tb-dot" />
      </div>
      <div style={{ minWidth: 0 }}>{children}</div>
    </div>
  );
}