Como o Sapo passou a apontar para o cursor.

#!/usr/bin/env bash
# Reconstrói frames/, frames-96fps/ e public/media/ a partir do clipe com o FFmpeg.
#
#   bash tools/build-sprite.sh [caminho/do/clipe.mp4] [caminho/do/ffmpeg]
#
# 1. Extrai todos os frames do clipe (97 frames, 2206x946, 24 fps) -> frames/
# 2. Interpola o clipe por movimento para 96 fps (4x) -> frames-96fps/ (381 frames)
# 3. Empacota os 67 frames interpolados do caminho contínuo
#    pico-esquerda > parado > pico-direita numa sheet em grade de 12 colunas,
#    em 2x (JPEG) e 1x (WebP), mais o poster do repouso.
#
# Por que 67 e não tudo: o clipe é  parado(0-17) > inclina-esquerda(18-24) >
# hold(25-42) > volta(43-49) > parado(50-60) > inclina-direita(61-67) > hold(68-82)
# > volta(83-89) > parado(90-96)  (frames-fonte 0-based). Fora de 41..50 e 60..69
# tudo é hold pixel-idêntico, e navegadores recusam imagens acima de ~16k-32k px
# de lado, então a sheet guarda só os frames que a interação consegue mostrar.
set -euo pipefail

CLIP="${1:-hf_20260816_110612_822e4603-8908-41a6-a79c-3431dac84151.mp4}"
FFMPEG="${2:-ffmpeg}"
ROOT="$(cd "$(dirname "$0")/.." && pwd)"
cd "$ROOT"

mkdir -p frames frames-96fps public/media

echo "-> extraindo todos os frames-fonte"
"$FFMPEG" -hide_banner -loglevel error -i "$CLIP" -vsync 0 -pix_fmt rgb24 -y frames/frame_%03d.png
echo "   $(ls frames | wc -l) frames"

echo "-> interpolando por movimento para 96 fps (leva cerca de um minuto)"
"$FFMPEG" -hide_banner -loglevel error -i "$CLIP" \
  -vf "scale=1104:474:flags=lanczos,minterpolate=fps=96:mi_mode=mci:mc_mode=aobmc:me_mode=bidir:me=epzs:vsbmc=1:search_param=64" \
  -vsync 0 -pix_fmt rgb24 -y frames-96fps/f_%04d.png
echo "   $(ls frames-96fps | wc -l) frames"

# O arquivo interpolado do frame-fonte n (0-based) é 4n+1.
# Trecho esquerdo: arquivos 166..197 (fonte 41,25 .. 49); direito: 240..274 (fonte 59,75 .. 68,25).
LIST="$(mktemp)"
for i in $(seq 166 197) $(seq 240 274); do
  printf "file '%s/frames-96fps/f_%04d.png'\n" "$ROOT" "$i" >> "$LIST"
done

echo "-> empacotando as sheets de 67 frames (12 colunas)"
"$FFMPEG" -hide_banner -loglevel error -f concat -safe 0 -i "$LIST" \
  -vf "scale=960:412:flags=lanczos,tile=12x6" -frames:v 1 -q:v 3 -y public/media/sapo-sheet-2x.jpg
"$FFMPEG" -hide_banner -loglevel error -f concat -safe 0 -i "$LIST" \
  -vf "scale=552:237:flags=lanczos,tile=12x6" -frames:v 1 -c:v libwebp -quality 90 -y public/media/sapo-sheet-1x.webp
"$FFMPEG" -hide_banner -loglevel error -i frames/frame_056.png \
  -vf "scale=551:236:flags=lanczos" -c:v libwebp -quality 88 -y public/media/sapo-poster.webp
rm -f "$LIST"

ls -la public/media
echo "pronto"

