Laboratório ao vivo "gravar-cena-video" do curso Frontends com Vibecoding (capítulo bônus).
Código-fonte completo, copiado de src/components/course/blocks/live-labs/ por
scripts/export-fvc-labs-txt.mjs. Licença de uso: a mesma do repositório do site.
Cada arquivo abaixo começa com uma linha '==== nome ===='.

==== GravarCenaVideoLab.tsx ====

"use client";

import { useCallback, useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
import type { LiveLabMeta, LiveLabProps } from "./registry";
import styles from "./GravarCenaVideo.module.css";

/**
 * Laboratório "gravar-cena-video": só APIs da plataforma, nenhum pacote.
 *
 * Painel 1, "A cena e o medidor de quadros": um canvas 2D com partículas
 * (tarefas) correndo entre três estações, Entrada, Máquinas e Saída. Ao lado,
 * o medidor lê o laço de requestAnimationFrame (quadros por segundo, tempo
 * médio e pior tempo de quadro no último segundo) e a API Long Animation
 * Frames (PerformanceObserver com type "long-animation-frame"), que conta os
 * quadros que passaram de 50 ms e informa o blockingDuration do último. O
 * botão "Sobrecarregar 300 ms" trava a thread de propósito, para o medidor
 * mostrar o quadro longo. O controle de partículas sobe até 5.000 para a
 * pessoa ver o quadro cair antes de perceber a olho.
 *
 * Painel 2, "Gravar a cena em vídeo": canvas.captureStream(30) entra num
 * MediaRecorder por 6 segundos; o mimeType é o primeiro que
 * MediaRecorder.isTypeSupported aceita, na ordem AV1, VP9 e VP8 em WebM e
 * depois H.264 em MP4. O resultado vira um Blob exibido num <video> e num link
 * de download, com o codec escolhido escrito na tela. Sem MediaRecorder ou sem
 * captureStream, o painel diz qual é a alternativa.
 *
 * Regras da casa: cor só por token do tema (resolvida para o canvas em tempo
 * de execução, com hex de reserva), alvo de toque de 44 px, foco visível, sem
 * rede, sem áudio. Com "reduzir movimento" no aparelho a cena abre parada e
 * só anda enquanto a pessoa manda; o laço para quando a aba se esconde ou o
 * canvas sai da tela; rAF, observadores, gravador e URLs são limpos ao sair.
 */

const OPCOES_PARTICULAS = [120, 400, 1500, 5000] as const;
const SEGUNDOS_GRAVACAO = 6;
const QUADROS_CAPTURA = 30;
const ORCAMENTO_60 = 16.7;
const ORCAMENTO_120 = 8.3;
const MIMES_PREFERIDOS = [
  "video/webm;codecs=av1",
  "video/webm;codecs=vp9",
  "video/webm;codecs=vp8",
  "video/mp4;codecs=avc1.42E01E",
  "video/mp4",
] as const;

/** Entrada da API Long Animation Frames; o lib.dom pode não trazer o campo. */
interface EntradaQuadroLongo extends PerformanceEntry {
  blockingDuration: number;
}

type Rgb = [number, number, number];

interface Paleta {
  fundo: string;
  texto: string;
  apoio: string;
  borda: string;
  acento: string;
  sucesso: string;
  aviso: string;
}

/** Lê um token do tema no próprio elemento e o resolve para RGB pintando um pixel. */
function resolverToken(elemento: HTMLElement, ctxSonda: CanvasRenderingContext2D, token: string, reserva: string): Rgb {
  const estilo = getComputedStyle(elemento);
  let valor = estilo.getPropertyValue(token).trim();
  if (!valor && token === "--course-accent") valor = estilo.getPropertyValue("--accent").trim();
  ctxSonda.fillStyle = "#010203";
  if (valor) ctxSonda.fillStyle = valor;
  if (ctxSonda.fillStyle === "#010203") ctxSonda.fillStyle = reserva;
  ctxSonda.clearRect(0, 0, 1, 1);
  ctxSonda.fillRect(0, 0, 1, 1);
  const d = ctxSonda.getImageData(0, 0, 1, 1).data;
  return [d[0], d[1], d[2]];
}

const rgb = (c: Rgb) => `rgb(${c[0]} ${c[1]} ${c[2]})`;

function montarPaleta(elemento: HTMLElement): Paleta {
  const reserva: Paleta = {
    fundo: "#ffffff",
    texto: "#181818",
    apoio: "#5c5c5c",
    borda: "#c9c9c9",
    acento: "#0070ca",
    sucesso: "#2e844a",
    aviso: "#e58a00",
  };
  const sonda = document.createElement("canvas");
  sonda.width = 1;
  sonda.height = 1;
  const ctx = sonda.getContext("2d", { willReadFrequently: true });
  if (!ctx) return reserva;
  return {
    fundo: rgb(resolverToken(elemento, ctx, "--bg-white", reserva.fundo)),
    texto: rgb(resolverToken(elemento, ctx, "--text", reserva.texto)),
    apoio: rgb(resolverToken(elemento, ctx, "--text-muted", reserva.apoio)),
    borda: rgb(resolverToken(elemento, ctx, "--border", reserva.borda)),
    acento: rgb(resolverToken(elemento, ctx, "--course-accent", reserva.acento)),
    sucesso: rgb(resolverToken(elemento, ctx, "--success", reserva.sucesso)),
    aviso: rgb(resolverToken(elemento, ctx, "--warning", reserva.aviso)),
  };
}

/* ---------- A cena: partículas entre três estações ---------- */

interface Particula {
  /** Posição no trecho atual, de 0 a 1. */
  t: number;
  /** Velocidade em trechos por segundo. */
  v: number;
  /** Desvio vertical da trajetória, em fração da altura. */
  desvio: number;
  /** 0: da Entrada às Máquinas; 1: das Máquinas à Saída. */
  etapa: 0 | 1;
}

const ESTACOES = [
  { x: 0.13, rotulo: "Entrada" },
  { x: 0.5, rotulo: "Máquinas" },
  { x: 0.87, rotulo: "Saída" },
] as const;

/** Gerador determinístico (LCG) para a cena nascer igual em todo aparelho. */
function criarSorteio(semente: number) {
  let s = semente >>> 0;
  return () => {
    s = (s * 1664525 + 1013904223) >>> 0;
    return s / 4294967296;
  };
}

function criarParticulas(n: number): Particula[] {
  const sorteio = criarSorteio(2026);
  return Array.from({ length: n }, () => ({
    t: sorteio(),
    v: 0.25 + sorteio() * 0.45,
    desvio: (sorteio() - 0.5) * 0.7,
    etapa: sorteio() < 0.5 ? 0 : 1,
  }));
}

function avancar(particulas: Particula[], dtSegundos: number, sorteio: () => number): void {
  for (const p of particulas) {
    p.t += p.v * dtSegundos;
    if (p.t >= 1) {
      p.t -= 1;
      if (p.etapa === 0) {
        p.etapa = 1;
      } else {
        p.etapa = 0;
        p.v = 0.25 + sorteio() * 0.45;
        p.desvio = (sorteio() - 0.5) * 0.7;
      }
    }
  }
}

function desenhar(canvas: HTMLCanvasElement, particulas: Particula[], paleta: Paleta): void {
  const ctx = canvas.getContext("2d");
  if (!ctx) return;
  const dpr = Math.min(2, window.devicePixelRatio || 1);
  const largura = canvas.width / dpr;
  const altura = canvas.height / dpr;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  ctx.fillStyle = paleta.fundo;
  ctx.fillRect(0, 0, largura, altura);

  const yCentro = altura * 0.5;
  /* Trilhos entre as estações. */
  ctx.strokeStyle = paleta.borda;
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.moveTo(ESTACOES[0].x * largura, yCentro);
  ctx.lineTo(ESTACOES[2].x * largura, yCentro);
  ctx.stroke();

  /* Partículas: acento a caminho das máquinas, sucesso a caminho da saída. */
  const raio = particulas.length > 1500 ? 1.4 : particulas.length > 400 ? 2 : 2.6;
  for (const p of particulas) {
    const de = ESTACOES[p.etapa].x * largura;
    const para = ESTACOES[p.etapa + 1].x * largura;
    const x = de + (para - de) * p.t;
    const y = yCentro + Math.sin(p.t * Math.PI) * p.desvio * altura * 0.55;
    ctx.fillStyle = p.etapa === 0 ? paleta.acento : paleta.sucesso;
    ctx.beginPath();
    ctx.arc(x, y, raio, 0, Math.PI * 2);
    ctx.fill();
  }

  /* Estações por cima, com rótulo legível (14 px ou mais). */
  const raioEstacao = Math.max(18, Math.min(30, largura * 0.05));
  const fonte = Math.max(14, Math.min(16, largura * 0.028));
  ctx.font = `700 ${fonte}px system-ui, sans-serif`;
  ctx.textAlign = "center";
  ctx.textBaseline = "top";
  for (const e of ESTACOES) {
    const x = e.x * largura;
    ctx.fillStyle = paleta.fundo;
    ctx.strokeStyle = paleta.acento;
    ctx.lineWidth = 3;
    ctx.beginPath();
    ctx.arc(x, yCentro, raioEstacao, 0, Math.PI * 2);
    ctx.fill();
    ctx.stroke();
    ctx.fillStyle = paleta.texto;
    ctx.fillText(e.rotulo, x, yCentro + raioEstacao + 8);
  }
}

/* ---------- Preferência de movimento ---------- */

const consultaMovimento = () => window.matchMedia("(prefers-reduced-motion: reduce)");

function useMovimentoReduzido(): boolean {
  return useSyncExternalStore(
    (avisar) => {
      const m = consultaMovimento();
      m.addEventListener("change", avisar);
      return () => m.removeEventListener("change", avisar);
    },
    () => consultaMovimento().matches,
    () => false,
  );
}

/* ---------- Estados do medidor e da gravação ---------- */

interface Medidor {
  fps: number;
  mediaMs: number;
  piorMs: number;
  quadrosLongos: number;
  ultimoBloqueioMs: number | null;
  /** null enquanto não verificado; false sem a API no navegador. */
  loaf: boolean | null;
}

const MEDIDOR_INICIAL: Medidor = { fps: 0, mediaMs: 0, piorMs: 0, quadrosLongos: 0, ultimoBloqueioMs: null, loaf: null };

type Gravacao =
  | { estado: "verificando" }
  | { estado: "indisponivel" }
  | { estado: "ocioso"; mime: string }
  | { estado: "gravando"; mime: string; restante: number }
  | { estado: "pronto"; mime: string; url: string; kb: number }
  | { estado: "erro"; mime: string; motivo: string };

const fmt1 = new Intl.NumberFormat("pt-BR", { minimumFractionDigits: 1, maximumFractionDigits: 1 });
const fmt0 = new Intl.NumberFormat("pt-BR", { maximumFractionDigits: 0 });

function nomeDoCodec(mime: string): string {
  if (!mime) return "o padrão do navegador";
  if (/av1/i.test(mime)) return "AV1 em WebM";
  if (/vp9/i.test(mime)) return "VP9 em WebM";
  if (/vp8/i.test(mime)) return "VP8 em WebM";
  if (/mp4/i.test(mime)) return "H.264 em MP4";
  return mime;
}

export default function GravarCenaVideoLab(_props: LiveLabProps) {
  const uid = useId();
  const movimentoReduzido = useMovimentoReduzido();

  const canvasRef = useRef<HTMLCanvasElement>(null);
  const palcoRef = useRef<HTMLDivElement>(null);
  const particulasRef = useRef<Particula[]>(criarParticulas(OPCOES_PARTICULAS[1]));
  const sorteioRef = useRef(criarSorteio(7));
  const paletaRef = useRef<Paleta | null>(null);
  const rafRef = useRef<number | null>(null);
  const ultimoQuadroRef = useRef<number | null>(null);
  const quadrosRef = useRef<{ t: number; dt: number }[]>([]);
  const ultimaLeituraRef = useRef(0);
  const quadrosLongosRef = useRef(0);
  const ultimoBloqueioRef = useRef<number | null>(null);
  const visivelRef = useRef(true);
  const naTelaRef = useRef(true);
  const animandoRef = useRef(!movimentoReduzido);
  const gravandoRef = useRef(false);
  const gravadorRef = useRef<MediaRecorder | null>(null);
  const urlRef = useRef<string | null>(null);
  const temporizadoresRef = useRef<number[]>([]);

  const [indiceParticulas, setIndiceParticulas] = useState(1);
  const [animando, setAnimando] = useState(!movimentoReduzido);
  const [jaAnimou, setJaAnimou] = useState(!movimentoReduzido);
  const [medidor, setMedidor] = useState<Medidor>(MEDIDOR_INICIAL);
  const [gravacao, setGravacao] = useState<Gravacao>({ estado: "verificando" });
  /* A gravação toca por botões próprios: página pública não usa <video> com controles nativos
     (regra da casa; o player completo é o Vidstack, e aqui a peça é a prova de seis segundos). */
  const videoGravadoRef = useRef<HTMLVideoElement>(null);
  const [reproduzindo, setReproduzindo] = useState(false);

  const totalParticulas = OPCOES_PARTICULAS[indiceParticulas];

  /* Redimensiona o canvas ao contêiner (16:9), com devicePixelRatio até 2. */
  const ajustarTamanho = useCallback(() => {
    const canvas = canvasRef.current;
    const palco = palcoRef.current;
    if (!canvas || !palco) return;
    const dpr = Math.min(2, window.devicePixelRatio || 1);
    const largura = Math.max(280, Math.floor(palco.clientWidth));
    const altura = Math.round((largura * 9) / 16);
    const w = Math.round(largura * dpr);
    const h = Math.round(altura * dpr);
    if (canvas.width !== w || canvas.height !== h) {
      canvas.width = w;
      canvas.height = h;
    }
  }, []);

  const desenharQuadro = useCallback(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    if (!paletaRef.current) paletaRef.current = montarPaleta(canvas);
    desenhar(canvas, particulasRef.current, paletaRef.current);
  }, []);

  /* O laço: avança as partículas quando a cena está andando, desenha sempre
     que roda e registra o tempo de cada quadro para o medidor. */
  const rodando = useCallback(
    () => (animandoRef.current || gravandoRef.current) && visivelRef.current && naTelaRef.current,
    [],
  );

  const pararLaco = useCallback(() => {
    if (rafRef.current !== null) {
      cancelAnimationFrame(rafRef.current);
      rafRef.current = null;
    }
    ultimoQuadroRef.current = null;
  }, []);

  const iniciarLaco = useCallback(() => {
    if (rafRef.current !== null) return;
    const passo = (agora: number) => {
      rafRef.current = null;
      if (!rodando()) {
        ultimoQuadroRef.current = null;
        return;
      }
      const anterior = ultimoQuadroRef.current;
      const dt = anterior === null ? ORCAMENTO_60 : Math.min(200, agora - anterior);
      ultimoQuadroRef.current = agora;
      const fila = quadrosRef.current;
      fila.push({ t: agora, dt });
      while (fila.length && agora - fila[0].t > 1000) fila.shift();

      avancar(particulasRef.current, dt / 1000, sorteioRef.current);
      desenharQuadro();

      if (agora - ultimaLeituraRef.current > 250 && fila.length) {
        ultimaLeituraRef.current = agora;
        const soma = fila.reduce((a, q) => a + q.dt, 0);
        const pior = fila.reduce((a, q) => Math.max(a, q.dt), 0);
        setMedidor((m) => ({
          ...m,
          fps: Math.round((fila.length * 1000) / Math.max(1, agora - fila[0].t + fila[0].dt)),
          mediaMs: soma / fila.length,
          piorMs: pior,
          quadrosLongos: quadrosLongosRef.current,
          ultimoBloqueioMs: ultimoBloqueioRef.current,
        }));
      }
      rafRef.current = requestAnimationFrame(passo);
    };
    rafRef.current = requestAnimationFrame(passo);
  }, [desenharQuadro, rodando]);

  const sincronizarLaco = useCallback(() => {
    if (rodando()) iniciarLaco();
    else {
      pararLaco();
      desenharQuadro();
    }
  }, [iniciarLaco, pararLaco, desenharQuadro, rodando]);

  /* Montagem: tamanho, paleta, observadores de tema, tamanho, visibilidade e tela. */
  useEffect(() => {
    ajustarTamanho();
    paletaRef.current = null;
    sincronizarLaco();

    const html = document.documentElement;
    const observadorTema = new MutationObserver(() => {
      paletaRef.current = null;
      desenharQuadro();
    });
    observadorTema.observe(html, { attributes: true, attributeFilter: ["data-theme", "class", "style"] });
    const esquema = window.matchMedia("(prefers-color-scheme: dark)");
    const aoMudarEsquema = () => {
      paletaRef.current = null;
      desenharQuadro();
    };
    esquema.addEventListener("change", aoMudarEsquema);

    const observadorTamanho = new ResizeObserver(() => {
      ajustarTamanho();
      desenharQuadro();
    });
    if (palcoRef.current) observadorTamanho.observe(palcoRef.current);

    const aoVisibilidade = () => {
      visivelRef.current = document.visibilityState === "visible";
      sincronizarLaco();
    };
    document.addEventListener("visibilitychange", aoVisibilidade);

    let observadorTela: IntersectionObserver | null = null;
    if (canvasRef.current && typeof IntersectionObserver !== "undefined") {
      observadorTela = new IntersectionObserver(
        (entradas) => {
          naTelaRef.current = entradas.some((e) => e.isIntersecting);
          sincronizarLaco();
        },
        { threshold: 0 },
      );
      observadorTela.observe(canvasRef.current);
    }

    /* Long Animation Frames: conta os quadros acima de 50 ms e guarda o último bloqueio. */
    let observadorQuadros: PerformanceObserver | null = null;
    const suporta =
      typeof PerformanceObserver !== "undefined" &&
      Array.isArray(PerformanceObserver.supportedEntryTypes) &&
      PerformanceObserver.supportedEntryTypes.includes("long-animation-frame");
    setMedidor((m) => ({ ...m, loaf: suporta }));
    if (suporta) {
      observadorQuadros = new PerformanceObserver((lista) => {
        for (const entrada of lista.getEntries() as EntradaQuadroLongo[]) {
          quadrosLongosRef.current += 1;
          ultimoBloqueioRef.current = Math.round(entrada.blockingDuration ?? entrada.duration);
        }
        setMedidor((m) => ({ ...m, quadrosLongos: quadrosLongosRef.current, ultimoBloqueioMs: ultimoBloqueioRef.current }));
      });
      observadorQuadros.observe({ type: "long-animation-frame", buffered: false });
    }

    return () => {
      pararLaco();
      observadorTema.disconnect();
      esquema.removeEventListener("change", aoMudarEsquema);
      observadorTamanho.disconnect();
      document.removeEventListener("visibilitychange", aoVisibilidade);
      observadorTela?.disconnect();
      observadorQuadros?.disconnect();
      for (const id of temporizadoresRef.current) window.clearTimeout(id);
      temporizadoresRef.current = [];
      const gravador = gravadorRef.current;
      if (gravador && gravador.state !== "inactive") {
        try {
          gravador.stop();
        } catch {
          /* já parado */
        }
      }
      if (urlRef.current) URL.revokeObjectURL(urlRef.current);
    };
  }, [ajustarTamanho, desenharQuadro, sincronizarLaco, pararLaco]);

  /* Disponibilidade da gravação e codec preferido, só no cliente. */
  useEffect(() => {
    const temGravador = typeof MediaRecorder !== "undefined";
    const temCaptura = typeof HTMLCanvasElement !== "undefined" && "captureStream" in HTMLCanvasElement.prototype;
    if (!temGravador || !temCaptura) {
      setGravacao({ estado: "indisponivel" });
      return;
    }
    const mime = MIMES_PREFERIDOS.find((m) => MediaRecorder.isTypeSupported(m)) ?? "";
    setGravacao({ estado: "ocioso", mime });
  }, []);

  /* Troca de quantidade de partículas: a cena é recriada de forma determinística. */
  useEffect(() => {
    particulasRef.current = criarParticulas(totalParticulas);
    desenharQuadro();
  }, [totalParticulas, desenharQuadro]);

  /* Movimento reduzido ligado depois do mount: para a cena e espera o pedido. */
  useEffect(() => {
    if (movimentoReduzido) {
      animandoRef.current = false;
      setAnimando(false);
      sincronizarLaco();
    }
  }, [movimentoReduzido, sincronizarLaco]);

  function alternarAnimacao() {
    const proximoEstado = !animandoRef.current;
    animandoRef.current = proximoEstado;
    setAnimando(proximoEstado);
    if (proximoEstado) setJaAnimou(true);
    sincronizarLaco();
  }

  function sobrecarregar() {
    const inicio = performance.now();
    /* Laço vazio de 300 ms: o navegador perde uns 18 quadros e a API registra o bloqueio. */
    while (performance.now() - inicio < 300) {
      /* ocupado de propósito */
    }
  }

  function gravar() {
    const canvas = canvasRef.current;
    if (!canvas || gravacao.estado !== "ocioso" && gravacao.estado !== "pronto" && gravacao.estado !== "erro") return;
    const mime = "mime" in gravacao ? gravacao.mime : "";
    try {
      const fluxo = canvas.captureStream(QUADROS_CAPTURA);
      const opcoes: MediaRecorderOptions = { videoBitsPerSecond: 4_000_000 };
      if (mime) opcoes.mimeType = mime;
      const gravador = new MediaRecorder(fluxo, opcoes);
      const partes: Blob[] = [];
      gravador.ondataavailable = (evento) => {
        if (evento.data && evento.data.size > 0) partes.push(evento.data);
      };
      gravador.onerror = () => {
        gravandoRef.current = false;
        sincronizarLaco();
        setGravacao({ estado: "erro", mime, motivo: "o gravador do navegador interrompeu a captura" });
      };
      gravador.onstop = () => {
        fluxo.getTracks().forEach((faixa) => faixa.stop());
        gravandoRef.current = false;
        sincronizarLaco();
        const tipo = gravador.mimeType || mime || "video/webm";
        const blob = new Blob(partes, { type: tipo });
        if (urlRef.current) URL.revokeObjectURL(urlRef.current);
        const url = URL.createObjectURL(blob);
        urlRef.current = url;
        setGravacao({ estado: "pronto", mime: tipo, url, kb: Math.max(1, Math.round(blob.size / 1024)) });
      };
      gravadorRef.current = gravador;
      gravandoRef.current = true;
      sincronizarLaco();
      gravador.start(500);
      setGravacao({ estado: "gravando", mime: gravador.mimeType || mime, restante: SEGUNDOS_GRAVACAO });
      for (let s = 1; s < SEGUNDOS_GRAVACAO; s++) {
        temporizadoresRef.current.push(
          window.setTimeout(() => {
            setGravacao((g) => (g.estado === "gravando" ? { ...g, restante: SEGUNDOS_GRAVACAO - s } : g));
          }, s * 1000),
        );
      }
      temporizadoresRef.current.push(
        window.setTimeout(() => {
          if (gravador.state !== "inactive") gravador.stop();
        }, SEGUNDOS_GRAVACAO * 1000),
      );
    } catch (erro) {
      gravandoRef.current = false;
      sincronizarLaco();
      setGravacao({ estado: "erro", mime, motivo: erro instanceof Error ? erro.message : "falha ao iniciar a captura" });
    }
  }

  const acimaDoOrcamento = medidor.mediaMs > ORCAMENTO_60;
  const leituraCena = animando
    ? `Cena com ${fmt0.format(totalParticulas)} partículas entre Entrada, Máquinas e Saída, em movimento.`
    : `Cena com ${fmt0.format(totalParticulas)} partículas entre Entrada, Máquinas e Saída, parada.`;
  const leituraMedidor = medidor.fps
    ? `${medidor.fps} quadros por segundo; ${fmt1.format(medidor.mediaMs)} ms por quadro em média, pior quadro ${fmt1.format(medidor.piorMs)} ms; ${medidor.quadrosLongos} quadro(s) longo(s) registrado(s).`
    : "Medidor aguardando a cena andar.";
  const podeGravar = gravacao.estado === "ocioso" || gravacao.estado === "pronto" || gravacao.estado === "erro";
  const extensao = gravacao.estado === "pronto" && /mp4/i.test(gravacao.mime) ? "mp4" : "webm";

  return (
    <div className={styles.lab}>
      <p className={styles.nota} data-reduzido={movimentoReduzido}>
        {movimentoReduzido
          ? "Movimento reduzido ativo no aparelho: a cena abre parada e só anda enquanto você mandar pelo botão; a gravação anima a cena pelos 6 segundos que você pediu."
          : "Movimento completo ativo: a cena anda sozinha enquanto estiver na tela e para quando a aba se esconde ou o canvas sai da vista."}
      </p>

      <div className={styles.paineis}>
        <section className={styles.painel} aria-labelledby={`${uid}-cena`}>
          <h4 id={`${uid}-cena`} className={styles.tituloPainel}>
            {"A cena e o medidor de quadros"}
          </h4>
          <div ref={palcoRef} className={styles.palco}>
            <canvas ref={canvasRef} className={styles.canvas} role="img" aria-label={leituraCena} />
          </div>
          <div className={styles.controles}>
            <button type="button" className={styles.botao} onClick={alternarAnimacao} aria-pressed={animando}>
              {animando ? "Pausar" : jaAnimou ? "Reproduzir" : "Animar"}
            </button>
            <button type="button" className={styles.botao} onClick={sobrecarregar}>
              {"Sobrecarregar 300 ms"}
            </button>
            <label className={styles.campo} htmlFor={`${uid}-particulas`}>
              {`Partículas: ${fmt0.format(totalParticulas)}`}
              <input
                id={`${uid}-particulas`}
                className={styles.faixa}
                type="range"
                min={0}
                max={OPCOES_PARTICULAS.length - 1}
                step={1}
                value={indiceParticulas}
                onChange={(e) => setIndiceParticulas(Number(e.target.value))}
                aria-valuetext={`${fmt0.format(totalParticulas)} partículas`}
              />
            </label>
          </div>
          <div className={styles.cartoes} role="status" aria-live="polite" aria-atomic="true">
            <div className={styles.cartao}>
              <span className={styles.rotulo}>{"Quadros por segundo"}</span>
              <strong className={styles.valor}>{medidor.fps ? fmt0.format(medidor.fps) : "0"}</strong>
            </div>
            <div className={styles.cartao} data-acima={acimaDoOrcamento}>
              <span className={styles.rotulo}>{"Tempo do quadro (média e pior, 1 s)"}</span>
              <strong className={styles.valor}>
                {medidor.fps ? `${fmt1.format(medidor.mediaMs)} ms` : "0 ms"}
                <span className={styles.unidade}>{medidor.fps ? ` / ${fmt1.format(medidor.piorMs)} ms` : ""}</span>
              </strong>
            </div>
            <div className={styles.cartao} data-acima={medidor.quadrosLongos > 0}>
              <span className={styles.rotulo}>{"Quadros longos (acima de 50 ms)"}</span>
              <strong className={styles.valor}>
                {medidor.loaf === false ? "sem API" : fmt0.format(medidor.quadrosLongos)}
                {medidor.loaf && medidor.ultimoBloqueioMs !== null ? (
                  <span className={styles.unidade}>{` · último bloqueio ${fmt0.format(medidor.ultimoBloqueioMs)} ms`}</span>
                ) : null}
              </strong>
            </div>
            <p className={styles.explica}>
              {medidor.loaf === false
                ? "Sem Long Animation Frames neste navegador (a API é do Chrome e do Edge desde a versão 123); o medidor usa só o laço de quadros. "
                : ""}
              {`Orçamento: ${fmt1.format(ORCAMENTO_60)} ms por quadro a 60 Hz e ${fmt1.format(ORCAMENTO_120)} ms a 120 Hz. `}
              {leituraMedidor}
            </p>
          </div>
        </section>

        <section className={styles.painel} aria-labelledby={`${uid}-gravar`}>
          <h4 id={`${uid}-gravar`} className={styles.tituloPainel}>
            {"Gravar a cena em vídeo"}
          </h4>
          <p className={styles.explica}>
            {"O vídeo gravado substitui a cena ao vivo na página de venda, no e-mail e no celular fraco, porque pesa uma vez e não gasta processador de quem olha. Ele não substitui a cena quando a pessoa precisa mexer: um vídeo não responde ao toque."}
          </p>
          <div className={styles.controles}>
            <button type="button" className={styles.botao} onClick={gravar} disabled={!podeGravar}>
              {gravacao.estado === "gravando" ? `Gravando, ${gravacao.restante} s` : `Gravar ${SEGUNDOS_GRAVACAO} segundos`}
            </button>
          </div>
          <div role="status" aria-live="polite" aria-atomic="true" className={styles.estado}>
            {gravacao.estado === "verificando" ? "Verificando se este navegador grava a cena." : null}
            {gravacao.estado === "indisponivel"
              ? "Este navegador não grava a cena; a alternativa é gravar a tela pelo sistema ou renderizar no servidor."
              : null}
            {gravacao.estado === "ocioso" ? `Pronto para gravar com ${nomeDoCodec(gravacao.mime)}, 30 quadros por segundo, sem áudio.` : null}
            {gravacao.estado === "gravando" ? `Gravando com ${nomeDoCodec(gravacao.mime)}; faltam ${gravacao.restante} s.` : null}
            {gravacao.estado === "erro" ? `A gravação falhou: ${gravacao.motivo}. Tente de novo ou grave a tela pelo sistema.` : null}
            {gravacao.estado === "pronto"
              ? `Gravação concluída com ${nomeDoCodec(gravacao.mime)}: ${fmt0.format(gravacao.kb)} KB para ${SEGUNDOS_GRAVACAO} segundos.`
              : null}
          </div>
          {gravacao.estado === "pronto" ? (
            <figure className={styles.resultado}>
              <video
                ref={videoGravadoRef}
                className={styles.video}
                src={gravacao.url}
                muted
                playsInline
                loop
                preload="metadata"
                aria-label="Gravação de seis segundos da cena, feita agora neste navegador"
                onPlay={() => setReproduzindo(true)}
                onPause={() => setReproduzindo(false)}
              />
              <figcaption className={styles.legenda}>
                <button
                  type="button"
                  className={styles.botao}
                  onClick={() => {
                    const v = videoGravadoRef.current;
                    if (!v) return;
                    if (v.paused) void v.play().catch(() => undefined);
                    else v.pause();
                  }}
                >
                  {reproduzindo ? "Pausar a gravação" : "Reproduzir a gravação"}
                </button>
                {" · "}
                {"gravação feita agora, neste navegador"}
                {" · "}
                <a className={styles.baixar} href={gravacao.url} download={`cena-da-maquina.${extensao}`}>
                  {`Baixar (${extensao === "mp4" ? "MP4" : "WebM"}, ${fmt0.format(gravacao.kb)} KB)`}
                </a>
              </figcaption>
            </figure>
          ) : null}
        </section>
      </div>
    </div>
  );
}

