diff --git a/app/components/Projects.tsx b/app/components/Projects.tsx
index e4e48a2..a66d646 100644
--- a/app/components/Projects.tsx
+++ b/app/components/Projects.tsx
@@ -8,6 +8,8 @@ import { DrawLine } from "./animations/DrawLine";
 import MagneticButton from "./cinematic/MagneticButton";
 import { ProjectCover } from "./ProjectCover";
 import { Section } from "./Section";
+import { ProjectReel } from "./showcase/ProjectReel";
+import { ShowcaseProvider } from "./showcase/ShowcaseProvider";
 
 export default function Projects({
   projects,
@@ -36,129 +38,139 @@ export default function Projects({
       dark
       disableChildrenAnimation
     >
-      <div className="ds-grid-fluid">
-        {projects.map((project) => {
-          const caseStudy = caseStudies.find(
-            (entry) => entry.id === project.id,
-          );
-          return (
-            <motion.article
-              key={project.id}
-              className="ds-card h-full"
-              initial="hidden"
-              whileInView="visible"
-              viewport={{ once: true, amount: "some" }}
-              variants={cardVariants}
-              whileHover={
-                shouldReduceMotion
-                  ? undefined
-                  : {
-                      y: -4,
-                      boxShadow: "0 20px 44px rgba(0, 0, 0, 0.42)",
-                    }
-              }
-              whileTap={shouldReduceMotion ? undefined : { scale: 0.99 }}
-              transition={{ type: "spring", stiffness: 170, damping: 18 }}
-            >
-              <ProjectCover project={project} />
-              <div className="flex flex-wrap items-start justify-between gap-sp-6">
-                <div className="max-w-[560px]">
-                  <div className="ds-kicker">{project.category}</div>
-                  <DrawLine delay={0.05} />
-                  <h3 className="ds-card-title">{project.title}</h3>
-                  {project.subtitle && (
-                    <p className="mt-sp-3 text-[13px] leading-6 text-[rgba(255,255,255,.56)]">
-                      {project.subtitle}
-                    </p>
-                  )}
+      <ShowcaseProvider projects={projects}>
+        <div className="ds-grid-fluid">
+          {projects.map((project) => {
+            const caseStudy = caseStudies.find(
+              (entry) => entry.id === project.id,
+            );
+            return (
+              <motion.article
+                key={project.id}
+                className="ds-card h-full"
+                initial="hidden"
+                whileInView="visible"
+                viewport={{ once: true, amount: "some" }}
+                variants={cardVariants}
+                whileHover={
+                  shouldReduceMotion
+                    ? undefined
+                    : {
+                        y: -4,
+                        boxShadow: "0 20px 44px rgba(0, 0, 0, 0.42)",
+                      }
+                }
+                whileTap={shouldReduceMotion ? undefined : { scale: 0.99 }}
+                transition={{ type: "spring", stiffness: 170, damping: 18 }}
+              >
+                <ProjectCover project={project} />
+                <div className="flex flex-wrap items-start justify-between gap-sp-6">
+                  <div className="max-w-[560px]">
+                    <div className="ds-kicker">{project.category}</div>
+                    <DrawLine delay={0.05} />
+                    <h3 className="ds-card-title">{project.title}</h3>
+                    {project.subtitle && (
+                      <p className="mt-sp-3 text-[13px] leading-6 text-[rgba(255,255,255,.56)]">
+                        {project.subtitle}
+                      </p>
+                    )}
+                  </div>
+                  <MagneticButton
+                    as="span"
+                    className="ds-tag"
+                    strength={0.15}
+                    wrapperClassName="shrink-0 max-sm:ml-auto"
+                  >
+                    {project.status}
+                  </MagneticButton>
                 </div>
-                <MagneticButton
-                  as="span"
-                  className="ds-tag"
-                  strength={0.15}
-                  wrapperClassName="shrink-0 max-sm:ml-auto"
-                >
-                  {project.status}
-                </MagneticButton>
-              </div>
 
-              <p className="ds-copy">
-                {caseStudy?.summary ?? project.description}
-              </p>
-              {caseStudy && (
-                <div className="mt-sp-4 border-l border-[var(--slash)] pl-sp-4">
-                  <p className="ds-kicker">O desafio</p>
-                  <p className="ds-copy">{caseStudy.impact}</p>
-                </div>
-              )}
-              {caseStudy?.role && (
-                <div className="mt-sp-4 border-l border-[var(--slash)] pl-sp-4">
-                  <p className="ds-kicker">Minha participação</p>
-                  <p className="ds-copy">{caseStudy.role}</p>
-                </div>
-              )}
-
-              <ul className="ds-tags mt-sp-6" data-reel-stagger="fade">
-                {project.technologies.slice(0, 5).map((tech) => (
-                  <li key={tech} className="ds-tag">
-                    {tech}
-                  </li>
-                ))}
-              </ul>
-
-              <div className="mt-sp-6 flex flex-wrap gap-sp-3" data-reel="top">
+                <p className="ds-copy">
+                  {caseStudy?.summary ?? project.description}
+                </p>
                 {caseStudy && (
-                  <MagneticButton
-                    as="a"
-                    href={`/cases/${caseStudy.id}`}
-                    className="ds-link ds-link-accent"
-                    strength={0.2}
-                  >
-                    Entender a solução
-                  </MagneticButton>
+                  <div className="mt-sp-4 border-l border-[var(--slash)] pl-sp-4">
+                    <p className="ds-kicker">O desafio</p>
+                    <p className="ds-copy">{caseStudy.impact}</p>
+                  </div>
                 )}
-                {project.githubUrl && (
-                  <MagneticButton
-                    as="a"
-                    href={project.githubUrl}
-                    target="_blank"
-                    rel="noreferrer"
-                    className="ds-link ds-link-muted"
-                    strength={0.25}
-                  >
-                    Ver codigo
-                  </MagneticButton>
+                {caseStudy?.role && (
+                  <div className="mt-sp-4 border-l border-[var(--slash)] pl-sp-4">
+                    <p className="ds-kicker">Minha participação</p>
+                    <p className="ds-copy">{caseStudy.role}</p>
+                  </div>
                 )}
-                {project.demoUrl &&
-                  (project.demoAvailability === "available" ||
-                    project.demoAvailability === "unknown") && (
+
+                <ul className="ds-tags mt-sp-6" data-reel-stagger="fade">
+                  {project.technologies.slice(0, 5).map((tech) => (
+                    <li key={tech} className="ds-tag">
+                      {tech}
+                    </li>
+                  ))}
+                </ul>
+
+                <div
+                  className="mt-sp-6 flex flex-wrap gap-sp-3"
+                  data-reel="top"
+                >
+                  {caseStudy && (
                     <MagneticButton
                       as="a"
-                      href={project.demoUrl}
-                      target="_blank"
-                      rel="noreferrer"
+                      href={`/cases/${caseStudy.id}`}
                       className="ds-link ds-link-accent"
-                      strength={0.25}
+                      strength={0.2}
                     >
-                      Abrir projeto
-                      {project.demoAvailability === "unknown" && (
-                        <span className="sr-only">
-                          {" "}
-                          Disponibilidade não verificada
-                        </span>
-                      )}
+                      Entender a solução
                     </MagneticButton>
                   )}
-                {project.demoAvailability === "unavailable" && (
-                  <span className="ds-link ds-link-accent" aria-disabled="true">
-                    Demo indisponível na última verificação
-                  </span>
-                )}
-              </div>
-            </motion.article>
-          );
-        })}
-      </div>
+                  {project.githubUrl && (
+                    <MagneticButton
+                      as="a"
+                      href={project.githubUrl}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="ds-link ds-link-muted"
+                      strength={0.25}
+                    >
+                      Ver codigo
+                    </MagneticButton>
+                  )}
+                  {project.demoUrl &&
+                    (project.demoAvailability === "available" ||
+                      project.demoAvailability === "unknown") && (
+                      <MagneticButton
+                        as="a"
+                        href={project.demoUrl}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="ds-link ds-link-accent"
+                        strength={0.25}
+                      >
+                        Abrir projeto
+                        {project.demoAvailability === "unknown" && (
+                          <span className="sr-only">
+                            {" "}
+                            Disponibilidade não verificada
+                          </span>
+                        )}
+                      </MagneticButton>
+                    )}
+                  {project.demoAvailability === "unavailable" && (
+                    <span
+                      className="ds-link ds-link-accent"
+                      aria-disabled="true"
+                    >
+                      Demo indisponível na última verificação
+                    </span>
+                  )}
+                </div>
+              </motion.article>
+            );
+          })}
+        </div>
+
+        <ProjectReel />
+      </ShowcaseProvider>
 
       <div className="mt-sp-8 flex flex-wrap gap-sp-3" data-reel-stagger="left">
         <MagneticButton
diff --git a/app/components/showcase/ProjectReel.test.tsx b/app/components/showcase/ProjectReel.test.tsx
new file mode 100644
index 0000000..ad3cb6f
--- /dev/null
+++ b/app/components/showcase/ProjectReel.test.tsx
@@ -0,0 +1,374 @@
+import { act, fireEvent, render, screen, within } from "@testing-library/react";
+import { renderToString } from "react-dom/server";
+import { getFeaturedProjects } from "@/lib/portfolio-data";
+import { getShowcaseConfig, mobileFractionAt } from "@/lib/project-showcase";
+import { ProjectReel } from "./ProjectReel";
+import { ShowcaseProvider } from "./ShowcaseProvider";
+import { reelOffset, videoProgress } from "./showcase-math";
+
+let reducedMotion = false;
+jest.mock("@/app/hooks/useReducedMotion", () => ({
+  useReducedMotion: () => reducedMotion,
+}));
+
+const PIN = 800;
+const CONTAINER = 7000;
+const SCROLLABLE = CONTAINER - PIN;
+const HEADER = 60;
+let reelTop = HEADER;
+
+const projects = getFeaturedProjects(null);
+const weights = [
+  "sev-modaintima",
+  "lavacao-047",
+  "nutriscan",
+  "sc-plus",
+  "as-servicos",
+].map((id) => getShowcaseConfig(id)?.weight ?? 1);
+
+const originalRect = Element.prototype.getBoundingClientRect;
+const originalOffsetHeight = Object.getOwnPropertyDescriptor(
+  HTMLElement.prototype,
+  "offsetHeight",
+);
+
+beforeAll(() => {
+  Object.defineProperty(HTMLElement.prototype, "offsetHeight", {
+    configurable: true,
+    get(this: HTMLElement) {
+      if (this.classList.contains("ds-reel")) return CONTAINER;
+      if (this.classList.contains("ds-reel-pin")) return PIN;
+      return 0;
+    },
+  });
+  Element.prototype.getBoundingClientRect = function rect(this: Element) {
+    if (this.classList.contains("ds-reel"))
+      return {
+        top: reelTop,
+        bottom: reelTop + CONTAINER,
+        height: CONTAINER,
+        left: 0,
+        right: 1000,
+        width: 1000,
+        x: 0,
+        y: reelTop,
+      } as DOMRect;
+    return originalRect.call(this);
+  };
+  window.scrollTo = jest.fn();
+});
+
+afterAll(() => {
+  Element.prototype.getBoundingClientRect = originalRect;
+  if (originalOffsetHeight)
+    Object.defineProperty(
+      HTMLElement.prototype,
+      "offsetHeight",
+      originalOffsetHeight,
+    );
+});
+
+beforeEach(() => {
+  jest.useFakeTimers();
+  reducedMotion = false;
+  reelTop = HEADER;
+  (window.scrollTo as jest.Mock).mockClear();
+  jest.spyOn(HTMLMediaElement.prototype, "play").mockResolvedValue();
+  jest.spyOn(HTMLMediaElement.prototype, "pause").mockImplementation(() => {});
+});
+
+afterEach(() => {
+  jest.useRealTimers();
+  jest.restoreAllMocks();
+});
+
+function renderReel() {
+  const view = render(
+    <ShowcaseProvider projects={projects}>
+      <ProjectReel />
+    </ShowcaseProvider>,
+  );
+  act(() => {
+    jest.advanceTimersByTime(50);
+  });
+  return view;
+}
+
+/** jsdom não carrega mídia: cada <video> da vitrine ganha duração e prontidão para aceitar buscas. */
+function readyVideos() {
+  for (const video of document.querySelectorAll("video")) {
+    Object.defineProperty(video, "readyState", {
+      configurable: true,
+      value: 4,
+    });
+    Object.defineProperty(video, "duration", { configurable: true, value: 30 });
+    let time = 0;
+    Object.defineProperty(video, "currentTime", {
+      configurable: true,
+      get: () => time,
+      set: (value: number) => {
+        time = value;
+      },
+    });
+  }
+}
+
+function scrollTo(progress: number) {
+  reelTop = HEADER - progress * SCROLLABLE;
+  act(() => {
+    window.dispatchEvent(new Event("scroll"));
+    jest.advanceTimersByTime(1500);
+  });
+}
+
+const sources = () =>
+  [...document.querySelectorAll(".ds-reel-layer video")].map((video) =>
+    video.getAttribute("src"),
+  );
+
+const activeLayer = () =>
+  document.querySelector('.ds-reel-layer[data-state="active"]') as HTMLElement;
+
+describe("ProjectReel", () => {
+  it("renders nothing for users who prefer reduced motion", () => {
+    reducedMotion = true;
+    renderReel();
+    expect(
+      screen.queryByRole("region", { name: /Vitrine animada/ }),
+    ).toBeNull();
+  });
+
+  it("lists every project by name, starting on the first with its chapters", () => {
+    renderReel();
+    const nav = screen.getByRole("navigation", { name: "Projetos da vitrine" });
+    for (const name of [
+      "SEV Moda Íntima",
+      "Lavação 047",
+      "NutriScan",
+      "SC Plus Aquicultura",
+      "AS Serviços",
+    ])
+      expect(within(nav).getByRole("button", { name })).toBeInTheDocument();
+    expect(
+      within(nav).getByRole("button", { name: "SEV Moda Íntima" }),
+    ).toHaveAttribute("aria-current", "true");
+    expect(
+      within(nav).getByRole("list", { name: "Trechos de SEV Moda Íntima" }),
+    ).toBeInTheDocument();
+    expect(activeLayer()).toHaveTextContent("SEV Moda Íntima");
+  });
+
+  it("hides the layers that are not on screen from assistive technology and from the keyboard", () => {
+    renderReel();
+    const layers = [...document.querySelectorAll(".ds-reel-layer")];
+    expect(layers).toHaveLength(5);
+    for (const layer of layers.slice(1)) {
+      expect(layer).toHaveAttribute("aria-hidden", "true");
+      expect(layer).toHaveAttribute("inert");
+    }
+    expect(layers[0]).not.toHaveAttribute("inert");
+  });
+
+  it("moves to the next project and syncs the laptop and the phone to the same point of the site", () => {
+    renderReel();
+    readyVideos();
+
+    // meio do trecho da Lavação (segundo projeto)
+    const t = reelOffset(weights, 1, 0.5);
+    scrollTo(t);
+
+    const layer = activeLayer();
+    expect(layer).toHaveTextContent("Lavação 047");
+    const lavacao = getShowcaseConfig("lavacao-047");
+    if (!lavacao) throw new Error("config ausente");
+    const p = videoProgress(0.5);
+    const desktop = layer.querySelector(
+      ".ds-reel-screen video",
+    ) as HTMLVideoElement;
+    const phone = layer.querySelector(
+      ".ds-phone-screen video",
+    ) as HTMLVideoElement;
+    expect(desktop.currentTime).toBeCloseTo(p * 30, 1);
+    expect(phone.currentTime).toBeCloseTo(mobileFractionAt(lavacao, p) * 30, 1);
+  });
+
+  it("names the chapter on screen and counts them", () => {
+    renderReel();
+    readyVideos();
+    scrollTo(reelOffset(weights, 1, 0.5)); // Lavação, a meio caminho
+
+    const layer = activeLayer();
+    const lavacao = getShowcaseConfig("lavacao-047");
+    expect(lavacao).toBeDefined();
+    expect(layer.querySelector(".ds-reel-chapter-count")?.textContent).toMatch(
+      /^0\d\/06$/,
+    );
+    const labels = lavacao?.chapters.map((chapter) => chapter.label) ?? [];
+    expect(labels).toContain(
+      layer.querySelector(".ds-reel-chapter strong")?.textContent,
+    );
+  });
+
+  it("holds the first and last frame at the ends of the pinned range", () => {
+    renderReel();
+    readyVideos();
+
+    scrollTo(0);
+    const first = document.querySelector(
+      '.ds-reel-layer[data-state="active"] .ds-reel-screen video',
+    ) as HTMLVideoElement;
+    expect(first.currentTime).toBe(0);
+
+    scrollTo(1);
+    expect(activeLayer()).toHaveTextContent("AS Serviços");
+    const last = activeLayer().querySelector(
+      ".ds-reel-screen video",
+    ) as HTMLVideoElement;
+    expect(last.currentTime).toBeCloseTo(30, 1);
+  });
+
+  it("downloads nothing while the page is far from the reel", () => {
+    reelTop = 6000;
+    renderReel();
+    act(() => {
+      window.dispatchEvent(new Event("scroll"));
+      jest.advanceTimersByTime(400);
+    });
+    expect(sources().every((src) => src === null)).toBe(true);
+  });
+
+  it("downloads only the project on screen and its neighbours, and lets go of the rest", () => {
+    renderReel();
+    scrollTo(0);
+    act(() => {
+      jest.advanceTimersByTime(400);
+    });
+    let loaded = sources().filter(Boolean);
+    expect(
+      loaded.some((src) => src?.includes("sev-modaintima/scrub-desktop.mp4")),
+    ).toBe(true);
+    expect(
+      loaded.some((src) => src?.includes("lavacao-047/scrub-mobile.mp4")),
+    ).toBe(true);
+    expect(loaded.some((src) => src?.includes("nutriscan"))).toBe(false);
+    expect(loaded.some((src) => src?.includes("as-servicos"))).toBe(false);
+
+    // vai para o último projeto: o primeiro sai da janela e solta o arquivo
+    scrollTo(1);
+    act(() => {
+      jest.advanceTimersByTime(400);
+    });
+    loaded = sources().filter(Boolean);
+    expect(
+      loaded.some((src) => src?.includes("as-servicos/scrub-desktop.mp4")),
+    ).toBe(true);
+    expect(loaded.some((src) => src?.includes("sev-modaintima"))).toBe(false);
+  });
+
+  it("only downloads where the scroll settles, not every project it flies past", () => {
+    renderReel();
+    scrollTo(0);
+    // atravessa vários projetos em menos de 300 ms
+    for (const project of [1, 2, 3]) {
+      reelTop = HEADER - reelOffset(weights, project, 0.5) * SCROLLABLE;
+      act(() => {
+        window.dispatchEvent(new Event("scroll"));
+        jest.advanceTimersByTime(60);
+      });
+    }
+    act(() => {
+      jest.advanceTimersByTime(400);
+    });
+    const loaded = sources().filter(Boolean);
+    expect(loaded.some((src) => src?.includes("sc-plus"))).toBe(true);
+    expect(loaded.some((src) => src?.includes("nutriscan"))).toBe(true); // vizinho do projeto onde parou
+    expect(loaded.some((src) => src?.includes("sev-modaintima"))).toBe(false);
+  });
+
+  it("does not download the hidden laptop video on a phone-sized screen", () => {
+    const original = window.matchMedia;
+    window.matchMedia = jest.fn().mockImplementation((query: string) => ({
+      matches: query.includes("max-width: 639px"),
+      media: query,
+      addEventListener() {},
+      removeEventListener() {},
+    }));
+    try {
+      renderReel();
+      scrollTo(0);
+      act(() => {
+        jest.advanceTimersByTime(400);
+      });
+      const loaded = sources().filter(Boolean);
+      expect(loaded.some((src) => src?.includes("scrub-mobile.mp4"))).toBe(
+        true,
+      );
+      expect(loaded.some((src) => src?.includes("scrub-desktop.mp4"))).toBe(
+        false,
+      );
+    } finally {
+      window.matchMedia = original;
+    }
+  });
+
+  it("respects the data saver: no scroll video is downloaded", () => {
+    Object.defineProperty(navigator, "connection", {
+      configurable: true,
+      value: { saveData: true },
+    });
+    try {
+      renderReel();
+      scrollTo(0);
+      act(() => {
+        jest.advanceTimersByTime(400);
+      });
+      expect(sources().every((src) => src === null)).toBe(true);
+    } finally {
+      Object.defineProperty(navigator, "connection", {
+        configurable: true,
+        value: undefined,
+      });
+    }
+  });
+
+  it("holds the page height before it mounts, so a jump to #contact lands in the right place", () => {
+    const html = renderToString(
+      <ShowcaseProvider projects={projects}>
+        <ProjectReel />
+      </ShowcaseProvider>,
+    );
+    expect(html).toContain("ds-reel-placeholder");
+    expect(html).toContain("--reel-sum");
+    expect(html).toContain('aria-hidden="true"');
+    expect(html).not.toContain("<video");
+  });
+
+  it("scrolls to the start of a project when its button is pressed", () => {
+    renderReel();
+    const nav = screen.getByRole("navigation", { name: "Projetos da vitrine" });
+    fireEvent.click(within(nav).getByRole("button", { name: /NutriScan/ }));
+    act(() => {
+      jest.advanceTimersByTime(1200);
+    });
+
+    const calls = (window.scrollTo as jest.Mock).mock.calls;
+    const last = calls[calls.length - 1][0] as { top: number };
+    const expected =
+      HEADER - HEADER + reelOffset(weights, 2, 0) * SCROLLABLE + 2;
+    expect(last.top).toBeCloseTo(expected, 0);
+  });
+
+  it("scrolls to a chapter inside the project when its link is pressed", () => {
+    renderReel();
+    const nav = screen.getByRole("navigation", { name: "Projetos da vitrine" });
+    fireEvent.click(within(nav).getByRole("button", { name: /As favoritas/ }));
+    act(() => {
+      jest.advanceTimersByTime(1200);
+    });
+
+    const calls = (window.scrollTo as jest.Mock).mock.calls;
+    const last = calls[calls.length - 1][0] as { top: number };
+    expect(last.top).toBeGreaterThan(reelOffset(weights, 0, 0) * SCROLLABLE);
+    expect(last.top).toBeLessThan(reelOffset(weights, 1, 0) * SCROLLABLE);
+  });
+});
diff --git a/app/components/showcase/ProjectReel.tsx b/app/components/showcase/ProjectReel.tsx
new file mode 100644
index 0000000..93da29c
--- /dev/null
+++ b/app/components/showcase/ProjectReel.tsx
@@ -0,0 +1,568 @@
+"use client";
+
+import {
+  type CSSProperties,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useReducedMotion } from "@/app/hooks/useReducedMotion";
+import {
+  chapterFraction,
+  chapterIndexAt,
+  getScrubSource,
+  getShowcaseAssets,
+  mobileFractionAt,
+} from "@/lib/project-showcase";
+import { BrowserFrame, displayUrl } from "./BrowserFrame";
+import { PhoneFrame } from "./PhoneFrame";
+import { useShowcaseItems, useShowcaseOpen } from "./ShowcaseProvider";
+import {
+  easeToward,
+  locateInReel,
+  REEL_HOLD,
+  reelOffset,
+  videoProgress,
+} from "./showcase-math";
+
+// a altura do cabeçalho só muda com a largura da janela (tokens em :root): ler o estilo a cada quadro de rolagem é caro
+let headerCache = { width: -1, height: 60 };
+const headerHeight = () => {
+  if (headerCache.width !== window.innerWidth)
+    headerCache = {
+      width: window.innerWidth,
+      height:
+        Number.parseFloat(
+          getComputedStyle(document.documentElement).getPropertyValue(
+            "--site-header-height",
+          ),
+        ) || 60,
+    };
+  return headerCache.height;
+};
+
+/** Verdadeiro enquanto a tela é estreita a ponto de a vitrine mostrar só o celular (o notebook fica escondido). */
+function usePhoneOnly() {
+  const [phoneOnly, setPhoneOnly] = useState(false);
+  useEffect(() => {
+    if (typeof window.matchMedia !== "function") return;
+    const query = window.matchMedia("(max-width: 639px)");
+    const update = () => setPhoneOnly(query.matches);
+    update();
+    query.addEventListener("change", update);
+    return () => query.removeEventListener("change", update);
+  }, []);
+  return phoneOnly;
+}
+
+/** "Economizar dados" ligado: a vitrine fica nos posters, sem baixar os vídeos de rolagem. */
+const saveDataOn = () =>
+  (navigator as Navigator & { connection?: { saveData?: boolean } }).connection
+    ?.saveData === true;
+
+/** Põe o vídeo no instante `fraction` (0 a 1) sem repetir buscas enquanto a anterior ainda não terminou. */
+function seekVideo(video: HTMLVideoElement | null, fraction: number) {
+  if (!video || video.readyState < 1 || !video.duration) return;
+  const target = Math.min(
+    video.duration - 0.001,
+    Math.max(0, fraction * video.duration),
+  );
+  if (!video.seeking && Math.abs(video.currentTime - target) > 1 / 48)
+    video.currentTime = target;
+}
+
+/** Alguns navegadores móveis só desenham o primeiro quadro de um vídeo que já tocou uma vez. */
+function prime(video: HTMLVideoElement) {
+  if (video.dataset.primed) return;
+  video.dataset.primed = "true";
+  video
+    .play()
+    .then(() => video.pause())
+    .catch(() => {});
+}
+
+let stopScroll = () => {};
+/** Rola até `top` em menos de um segundo; qualquer gesto do usuário interrompe. */
+function scrollToSmoothly(top: number) {
+  stopScroll();
+  const from = window.scrollY;
+  const distance = top - from;
+  const duration = Math.min(900, 380 + Math.abs(distance) * 0.12);
+  const started = performance.now();
+  let id = 0;
+  const stop = () => {
+    cancelAnimationFrame(id);
+    window.removeEventListener("wheel", stop);
+    window.removeEventListener("touchstart", stop);
+  };
+  stopScroll = stop;
+  window.addEventListener("wheel", stop, { passive: true });
+  window.addEventListener("touchstart", stop, { passive: true });
+  const step = (now: number) => {
+    const t = Math.min(1, (now - started) / duration);
+    const eased = t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+    // "instant": o CSS global tem scroll-behavior: smooth e cada quadro já é um passo da animação
+    window.scrollTo({ top: from + distance * eased, behavior: "instant" });
+    if (t < 1) id = requestAnimationFrame(step);
+    else stop();
+  };
+  id = requestAnimationFrame(step);
+}
+
+/**
+ * Vitrine animada: o site de cada projeto rola dentro de um notebook (e de um celular ao lado) conforme a
+ * página rola. A cena fica presa (position: sticky) durante a rolagem de todos os projetos; cada projeto tem
+ * um trecho com uma pausa no começo e outra no fim. Capítulos nomeiam o que está na tela; notebook e celular
+ * mostram o mesmo trecho do site ao mesmo tempo.
+ *
+ * Só existe com JavaScript e sem prefers-reduced-motion; antes disso, e nesses casos, os cards fazem o papel.
+ */
+export function ProjectReel() {
+  const items = useShowcaseItems();
+  const openProject = useShowcaseOpen();
+  const reducedMotion = useReducedMotion();
+  const [mounted, setMounted] = useState(false);
+  const [active, setActive] = useState(0);
+  const [chapter, setChapter] = useState(0);
+  const [near, setNear] = useState(false);
+  const [settled, setSettled] = useState(0);
+  const [saveData, setSaveData] = useState(false);
+  const phoneOnly = usePhoneOnly();
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const pinRef = useRef<HTMLDivElement>(null);
+  const indexRef = useRef<HTMLOListElement>(null);
+  const desktopVideos = useRef<Array<HTMLVideoElement | null>>([]);
+  const phoneVideos = useRef<Array<HTMLVideoElement | null>>([]);
+  const bars = useRef<Array<HTMLElement | null>>([]);
+  const live = useRef({
+    target: [] as number[],
+    smooth: [] as number[],
+    active: 0,
+    chapter: 0,
+    raf: 0,
+    last: 0,
+    near: false,
+  });
+
+  const weights = useMemo(
+    () => items.map((item) => item.config.weight),
+    [items],
+  );
+  const weightSum = weights.reduce((sum, weight) => sum + weight, 0);
+
+  useEffect(() => {
+    setSaveData(saveDataOn());
+    setMounted(true);
+  }, []);
+
+  // só o projeto em cena e os vizinhos baixam vídeo; e só depois que a rolagem parou ali (passar voando por
+  // um projeto no clique do índice não pode baixar todos os do caminho)
+  useEffect(() => {
+    const timer = setTimeout(() => setSettled(active), 300);
+    return () => clearTimeout(timer);
+  }, [active]);
+
+  // na faixa horizontal (tablet e celular) o projeto em cena precisa continuar à vista
+  useEffect(() => {
+    const list = indexRef.current;
+    const button = list?.children[active]?.querySelector("button");
+    if (
+      !list ||
+      !button ||
+      list.scrollWidth <= list.clientWidth ||
+      typeof list.scrollTo !== "function"
+    )
+      return;
+    list.scrollTo({
+      left: Math.max(0, button.offsetLeft - 16),
+      behavior: "smooth",
+    });
+  }, [active]);
+
+  const isAttached = useCallback(
+    (index: number) => near && !saveData && Math.abs(index - settled) <= 1,
+    [near, saveData, settled],
+  );
+
+  // quem saiu da janela solta o arquivo (sem `src` o elemento fica vazio e libera a memória)
+  useEffect(() => {
+    items.forEach((_, index) => {
+      if (isAttached(index)) return;
+      for (const video of [
+        desktopVideos.current[index],
+        phoneVideos.current[index],
+      ])
+        if (video && video.networkState !== 0 && !video.getAttribute("src"))
+          video.load();
+    });
+  }, [items, isAttached]);
+
+  const frame = useCallback(
+    (now: number) => {
+      const state = live.current;
+      const seconds = state.last ? (now - state.last) / 1000 : 0;
+      state.last = now;
+      let moving = false;
+      items.forEach((item, index) => {
+        if (Math.abs(index - state.active) > 1) return;
+        const before = state.smooth[index] ?? 0;
+        const next = easeToward(before, state.target[index] ?? 0, seconds);
+        state.smooth[index] = next;
+        if (Math.abs(next - (state.target[index] ?? 0)) > 0.0004) moving = true;
+        seekVideo(desktopVideos.current[index], next);
+        seekVideo(
+          phoneVideos.current[index],
+          mobileFractionAt(item.config, next),
+        );
+        const bar = bars.current[index];
+        if (bar) bar.style.setProperty("--p", next.toFixed(4));
+      });
+      const current = items[state.active];
+      if (current) {
+        const index = chapterIndexAt(
+          current.config,
+          state.smooth[state.active] ?? 0,
+        );
+        if (index !== state.chapter) {
+          state.chapter = index;
+          setChapter(index);
+        }
+      }
+      state.raf = moving ? requestAnimationFrame(frame) : 0;
+    },
+    [items],
+  );
+
+  // um vídeo que acabou de carregar precisa ir ao ponto em que a rolagem já está
+  const syncVideos = useCallback(
+    (index: number) => {
+      const item = items[index];
+      const at = live.current.smooth[index] ?? live.current.target[index] ?? 0;
+      seekVideo(desktopVideos.current[index], at);
+      if (item)
+        seekVideo(
+          phoneVideos.current[index],
+          mobileFractionAt(item.config, at),
+        );
+    },
+    [items],
+  );
+
+  const measure = useCallback(() => {
+    const container = containerRef.current;
+    const pin = pinRef.current;
+    // escondida por CSS (tela baixa, por exemplo): sem altura, não há o que medir nem o que carregar
+    if (!container || !pin || items.length === 0 || !container.offsetHeight)
+      return;
+    const state = live.current;
+    const rect = container.getBoundingClientRect();
+    const scrollable = rect.height - pin.offsetHeight;
+    const progress =
+      scrollable > 0 ? (headerHeight() - rect.top) / scrollable : 0;
+    const { index, local } = locateInReel(weights, progress);
+    state.target = items.map((_, i) =>
+      i < index ? 1 : i === index ? videoProgress(local) : 0,
+    );
+    const near =
+      rect.top < window.innerHeight * 2 && rect.bottom > -window.innerHeight;
+    if (near !== state.near) {
+      state.near = near;
+      setNear(near);
+    }
+
+    if (index !== state.active) {
+      state.active = index;
+      state.chapter = chapterIndexAt(
+        items[index].config,
+        state.smooth[index] ?? 0,
+      );
+      setActive(index);
+      setChapter(state.chapter);
+    }
+    if (state.near && !state.raf) {
+      state.last = 0;
+      state.raf = requestAnimationFrame(frame);
+    }
+  }, [frame, items, weights]);
+
+  useEffect(() => {
+    if (!mounted || reducedMotion || items.length === 0) return;
+    let pending = 0;
+    const schedule = () => {
+      if (!pending)
+        pending = requestAnimationFrame(() => {
+          pending = 0;
+          measure();
+        });
+    };
+    schedule();
+    window.addEventListener("scroll", schedule, { passive: true });
+    window.addEventListener("resize", schedule);
+    const state = live.current;
+    return () => {
+      window.removeEventListener("scroll", schedule);
+      window.removeEventListener("resize", schedule);
+      cancelAnimationFrame(pending);
+      cancelAnimationFrame(state.raf);
+      state.raf = 0;
+    };
+  }, [mounted, reducedMotion, items.length, measure]);
+
+  /** Rola até o ponto da vitrine em que o projeto `index` está em `local` (0 a 1) do trecho dele. */
+  const scrollToReel = (index: number, local: number) => {
+    const container = containerRef.current;
+    const pin = pinRef.current;
+    if (!container || !pin) return;
+    const scrollable = container.offsetHeight - pin.offsetHeight;
+    const top = container.getBoundingClientRect().top + window.scrollY;
+    // 2px além: garante que a conta caia dentro do trecho
+    scrollToSmoothly(
+      top - headerHeight() + reelOffset(weights, index, local) * scrollable + 2,
+    );
+  };
+
+  const goTo = (index: number) => scrollToReel(index, 0);
+  const goToChapter = (index: number, chapterIndex: number) => {
+    const fraction = chapterFraction(
+      items[index].config,
+      chapterIndex,
+      "desktop",
+    );
+    scrollToReel(index, REEL_HOLD + fraction * (1 - REEL_HOLD * 2));
+  };
+
+  if (items.length === 0 || (mounted && reducedMotion)) return null;
+
+  // antes de montar, um bloco da mesma altura segura o lugar: a página não muda de tamanho quando a vitrine
+  // aparece (o salto para #contact, por exemplo, cai no lugar certo); o CSS o esconde sem JavaScript, com
+  // prefers-reduced-motion e em telas baixas
+  if (!mounted)
+    return (
+      <div
+        className="ds-reel ds-reel-placeholder"
+        aria-hidden="true"
+        style={{ "--reel-sum": weightSum } as CSSProperties}
+      />
+    );
+
+  const current = items[active];
+
+  return (
+    <section
+      className="ds-reel"
+      aria-label="Vitrine animada dos projetos"
+      style={{ "--reel-sum": weightSum } as CSSProperties}
+      ref={containerRef}
+    >
+      <div className="ds-reel-pin" ref={pinRef}>
+        <div className="ds-reel-grid">
+          <nav className="ds-reel-index" aria-label="Projetos da vitrine">
+            <p className="ds-reel-hint">
+              <span aria-hidden="true" className="ds-reel-hint-line" />
+              Em movimento
+              <span className="ds-reel-hint-sub">Role para avançar</span>
+            </p>
+            <ol ref={indexRef}>
+              {items.map((item, index) => (
+                <li key={item.config.id}>
+                  <button
+                    type="button"
+                    aria-current={index === active ? "true" : undefined}
+                    aria-label={item.project.title}
+                    onClick={() => goTo(index)}
+                  >
+                    <span className="ds-reel-num">
+                      {String(index + 1).padStart(2, "0")}
+                    </span>
+                    <span className="ds-reel-name">{item.project.title}</span>
+                    <i
+                      className="ds-reel-bar"
+                      aria-hidden="true"
+                      ref={(element) => {
+                        bars.current[index] = element;
+                      }}
+                    />
+                  </button>
+                  {index === active && (
+                    <ol
+                      className="ds-reel-chapters"
+                      aria-label={`Trechos de ${item.project.title}`}
+                    >
+                      {item.config.chapters.map((entry, i) => (
+                        <li key={entry.label}>
+                          <button
+                            type="button"
+                            aria-current={i === chapter ? "true" : undefined}
+                            onClick={() => goToChapter(index, i)}
+                          >
+                            <span aria-hidden="true">
+                              {String(i + 1).padStart(2, "0")}
+                            </span>
+                            {entry.label}
+                          </button>
+                        </li>
+                      ))}
+                    </ol>
+                  )}
+                </li>
+              ))}
+            </ol>
+          </nav>
+
+          <div className="ds-reel-stage">
+            {items.map((item, index) => {
+              const { config, project } = item;
+              const isActive = index === active;
+              const attach = isAttached(index);
+              const desktop = getShowcaseAssets(config.id, "desktop");
+              const phone = getShowcaseAssets(config.id, "mobile");
+              return (
+                <div
+                  key={config.id}
+                  className="ds-reel-layer"
+                  data-state={
+                    isActive ? "active" : index < active ? "before" : "after"
+                  }
+                  style={{ "--accent": config.accent } as CSSProperties}
+                  aria-hidden={isActive ? undefined : true}
+                  inert={!isActive}
+                >
+                  <div className="ds-reel-set">
+                    <div className="ds-reel-devices">
+                      <BrowserFrame
+                        url={displayUrl(project)}
+                        className="ds-reel-laptop"
+                      >
+                        <div
+                          className="ds-reel-screen"
+                          style={{ backgroundImage: `url(${desktop.poster})` }}
+                        >
+                          {/* biome-ignore lint/a11y/useMediaCaption: vídeo decorativo sem áudio */}
+                          <video
+                            ref={(element) => {
+                              desktopVideos.current[index] = element;
+                            }}
+                            src={
+                              attach && !phoneOnly
+                                ? getScrubSource(config.id, "desktop")
+                                : undefined
+                            }
+                            poster={desktop.poster}
+                            muted
+                            playsInline
+                            preload={attach && !phoneOnly ? "auto" : "none"}
+                            tabIndex={-1}
+                            aria-hidden="true"
+                            disablePictureInPicture
+                            disableRemotePlayback
+                            onLoadedMetadata={() => syncVideos(index)}
+                            onLoadedData={(event) => prime(event.currentTarget)}
+                          />
+                        </div>
+                      </BrowserFrame>
+                      <PhoneFrame
+                        className="ds-reel-phone"
+                        poster={phone.poster}
+                      >
+                        {/* biome-ignore lint/a11y/useMediaCaption: vídeo decorativo sem áudio */}
+                        <video
+                          ref={(element) => {
+                            phoneVideos.current[index] = element;
+                          }}
+                          src={
+                            attach
+                              ? getScrubSource(config.id, "mobile")
+                              : undefined
+                          }
+                          poster={phone.poster}
+                          muted
+                          playsInline
+                          preload={attach ? "auto" : "none"}
+                          tabIndex={-1}
+                          aria-hidden="true"
+                          disablePictureInPicture
+                          disableRemotePlayback
+                          onLoadedMetadata={() => syncVideos(index)}
+                          onLoadedData={(event) => prime(event.currentTarget)}
+                        />
+                      </PhoneFrame>
+                    </div>
+
+                    <div className="ds-reel-caption">
+                      <p className="ds-kicker">
+                        {project.category} · {project.status}
+                      </p>
+                      <h3 className="ds-reel-title">{project.title}</h3>
+                      {project.subtitle && (
+                        <p className="ds-reel-sub">{project.subtitle}</p>
+                      )}
+                      <div className="ds-reel-chapter">
+                        <span className="ds-reel-chapter-count">
+                          {String((isActive ? chapter : 0) + 1).padStart(
+                            2,
+                            "0",
+                          )}
+                          /{String(config.chapters.length).padStart(2, "0")}
+                        </span>
+                        <strong>
+                          {config.chapters[isActive ? chapter : 0].label}
+                        </strong>
+                        <ol className="ds-reel-ticks" aria-hidden="true">
+                          {config.chapters.map((entry, tick) => (
+                            <li
+                              key={entry.label}
+                              data-state={
+                                !isActive || tick > chapter
+                                  ? "todo"
+                                  : tick === chapter
+                                    ? "now"
+                                    : "done"
+                              }
+                            />
+                          ))}
+                        </ol>
+                      </div>
+                      <div className="ds-reel-actions">
+                        <button
+                          type="button"
+                          className="ds-link ds-link-accent"
+                          onClick={() => openProject(config.id)}
+                          aria-haspopup="dialog"
+                        >
+                          Ampliar vídeo
+                        </button>
+                        {project.demoUrl &&
+                          project.demoAvailability !== "unavailable" && (
+                            <a
+                              className="ds-link ds-link-muted"
+                              href={project.demoUrl}
+                              target="_blank"
+                              rel="noreferrer"
+                            >
+                              Abrir projeto
+                              <span className="sr-only">
+                                {" "}
+                                (abre em nova aba)
+                              </span>
+                            </a>
+                          )}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+        <p className="sr-only" aria-live="polite">
+          {current
+            ? `${current.project.title}: ${current.config.chapters[chapter]?.label ?? ""}`
+            : ""}
+        </p>
+      </div>
+    </section>
+  );
+}