Shard Ribbon

"use client";

import { useEffect, useRef } from "react";
import { createShardRibbon, type ShardRibbon as Engine, type ShardRibbonOptions } from "@/lib/shard-ribbon-engine";

export type ShardRibbonProps = Omit<ShardRibbonOptions, "animate"> & {
  /** Подложка под холст: CSS `background` или `false`, если её задаёт секция. */
  backdrop?: string | false;
};

const DUSK = "radial-gradient(120% 90% at 50% 100%, oklch(0.2 0.02 265) 0%, oklch(0.13 0.015 262) 55%, oklch(0.09 0.01 258) 100%)";

/**
 * Shard Ribbon — лента из скруглённых треугольных плиток, которые слетаются россыпью,
 * собираются в скрученную ленту и по ходу проявляются из печатающегося кода в видео.
 * Приём hero-сцены HeyGen HyperFrames, собран заново на голом three.js.
 *
 * Сцена — `createShardRibbon` из соседнего файла; компонент только держит холст,
 * прокидывает крутилки через `set()` и разбирает всё при размонтировании.
 * `prefers-reduced-motion` и `data-shot` рисуют один стоячий кадр.
 */
export function ShardRibbon({ backdrop = DUSK, ...options }: ShardRibbonProps = {}) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const engine = useRef<Engine | null>(null);
  const first = useRef(options);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const animate = !(
      document.documentElement.hasAttribute("data-shot") ||
      window.matchMedia("(prefers-reduced-motion: reduce)").matches
    );
    engine.current = createShardRibbon(canvas, { ...first.current, animate });
    return () => {
      engine.current?.destroy();
      engine.current = null;
    };
  }, []);

  const { media, rows, tile, speed, direction, climb, twist, scatter, formSpan, glow, tilt, snippets, seed } = options;
  useEffect(() => {
    engine.current?.set({ media, rows, tile, speed, direction, climb, twist, scatter, formSpan, glow, tilt, snippets, seed });
  }, [media, rows, tile, speed, direction, climb, twist, scatter, formSpan, glow, tilt, snippets, seed]);

  return (
    <div
      style={{
        position: "absolute",
        inset: 0,
        overflow: "hidden",
        ...(backdrop === false ? null : { background: backdrop }),
      }}
    >
      <canvas ref={canvasRef} aria-hidden="true" style={{ display: "block", width: "100%", height: "100%" }} />
    </div>
  );
}

import * as THREE from "three";

/**
 * Shard Ribbon — движок на голом three.js (без React). Лента из скруглённых
 * треугольных плиток течёт через кадр по наклонной оси и скручивается вокруг неё.
 * Справа плитки летят россыпью и по ходу собираются в ленту; в центре кадра
 * по каждой плитке проходит шумный скан с горящей кромкой, и печатающийся код
 * на её грани проявляется в кадр видео (одно видео растянуто на группу плиток).
 *
 * `createShardRibbon(canvas, options)` → { set(options), destroy() }.
 * Цикл засыпает вне зоны видимости и на скрытой вкладке; `animate: false`
 * (reduced-motion / `data-shot`) рисует один стоячий кадр без видео.
 */

export interface ShardRibbonOptions {
  /** Ролики (mp4/webm) и/или картинки на грани плиток; одно медиа на группу плиток. */
  media?: string[];
  /** Рядов плиток поперёк ленты. */
  rows?: number;
  /** Сторона треугольника в единицах сцены. */
  tile?: number;
  /** Скорость течения, единиц в секунду; 0 — стоп. */
  speed?: number;
  /** Направление течения в плоскости кадра, градусы (166 — влево и чуть вверх). */
  direction?: number;
  /** Наклон оси к камере, градусы: лента уходит вглубь справа и выходит на зрителя слева. */
  climb?: number;
  /** Скрутка ленты, градусов на единицу длины. */
  twist?: number;
  /** Разлёт несобранных плиток. */
  scatter?: number;
  /** Длина участка, на котором россыпь собирается в ленту. */
  formSpan?: number;
  /** Цвет горящей кромки скана. */
  glow?: string;
  /** Отклик ленты на курсор, радианы поворота при курсоре у края окна. */
  tilt?: number;
  /** Печатающийся код на «сырых» гранях. */
  snippets?: Snippet[];
  /** false — один стоячий кадр (reduced-motion, скриншоты). */
  animate?: boolean;
  /** Зерно псевдослучайности раскладки. */
  seed?: number;
}

export interface Snippet {
  tag: string;
  lines: string[];
}

export interface ShardRibbon {
  set(next: Partial<ShardRibbonOptions>): void;
  destroy(): void;
}

const DEFAULT_SNIPPETS: Snippet[] = [
  {
    tag: "TERMINAL",
    lines: [
      "$ npx shadcn add \\",
      "    @motiva/shard-ribbon",
      "$ pnpm dev",
      "$ open localhost:4321",
      "$ git commit -m \"hero\"",
    ],
  },
  {
    tag: "HERO.TSX",
    lines: [
      '<section className="hero">',
      "  <ShardRibbon",
      "    media={clips}",
      "    speed={1.6}",
      "    twist={6} />",
      "  <h1>Осколки собираются",
      "    в ленту</h1>",
      "</section>",
    ],
  },
  {
    tag: "RIBBON.GLSL",
    lines: [
      "float d = sx - prog",
      "  - (noise - 0.5) * uTear;",
      "float band = smoothstep(",
      "  0.22, 0.0, d);",
      "vec3 col = mix(code,",
      "  video, step(d, 0.0));",
    ],
  },
  {
    tag: "FLOW.TS",
    lines: [
      "const n = (u0 + B) % len",
      "  - len / 2;",
      "const a = n * twist;",
      "pos.set(",
      "  t.x * n + k.x * r,",
      "  t.y * n + k.y * r,",
      "  depth + t.z * n);",
    ],
  },
];