export const meta: LiveLabMeta = {
  biblioteca: "MediaRecorder, Canvas 2D e Long Animation Frames (plataforma)",
  pacote: "sem pacote",
  versao: "APIs do navegador, consulta em 25/09/2026",
  docsUrl: "https://developer.mozilla.org/docs/Web/API/MediaStream_Recording_API",
  npmUrl: "https://developer.chrome.com/docs/web-platform/long-animation-frames",
  trechoLinguagem: "ts",
  trecho: `// 1. Medidor: quadros acima de 50 ms chegam pela API Long Animation Frames.
const observador = new PerformanceObserver((lista) => {
  for (const q of lista.getEntries() as (PerformanceEntry & { blockingDuration: number })[]) {
    registrarQuadroLongo(q.blockingDuration);
  }
});
observador.observe({ type: "long-animation-frame", buffered: false });

// 2. Gravação: o canvas vira um fluxo e o primeiro codec aceito grava 6 segundos.
const mime = ["video/webm;codecs=av1", "video/webm;codecs=vp9", "video/webm;codecs=vp8", "video/mp4;codecs=avc1.42E01E", "video/mp4"]
  .find((m) => MediaRecorder.isTypeSupported(m)) ?? "";
const fluxo = canvas.captureStream(30);
const gravador = new MediaRecorder(fluxo, mime ? { mimeType: mime } : undefined);
const partes: Blob[] = [];
gravador.ondataavailable = (e) => { if (e.data.size) partes.push(e.data); };
gravador.onstop = () => {
  const blob = new Blob(partes, { type: gravador.mimeType || mime });
  video.src = URL.createObjectURL(blob); // revogar ao sair da página
};
gravador.start(500);
setTimeout(() => gravador.stop(), 6000);`,
  observar: [
    "O quadro cai antes de a pessoa perceber a olho: suba as partículas para 5.000 e compare o tempo do quadro com o orçamento de 16,7 ms.",
    "Um bloqueio de 300 ms aparece como um quadro longo na API Long Animation Frames, com o tempo de bloqueio ao lado.",
    "O codec escolhido muda por navegador: AV1 ou VP9 em WebM no Chrome, H.264 em MP4 onde o WebM não é aceito.",
    "O vídeo gravado pesa e não responde ao toque; ele serve à página de venda e ao e-mail, não à demonstração que a pessoa opera.",
  ],
};


