perf(movimento): sem tempo morto, vídeos regravados e 3D sem React Three Fiber

Legenda do mergulho até Projetos cobrir a cena; transição de página sem blur e com fundo escuro; foco no conteúdo ao trocar de página; listas com marcador e dois pesos de título; vídeos da SEV e da SC Plus regravados sem quadros brancos; scrub a 12-15 fps (-30%); vitrine com uma parada de Tab e setas, contador no celular e CSS sob demanda; âncoras num módulo só (fragment-nav); FramePulse com setInterval; CSS morto removido.

app/hooks/useFocusOnNavigation.test.tsx

@@ -0,0 +1,65 @@
+import { render, screen } from "@testing-library/react";
+import {
+  resetFocusOnNavigation,
+  useFocusOnNavigation,
+} from "./useFocusOnNavigation";
+
+function Probe({ pathname }: { pathname: string }) {
+  useFocusOnNavigation(pathname);
+  return null;
+}
+
+beforeEach(() => {
+  resetFocusOnNavigation();
+  document.body.innerHTML = "";
+});
+
+function mountMain() {
+  const main = document.createElement("div");
+  main.id = "main-content";
+  main.tabIndex = -1;
+  document.body.append(main);
+  return main;
+}
+
+describe("useFocusOnNavigation", () => {
+  it("does nothing on the first load, even with #main-content on the page", () => {
+    const main = mountMain();
+    render(<Probe pathname="/" />);
+    expect(main).not.toHaveFocus();
+  });
+
+  it("focuses #main-content once per path change, never scrolling", () => {
+    const main = mountMain();
+    const focus = jest.spyOn(main, "focus");
+    const { rerender } = render(<Probe pathname="/" />);
+
+    rerender(<Probe pathname="/cases" />);
+    expect(main).toHaveFocus();
+    expect(focus).toHaveBeenCalledTimes(1);
+    expect(focus).toHaveBeenCalledWith({ preventScroll: true });
+
+    rerender(<Probe pathname="/cases" />);
+    expect(focus).toHaveBeenCalledTimes(1);
+  });
+
+  it("still tells a navigation from the first load when the component remounts (first segment changed)", () => {
+    const main = mountMain();
+    const first = render(<Probe pathname="/" />);
+    first.unmount();
+    render(<Probe pathname="/cases" />);
+    expect(main).toHaveFocus();
+  });
+
+  it("survives a page without #main-content (a 404 shell, an error boundary)", () => {
+    const { rerender } = render(<Probe pathname="/" />);
+    expect(() => rerender(<Probe pathname="/nada" />)).not.toThrow();
+    expect(screen.queryByRole("main")).toBeNull();
+  });
+
+  it("is not fooled by the double effect of React StrictMode", () => {
+    const main = mountMain();
+    render(<Probe pathname="/" />, { reactStrictMode: true });
+    expect(main).not.toHaveFocus();
+  });
+});

app/hooks/useFocusOnNavigation.ts

@@ -0,0 +1,28 @@
+"use client";
+
+import { useEffect } from "react";
+
+/**
+ * Caminho já exibido neste documento. Fica fora do componente porque o template da raiz remonta quando o primeiro
+ * segmento da rota muda (de / para /cases), e a carga inicial precisa seguir distinta de uma troca de página.
+ */
+let shownPath: string | null = null;
+
+/** Os testes reproduzem vários documentos dentro de um só. */
+export function resetFocusOnNavigation() {
+  shownPath = null;
+}
+
+/**
+ * Depois de uma troca de página no navegador (o `pathname` mudou), o foco vai para o contêiner do conteúdo
+ * (`#main-content`, o mesmo destino do link "Pular"): leitor de tela e teclado seguem da página nova, não do link
+ * clicado na antiga. Sem rolar a página (preventScroll) e sem nada na carga inicial, que não tem página anterior.
+ */
+export function useFocusOnNavigation(pathname: string) {
+  useEffect(() => {
+    const previous = shownPath;
+    shownPath = pathname;
+    if (previous === null || previous === pathname) return;
+    document.getElementById("main-content")?.focus({ preventScroll: true });
+  }, [pathname]);
+}