const DEFAULTS: Required<ShardRibbonOptions> = {
  media: [],
  rows: 3,
  tile: 3,
  speed: 1.6,
  direction: 166,
  climb: 23,
  twist: 6,
  scatter: 5,
  formSpan: 8,
  glow: "#ff4d00",
  tilt: 0.35,
  snippets: DEFAULT_SNIPPETS,
  animate: true,
  seed: 7331,
};

// Постоянные раскладки, которые крутить нет смысла: подобраны под tile = 3.
const DEPTH = -7; // z центра ленты (камера в z = 14)
const GAP = 0.035; // зазор между плитками: масштаб плитки вокруг центроида
const GROUP_GAP = 0.6; // просвет между группами плиток (между «экранами»)
const SPAN = 4; // колонок плиток в группе: одно медиа на SPAN колонок
const FORM_GAP = 15; // насколько россыпь отстаёт от своего места в ленте
const LOOSE_ROT = 1.34; // разброс поворота несобранной плитки, радианы
const REVEAL_SPAN = 8; // длина участка, на котором код проявляется в медиа
const OVERSCAN = 18; // запас ленты за кромками кадра
const MEDIA_MIX = 0.35; // доля маткапа на медиа-гранях (код — плоский, без бликов)
const CAM = { x: 0, y: 0, z: 14, fov: 50, climb: 23, tiltX: 0.35 };
const CAM_NARROW = { y: -2.7, z: 20.5, fov: 57, climb: 45, tiltX: 0.345 }; // aspect < 1.2

const rad = (deg: number) => (deg * Math.PI) / 180;
const clamp01 = (v: number) => Math.min(1, Math.max(0, v));
const remap = (v: number, a: number, b: number) => clamp01((v - a) / (b - a));
const easeInOut = (t: number) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2);
const lerp = (a: number, b: number, t: number) => a + (b - a) * t;

/* ------------------------------------------------------------------ шейдеры */

const VERT = /* glsl */ `
  varying vec2 vUv;
  varying vec3 vNormal;
  varying vec3 vViewPos;
  varying float vCap;
  void main() {
    vUv = uv;
    vec4 mv = modelViewMatrix * vec4(position, 1.0);
    vNormal = normalize(normalMatrix * normal);
    vViewPos = -mv.xyz;
    vCap = normal.z; // +1 лицевая грань плитки, -1 тыльная, ~0 торцы
    gl_Position = projectionMatrix * mv;
  }
`;

const LIB = /* glsl */ `
  varying vec2 vUv;
  varying vec3 vNormal;
  varying vec3 vViewPos;
  varying float vCap;

  float hash(vec2 p) { return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
  float noise(vec2 p) {
    vec2 i = floor(p), f = fract(p);
    f = f * f * (3.0 - 2.0 * f);
    return mix(mix(hash(i), hash(i + vec2(1.0, 0.0)), f.x),
               mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), f.x), f.y);
  }
  vec2 matcapUV(vec3 n, vec3 v) {
    vec3 x = normalize(vec3(v.z, 0.0, -v.x));
    vec3 y = cross(v, x);
    return vec2(dot(x, n), dot(y, n)) * 0.495 + 0.5;
  }
  vec3 screen(vec3 a, vec3 b) { return 1.0 - (1.0 - a) * (1.0 - b); }
`;

/**
 * Грань плитки. Поле перехода — знаковое расстояние d до кромки скана: вверх по грани
 * (sx = uv.y) минус прогресс, плюс шумовой рваный край. d > 0 — ещё код, d < 0 — уже медиа;
 * у самой кромки — полоса глитча по коду (сдвиг строк и расщепление каналов) и горящая линия.
 */
