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.

lib/project-showcase.test.ts

@@ -9,6 +9,7 @@ import {
   getProjectVideo,
   getScrubSource,
   getShowcaseAssets,
+  MAX_CHAPTERS,
   mobileFractionAt,
   PROJECT_VIDEO_IDS,
   SHOWCASE,
@@ -16,6 +17,34 @@ import {
 
 const MAX_BYTES = 3 * 1024 * 1024;
 const publicFile = (path: string) => join(process.cwd(), "public", path);
+/** Os projetos de cliente que a home entrega à vitrine. */
+const HOME_IDS = ["sev-modaintima", "lavacao-047", "sc-plus", "as-servicos"];
+
+describe("showcase length", () => {
+  it.each(SHOWCASE)("$id has at most three chapters", (config) => {
+    expect(MAX_CHAPTERS).toBe(3);
+    expect(config.chapters.length).toBeLessThanOrEqual(MAX_CHAPTERS);
+    expect(config.chapters.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it("pins the four home projects for about three and a half screens at most", () => {
+    const total = SHOWCASE.filter((config) => HOME_IDS.includes(config.id))
+      .map((config) => config.weight)
+      .reduce((sum, weight) => sum + weight, 0);
+    expect(HOME_IDS.every((id) => SHOWCASE.some((c) => c.id === id))).toBe(
+      true,
+    );
+    expect(total).toBeLessThanOrEqual(3.5);
+    expect(total).toBeGreaterThan(2);
+  });
+
+  it("keeps the NutriScan configuration for /cases", () => {
+    const nutriscan = SHOWCASE.find((config) => config.id === "nutriscan");
+    expect(nutriscan).toBeDefined();
+    expect(PROJECT_VIDEO_IDS).toContain("nutriscan");
+    expect(getOgImagePath("nutriscan")).toBe("/videos/nutriscan/og.jpg");
+  });
+});
 
 describe("showcase chapters", () => {
   it.each(SHOWCASE)("$id has ordered chapters inside both videos", (config) => {
@@ -60,8 +89,9 @@ describe("showcase chapters", () => {
     expect(lavacao).toBeDefined();
     if (!lavacao) return;
     expect(chapterIndexAt(lavacao, 0)).toBe(0);
-    expect(chapterIndexAt(lavacao, 3 / lavacao.durations.desktop)).toBe(1);
-    expect(chapterIndexAt(lavacao, 10 / lavacao.durations.desktop)).toBe(2);
+    expect(chapterIndexAt(lavacao, 3 / lavacao.durations.desktop)).toBe(0);
+    expect(chapterIndexAt(lavacao, 10 / lavacao.durations.desktop)).toBe(1);
+    expect(chapterIndexAt(lavacao, 25 / lavacao.durations.desktop)).toBe(2);
     expect(chapterIndexAt(lavacao, 1)).toBe(lavacao.chapters.length - 1);
     expect(chapterIndexAt(lavacao, 2)).toBe(lavacao.chapters.length - 1);
     expect(chapterIndexAt(lavacao, -1)).toBe(0);
@@ -71,6 +101,22 @@ describe("showcase chapters", () => {
 describe("showcase assets", () => {
   it("returns undefined for projects without a recorded video", () => {
     expect(getProjectVideo("reddit-explorer")).toBeUndefined();
+    expect(getProjectVideo("reddit-explorer", "mobile")).toBeUndefined();
+  });
+
+  it("picks the version for the device, desktop by default", () => {
+    expect(getProjectVideo("nutriscan")?.poster).toBe(
+      "/videos/nutriscan/desktop.webp",
+    );
+    expect(getProjectVideo("nutriscan", "desktop")).toEqual(
+      getShowcaseAssets("nutriscan", "desktop"),
+    );
+    const mobile = getProjectVideo("nutriscan", "mobile");
+    expect(mobile?.poster).toBe("/videos/nutriscan/mobile.webp");
+    expect(mobile?.sources.map((source) => source.src)).toEqual([
+      "/videos/nutriscan/mobile.webm",
+      "/videos/nutriscan/mobile.mp4",
+    ]);
   });
 
   it.each(PROJECT_VIDEO_IDS)(