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/showcase/BrowserFrame.paths.test.tsx

@@ -0,0 +1,141 @@
+import { render } from "@testing-library/react";
+import { BrowserFrame, displayUrl } from "./BrowserFrame";
+
+/**
+ * Testes de caminhos-base de displayUrl e BrowserFrame (complemento de BrowserFrame.test.tsx): cada condição
+ * da escolha do endereço (demoUrl válido, caminho, www, porta, esquema, github e parentes, URL inválida,
+ * título vazio) e as variações da moldura (cadeado, texto padrão, className).
+ */
+
+describe("displayUrl", () => {
+  it.each([
+    ["https://sevmodaintima.com.br", "sevmodaintima.com.br", true],
+    ["https://sevmodaintima.com.br/", "sevmodaintima.com.br", true],
+    [
+      "https://www.sevmodaintima.com.br/loja/",
+      "sevmodaintima.com.br/loja",
+      true,
+    ],
+    ["https://x.example.com/a/b/", "x.example.com/a/b", true],
+    ["https://x.example.com/a?q=1#topo", "x.example.com/a", true],
+    ["http://x.example.com", "x.example.com", false],
+    ["https://x.example.com:8443/app", "x.example.com:8443/app", true],
+    ["https://sub.www.example.com", "sub.www.example.com", true],
+    ["https://notgithub.com", "notgithub.com", true],
+    ["https://github.com.evil.example", "github.com.evil.example", true],
+    ["ftp://files.example.com/pasta", "files.example.com/pasta", false],
+  ])("path: demoUrl %s -> %s (secure: %s)", (demoUrl, text, secure) => {
+    expect(displayUrl({ demoUrl, title: "Projeto" })).toEqual({ text, secure });
+  });
+
+  it.each([
+    "https://github.com/evandrodevbr/projeto",
+    "https://GITHUB.COM/evandrodevbr",
+    "https://gist.github.com/x",
+    "https://www.github.com",
+  ])(
+    "path: demoUrl %s points at GitHub -> falls back to the title",
+    (demoUrl) => {
+      expect(displayUrl({ demoUrl, title: "Projeto" })).toEqual({
+        text: "Projeto",
+        secure: false,
+      });
+    },
+  );
+
+  it("path: demoUrl does not parse -> falls back to the title", () => {
+    expect(displayUrl({ demoUrl: "isto nao e url", title: "Projeto" })).toEqual(
+      {
+        text: "Projeto",
+        secure: false,
+      },
+    );
+  });
+
+  it.each([
+    ["null demoUrl", { demoUrl: null, title: "Projeto" }],
+    ["empty demoUrl", { demoUrl: "", title: "Projeto" }],
+    ["missing demoUrl", { title: "Projeto" }],
+  ])("path: %s with a title -> the title, never secure", (_label, project) => {
+    expect(displayUrl(project)).toEqual({ text: "Projeto", secure: false });
+  });
+
+  it.each([
+    ["no fields", {}],
+    ["empty title", { title: "" }],
+    ["null title and no demo", { title: null, demoUrl: null }],
+    ["github demo and no title", { demoUrl: "https://github.com/x" }],
+    ["invalid demo and empty title", { demoUrl: "???", title: "" }],
+  ])("path: %s -> null", (_label, project) => {
+    expect(displayUrl(project)).toBeNull();
+  });
+});
+
+describe("BrowserFrame", () => {
+  it("path: secure address -> lock icon plus the address text", () => {
+    const { container } = render(
+      <BrowserFrame url={{ text: "exemplo.com.br", secure: true }}>
+        <p>tela</p>
+      </BrowserFrame>,
+    );
+
+    expect(container.querySelector(".ds-bframe-url svg")).not.toBeNull();
+    expect(container.querySelector(".ds-bframe-url")).toHaveTextContent(
+      "exemplo.com.br",
+    );
+  });
+
+  it("path: insecure address -> text without the lock", () => {
+    const { container } = render(
+      <BrowserFrame url={{ text: "Projeto", secure: false }}>
+        <p>tela</p>
+      </BrowserFrame>,
+    );
+
+    expect(container.querySelector(".ds-bframe-url svg")).toBeNull();
+    expect(container.querySelector(".ds-bframe-url")).toHaveTextContent(
+      "Projeto",
+    );
+  });
+
+  it("path: no address -> neutral label and no lock", () => {
+    const { container } = render(
+      <BrowserFrame url={null}>
+        <p>tela</p>
+      </BrowserFrame>,
+    );
+
+    expect(container.querySelector(".ds-bframe-url svg")).toBeNull();
+    expect(container.querySelector(".ds-bframe-url")).toHaveTextContent(
+      "pré-visualização",
+    );
+  });
+
+  it("path: className and style given -> both reach the wrapper, with no stray space", () => {
+    const { container } = render(
+      <BrowserFrame
+        url={null}
+        className="ds-reel-laptop"
+        style={{ width: "88%" }}
+      >
+        <p>tela</p>
+      </BrowserFrame>,
+    );
+
+    const frame = container.firstElementChild as HTMLElement;
+    expect(frame.className).toBe("ds-bframe ds-reel-laptop");
+    expect(frame.style.width).toBe("88%");
+  });
+
+  it("path: no className -> the class has no trailing space", () => {
+    const { container } = render(
+      <BrowserFrame url={null}>
+        <p>tela</p>
+      </BrowserFrame>,
+    );
+
+    expect((container.firstElementChild as HTMLElement).className).toBe(
+      "ds-bframe",
+    );
+  });
+});