const FACE = /* glsl */ `
  uniform sampler2D uCode;
  uniform sampler2D uMedia;
  uniform sampler2D uMatcap;
  uniform float uProgress;
  uniform float uTime;
  uniform float uSeed;
  uniform vec2 uFit;
  uniform vec4 uRect;
  uniform vec2 uCentroid;
  uniform vec2 uCurveDir;
  uniform float uTileScale;
  uniform float uMediaMix;
  uniform vec3 uGlowA;
  uniform vec3 uGlowB;
  __LIB__

  void main() {
    // скан живёт только пока прогресс между 0 и 1: до и после кромки нет
    float act = smoothstep(0.0, 0.02, uProgress) * (1.0 - smoothstep(0.985, 1.0, uProgress));

    // содержимое перевёрнуто на 180°, а тыльная грань ещё и отзеркалена —
    // скрученная от зрителя плитка не должна читаться задом наперёд
    vec2 tUv = vec2(1.0) - vUv;
    if (vCap < 0.0) tUv.x = 1.0 - tUv.x;

    float prog = uProgress * 1.24 - 0.12;
    float en = noise(vUv * 8.5 + uSeed * 13.0 + vec2(0.0, uTime * 0.95));
    float d = vUv.y - prog - (en - 0.5) * 0.22 * act;

    // полоса глитча у кромки: строки кода дёргаются, каналы расходятся
    float band = smoothstep(0.22, 0.0, d) * act;
    float row = floor(vUv.y * 28.0 + uSeed * 40.0);
    float jitter = (hash(vec2(row, floor(uTime * 22.0))) - 0.5) * 0.27 * band;
    vec2 cuv = tUv + vec2(jitter, 0.0);
    vec3 code = texture2D(uCode, cuv).rgb;
    float split = 0.036 * band;
    code.r = texture2D(uCode, cuv + vec2(split, 0.0)).r;
    code.b = texture2D(uCode, cuv - vec2(split, 0.0)).b;

    // uv грани → uv группы: одно медиа растянуто на несколько плиток. Зазор масштабирует
    // плитку вокруг центроида — uv разжимается так же, чтобы кусок остался в решётке
    vec2 luv = uCentroid + (vUv - uCentroid) * uTileScale;
    vec2 guv = vec2(1.0) - (uRect.xy + luv * uRect.zw);
    if (vCap < 0.0) guv.x = 1.0 - guv.x;
    float settle = 1.0 + 0.05 * (1.0 - uProgress);
    vec2 muv = (guv - 0.5) * uFit * settle + 0.5;
    vec3 media = texture2D(uMedia, muv).rgb;
    // кадр проявляется из бумажно-белого, как фотография
    media = mix(vec3(0.98, 0.97, 0.94), media, smoothstep(0.0, -0.18, d));

    float reveal = step(d, 0.0);
    vec3 content = mix(code, media, reveal);

    float gd = abs(d);
    float line = exp(-gd * 60.0 / 3.35) * act * 2.5;
    content = mix(content, uGlowA, min(line * 0.85, 1.0));
    content += uGlowB * exp(-gd * 220.0 / 3.35) * act * 2.5;

    // ложный изгиб нормали: плоская плитка бликует как слегка выпуклое стекло
    vec3 viewDir = normalize(vViewPos);
    vec2 cc = vUv - 0.5;
    vec3 bend = vec3(
      uCurveDir.x * cc.x + 0.3 * sin(cc.y * 4.2 + uSeed * 7.0),
      uCurveDir.y * cc.y + 0.3 * sin(cc.x * 3.6 + uSeed * 5.0),
      0.0) * 0.8;
    vec3 n = normalize(normalize(vNormal) + bend);
    float fresnel = pow(1.0 - abs(dot(n, viewDir)), 2.5);
    vec3 mc = texture2D(uMatcap, matcapUV(n, viewDir)).rgb;
    // код — плоский экран без бликов, медиа — стекло с маткапом поверх
    vec3 shaded = mc * (0.8 + 0.7 * fresnel) * uMediaMix * reveal;
    vec3 col = screen(content * 0.92, shaded);

    gl_FragColor = vec4(col, 1.0);
  }
`.replace("__LIB__", LIB);

/** Торец плитки: стеклянный ободок — маткап и френель, от кода к медиа чуть ярче. */
const RIM = /* glsl */ `
  uniform sampler2D uMatcap;
  uniform float uProgress;
  uniform float uMediaMix;
  __LIB__

  void main() {
    vec3 n = normalize(vNormal);
    vec3 viewDir = normalize(vViewPos);
    vec3 mc = texture2D(uMatcap, matcapUV(n, viewDir)).rgb;
    float fresnel = pow(1.0 - abs(dot(n, viewDir)), 2.0);
    float mixAmt = uProgress * uMediaMix;
    vec3 col = mc * (0.7 + 0.9 * mixAmt) + mc * fresnel * 0.8;
    gl_FragColor = vec4(col, 1.0);
  }
`.replace("__LIB__", LIB);

/* ------------------------------------------------------------ геометрия плитки */

