fix(ci): lint do Biome, Next 16.3.8 (RCE em next/og) e transicoes que se remedem

- Biome: formatacao, ordem de imports, max-width duplicado no cabecalho de secao, supressao justificada para nomes de view-transition, ajustes nos scripts de auditoria de SEO - next 16.3.3 -> 16.3.8: GHSA-vcvr-r3jv-pc5j (execucao remota de codigo em next/og ImageResponse, usado nas imagens de compartilhamento) - overrides de brace-expansion (GHSA-qhr7-859c-m2p7, GHSA-6j4f-fj2g-mc7p, GHSA-q2hr-2g5m-vwhr), dependencia de desenvolvimento via jest - visibilidade das cenas le as posicoes a cada quadro e o GSAP remede as passagens quando a pagina muda de altura (fontes, imagens, Experiencia) Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-10-05 01:38:41 -03:00
1 parent 6db10ffa67
commit 4c826e938f
@@ -2,7 +2,11 @@

 import { type RefObject, useEffect } from "react";

-type Transition = (tl: gsap.core.Timeline, prev: HTMLElement, next: HTMLElement) => void;
+type Transition = (
+  tl: gsap.core.Timeline,
+  prev: HTMLElement,
+  next: HTMLElement,
+) => void;

 /*
 * Rolagem como um vídeo: o Lenis suaviza a roda do mouse e o GSAP liga cada passagem de seção à posição
@@ -20,12 +24,17 @@ type Transition = (tl: gsap.core.Timeline, prev: HTMLElement, next: HTMLElement)

 const vh = () => window.innerHeight;
 // origem no meio da parte visível da seção que sai (a última altura de tela dela)
-const visibleCenter = (el: HTMLElement) => () => `50% ${el.offsetHeight - vh() / 2}px`;
+const visibleCenter = (el: HTMLElement) => () =>
+  `50% ${el.offsetHeight - vh() / 2}px`;

 /** Topo do elemento na página pelo layout (offsetTop ignora os transforms das transições, getBoundingClientRect não). */
 export function pageTop(el: HTMLElement) {
  let top = 0;
-  for (let node: HTMLElement | null = el; node; node = node.offsetParent as HTMLElement | null)
+  for (
+    let node: HTMLElement | null = el;
+    node;
+    node = node.offsetParent as HTMLElement | null
+  )
    top += node.offsetTop;
  return top;
 }