/* ============================================================================
   SAPO — hero com sprite de frames que segue o cursor
   JavaScript puro, sem dependências. Exporta mountSpriteHero(section).

   Pipeline: o FFmpeg extraiu os 97 frames do clipe de 4 s (24 fps) e depois
   interpolou o clipe por movimento para 96 fps (minterpolate, compensação
   bidirecional). A sheet guarda os 67 frames do caminho contínuo
   pico-esquerda > parado > pico-direita, numa grade de 12 colunas:

     índice  0 … 30   inclina / aponta para a ESQUERDA (0 = hold esquerdo)
     índice 31        parado, braços para cima
     índice 32 … 66   inclina / aponta para a DIREITA  (66 = hold direito)

   Uma "pose" p em [-1, 1] (-1 = esquerda, 0 = parado, +1 = direita) é
   invertida pela curva de deslocamento medida do personagem para virar um
   frame fracionário. A pose segue o cursor através de uma mola amortecida e
   o frame mais próximo é desenhado num canvas.
   ========================================================================== */
import { asset } from './lib/asset.js';

export const CONFIG = {
  frames: 67,
  idle: 31,
  cols: 12,
  aspect: 2206 / 946,      // composição original, nunca cortada na sheet
  minSpan: 900,            // mínimo de px da fonte visíveis na largura do hero (mantém o sapo inteiro no celular)
  maxCharacterShare: 0.46, // o personagem (780 de 2206 px da fonte) nunca passa desta fração da largura do hero
  poster: '/media/sapo-poster.webp',
  sources: {
    '1x': { src: '/media/sapo-sheet-1x.webp', cell: [552, 237] },
    '2x': { src: '/media/sapo-sheet-2x.jpg',  cell: [960, 412] },
  },
  // Molas: omega = frequência angular (rad/s), zeta = razão de amortecimento
  physics: {
    track:   { omega: 24,  zeta: 0.92 },   // gruda no cursor, sem atraso visível
    release: { omega: 7,   zeta: 1.00 },   // volta calma e criticamente amortecida ao repouso
    auto:    { omega: 8,   zeta: 0.95 },   // olhadas autônomas quando não há ninguém
    rest:    { omega: 10,  zeta: 1.00 },   // assentar no frame nítido mais próximo
  },
  idleDelay: 3400,         // ms sem input até o sapo começar a olhar sozinho
  curveExponent: 1.15,     // >1 deixa o centro do hero um pouco mais sensível que as bordas
  sideDeadZone: 0.12,      // |pose| abaixo disto não mostra nenhum painel lateral
  // Nitidez de cada frame da sheet (variância do Laplaciano, normalizada). O clipe
  // tem motion blur gravado nos frames do meio do gesto; quando o cursor para, a
  // pose assenta no frame nítido mais próximo (>= sharpMin) em vez de descansar
  // num braço borrado.
  sharpness: [0.77, 0.69, 0.74, 0.9, 0.46, 0.3, 0.29, 0.45, 0.25, 0.21, 0.24, 0.43, 0.24, 0.21, 0.21, 0.37, 0.21, 0.2, 0.26, 0.5, 0.36, 0.36, 0.45, 0.72, 0.47, 0.43, 0.51, 0.8, 0.67, 0.66, 0.77, 1.0, 0.92, 1.0, 0.55, 0.45, 0.4, 0.65, 0.36, 0.28, 0.26, 0.4, 0.22, 0.2, 0.24, 0.45, 0.26, 0.23, 0.3, 0.53, 0.29, 0.28, 0.31, 0.58, 0.41, 0.41, 0.49, 0.78, 0.53, 0.55, 0.58, 0.87, 0.64, 0.57, 0.65, 0.91, 0.81],
  sharpMin: 0.62,
  restDelay: 140,          // ms sem movimento do ponteiro até assentar num frame nítido
  restOutwardBias: 0.7,    // <1 prefere a pose "apontando" à parada quando o cursor está longe do centro
  blend: false,            // cross-fade entre células vizinhas. Desligado: com frames a 96 fps o frame mais
                           // próximo já é contínuo e a mistura duplicava o braço no meio do gesto ("sombra").
  // Deslocamento horizontal medido do personagem por frame da sheet (centroide),
  // normalizado 0..1 do repouso para fora. A animação acelera forte perto dos
  // holds; mapear pose em *deslocamento* em vez de índice mantém a resposta proporcional.
  motion: {
    left:  [0.0, 0.003, 0.006, 0.008, 0.011, 0.015, 0.022, 0.028, 0.03, 0.052, 0.09, 0.147, 0.163, 0.181, 0.257, 0.343, 0.359, 0.392, 0.435, 0.499, 0.539, 0.591, 0.662, 0.739, 0.798, 0.829, 0.909, 0.967, 0.991, 0.994, 0.995, 1.0],
    right: [0.0, 0.0, 0.0, 0.001, 0.023, 0.04, 0.048, 0.066, 0.112, 0.164, 0.186, 0.217, 0.294, 0.377, 0.392, 0.423, 0.496, 0.607, 0.638, 0.671, 0.736, 0.818, 0.856, 0.87, 0.896, 0.928, 0.937, 0.94, 0.958, 0.967, 0.97, 0.977, 0.982, 0.99, 0.996, 1.0],
  },
};

