125 lines
4.0 KiB
TypeScript
125 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
|
|
/**
|
|
* ReelDirector — motor de animação "vídeo-ao-rolar" para a página inteira.
|
|
*
|
|
* Contrato (declarativo, via atributos data-*):
|
|
* [data-reel="left|right|top|bottom|zoom|fade"]
|
|
* elemento entra em scrub contínuo: rolar p/ baixo avança, p/ cima REBOBINA.
|
|
* [data-reel-stagger="left|right|top|bottom|zoom|fade"]
|
|
* container: os FILHOS DIRETOS entram em cascata no mesmo trilho.
|
|
* data-reel-start="top 88%" data-reel-end="top 26%" (opcional: janela do scrub)
|
|
* data-reel-distance="64" (opcional: px de deslocamento)
|
|
*
|
|
* Nunca one-shot — tudo ligado ao progresso do scroll, como o reel do hero.
|
|
* prefers-reduced-motion: nada é inicializado; conteúdo fica no fluxo natural.
|
|
*/
|
|
|
|
type Direction = "left" | "right" | "top" | "bottom" | "zoom" | "fade";
|
|
|
|
const DISTANCE = 64;
|
|
|
|
function fromVars(dir: Direction, dist: number) {
|
|
const base = { opacity: 0, x: 0, y: 0, scale: 1, filter: "blur(0px)" };
|
|
if (dir === "left") return { ...base, x: -dist };
|
|
if (dir === "right") return { ...base, x: dist };
|
|
if (dir === "top") return { ...base, y: -dist * 0.75 };
|
|
if (dir === "bottom") return { ...base, y: dist };
|
|
if (dir === "zoom") return { ...base, scale: 1.28, filter: "blur(6px)" };
|
|
return { ...base, scale: 1.02 };
|
|
}
|
|
|
|
const TO_VARS = {
|
|
opacity: 1,
|
|
x: 0,
|
|
y: 0,
|
|
scale: 1,
|
|
filter: "blur(0px)",
|
|
ease: "none",
|
|
};
|
|
|
|
export default function ReelDirector() {
|
|
const alive = useRef(true);
|
|
|
|
useEffect(() => {
|
|
alive.current = true;
|
|
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches)
|
|
return undefined;
|
|
|
|
let teardown = () => {};
|
|
|
|
const boot = async () => {
|
|
const [{ gsap }, { ScrollTrigger }] = await Promise.all([
|
|
import("gsap"),
|
|
import("gsap/ScrollTrigger"),
|
|
]);
|
|
if (!alive.current) return;
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
const ctx = gsap.context(() => {
|
|
const scan = () => {
|
|
for (const el of document.querySelectorAll<HTMLElement>(
|
|
"[data-reel]:not([data-reel-init])",
|
|
)) {
|
|
el.dataset.reelInit = "1";
|
|
const dir = (el.dataset.reel || "bottom") as Direction;
|
|
const dist = Number(el.dataset.reelDistance || DISTANCE);
|
|
gsap.fromTo(el, fromVars(dir, dist), {
|
|
...TO_VARS,
|
|
scrollTrigger: {
|
|
trigger: el,
|
|
start: el.dataset.reelStart || "top 88%",
|
|
end: el.dataset.reelEnd || "top 26%",
|
|
scrub: 0.6,
|
|
},
|
|
});
|
|
}
|
|
for (const container of document.querySelectorAll<HTMLElement>(
|
|
"[data-reel-stagger]:not([data-reel-init])",
|
|
)) {
|
|
container.dataset.reelInit = "1";
|
|
const dir = (container.dataset.reelStagger || "bottom") as Direction;
|
|
const dist = Number(container.dataset.reelDistance || DISTANCE);
|
|
const children = Array.from(container.children) as HTMLElement[];
|
|
if (children.length === 0) continue;
|
|
gsap.fromTo(
|
|
children,
|
|
fromVars(dir, dist),
|
|
{
|
|
...TO_VARS,
|
|
stagger: { each: 0.09 },
|
|
scrollTrigger: {
|
|
trigger: container,
|
|
start: container.dataset.reelStart || "top 85%",
|
|
end: container.dataset.reelEnd || "top 25%",
|
|
scrub: 0.6,
|
|
},
|
|
},
|
|
);
|
|
}
|
|
};
|
|
|
|
scan();
|
|
// seções chegam via next/dynamic depois do boot — observa nós novos
|
|
const observer = new MutationObserver(() => scan());
|
|
observer.observe(document.body, { childList: true, subtree: true });
|
|
|
|
teardown = () => {
|
|
observer.disconnect();
|
|
ctx.revert();
|
|
};
|
|
});
|
|
};
|
|
|
|
void boot();
|
|
return () => {
|
|
alive.current = false;
|
|
teardown();
|
|
};
|
|
}, []);
|
|
|
|
return null;
|
|
}
|