@@ -45,7 +54,12 @@ const TRANSITIONS: Transition[] = [
    holdNext(tl, next);
    const band = (open: number) => () =>
      `inset(${(vh() * (1 - open)) / 2}px 0px ${next.offsetHeight - vh() + (vh() * (1 - open)) / 2}px 0px)`;
-    tl.fromTo(prev, { autoAlpha: 1 }, { autoAlpha: 0, duration: 0.4 }, 0).fromTo(
+    tl.fromTo(
+      prev,
+      { autoAlpha: 1 },
+      { autoAlpha: 0, duration: 0.4 },
+      0,
+    ).fromTo(
      next,
      { opacity: 0, clipPath: band(0.36) },
      { opacity: 1, clipPath: band(1), duration: 0.65 },
@@ -68,7 +82,8 @@ const TRANSITIONS: Transition[] = [
        next,
        { clipPath: () => `circle(0px ${center()})` },
        {
-          clipPath: () => `circle(${Math.hypot(window.innerWidth / 2, vh() / 2)}px ${center()})`,
+          clipPath: () =>
+            `circle(${Math.hypot(window.innerWidth / 2, vh() / 2)}px ${center()})`,
          ease: "power1.in",
        },
        0,
@@ -78,12 +93,12 @@ const TRANSITIONS: Transition[] = [
  (tl, prev, next) => {
    holdPrev(tl, prev);
    holdNext(tl, next);
-    tl.fromTo(prev, { xPercent: 0, opacity: 1 }, { xPercent: -35, opacity: 0.3 }, 0).fromTo(
-      next,
-      { xPercent: 100 },
-      { xPercent: 0, ease: "power2.out" },
+    tl.fromTo(
+      prev,
+      { xPercent: 0, opacity: 1 },
+      { xPercent: -35, opacity: 0.3 },
      0,
-    );
+    ).fromTo(next, { xPercent: 100 }, { xPercent: 0, ease: "power2.out" }, 0);
  },
  // IA → qualidade: a seção sobe mais rápido que a rolagem, como um cartão, sobre a anterior que escurece.
  // Só translate/opacity: recorte animado, escala (o Chrome rasteriza de novo a cada novo tamanho) e o
@@ -102,7 +117,12 @@ const TRANSITIONS: Transition[] = [
  (tl, prev, next) => {
    holdPrev(tl, prev);
    holdNext(tl, next);
-    tl.fromTo(prev, { opacity: 1, xPercent: 0 }, { opacity: 0.25, xPercent: 20 }, 0).fromTo(
+    tl.fromTo(
+      prev,
+      { opacity: 1, xPercent: 0 },
+      { opacity: 0.25, xPercent: 20 },
+      0,
+    ).fromTo(
      next,
      { xPercent: -100, rotation: -7, transformOrigin: "0% 0%" },
      { xPercent: 0, rotation: 0, ease: "power2.out" },
@@ -133,7 +153,8 @@ const TRANSITIONS: Transition[] = [
  },
 ];

-const easeInOutCubic = (t: number) => (t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2);
+const easeInOutCubic = (t: number) =>
+  t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;

 export function useCinematicScroll(mainRef: RefObject<HTMLElement | null>) {
  useEffect(() => {
@@ -144,11 +165,12 @@ export function useCinematicScroll(mainRef: RefObject<HTMLElement | null>) {
    let cleanup = () => {};

    (async () => {
-      const [{ gsap }, { ScrollTrigger }, { default: Lenis }] = await Promise.all([
-        import("gsap"),
-        import("gsap/ScrollTrigger"),
-        import("lenis"),
-      ]);
+      const [{ gsap }, { ScrollTrigger }, { default: Lenis }] =
+        await Promise.all([
+          import("gsap"),
+          import("gsap/ScrollTrigger"),
+          import("lenis"),
+        ]);
      if (cancelled) return;
      gsap.registerPlugin(ScrollTrigger);

@@ -162,7 +184,10 @@ export function useCinematicScroll(mainRef: RefObject<HTMLElement | null>) {
      const context = gsap.context(() => {
        scenes.forEach((scene, index) => {
          // quem entra fica por cima; o hero, que sai por dissolução, fica por cima da cena seguinte
-          gsap.set(scene, { position: "relative", zIndex: index === 0 ? 30 : index + 1 });
+          gsap.set(scene, {
+            position: "relative",
+            zIndex: index === 0 ? 30 : index + 1,
+          });
        });
        TRANSITIONS.forEach((transition, index) => {
          const prev = scenes[index];
@@ -189,23 +214,34 @@ export function useCinematicScroll(mainRef: RefObject<HTMLElement | null>) {
      // Visibilidade pela posição da rolagem, não pelo estado inicial dos tweens: cada cena só existe na
      // tela da transição em que entra até a transição em que sai. Antes ela não vaza por cima da anterior;
      // depois não aparece atrás de transparências, e o navegador não pinta o que está coberto.
-      let tops: number[] = [];
+      // As posições são lidas a cada quadro (offsetTop é barato com o layout já calculado): guardá-las
+      // deixava a visibilidade errada quando fontes, imagens ou o bloco "Experiência" mudavam a altura.
+      let frame = 0;
      const syncVisibility = () => {
+        frame = 0;
        const y = window.scrollY;
+        const tops = scenes.map(pageTop);
        scenes.forEach((scene, index) => {
          const from = index === 0 ? -Infinity : tops[index] - vh();
          const to = index === scenes.length - 1 ? Infinity : tops[index + 1];
          const visibility = y >= from && y <= to ? "" : "hidden";
-          if (scene.style.visibility !== visibility) scene.style.visibility = visibility;
+          if (scene.style.visibility !== visibility)
+            scene.style.visibility = visibility;
        });
      };
-      const measure = () => {
-        tops = scenes.map(pageTop);
-        syncVisibility();
+      const queueSync = () => {
+        if (!frame) frame = requestAnimationFrame(syncVisibility);
      };
-      measure();
-      ScrollTrigger.addEventListener("refresh", measure);
-      window.addEventListener("scroll", syncVisibility, { passive: true });
+      syncVisibility();
+      ScrollTrigger.addEventListener("refresh", queueSync);
+      window.addEventListener("scroll", queueSync, { passive: true });
+      // a página mudou de altura (fontes, imagens, "Experiência" aberta ou fechada): o GSAP remede as passagens
+      let refreshTimer: ReturnType<typeof setTimeout> | undefined;
+      const resizeObserver = new ResizeObserver(() => {
+        clearTimeout(refreshTimer);
+        refreshTimer = setTimeout(() => ScrollTrigger.refresh(), 150);
+      });
+      resizeObserver.observe(main);

      // botões e links internos: em vez do salto, a página "avança o vídeo" até o destino
      const onClick = (event: MouseEvent) => {
@@ -218,14 +254,27 @@ export function useCinematicScroll(mainRef: RefObject<HTMLElement | null>) {
          event.altKey
        )
          return;
-        const link = event.target instanceof Element ? event.target.closest("a[href]") : null;
-        if (!(link instanceof HTMLAnchorElement) || (link.target && link.target !== "_self")) return;
+        const link =
+          event.target instanceof Element
+            ? event.target.closest("a[href]")
+            : null;
+        if (
+          !(link instanceof HTMLAnchorElement) ||
+          (link.target && link.target !== "_self")
+        )
+          return;
        const url = new URL(link.href);
-        if (url.origin !== location.origin || url.pathname !== location.pathname || !url.hash)
+        if (
+          url.origin !== location.origin ||
+          url.pathname !== location.pathname ||
+          !url.hash
+        )
          return;
        let target: HTMLElement | null = null;
        try {
-          target = document.getElementById(decodeURIComponent(url.hash.slice(1)));
+          target = document.getElementById(
+            decodeURIComponent(url.hash.slice(1)),
+          );
        } catch {}
        if (!target) return;
        event.preventDefault();
@@ -233,11 +282,16 @@ export function useCinematicScroll(mainRef: RefObject<HTMLElement | null>) {
        // alvos internos descontam o cabeçalho fixo
        const scene = scenes.find((candidate) => candidate.contains(target));
        const offset =
-          Number.parseFloat(getComputedStyle(document.documentElement).scrollPaddingTop) || 0;
+          Number.parseFloat(
+            getComputedStyle(document.documentElement).scrollPaddingTop,
+          ) || 0;
        const top =
          !scene || scene === scenes[0]
            ? 0
-            : Math.max(pageTop(scene), scene === target ? 0 : pageTop(target) - offset);
+            : Math.max(
+                pageTop(scene),
+                scene === target ? 0 : pageTop(target) - offset,
+              );
        if (location.hash !== url.hash) history.pushState(null, "", url.hash);
        lenis.scrollTo(top, {
          duration: Math.min(2.8, 1 + Math.abs(top - window.scrollY) / 8000),
@@ -253,8 +307,11 @@ export function useCinematicScroll(mainRef: RefObject<HTMLElement | null>) {

      cleanup = () => {
        document.removeEventListener("click", onClick, true);
-        ScrollTrigger.removeEventListener("refresh", measure);
-        window.removeEventListener("scroll", syncVisibility);
+        ScrollTrigger.removeEventListener("refresh", queueSync);
+        window.removeEventListener("scroll", queueSync);
+        cancelAnimationFrame(frame);
+        clearTimeout(refreshTimer);
+        resizeObserver.disconnect();
        context.revert();
        for (const scene of scenes) scene.style.visibility = "";
        gsap.ticker.remove(tick);