const clamp = (v, a, b) => Math.min(b, Math.max(a, v));

/* ------------------------------------------------------------------ Mola */
class Spring {
  constructor(value = 0) {
    this.x = value; this.v = 0; this.target = value;
    this.omega = 10; this.zeta = 1;
  }
  tune({ omega, zeta }) { this.omega = omega; this.zeta = zeta; }
  step(dt) {
    // sub-passos fixos mantêm o integrador estável com rigidez alta
    const n = Math.max(1, Math.ceil(dt / (1 / 240)));
    const h = dt / n;
    for (let i = 0; i < n; i++) {
      const a = -this.omega * this.omega * (this.x - this.target) - 2 * this.zeta * this.omega * this.v;
      this.v += a * h;
      this.x += this.v * h;
    }
  }
  get settled() { return Math.abs(this.x - this.target) < 0.0006 && Math.abs(this.v) < 0.003; }
  snap() { this.x = this.target; this.v = 0; }
}

/* ------------------------------------------------------- Renderer da sheet */
class SpriteSheet {
  constructor(canvas, frames, cols) {
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d', { alpha: false });
    this.frames = frames;
    this.cols = cols;
    this.img = null;
    this.cell = [0, 0];
    this.loaded = null;
    this.last = -1;
    this.poster = null;
  }
  static decode(src) {
    const img = new Image();
    img.decoding = 'async';
    img.src = src;
    const ready = img.decode ? img.decode() : new Promise((res, rej) => { img.onload = res; img.onerror = rej; });
    return ready.then(() => { if (!img.naturalWidth) throw new Error('decode falhou: ' + src); return img; });
  }
  load(key) {
    const { src, cell } = CONFIG.sources[key];
    return SpriteSheet.decode(asset(src)).then((img) => {
      this.img = img;
      this.cell = cell;
      this.loaded = key;
      this.last = -1;
      return key;
    });
  }
  resize(cssW, cssH) {
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    const w = Math.round(cssW * dpr);
    const h = Math.round(cssH * dpr);
    if (this.canvas.width !== w || this.canvas.height !== h) {
      this.canvas.width = w;
      this.canvas.height = h;
      this.last = -1;
    }
  }
  drawPoster() {
    if (!this.poster) return;
    this.ctx.drawImage(this.poster, 0, 0, this.canvas.width, this.canvas.height);
  }
  blit(i, alpha) {
    const [cw, ch] = this.cell;
    const sx = (i % this.cols) * cw;
    const sy = Math.floor(i / this.cols) * ch;
    this.ctx.globalAlpha = alpha;
    this.ctx.drawImage(this.img, sx, sy, cw, ch, 0, 0, this.canvas.width, this.canvas.height);
  }
  // Frame fracionário -> célula i (e, com blend ligado, célula i+1 com alpha por cima).
  draw(frame) {
    if (!this.img) { this.drawPoster(); return false; }
    const f = CONFIG.blend ? clamp(frame, 0, this.frames - 1) : clamp(Math.round(frame), 0, this.frames - 1);
    if (Math.abs(f - this.last) < 0.001) return false;
    this.last = f;
    const i = Math.floor(f);
    const t = f - i;
    const ctx = this.ctx;
    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = 'high';
    this.blit(i, 1);
    if (CONFIG.blend && t > 0.003 && i + 1 < this.frames) this.blit(i + 1, t);
    ctx.globalAlpha = 1;
    return true;
  }
}