/** Скруглённый треугольник с торцом и фаской; uv — 0..1 по описанному прямоугольнику. */
function tileGeometry(size: number, flip: boolean): THREE.BufferGeometry {
  const h = (size * Math.sqrt(3)) / 2;
  const r = 0.12 * size;
  const pts = flip
    ? [
        { x: -size / 2, y: h },
        { x: 0, y: 0 },
        { x: size / 2, y: h },
      ]
    : [
        { x: -size / 2, y: 0 },
        { x: size / 2, y: 0 },
        { x: 0, y: h },
      ];
  const shape = new THREE.Shape();
  const ins: { x: number; y: number }[] = [];
  const outs: { x: number; y: number }[] = [];
  for (let i = 0; i < 3; i++) {
    const p = pts[i]!;
    const prev = pts[(i + 2) % 3]!;
    const next = pts[(i + 1) % 3]!;
    const a = { x: p.x - prev.x, y: p.y - prev.y };
    const b = { x: next.x - p.x, y: next.y - p.y };
    const la = Math.hypot(a.x, a.y);
    const lb = Math.hypot(b.x, b.y);
    const cut = Math.min(r, la / 2, lb / 2);
    ins.push({ x: p.x - (a.x / la) * cut, y: p.y - (a.y / la) * cut });
    outs.push({ x: p.x + (b.x / lb) * cut, y: p.y + (b.y / lb) * cut });
  }
  shape.moveTo(ins[0]!.x, ins[0]!.y);
  for (let i = 0; i < 3; i++) {
    shape.quadraticCurveTo(pts[i]!.x, pts[i]!.y, outs[i]!.x, outs[i]!.y);
    const n = ins[(i + 1) % 3]!;
    shape.lineTo(n.x, n.y);
  }
  shape.closePath();

  const k = size / 3;
  const geo = new THREE.ExtrudeGeometry(shape, {
    depth: 0.09 * k,
    bevelEnabled: true,
    bevelThickness: 0.0405 * k,
    bevelSize: 0.03645 * k,
    bevelSegments: 4,
    curveSegments: 24,
  });
  const pos = geo.attributes.position!;
  const uv = geo.attributes.uv!;
  for (let i = 0; i < pos.count; i++) uv.setXY(i, (pos.getX(i) + size / 2) / size, pos.getY(i) / h);
  uv.needsUpdate = true;
  // центроид в начало координат, торец симметрично вокруг z = 0
  geo.translate(0, flip ? (-2 * h) / 3 : -h / 3, -0.045 * k);
  // экструзия не индексирована, нормали у неё уже плоские по граням: крышка ровная,
  // фаска гранёная — на ободке в 0,04 единицы гранёности не видно
  return geo;
}

/* ------------------------------------------------------------ текстуры на канвасе */

/** Маткап: сфера, освещённая из левого верха, с холодным ободком — рисуется без ассетов. */
function makeMatcap(): THREE.CanvasTexture {
  const c = document.createElement("canvas");
  c.width = c.height = 256;
  const ctx = c.getContext("2d")!;
  const base = ctx.createRadialGradient(96, 88, 6, 128, 128, 132);
  base.addColorStop(0, "#f6f6f8");
  base.addColorStop(0.28, "#c9cad0");
  base.addColorStop(0.62, "#6d6e78");
  base.addColorStop(0.9, "#2b2b32");
  base.addColorStop(1, "#111114");
  ctx.fillStyle = base;
  ctx.fillRect(0, 0, 256, 256);
  const rim = ctx.createRadialGradient(128, 128, 96, 128, 128, 128);
  rim.addColorStop(0, "rgba(140,170,255,0)");
  rim.addColorStop(0.8, "rgba(140,170,255,0.35)");
  rim.addColorStop(1, "rgba(200,220,255,0.7)");
  ctx.fillStyle = rim;
  ctx.fillRect(0, 0, 256, 256);
  const spot = ctx.createRadialGradient(176, 176, 2, 176, 176, 40);
  spot.addColorStop(0, "rgba(255,255,255,0.55)");
  spot.addColorStop(1, "rgba(255,255,255,0)");
  ctx.fillStyle = spot;
  ctx.fillRect(0, 0, 256, 256);
  const tex = new THREE.CanvasTexture(c);
  tex.colorSpace = THREE.SRGBColorSpace;
  return tex;
}

