perf(movimento): uma transição, 3D leve e vídeo certo por aparelho

Passagens com fade e 32 px, cena anterior termina em opacidade 0, sem visibility nem clip-path. 3D do hero como fundo ambiente, sob demanda e desligado em toque, aparelho fraco, saveData e movimento reduzido. Lenis fora do toque e salto direto em âncoras distantes. Vitrine só de clientes, até 3 capítulos, fixa só no desktop e carrossel no celular; vídeo só do projeto em cena com preload metadata. Rótulos mono a partir de 12 px e limão só no contato.

app/components/cinematic/HeroField.test.tsx

@@ -0,0 +1,179 @@
+import { act, render, screen } from "@testing-library/react";
+import HeroField from "./HeroField";
+
+type SceneProps = {
+  visible: boolean;
+  progressRef: { current: number };
+  labelsRef?: unknown;
+  onReady: () => void;
+  onError: () => void;
+};
+const mockScenes: SceneProps[] = [];
+
+jest.mock("next/dynamic", () => ({
+  __esModule: true,
+  default: () =>
+    function MockScene(props: SceneProps) {
+      mockScenes.push(props);
+      return require("react").createElement("canvas", {
+        "data-testid": "scene",
+      });
+    },
+}));
+
+const original = {
+  matchMedia: window.matchMedia,
+  webgl2: (window as unknown as Record<string, unknown>).WebGL2RenderingContext,
+  getContext: HTMLCanvasElement.prototype.getContext,
+};
+
+function mockMedia(active: string[]) {
+  window.matchMedia = jest.fn().mockImplementation((query: string) => ({
+    matches: active.includes(query),
+    media: query,
+    addEventListener() {},
+    removeEventListener() {},
+  }));
+}
+
+function mockNavigator(values: Record<string, unknown>) {
+  for (const [key, value] of Object.entries(values))
+    Object.defineProperty(navigator, key, { configurable: true, value });
+}
+
+function Hero() {
+  return (
+    <section className="hero">
+      <HeroField />
+    </section>
+  );
+}
+
+/** O navegador ocioso: o Three.js só entra depois do tempo de espera. */
+function idle() {
+  act(() => {
+    jest.advanceTimersByTime(3000);
+  });
+}
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  mockScenes.length = 0;
+  mockMedia([]);
+  mockNavigator({
+    hardwareConcurrency: 8,
+    deviceMemory: undefined,
+    connection: undefined,
+  });
+  (window as unknown as Record<string, unknown>).WebGL2RenderingContext =
+    function WebGL2RenderingContext() {};
+  HTMLCanvasElement.prototype.getContext = (() => ({
+    getExtension: () => null,
+  })) as unknown as typeof HTMLCanvasElement.prototype.getContext;
+});
+
+afterEach(() => {
+  jest.useRealTimers();
+  window.matchMedia = original.matchMedia;
+  (window as unknown as Record<string, unknown>).WebGL2RenderingContext =
+    original.webgl2;
+  HTMLCanvasElement.prototype.getContext = original.getContext;
+});
+
+describe("HeroField (ambient background)", () => {
+  it("mounts the WebGL scene only after the page is idle, on a capable desktop", () => {
+    render(<Hero />);
+    expect(screen.queryByTestId("scene")).toBeNull();
+    idle();
+    expect(screen.getByTestId("scene")).toBeInTheDocument();
+    // o IntersectionObserver do jest.setup avisa que o hero está à vista: o desenho está liberado
+    expect(mockScenes.at(-1)?.visible).toBe(true);
+  });
+
+  it("is decorative: hidden from assistive technology and with no labels over the 3D", () => {
+    const { container } = render(<Hero />);
+    idle();
+    const field = container.querySelector(".hero-field");
+    expect(field).toHaveAttribute("aria-hidden", "true");
+    expect(container.querySelector(".hero-tag")).toBeNull();
+    for (const label of ["A tela", "As integrações", "Os dados"])
+      expect(screen.queryByText(label, { exact: false })).toBeNull();
+    expect(mockScenes.at(-1)?.labelsRef).toBeUndefined();
+  });
+
+  it.each([
+    ["a touch pointer", () => mockMedia(["(pointer: coarse)"])],
+    ["reduced motion", () => mockMedia(["(prefers-reduced-motion: reduce)"])],
+    ["the data saver", () => mockNavigator({ connection: { saveData: true } })],
+    ["four cores", () => mockNavigator({ hardwareConcurrency: 4 })],
+    ["4 GB of memory", () => mockNavigator({ deviceMemory: 4 })],
+    [
+      "no WebGL2",
+      () => {
+        (window as unknown as Record<string, unknown>).WebGL2RenderingContext =
+          undefined;
+      },
+    ],
+  ])(
+    "keeps the light static background (no WebGL) with %s",
+    (_label, arrange) => {
+      arrange();
+      const { container } = render(<Hero />);
+      idle();
+      expect(screen.queryByTestId("scene")).toBeNull();
+      expect(mockScenes).toHaveLength(0);
+      expect(container.querySelector(".hero-field")).not.toHaveAttribute(
+        "data-ready",
+      );
+    },
+  );
+
+  it("follows the hero scroll with --hero-p and --hero-open, and stops drawing once the dive is over", () => {
+    const { container } = render(<Hero />);
+    idle();
+    const section = container.querySelector(".hero") as HTMLElement;
+    let top = 0;
+    section.getBoundingClientRect = () =>
+      ({ top, height: 2000, bottom: top + 2000 }) as DOMRect;
+    Object.defineProperty(window, "innerHeight", {
+      configurable: true,
+      value: 800,
+    });
+    const scroll = (to: number) => {
+      top = -to;
+      act(() => {
+        window.dispatchEvent(new Event("scroll"));
+        jest.advanceTimersByTime(40);
+      });
+    };
+
+    scroll(0);
+    expect(mockScenes.at(-1)?.progressRef.current).toBe(0);
+
+    scroll(600); // meio do mergulho (1200 px de trilho)
+    expect(Number(section.style.getPropertyValue("--hero-p"))).toBeCloseTo(0.5);
+    // a máscara já se abriu por completo: o fundo aparece inteiro
+    expect(Number(section.style.getPropertyValue("--hero-open"))).toBe(1);
+
+    scroll(1200);
+    expect(Number(section.style.getPropertyValue("--hero-p"))).toBe(1);
+    expect(mockScenes.at(-1)?.visible).toBe(false);
+  });
+
+  it("reveals the scene (data-ready) once it has drawn its first frames", () => {
+    const { container } = render(<Hero />);
+    idle();
+    expect(container.querySelector(".hero-field")).not.toHaveAttribute(
+      "data-ready",
+    );
+    act(() => mockScenes.at(-1)?.onReady());
+    expect(container.querySelector(".hero-field")).toHaveAttribute(
+      "data-ready",
+    );
+    act(() => mockScenes.at(-1)?.onError());
+    expect(container.querySelector(".hero-field")).not.toHaveAttribute(
+      "data-ready",
+    );
+    expect(screen.queryByTestId("scene")).toBeNull();
+  });
+});