==== GravarCenaVideo.module.css ====

/* Laboratório gravar-cena-video do curso Frontends com Vibecoding.
   Cor só por token do tema: contraste AA nos temas claro e escuro sem cor fixa.
   Alvo de toque de 44 px em todo controle e foco visível pelo acento do curso. */

.lab {
  display: grid;
  gap: 1rem;
  color: var(--text);
}

.paineis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1rem;
}

.painel {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  background: var(--bg-muted);
}

.tituloPainel {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--text);
}

.explica,
.estado,
.nota,
.legenda {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}

.nota {
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--warning);
  border-radius: var(--radius, 8px);
  background: var(--bg-white);
  font-size: 13px;
}

.nota[data-reduzido="true"] {
  border-left-color: var(--success);
}

.estado {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  background: var(--bg-white);
  font-size: 13px;
}

.palco {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 160px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  background: var(--bg-white);
}

.canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.controles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: flex-end;
}

.campo {
  display: grid;
  gap: 0.25rem;
  min-width: min(100%, 220px);
  flex: 1 1 200px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.faixa {
  width: 100%;
  min-height: 44px;
  margin: 0;
  accent-color: var(--course-accent, var(--accent));
}

.botao {
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  background: var(--bg-white);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.botao[aria-pressed="true"] {
  border-color: var(--course-accent, var(--accent));
  color: var(--course-accent, var(--accent));
}

.botao:hover:not(:disabled) {
  border-color: var(--course-accent, var(--accent));
}

.botao:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.botao:focus-visible,
.faixa:focus-visible,
.baixar:focus-visible,
.video:focus-visible {
  outline: 2px solid var(--course-accent, var(--accent));
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .botao {
    transition: border-color 150ms ease;
  }
}

.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 0.5rem;
}

.cartao {
  display: grid;
  gap: 0.2rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  background: var(--bg-white);
}

.cartao[data-acima="true"] {
  border-color: var(--warning);
}

.cartoes .explica {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--text-muted);
}

.rotulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.valor {
  font-size: 20px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.unidade {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.resultado {
  display: grid;
  gap: 0.4rem;
  margin: 0;
}

.video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: var(--radius, 8px);
  background: var(--bg-white);
}

.legenda {
  font-size: 13px;
  color: var(--text-muted);
}

.baixar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--course-accent, var(--accent));
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}