const TOKEN =
  /(\/\/.*$|\/\*[\s\S]*?\*\/)|("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')|(\b\d+(?:\.\d+)?\b|#[0-9a-fA-F]{3,8}\b)|(\b(?:const|let|var|function|return|if|else|for|while|new|class|import|from|export|float|vec2|vec3|vec4|uniform|mix|step|smoothstep)\b|<\/?[a-zA-Z][\w-]*|[<>]|=>|\$)/gm;
const INK = { bg: "#0b0b0d", ln: "rgba(232,230,223,0.22)", p: "#8d8f98", k: "#e8e6df", s: "#b3b0a2", n: "#ff4d00", c: "rgba(117,119,127,0.5)", tag: "rgba(232,230,223,0.4)" };

interface CodeSheet {
  tex: THREE.CanvasTexture;
  ctx: CanvasRenderingContext2D;
  snippet: Snippet;
  W: number;
  H: number;
  font: number;
  lineH: number;
  pad: number;
  gutter: number;
  visible: number;
  total: number;
  chars: number;
  scroll: number;
  speed: number;
  nextDraw: number;
}

function makeCodeSheet(snippet: Snippet, aspect: number, speed: number): CodeSheet {
  const H = 320;
  const W = Math.round(H * aspect);
  const c = document.createElement("canvas");
  c.width = W;
  c.height = H;
  const font = 15;
  const pad = Math.round(Math.min(W, H) * 0.14);
  const tex = new THREE.CanvasTexture(c);
  tex.colorSpace = THREE.SRGBColorSpace;
  tex.generateMipmaps = false;
  tex.minFilter = THREE.LinearFilter;
  const sheet: CodeSheet = {
    tex,
    ctx: c.getContext("2d")!,
    snippet,
    W,
    H,
    font,
    lineH: Math.round(font * 1.6),
    pad,
    gutter: pad + 2.2 * font,
    visible: Math.max(3, Math.floor((H - 2.4 * pad) / (font * 1.6))),
    total: snippet.lines.reduce((s, l) => s + l.length + 1, 0),
    chars: 0,
    scroll: 0,
    speed,
    nextDraw: 0,
  };
  paintCode(sheet, sheet.total);
  return sheet;
}

/** Печатает первые `count` символов сниппета с подсветкой и курсором; прокрутка догоняет строку. */
function paintCode(s: CodeSheet, count: number): void {
  const { ctx, W, H, font, lineH, pad, gutter } = s;
  const mono = `${font}px ui-monospace, SFMono-Regular, Menlo, monospace`;
  ctx.fillStyle = INK.bg;
  ctx.fillRect(0, 0, W, H);
  ctx.font = `${Math.round(font * 0.8)}px ui-monospace, SFMono-Regular, Menlo, monospace`;
  ctx.fillStyle = INK.tag;
  ctx.textAlign = "center";
  ctx.fillText(s.snippet.tag, W / 2, pad * 0.9);
  ctx.textAlign = "left";

  let left = Math.floor(count);
  let cursorLine = 0;
  const shown = s.snippet.lines.map((line, i) => {
    if (left < 0) return -1;
    const len = line.length + 1;
    if (left >= len) {
      left -= len;
      cursorLine = Math.min(i + 1, s.snippet.lines.length - 1);
      return line.length;
    }
    const n = left;
    cursorLine = i;
    left = -1;
    return n;
  });
  const typing = count < s.total;
  const target = Math.max(0, cursorLine - (s.visible - 1));
  s.scroll += (target - s.scroll) * 0.3;

  for (let i = 0; i < s.snippet.lines.length && shown[i]! >= 0; i++) {
    const y = 1.5 * pad + (i - s.scroll + 1) * lineH;
    if (y < pad || y > H - 0.3 * pad) continue;
    ctx.font = mono;
    ctx.fillStyle = INK.ln;
    ctx.fillText(String(i + 1).padStart(2, "0"), 0.62 * pad, y);
    let x = gutter;
    let budget = shown[i]!;
    const line = s.snippet.lines[i]!;
    TOKEN.lastIndex = 0;
    let last = 0;
    const parts: { t: keyof typeof INK; s: string }[] = [];
    let m: RegExpExecArray | null;
    while ((m = TOKEN.exec(line))) {
      if (m.index > last) parts.push({ t: "p", s: line.slice(last, m.index) });
      parts.push({ t: m[1] ? "c" : m[2] ? "s" : m[3] ? "n" : "k", s: m[0] });
      last = m.index + m[0].length;
    }
    if (last < line.length) parts.push({ t: "p", s: line.slice(last) });
    for (const part of parts) {
      if (budget <= 0) break;
      const text = part.s.length <= budget ? part.s : part.s.slice(0, budget);
      budget -= part.s.length;
      ctx.font = part.t === "s" || part.t === "c" ? `italic ${mono}` : mono;
      ctx.fillStyle = INK[part.t];
      ctx.fillText(text, x, y);
      x += ctx.measureText(text).width;
    }
    if (typing && i === cursorLine) {
      ctx.fillStyle = INK.n;
      ctx.fillRect(x + 0.15 * font, y - 0.85 * font, 0.55 * font, 1.05 * font);
    }
  }
  s.tex.needsUpdate = true;
}

/* ------------------------------------------------------------------- медиа */

interface Media {
  tex: THREE.Texture;
  aspect: number;
  video: HTMLVideoElement | null;
  start(): void;
  dispose(): void;
}

function loadMedia(url: string, animate: boolean, onSize: () => void): Media {
  if (/\.(mp4|webm|mov|m4v)(\?|#|$)/i.test(url)) {
    const v = document.createElement("video");
    v.muted = true;
    v.loop = true;
    v.playsInline = true;
    v.crossOrigin = "anonymous";
    v.preload = "auto";
    v.src = url;
    const tex = new THREE.VideoTexture(v);
    tex.colorSpace = THREE.SRGBColorSpace;
    tex.minFilter = THREE.LinearFilter;
    const m: Media = {
      tex,
      aspect: 16 / 9,
      video: v,
      start() {
        if (!animate) return;
        v.play().catch(() => {
          const kick = () => void v.play();
          window.addEventListener("pointerdown", kick, { once: true });
        });
      },
      dispose() {
        tex.dispose();
        v.pause();
        v.removeAttribute("src");
        v.load();
      },
    };
    v.addEventListener("loadedmetadata", () => {
      m.aspect = v.videoWidth / v.videoHeight || m.aspect;
      onSize();
    });
    return m;
  }
  const tex = new THREE.TextureLoader().load(url, (t: THREE.Texture) => {
    const img = t.image as { width: number; height: number };
    m.aspect = img.width / img.height;
    onSize();
  });
  tex.colorSpace = THREE.SRGBColorSpace;
  const m: Media = { tex, aspect: 4 / 3, video: null, start() {}, dispose: () => tex.dispose() };
  return m;
}

/* ------------------------------------------------------------------- сцена */

interface Tile {
  mesh: THREE.Mesh;
  face: THREE.ShaderMaterial;
  rim: THREE.ShaderMaterial;
  media: Media;
  groupAspect: number;
  u0: number;
  group: number;
  vOff: number;
  scatJit: THREE.Vector3;
  rotJit: THREE.Euler;
  loose: THREE.Quaternion;
  formJit: number;
}

export function createShardRibbon(canvas: HTMLCanvasElement, options: ShardRibbonOptions = {}): ShardRibbon {
  const cfg: Required<ShardRibbonOptions> = { ...DEFAULTS, ...options };
  if (!cfg.media.length) cfg.media = ["https://motiva.pages.dev/video/mesh-1280x720.mp4", "https://motiva.pages.dev/video/smoke-1280x720.mp4", "https://motiva.pages.dev/video/blocks-720x1280.mp4"];
  const animate = cfg.animate;

  let seed = cfg.seed;
  const rnd = () => ((seed = (16807 * seed) % 0x7fffffff) - 1) / 0x7ffffffe;
  const range = (a: number, b: number) => a + rnd() * (b - a);

  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true, powerPreference: "high-performance" });
  renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.75));
  renderer.outputColorSpace = THREE.SRGBColorSpace;
  renderer.setClearColor(0, 0);

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(CAM.fov, 1, 0.1, 90);
  camera.position.set(CAM.x, CAM.y, CAM.z);
  const rig = new THREE.Group();
  scene.add(rig);
  const narrow = () => camera.aspect < 1.2;

  const matcap = makeMatcap();
  const glowA = { value: new THREE.Color(cfg.glow) };
  const glowB = { value: new THREE.Color(cfg.glow).lerp(new THREE.Color("#ffffff"), 0.3) };
  const uTime = { value: 0 };
  const uMediaMix = { value: MEDIA_MIX };
  const uTileScale = { value: 1 - GAP };

  let medias: Media[] = [];
  const startTimers: number[] = [];
  /** Ролики стартуют с разбегом: десять одновременных decode на старте страницы видны глазом. */
  function openMedia(): void {
    medias = cfg.media.map((url) => loadMedia(url, animate, () => tiles.forEach(fitMedia)));
    if (!animate) {
      for (const m of medias) m.video?.addEventListener("loadeddata", frame, { once: true });
      return;
    }
    medias.forEach((m, i) => startTimers.push(window.setTimeout(() => m.start(), 400 * i)));
  }
  const sheets: CodeSheet[] = [];
  let geoUp: THREE.BufferGeometry | null = null;
  let geoDown: THREE.BufferGeometry | null = null;
  let tiles: Tile[] = [];
  let ribbonLen = 1; // длина ленты без просветов
  let groups = 1;
  let travel = 0; // накопленный ход ленты
  let built = 0; // число колонок, под которое построена лента

  /** Полуширина/полувысота видимого поля на глубине ленты — сколько колонок нужно, чтобы закрыть кадр. */
  const halfW = () => Math.tan(rad(camera.fov / 2)) * ((narrow() ? CAM_NARROW.z : CAM.z) - DEPTH) * camera.aspect;
  const halfH = () => Math.tan(rad(camera.fov / 2)) * ((narrow() ? CAM_NARROW.z : CAM.z) - DEPTH);
  const columnsNeeded = () => {
    const e = cfg.tile;
    const span = halfW() + halfH() + Math.max(halfW(), halfH()) + 3 * e + OVERSCAN;
    const per = 2 * SPAN;
    const cap = Math.max(per, Math.floor((2 * Math.floor(400 / cfg.rows)) / per) * per);
    return Math.min(Math.ceil(Math.ceil(span / (e / 2)) / per) * per, cap);
  };

  function fitMedia(t: Tile): void {
    const a = t.media.aspect;
    const fit = t.face.uniforms.uFit!.value as THREE.Vector2;
    if (a > t.groupAspect) fit.set(t.groupAspect / a, 1);
    else fit.set(1, a / t.groupAspect);
  }

  function clear(): void {
    for (const t of tiles) {
      rig.remove(t.mesh);
      t.face.dispose();
      t.rim.dispose();
    }
    for (const s of sheets) s.tex.dispose();
    sheets.length = 0;
    geoUp?.dispose();
    geoDown?.dispose();
    geoUp = geoDown = null;
    tiles = [];
  }

  function build(): void {
    clear();
    seed = cfg.seed;
    travel = 0;
    const e = cfg.tile;
    const h = (e * Math.sqrt(3)) / 2;
    const cols = (built = columnsNeeded());
    geoUp = tileGeometry(e, false);
    geoDown = tileGeometry(e, true);
    const tileAspect = e / h;
    ribbonLen = (e / 2) * cols;
    groups = cols / SPAN;
    // группа: SPAN колонок × rows рядов, медиа растянуто на (SPAN + 1) полуширин
    const groupAspect = ((e / 2) * (SPAN + 1)) / (cfg.rows * h);

    // пул листов кода: печатают независимо, плитки берут из него по кругу —
    // на 200 плиток хватает полутора десятков текстур вместо двухсот
    const poolSize = Math.min(16, cols * cfg.rows);
    for (let i = 0; i < poolSize; i++) {
      const snippet = cfg.snippets[Math.floor(rnd() * cfg.snippets.length)]!;
      sheets.push(makeCodeSheet(snippet, tileAspect, 7 + 5 * rnd()));
    }

    let k = 0;
    for (let row = 0; row < cfg.rows; row++) {
      for (let col = 0; col < cols; col++) {
        const flip = (col + row) % 2 === 1;
        const media = medias[Math.floor(col / SPAN) % medias.length]!;
        const sheet = sheets[k++ % poolSize]!;
        const rect = new THREE.Vector4((col % SPAN) / (SPAN + 1), row / cfg.rows, 2 / (SPAN + 1), 1 / cfg.rows);
        const face = new THREE.ShaderMaterial({
          vertexShader: VERT,
          fragmentShader: FACE,
          uniforms: {
            uCode: { value: sheet.tex },
            uMedia: { value: media.tex },
            uMatcap: { value: matcap },
            uProgress: { value: 0 },
            uTime,
            uSeed: { value: 10 * rnd() },
            uFit: { value: new THREE.Vector2(1, 1) },
            uRect: { value: rect },
            uCentroid: { value: new THREE.Vector2(0.5, flip ? 2 / 3 : 1 / 3) },
            uCurveDir: { value: new THREE.Vector2(range(0.5, 1.4) * (rnd() < 0.5 ? -1 : 1), range(0.4, 1.2) * (rnd() < 0.5 ? -1 : 1)) },
            uTileScale,
            uMediaMix,
            uGlowA: glowA,
            uGlowB: glowB,
          },
        });
        const rim = new THREE.ShaderMaterial({
          vertexShader: VERT,
          fragmentShader: RIM,
          uniforms: { uMatcap: { value: matcap }, uProgress: { value: 0 }, uMediaMix },
        });
        const mesh = new THREE.Mesh(flip ? geoDown : geoUp, [face, rim]);
        rig.add(mesh);
        const tile: Tile = {
          mesh,
          face,
          rim,
          media,
          groupAspect,
          u0: (e / 2) * col,
          group: Math.floor(col / SPAN),
          vOff: row * h + (flip ? (2 * h) / 3 : h / 3),
          scatJit: new THREE.Vector3(range(-1, 1), range(-1, 1), range(-0.5, 0.5)),
          rotJit: new THREE.Euler(range(-1, 1) * LOOSE_ROT, range(-1, 1) * LOOSE_ROT, range(-1, 1) * LOOSE_ROT),
          loose: new THREE.Quaternion(),
          formJit: range(-1, 1),
        };
        tile.loose.setFromEuler(tile.rotJit);
        fitMedia(tile);
        tiles.push(tile);
      }
    }
  }

  /* -------- курсор: лента чуть поворачивается за ним */
  const pointer = { x: 0, y: 0 };
  const onPointer = (e: PointerEvent) => {
    pointer.x = e.clientX / window.innerWidth - 0.5;
    pointer.y = e.clientY / window.innerHeight - 0.5;
  };
  if (animate) window.addEventListener("pointermove", onPointer);

  /* -------- кадр */
  let last = 0;
  let time = 0;
  const tangent = new THREE.Vector3();
  const across = new THREE.Vector3();
  const normal = new THREE.Vector3();
  const flow = new THREE.Vector3();
  const side = new THREE.Vector3();
  const up = new THREE.Vector3();
  const basis = new THREE.Matrix4();
  const quat = new THREE.Quaternion();

  function frame(): void {
    const now = performance.now() / 1000;
    const dt = animate && last ? Math.min(now - last, 0.05) : 0;
    last = now;
    time += dt;
    uTime.value = time;
    const cam = narrow() ? { ...CAM, ...CAM_NARROW } : CAM;

    rig.rotation.y = lerp(rig.rotation.y, pointer.x * cfg.tilt, 0.045);
    // по вертикали отклик чуть слабее на узком экране — там лента и так почти в профиль
    rig.rotation.x = lerp(rig.rotation.x, -pointer.y * cfg.tilt * (cam.tiltX / CAM.tiltX), 0.045);
    if (camera.fov !== cam.fov) {
      camera.fov = cam.fov;
      camera.updateProjectionMatrix();
    }
    camera.position.set(cam.x, cam.y, cam.z);
    travel += cfg.speed * dt;

    // ось течения: угол в плоскости кадра + подъём к камере
    const a = rad(cfg.direction);
    const c = rad(narrow() ? CAM_NARROW.climb : cfg.climb);
    flow.set(Math.cos(a) * Math.cos(c), Math.sin(a) * Math.cos(c), Math.sin(c));
    side.set(-Math.sin(a), Math.cos(a), 0);
    up.crossVectors(flow, side).normalize();

    const twist = rad(cfg.twist);
    const h = (cfg.tile * Math.sqrt(3)) / 2;
    const height = cfg.rows * h;
    const len = ribbonLen + groups * GROUP_GAP;
    const formPos = 0;
    const revealPos = -0.01 * len;

    for (const t of tiles) {
      let n = (t.u0 + t.group * GROUP_GAP + travel) % len;
      if (n < 0) n += len;
      n -= len / 2;
      const r = t.vOff - height / 2;
      const ang = n * twist;
      const cs = Math.cos(ang);
      const sn = Math.sin(ang);
      // точка ленты: вдоль оси на n, поперёк на r с поворотом скрутки вокруг оси
      const px = flow.x * n + side.x * r * cs + up.x * r * sn;
      const py = flow.y * n + side.y * r * cs + up.y * r * sn;
      const pz = DEPTH + flow.z * n + side.z * r * cs + up.z * r * sn;
      // касательная — производная по n (скрутка добавляет боковую составляющую)
      tangent
        .set(
          flow.x + twist * r * (-side.x * sn + up.x * cs),
          flow.y + twist * r * (-side.y * sn + up.y * cs),
          flow.z + twist * r * (-side.z * sn + up.z * cs),
        )
        .normalize();
      across.set(side.x * cs + up.x * sn, side.y * cs + up.y * sn, side.z * cs + up.z * sn);
      normal.crossVectors(tangent, across).normalize();
      across.crossVectors(normal, tangent);
      basis.makeBasis(tangent, across, normal);
      quat.setFromRotationMatrix(basis);

      // сборка: до formPos плитка летит россыпью, на formSpan единицах доезжает в решётку
      const jit = t.formJit * cfg.formSpan * 0.25;
      const g = easeInOut(remap(n, formPos - cfg.formSpan + jit, formPos + jit));
      if (g < 1) {
        const back = FORM_GAP * (1 - g);
        const sc = cfg.scatter * (1 - g);
        t.mesh.position.set(
          px - flow.x * back + t.scatJit.x * sc,
          py - flow.y * back + t.scatJit.y * sc,
          pz - flow.z * back + t.scatJit.z * sc,
        );
        t.mesh.quaternion.slerpQuaternions(t.loose, quat, g);
      } else {
        t.mesh.position.set(px, py, pz);
        t.mesh.quaternion.copy(quat);
      }
      t.mesh.scale.setScalar(uTileScale.value);

      const progress = remap(n, revealPos - REVEAL_SPAN / 2, revealPos + REVEAL_SPAN / 2);
      t.face.uniforms.uProgress!.value = progress;
      t.rim.uniforms.uProgress!.value = progress;
    }

    // печать кода: листы пула живут своей жизнью, перерисовка не чаще 6–7 раз в секунду
    for (const s of sheets) {
      s.chars += dt * s.speed;
      if (s.chars > s.total + 60) {
        s.chars = 0;
        s.scroll = 0;
      }
      if (time >= s.nextDraw) {
        paintCode(s, s.chars);
        s.nextDraw = time + 0.15;
      }
    }
    renderer.render(scene, camera);
  }

  /* -------- размер, сон, запуск */
  let raf = 0;
  const loop = () => {
    frame();
    raf = requestAnimationFrame(loop);
  };
  const start = () => {
    if (raf || !animate) return;
    last = 0;
    raf = requestAnimationFrame(loop);
  };
  const stop = () => {
    cancelAnimationFrame(raf);
    raf = 0;
  };

  function resize(): void {
    const w = canvas.clientWidth || window.innerWidth;
    const h = canvas.clientHeight || window.innerHeight;
    camera.aspect = w / h;
    camera.updateProjectionMatrix();
    renderer.setSize(w, h, false);
  }
  let rebuildTimer = 0;
  const ro = new ResizeObserver(() => {
    resize();
    if (tiles.length && columnsNeeded() > built) {
      clearTimeout(rebuildTimer);
      rebuildTimer = window.setTimeout(() => {
        if (columnsNeeded() > built) build();
      }, 200);
    }
    if (!animate) frame();
  });
  ro.observe(canvas);
  resize();

  const io = new IntersectionObserver(([e]) => (e!.isIntersecting && !document.hidden ? start() : stop()));
  io.observe(canvas);
  const onVis = () => (document.hidden ? stop() : start());
  document.addEventListener("visibilitychange", onVis);
  const onLost = (e: Event) => {
    e.preventDefault();
    stop();
  };
  canvas.addEventListener("webglcontextlost", onLost);

  openMedia();
  build();
  // стоячий кадр: плитки уже стоят, медиа дорисуется, когда доедет первый кадр
  frame();
  start();

  return {
    set(next) {
      // undefined в пропсах React — «не задано», а не «сбросить»: такие ключи пропускаем
      const patch = Object.fromEntries(Object.entries(next).filter(([, v]) => v !== undefined)) as Partial<ShardRibbonOptions>;
      // решётка, листы кода и текстуры живут сборкой — на эти ключи её надо переиздать,
      // иначе правка молча не доезжает (остальное читается прямо в кадре из cfg)
      const rebuild =
        (patch.rows !== undefined && patch.rows !== cfg.rows) ||
        (patch.tile !== undefined && patch.tile !== cfg.tile) ||
        (patch.snippets !== undefined && patch.snippets !== cfg.snippets);
      const reopen = patch.media !== undefined && patch.media.join("\u0000") !== cfg.media.join("\u0000");
      Object.assign(cfg, patch);
      if (patch.glow) {
        glowA.value.set(cfg.glow);
        glowB.value.set(cfg.glow).lerp(new THREE.Color("#ffffff"), 0.3);
      }
      if (reopen) {
        for (const m of medias) m.dispose();
        openMedia();
      }
      if (rebuild || reopen) build();
      if (!animate) frame();
    },
    destroy() {
      stop();
      clearTimeout(rebuildTimer);
      for (const t of startTimers) clearTimeout(t);
      ro.disconnect();
      io.disconnect();
      document.removeEventListener("visibilitychange", onVis);
      window.removeEventListener("pointermove", onPointer);
      canvas.removeEventListener("webglcontextlost", onLost);
      clear();
      for (const m of medias) m.dispose();
      matcap.dispose();
      renderer.dispose();
      renderer.forceContextLoss();
    },
  };
}