/* ------------------------------------------------------------- Controlador */
export function mountSpriteHero(hero) {
  const stage = hero.querySelector('[data-stage]');
  const canvas = stage.querySelector('canvas');
  const posterImg = stage.querySelector('.stage__poster');
  const readoutFrame = hero.querySelector('[data-readout="frame"]');
  const readoutPose = hero.querySelector('[data-readout="pose"]');
  const readoutBar = hero.querySelector('[data-readout="bar"]');
  const readoutMode = hero.querySelector('[data-readout="mode"]');

  const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const saveData = !!(navigator.connection && navigator.connection.saveData);

  const sheet = new SpriteSheet(canvas, CONFIG.frames, CONFIG.cols);
  const spring = new Spring(0);
  spring.tune(CONFIG.physics.release);

  let mode = 'idle';          // 'track' | 'release' | 'auto' | 'idle'
  let pressed = false;        // contato de toque / caneta
  let autoTimer = 0;
  let lastSide = 1;
  let rafId = 0;
  let lastTime = 0;
  let lastMove = 0;           // quando o ponteiro se moveu pela última vez (modo track)
  let cursorPose = 0;         // pose crua pedida pelo cursor
  let rested = false;         // alvo já assentado num frame nítido
  let side = '';

  // pose -> frame fracionário da sheet, invertendo a curva de movimento medida:
  // |p| = 0.5 é "metade da inclinação", não "metade dos frames".
  function poseToFrame(p) {
    const arr = p < 0 ? CONFIG.motion.left : CONFIG.motion.right;
    const dir = p < 0 ? -1 : 1;
    const m = Math.min(1, Math.abs(p));
    let k = 0;
    while (k < arr.length - 2 && arr[k + 1] < m) k++;
    const span = arr[k + 1] - arr[k];
    const frac = span > 0 ? clamp((m - arr[k]) / span, 0, 1) : 0;
    return CONFIG.idle + dir * (k + frac);
  }

  // índice de frame -> pose (inverso de poseToFrame em frames inteiros)
  function frameToPose(i) {
    if (i === CONFIG.idle) return 0;
    return i < CONFIG.idle ? -CONFIG.motion.left[CONFIG.idle - i] : CONFIG.motion.right[i - CONFIG.idle];
  }

  // Frame nítido cuja pose é a mais próxima da pedida. A distância é medida em
  // espaço de pose e frames mais para fora que o cursor são favorecidos (peso < 1):
  // com o cursor além do meio do hero, o sapo deve assentar "apontando", não parado.
  function nearestSharp(pose) {
    const s = CONFIG.sharpness;
    let best = CONFIG.idle, bestD = Infinity;
    for (let i = 0; i < s.length; i++) {
      if (s[i] < CONFIG.sharpMin) continue;
      const fp = frameToPose(i);
      if (Math.sign(fp) !== 0 && Math.sign(fp) !== Math.sign(pose)) continue;   // nunca cruzar para o outro lado
      let d = Math.abs(fp - pose);
      if (Math.abs(fp) > Math.abs(pose)) d *= CONFIG.restOutwardBias;
      if (d < bestD) { bestD = d; best = i; }
    }
    return best;
  }

  // x do cursor (relativo ao centro do hero) -> pose em [-1, 1]
  function poseFromX(clientX) {
    const r = hero.getBoundingClientRect();
    const nx = clamp((clientX - (r.left + r.width / 2)) / (r.width / 2), -1, 1);
    const eased = 1 - Math.pow(1 - Math.abs(nx), CONFIG.curveExponent);
    return Math.sign(nx) * eased;
  }

  function setMode(next) {
    if (mode === next) return;
    mode = next;
    hero.dataset.mode = next;
    if (readoutMode) readoutMode.textContent = readoutMode.dataset[next] || next;
  }

  // Qual painel lateral mostrar: o texto acompanha para onde o sapo aponta.
  function updateSide(p) {
    const next = p < -CONFIG.sideDeadZone ? 'left' : p > CONFIG.sideDeadZone ? 'right' : '';
    if (next !== side) { side = next; hero.dataset.side = next; }
  }

  function wake() {
    if (!rafId) { lastTime = performance.now(); rafId = requestAnimationFrame(tick); }
  }

  function tick(now) {
    const dt = clamp((now - lastTime) / 1000, 0, 1 / 20);
    lastTime = now;
    // Ponteiro parou enquanto o sapo descansaria num frame borrado: assenta na pose nítida mais próxima.
    if (mode === 'track' && !rested && now - lastMove > CONFIG.restDelay) {
      rested = true;
      spring.target = frameToPose(nearestSharp(cursorPose));
      spring.tune(CONFIG.physics.rest);
    }
    spring.step(dt);
    render();
    if (spring.settled && (mode !== 'track' || rested)) {
      spring.snap();
      render();
      rafId = 0;                       // dorme até o próximo input ou timer
      if (mode === 'release') setMode('idle');
      return;
    }
    rafId = requestAnimationFrame(tick);
  }

  let lastReadout = '';
  function render() {
    const p = clamp(spring.x, -1, 1);
    updateSide(p);
    const frame = poseToFrame(p);
    sheet.draw(frame);
    if (readoutFrame) {
      const text = frame.toFixed(1).padStart(4, '0');
      if (text !== lastReadout) {
        lastReadout = text;
        readoutFrame.textContent = text;
        readoutPose.textContent = (p > -0.005 ? '+' : '-') + Math.abs(p).toFixed(2);
        readoutBar.style.left = `${(50 + p * 50).toFixed(2)}%`;
      }
    }
  }

  /* ------------------------------------------------ Olhadas autônomas */
  function cancelAuto() { clearTimeout(autoTimer); autoTimer = 0; }

  function scheduleGlance(delay) {
    cancelAuto();
    if (reducedMotion) return;
    autoTimer = setTimeout(glance, delay);
  }

  function glance() {
    if (mode === 'track') return;
    setMode('auto');
    spring.tune(CONFIG.physics.auto);
    lastSide = -lastSide;
    spring.target = lastSide * (0.55 + Math.random() * 0.45);
    wake();
    autoTimer = setTimeout(() => {
      if (mode !== 'auto') return;
      spring.target = 0;
      wake();
      scheduleGlance(3800 + Math.random() * 4200);
    }, 900 + Math.random() * 800);
  }

  /* ------------------------------------------------------ Entrada de ponteiro */
  let lastX = NaN, lastY = NaN;
  function track(clientX, clientY) {
    // Navegadores redisparam pointermove nas mesmas coordenadas sempre que o elemento
    // sob um cursor parado muda (painéis aparecendo, readout mudando). Isso não é
    // movimento: ignorar para o timer de descanso conseguir correr.
    if (clientX === lastX && clientY === lastY) return;
    lastX = clientX; lastY = clientY;
    cancelAuto();
    setMode('track');
    spring.tune(CONFIG.physics.track);
    cursorPose = poseFromX(clientX);
    spring.target = cursorPose;
    lastMove = performance.now();
    rested = false;
    wake();
  }

  function release() {
    pressed = false;
    lastX = NaN; lastY = NaN;
    setMode('release');
    spring.tune(reducedMotion ? { omega: 30, zeta: 1 } : CONFIG.physics.release);
    spring.target = 0;
    wake();
    scheduleGlance(CONFIG.idleDelay);
  }

  hero.addEventListener('pointerenter', (e) => { if (e.pointerType === 'mouse') track(e.clientX, e.clientY); });
  hero.addEventListener('pointermove', (e) => {
    if (e.pointerType === 'mouse' || pressed) track(e.clientX, e.clientY);
  });
  hero.addEventListener('pointerdown', (e) => {
    if (e.pointerType === 'mouse') return;
    pressed = true;
    track(e.clientX, e.clientY);
  });
  hero.addEventListener('pointerleave', (e) => { if (e.pointerType === 'mouse') release(); });
  window.addEventListener('pointerup', () => { if (pressed) release(); });
  window.addEventListener('pointercancel', () => { if (pressed) release(); });
  document.addEventListener('visibilitychange', () => {
    if (document.hidden) cancelAuto();
    else if (mode !== 'track') scheduleGlance(1200);
  });

  /* -------------------------------------------------------------- Layout */
  // O palco mantém a composição original 2206x946 e cobre o hero, mas nunca
  // amplia além do ponto em que o personagem seria cortado ou colidiria com o texto.
  function layout() {
    const r = hero.getBoundingClientRect();
    const cover = Math.max(r.width, r.height * CONFIG.aspect);
    const spanCap = r.width * 2206 / CONFIG.minSpan;                       // celular: mantém o sapo inteiro
    const shareCap = r.width * CONFIG.maxCharacterShare * 2206 / 780;      // desktop alto: longe do texto
    const w = Math.min(cover, spanCap, r.width > 860 ? shareCap : Infinity);
    const h = w / CONFIG.aspect;
    stage.style.width = `${w}px`;
    stage.style.height = `${h}px`;
    sheet.resize(w, h);
    sheet.last = -1;
    render();
    if (!sheet.img) sheet.drawPoster();
    maybeUpgrade(w);
  }

  let upgrading = false;
  function pickSource(stageWidth) {
    const need = stageWidth * Math.min(window.devicePixelRatio || 1, 2);
    return need > 720 ? '2x' : '1x';
  }
  function maybeUpgrade(stageWidth) {
    if (saveData || upgrading || sheet.loaded !== '1x' || pickSource(stageWidth) !== '2x') return;
    upgrading = true;
    sheet.load('2x')
      .then(() => { sheet.last = -1; render(); })
      .catch(() => {})
      .finally(() => { upgrading = false; });
  }

  let resizeRaf = 0;
  window.addEventListener('resize', () => {
    cancelAnimationFrame(resizeRaf);
    resizeRaf = requestAnimationFrame(layout);
  });
  layout();

  /* ---------------------------------------------------------------- Boot */
  // 1. poster (7 KB) no canvas: primeira pintura imediata.
  // 2. sheet 1x (0,5 MB) quando a página estiver ociosa; 3. sheet 2x se a tela pedir.
  // Com economia de dados, fica só o poster (hero estático, painéis sempre visíveis).
  const whenIdle = (fn) => ('requestIdleCallback' in window ? requestIdleCallback(fn, { timeout: 1500 }) : setTimeout(fn, 300));
  const start = () => {
    if (saveData) { hero.classList.add('is-ready', 'is-static'); return; }
    whenIdle(() => {
      sheet.load('1x')
        .then(() => {
          sheet.last = -1; render();
          hero.classList.add('is-ready');
          if (posterImg) posterImg.hidden = true;
          maybeUpgrade(stage.getBoundingClientRect().width);
          if (reducedMotion || mode === 'track') return;
          // Intro: uma olhada rápida para cada lado avisa que o personagem está vivo.
          setTimeout(() => {
            if (mode === 'track') return;
            setMode('auto');
            spring.tune(CONFIG.physics.auto);
            spring.target = 0.9; wake();
            autoTimer = setTimeout(() => {
              if (mode !== 'auto') return;
              spring.target = -0.9; wake();
              autoTimer = setTimeout(() => {
                if (mode !== 'auto') return;
                spring.target = 0; wake();
                scheduleGlance(4500);
              }, 1000);
            }, 900);
          }, 700);
        })
        .catch((err) => { console.error('[sapo-hero]', err); hero.classList.add('is-ready', 'is-static'); });
    });
  };
  SpriteSheet.decode(asset(CONFIG.poster))
    .then((img) => { sheet.poster = img; sheet.drawPoster(); })
    .catch(() => {})
    .finally(start);

  // Handle de depuração / ajuste
  window.SapoHero = {
    config: CONFIG, spring, sheet,
    setPose(p) { cancelAuto(); setMode('track'); spring.tune(CONFIG.physics.track); spring.target = clamp(p, -1, 1); wake(); },
    trackX(x, y = 0) { track(x, y); },
    release,
  };
}