Evandro Fonseca JuniorandClaude Opus 5.5
b2f3899dc2
CI / verify (push) Failing after 5m47s
A secao que sai fica presa com position: sticky (o compositor do navegador a mantem em sincronia com a rolagem) em vez de ser deslocada pelo JavaScript. No toque, a secao que entra sobe com o dedo: a trava de posicao pelo GSAP chegava um quadro atrasada na rolagem nativa e tremia. Cada passagem mantem um efeito proprio sem disputar a posicao. Folga de visibilidade cobre o quadro de atraso. Posicoes das cenas somam alturas (sticky altera offsetTop). Co-Authored-By: Claude Opus 5.5 <[email protected]>
379 lines
14 KiB
TypeScript
379 lines
14 KiB
TypeScript
"use client";
|
||
|
||
import { type RefObject, useEffect } from "react";
|
||
|
||
type Transition = (
|
||
tl: gsap.core.Timeline,
|
||
prev: HTMLElement,
|
||
next: HTMLElement,
|
||
touch: boolean,
|
||
) => void;
|
||
|
||
/*
|
||
* Rolagem como um vídeo: o Lenis suaviza a roda do mouse e o GSAP liga cada passagem de seção à posição
|
||
* da rolagem (rolar para cima volta o "vídeo").
|
||
*
|
||
* Quem segura as seções paradas durante uma passagem:
|
||
* - a que SAI fica com position: sticky (topo = altura da tela − altura da seção): ela para quando o fim
|
||
* dela chega ao fim da tela. Quem mantém isso é o compositor do navegador, na mesma batida da rolagem;
|
||
* - a que ENTRA só fica parada no topo no desktop (deslocamento pelo GSAP). Com a roda do mouse, o Lenis
|
||
* rola e desloca no mesmo quadro. No toque, a rolagem nativa corre em outra thread e o deslocamento
|
||
* chegava um quadro atrasado: em rolagens rápidas a seção tremia. Por isso, no toque, ela sobe com o
|
||
* dedo e a passagem usa só efeitos que não disputam a posição (recorte, transparência, giro, escala).
|
||
*
|
||
* Regras que mantêm tudo estável:
|
||
* - cada tween termina até o tempo 1 da timeline (a trava de posição dura exatamente 1);
|
||
* - nenhum ancestral de um <canvas> recebe scale (o R3F mede o canvas com getBoundingClientRect);
|
||
* - cada cena só fica visível da passagem em que entra até a passagem em que sai (com folga), para não
|
||
* aparecer atrás de transparências e para o navegador não pintar o que está coberto.
|
||
* Os valores são funções para serem recalculados quando a janela muda de tamanho (invalidateOnRefresh).
|
||
*/
|
||
|
||
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`;
|
||
|
||
/** Topo do elemento na página pelo layout (offsetTop ignora os transforms das transições, getBoundingClientRect não). */
|
||
function pageTop(el: HTMLElement) {
|
||
let top = 0;
|
||
for (
|
||
let node: HTMLElement | null = el;
|
||
node;
|
||
node = node.offsetParent as HTMLElement | null
|
||
)
|
||
top += node.offsetTop;
|
||
return top;
|
||
}
|
||
|
||
// a seção que entra fica parada no topo (só desktop, ver o comentário acima)
|
||
const holdNext = (tl: gsap.core.Timeline, next: HTMLElement) =>
|
||
tl.fromTo(next, { y: () => -vh() }, { y: 0 }, 0);
|
||
|
||
// uma linguagem diferente por passagem, na ordem das seções da home
|
||
const TRANSITIONS: Transition[] = [
|
||
// hero → projetos: o mergulho termina no escuro, o hero some e os projetos abrem como tela de cinema
|
||
(tl, prev, next, touch) => {
|
||
tl.fromTo(prev, { autoAlpha: 1 }, { autoAlpha: 0, duration: 0.4 }, 0);
|
||
if (touch) {
|
||
tl.fromTo(
|
||
next,
|
||
{
|
||
opacity: 0.3,
|
||
clipPath: "inset(0% 5% 0% 5% round 28px 28px 0px 0px)",
|
||
},
|
||
{ opacity: 1, clipPath: "inset(0% 0% 0% 0% round 0px 0px 0px 0px)" },
|
||
0,
|
||
);
|
||
return;
|
||
}
|
||
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(
|
||
next,
|
||
{ opacity: 0, clipPath: band(0.36) },
|
||
{ opacity: 1, clipPath: band(1), duration: 0.65 },
|
||
0.35,
|
||
);
|
||
},
|
||
// projetos → modalidades: uma íris se abre enquanto a anterior avança contra a câmera
|
||
(tl, prev, next, touch) => {
|
||
tl.fromTo(
|
||
prev,
|
||
{ scale: 1, opacity: 1, transformOrigin: visibleCenter(prev) },
|
||
{ scale: 1.18, opacity: 0.2 },
|
||
0,
|
||
);
|
||
// no toque a seção sobe com o dedo: a íris nasce do topo dela, como uma bolha subindo
|
||
const center = () => (touch ? "at 50% 0px" : `at 50% ${vh() / 2}px`);
|
||
const radius = () =>
|
||
touch
|
||
? Math.hypot(window.innerWidth / 2, vh())
|
||
: Math.hypot(window.innerWidth / 2, vh() / 2);
|
||
if (!touch) holdNext(tl, next);
|
||
// power1.in: o círculo cresce devagar no começo, sem tomar a tela antes do fim da passagem
|
||
tl.fromTo(
|
||
next,
|
||
{ clipPath: () => `circle(0px ${center()})` },
|
||
{
|
||
clipPath: () => `circle(${radius()}px ${center()})`,
|
||
ease: "power1.in",
|
||
},
|
||
0,
|
||
);
|
||
},
|
||
// modalidades → IA: corte lateral, uma tela empurra a outra
|
||
(tl, prev, next, touch) => {
|
||
if (!touch) 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" }, 0);
|
||
},
|
||
// IA → qualidade: a seção sobe 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
|
||
// desenho do diagrama a cada quadro dobravam o custo de pintura desta passagem. O diagrama se desenha
|
||
// uma vez, em CSS, quando a passagem começa (classe is-drawing, ver onEnter).
|
||
(tl, prev, next, touch) => {
|
||
tl.fromTo(prev, { opacity: 1 }, { opacity: 0.2 }, 0);
|
||
// no desktop ela sobe um pouco mais rápido que a rolagem; no toque, só com o dedo
|
||
if (!touch)
|
||
tl.fromTo(
|
||
next,
|
||
{ y: () => vh() * 0.35 },
|
||
{ y: 0, ease: "power2.out" },
|
||
0,
|
||
);
|
||
},
|
||
// qualidade → sobre: a página entra girando pela esquerda, como uma folha virando (só transform)
|
||
(tl, prev, next, touch) => {
|
||
if (!touch) holdNext(tl, next);
|
||
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" },
|
||
0,
|
||
);
|
||
},
|
||
// sobre → contato: o contato cresce do centro, como um zoom de câmera
|
||
(tl, prev, next, touch) => {
|
||
if (!touch) holdNext(tl, next);
|
||
tl.fromTo(
|
||
prev,
|
||
{ scale: 1, opacity: 1, transformOrigin: visibleCenter(prev) },
|
||
{ scale: 0.92, opacity: 0.2 },
|
||
0,
|
||
)
|
||
.fromTo(
|
||
next,
|
||
{
|
||
scale: touch ? 0.8 : 0.55,
|
||
clipPath: "inset(0% round 56px)",
|
||
transformOrigin: () => (touch ? "50% 0%" : `50% ${vh() / 2}px`),
|
||
},
|
||
{ scale: 1, clipPath: "inset(0% round 0px)", ease: "power2.out" },
|
||
0,
|
||
)
|
||
.fromTo(next, { autoAlpha: 0 }, { autoAlpha: 1, duration: 0.2 }, 0);
|
||
},
|
||
];
|
||
|
||
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(() => {
|
||
const main = mainRef.current;
|
||
if (!main) return;
|
||
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
|
||
let cancelled = false;
|
||
let cleanup = () => {};
|
||
|
||
(async () => {
|
||
const [{ gsap }, { ScrollTrigger }, { default: Lenis }] =
|
||
await Promise.all([
|
||
import("gsap"),
|
||
import("gsap/ScrollTrigger"),
|
||
import("lenis"),
|
||
]);
|
||
if (cancelled) return;
|
||
gsap.registerPlugin(ScrollTrigger);
|
||
|
||
const lenis = new Lenis({ lerp: 0.075, wheelMultiplier: 0.85 });
|
||
lenis.on("scroll", ScrollTrigger.update);
|
||
const tick = (time: number) => lenis.raf(time * 1000);
|
||
gsap.ticker.add(tick);
|
||
gsap.ticker.lagSmoothing(0);
|
||
|
||
// toque: rolagem nativa em outra thread, sem trava de posição pelo JavaScript
|
||
const touch = window.matchMedia(
|
||
"(hover: none) and (pointer: coarse)",
|
||
).matches;
|
||
const scenes = Array.from(main.children) as HTMLElement[];
|
||
// Topo de cada cena somando as alturas das anteriores (as cenas são contíguas): com sticky, o
|
||
// offsetTop de uma cena presa passa a incluir o deslocamento dela.
|
||
const sceneTops = () => {
|
||
let top = pageTop(main);
|
||
return scenes.map((scene) => {
|
||
const current = top;
|
||
top += scene.offsetHeight;
|
||
return current;
|
||
});
|
||
};
|
||
const stick = () => {
|
||
for (const scene of scenes)
|
||
scene.style.top = `${Math.min(0, vh() - scene.offsetHeight)}px`;
|
||
};
|
||
|
||
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: "sticky",
|
||
zIndex: index === 0 ? 30 : index + 1,
|
||
});
|
||
});
|
||
stick();
|
||
TRANSITIONS.forEach((transition, index) => {
|
||
const prev = scenes[index];
|
||
const next = scenes[index + 1];
|
||
if (!prev || !next) return;
|
||
const tl = gsap.timeline({
|
||
defaults: { ease: "none", duration: 1 },
|
||
scrollTrigger: {
|
||
trigger: next,
|
||
start: () => sceneTops()[index + 1] - vh(),
|
||
end: () => sceneTops()[index + 1],
|
||
scrub: true,
|
||
invalidateOnRefresh: true,
|
||
// passagem concluída: o recorte já cobre a tela inteira; sem ele a seção pinta normalmente
|
||
onLeave: () => gsap.set(next, { clipPath: "none" }),
|
||
// diagrama de qualidade: desenha uma vez quando a seção começa a entrar
|
||
onEnter: () => next.classList.add("is-drawing"),
|
||
},
|
||
});
|
||
transition(tl, prev, next, touch);
|
||
});
|
||
}, main);
|
||
|
||
// Visibilidade pela posição da rolagem: cada cena só existe na tela da passagem em que entra até a
|
||
// passagem em que sai. Folga para o quadro de atraso entre a rolagem nativa e este cálculo: um quarto
|
||
// de tela depois da saída e, no toque, meia tela antes da entrada (lá a cena sobe com o dedo; no
|
||
// desktop ela já nasce presa no topo e só pode aparecer quando a passagem começa).
|
||
let frame = 0;
|
||
const syncVisibility = () => {
|
||
frame = 0;
|
||
const y = window.scrollY;
|
||
const tops = sceneTops();
|
||
scenes.forEach((scene, index) => {
|
||
const from =
|
||
index === 0 ? -Infinity : tops[index] - vh() * (touch ? 1.5 : 1);
|
||
const to =
|
||
index === scenes.length - 1
|
||
? Infinity
|
||
: tops[index + 1] + vh() * 0.25;
|
||
const visibility = y >= from && y <= to ? "" : "hidden";
|
||
if (scene.style.visibility !== visibility)
|
||
scene.style.visibility = visibility;
|
||
});
|
||
};
|
||
const queueSync = () => {
|
||
if (!frame) frame = requestAnimationFrame(syncVisibility);
|
||
};
|
||
const onRefresh = () => {
|
||
stick();
|
||
queueSync();
|
||
};
|
||
syncVisibility();
|
||
ScrollTrigger.addEventListener("refresh", onRefresh);
|
||
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) => {
|
||
if (
|
||
event.defaultPrevented ||
|
||
event.button !== 0 ||
|
||
event.metaKey ||
|
||
event.ctrlKey ||
|
||
event.shiftKey ||
|
||
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 url = new URL(link.href);
|
||
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)),
|
||
);
|
||
} catch {}
|
||
if (!target) return;
|
||
event.preventDefault();
|
||
// nunca para no meio de uma passagem: no mínimo onde termina a entrada da cena que contém o alvo;
|
||
// alvos internos descontam o cabeçalho fixo (posição relativa à cena, que não muda se ela estiver presa)
|
||
const index = scenes.findIndex((candidate) =>
|
||
candidate.contains(target),
|
||
);
|
||
const offset =
|
||
Number.parseFloat(
|
||
getComputedStyle(document.documentElement).scrollPaddingTop,
|
||
) || 0;
|
||
const sceneTop = index < 0 ? 0 : sceneTops()[index];
|
||
const top =
|
||
index <= 0
|
||
? 0
|
||
: Math.max(
|
||
sceneTop,
|
||
scenes[index] === target
|
||
? 0
|
||
: sceneTop +
|
||
pageTop(target) -
|
||
pageTop(scenes[index]) -
|
||
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),
|
||
easing: easeInOutCubic,
|
||
// o foco vai depois: antes de a cena entrar ela está invisível e não aceita foco
|
||
onComplete: () => {
|
||
if (!target.hasAttribute("tabindex")) target.tabIndex = -1;
|
||
target.focus({ preventScroll: true });
|
||
},
|
||
});
|
||
};
|
||
document.addEventListener("click", onClick, true);
|
||
|
||
cleanup = () => {
|
||
document.removeEventListener("click", onClick, true);
|
||
ScrollTrigger.removeEventListener("refresh", onRefresh);
|
||
window.removeEventListener("scroll", queueSync);
|
||
cancelAnimationFrame(frame);
|
||
clearTimeout(refreshTimer);
|
||
resizeObserver.disconnect();
|
||
context.revert();
|
||
for (const scene of scenes) {
|
||
scene.style.visibility = "";
|
||
scene.style.top = "";
|
||
}
|
||
gsap.ticker.remove(tick);
|
||
lenis.destroy();
|
||
};
|
||
})();
|
||
|
||
return () => {
|
||
cancelled = true;
|
||
cleanup();
|
||
};
|
||
}, [mainRef]);
|
||
}
|