perf(movimento): sem tela vazia, passagens em CSS e vitrine leve

Projetos sobem sobre o palco do hero e o celular tem hero de uma tela sem mergulho; passagens com animation-timeline em CSS, sem GSAP nem motion; troca da vitrine sem texto duplicado; moldura de celular só com pôster e scrub reencodado em 960 px (9,4 para 5,2 MB); 3D monta na primeira interação e para quando parado; transição entre páginas do mesmo segmento; foco em anel duplo; texto de 15 px no celular; código morto removido.

app/components/showcase/PhoneFrame.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from "@testing-library/react";
+import { PhoneFrame } from "./PhoneFrame";
+
+describe("PhoneFrame", () => {
+  it("shows only the poster when it has no children (the pinned reel does not download the phone video)", () => {
+    const { container } = render(
+      <PhoneFrame poster="/videos/x/mobile.webp" className="ds-reel-phone" />,
+    );
+
+    const phone = container.firstElementChild as HTMLElement;
+    const screenEl = phone.querySelector(".ds-phone-screen") as HTMLElement;
+    expect(phone).toHaveClass("ds-phone", "ds-reel-phone");
+    expect(screenEl.style.backgroundImage).toContain("/videos/x/mobile.webp");
+    expect(screenEl).toBeEmptyDOMElement();
+  });
+
+  it("renders its children inside the screen", () => {
+    render(
+      <PhoneFrame>
+        <p>demo</p>
+      </PhoneFrame>,
+    );
+
+    expect(screen.getByText("demo").parentElement).toHaveClass(
+      "ds-phone-screen",
+    );
+  });
+
+  it("has no background without a poster, and passes the style along", () => {
+    const { container } = render(<PhoneFrame style={{ width: 120 }} />);
+
+    expect(
+      (container.querySelector(".ds-phone-screen") as HTMLElement).style
+        .backgroundImage,
+    ).toBe("");
+    expect((container.firstElementChild as HTMLElement).style.width).toBe(
+      "120px",
+    );
+  });
+});