378 lines
14 KiB
TypeScript
378 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import dynamic from "next/dynamic";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { buildWhatsAppUrl } from "@/lib/whatsapp";
|
|
|
|
const StoryStage3D = dynamic(() => import("./StoryStage3D"), { ssr: false });
|
|
|
|
type Chapter = {
|
|
kicker: string;
|
|
lines: string[];
|
|
body?: string;
|
|
stats?: Array<{ value: number; suffix: string; label: string }>;
|
|
cta?: boolean;
|
|
};
|
|
|
|
/**
|
|
* Reel scrollytelling da home: palco sticky de 100dvh dirigido por uma única
|
|
* timeline GSAP com scrub — o scroll é o controle de play/rebobinar.
|
|
* Sem JS ou com prefers-reduced-motion: capítulos renderizam empilhados,
|
|
* inteiros e legíveis (mesma regra de fail-soft do hero).
|
|
*/
|
|
export default function ScrollStory({
|
|
projectsCount,
|
|
experiencesCount,
|
|
skillsCount,
|
|
}: {
|
|
projectsCount: number;
|
|
experiencesCount: number;
|
|
skillsCount: number;
|
|
}) {
|
|
const chapters: Chapter[] = [
|
|
{
|
|
kicker: "01 — Visão geral",
|
|
lines: ["Software que opera.", "Não só roda."],
|
|
body: "Role para rebobinar a engenharia por trás de cada sistema — a mesma página, agora em tomada contínua.",
|
|
},
|
|
{
|
|
kicker: "02 — Arquitetura",
|
|
lines: ["Da borda", "ao painel."],
|
|
body: "Dispositivo, integração, API e interface girando juntos: contratos claros entre camada física e produto.",
|
|
},
|
|
{
|
|
kicker: "03 — Em produção",
|
|
lines: ["Entrega com", "critério real."],
|
|
stats: [
|
|
{ value: projectsCount, suffix: "", label: "sistemas ativos no portfólio" },
|
|
{ value: experiencesCount, suffix: "", label: "ciclos de produto entregues" },
|
|
{ value: skillsCount, suffix: "", label: "tecnologias em operação" },
|
|
],
|
|
},
|
|
{
|
|
kicker: "04 — Próximo ciclo",
|
|
lines: ["Vamos girar o", "seu próximo sistema."],
|
|
cta: true,
|
|
},
|
|
];
|
|
|
|
const sectionRef = useRef<HTMLElement>(null);
|
|
const progressRef = useRef(0);
|
|
const [engine, setEngine] = useState(false);
|
|
const [webgl, setWebgl] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
if (reduced) return undefined;
|
|
setEngine(true);
|
|
setWebgl(
|
|
!window.matchMedia("(pointer: coarse)").matches && window.innerWidth >= 768,
|
|
);
|
|
return undefined;
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!engine) return undefined;
|
|
const el = sectionRef.current;
|
|
if (!el) return undefined;
|
|
|
|
let cleanup = () => {};
|
|
let cancelled = false;
|
|
|
|
const setup = async () => {
|
|
const [{ gsap }, { ScrollTrigger }] = await Promise.all([
|
|
import("gsap"),
|
|
import("gsap/ScrollTrigger"),
|
|
]);
|
|
if (cancelled) return;
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
const ctx = gsap.context(() => {
|
|
const scenes = gsap.utils.toArray<HTMLElement>("[data-story-scene]");
|
|
const bar = el.querySelector("[data-story-bar]");
|
|
const indexEl = el.querySelector<HTMLElement>("[data-story-index]");
|
|
const hint = el.querySelector("[data-story-hint]");
|
|
|
|
gsap.set(scenes.slice(1), { autoAlpha: 0 });
|
|
gsap.set(scenes, { yPercent: 0 });
|
|
|
|
const tl = gsap.timeline({
|
|
defaults: { ease: "none" },
|
|
scrollTrigger: {
|
|
trigger: el,
|
|
start: "top top",
|
|
end: "bottom bottom",
|
|
scrub: 0.85,
|
|
onUpdate: (self) => {
|
|
progressRef.current = self.progress;
|
|
if (indexEl) {
|
|
const i = Math.min(
|
|
scenes.length,
|
|
Math.floor(self.progress * scenes.length) + 1,
|
|
);
|
|
indexEl.textContent = String(i).padStart(2, "0");
|
|
}
|
|
},
|
|
},
|
|
});
|
|
|
|
const span = 1 / scenes.length;
|
|
scenes.forEach((scene, i) => {
|
|
const at = i * span;
|
|
const inner = scene.querySelectorAll("[data-story-line]");
|
|
const kicker = scene.querySelector("[data-story-kicker]");
|
|
const body = scene.querySelectorAll("[data-story-body]");
|
|
const stats = scene.querySelectorAll("[data-story-stat]");
|
|
|
|
tl.fromTo(
|
|
inner,
|
|
{ yPercent: 118 },
|
|
{ yPercent: 0, duration: span * 0.34, stagger: span * 0.05 },
|
|
at + span * 0.02,
|
|
);
|
|
if (kicker)
|
|
tl.fromTo(
|
|
kicker,
|
|
{ autoAlpha: 0, y: 10 },
|
|
{ autoAlpha: 1, y: 0, duration: span * 0.16 },
|
|
at,
|
|
);
|
|
if (body.length)
|
|
tl.fromTo(
|
|
body,
|
|
{ autoAlpha: 0, y: 22 },
|
|
{ autoAlpha: 1, y: 0, duration: span * 0.22, stagger: span * 0.04 },
|
|
at + span * 0.18,
|
|
);
|
|
if (stats.length)
|
|
tl.fromTo(
|
|
stats,
|
|
{ autoAlpha: 0, y: 26, filter: "blur(6px)" },
|
|
{
|
|
autoAlpha: 1,
|
|
y: 0,
|
|
filter: "blur(0px)",
|
|
duration: span * 0.24,
|
|
stagger: span * 0.05,
|
|
},
|
|
at + span * 0.2,
|
|
);
|
|
// entrada da cena + saída — janelas sobrepostas p/ crossfade contínuo
|
|
tl.fromTo(
|
|
scene,
|
|
{ autoAlpha: 0 },
|
|
{ autoAlpha: 1, duration: span * 0.18 },
|
|
Math.max(0, at - span * 0.08),
|
|
);
|
|
if (i < scenes.length - 1)
|
|
tl.to(scene, { autoAlpha: 0, yPercent: -5, duration: span * 0.18 }, at + span * 0.8);
|
|
|
|
if (stats.length) {
|
|
stats.forEach((statEl) => {
|
|
const numEl = statEl.querySelector<HTMLElement>("[data-story-num]");
|
|
if (!numEl) return;
|
|
const target = Number(numEl.dataset.storyNumTo ?? "0");
|
|
const counter = { v: 0 };
|
|
tl.to(
|
|
counter,
|
|
{
|
|
v: target,
|
|
duration: span * 0.3,
|
|
ease: "power2.out",
|
|
onUpdate: () => {
|
|
numEl.textContent = String(Math.round(counter.v));
|
|
},
|
|
},
|
|
at + span * 0.22,
|
|
);
|
|
});
|
|
}
|
|
});
|
|
|
|
if (bar) tl.fromTo(bar, { scaleX: 0 }, { scaleX: 1, duration: 1 }, 0);
|
|
if (hint) tl.to(hint, { autoAlpha: 0, duration: span * 0.1 }, span * 0.12);
|
|
}, el);
|
|
|
|
cleanup = () => ctx.revert();
|
|
};
|
|
|
|
void setup();
|
|
return () => {
|
|
cancelled = true;
|
|
cleanup();
|
|
};
|
|
}, [engine]);
|
|
|
|
// ---- Fallback estático: capítulos empilhados, conteúdo inteiro ----
|
|
if (!engine) {
|
|
return (
|
|
<section
|
|
id="story"
|
|
className="border-b border-[rgba(255,255,255,.06)] bg-[var(--ink)] text-[var(--paper)]"
|
|
>
|
|
<div className="mx-auto w-full max-w-[1240px] px-6 py-16">
|
|
<div className="font-mono text-[10px] uppercase tracking-[0.14em] text-[var(--slash)]">
|
|
O reel
|
|
</div>
|
|
{chapters.map((ch) => (
|
|
<article key={ch.kicker} className="mt-10 border-l border-[rgba(255,255,255,.1)] pl-6">
|
|
<div className="font-mono text-[10px] uppercase tracking-[0.14em] text-[rgba(244,242,237,.5)]">
|
|
{ch.kicker}
|
|
</div>
|
|
<h3 className="mt-3 font-display text-[clamp(1.6rem,4vw,2.4rem)] font-extrabold leading-[1.05] tracking-[-0.02em]">
|
|
{ch.lines.join(" ")}
|
|
</h3>
|
|
{ch.body && (
|
|
<p className="mt-3 max-w-[58ch] text-[14px] leading-7 text-[rgba(244,242,237,.72)]">
|
|
{ch.body}
|
|
</p>
|
|
)}
|
|
{ch.stats && (
|
|
<ul className="mt-4 flex flex-wrap gap-6">
|
|
{ch.stats.map((s) => (
|
|
<li key={s.label}>
|
|
<div className="font-display text-[2rem] font-extrabold text-[var(--slash)]">
|
|
{s.value}
|
|
{s.suffix}
|
|
</div>
|
|
<div className="text-[12px] text-[rgba(244,242,237,.6)]">{s.label}</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
{ch.cta && (
|
|
<a
|
|
href={buildWhatsAppUrl(
|
|
"Olá! Vi o reel do portfólio e quero conversar sobre um sistema.",
|
|
)}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="mt-5 inline-flex items-center justify-center bg-[var(--slash)] px-6 py-3 font-mono text-[11px] font-bold uppercase tracking-[0.1em] text-[var(--ink)]"
|
|
>
|
|
Conversar agora
|
|
</a>
|
|
)}
|
|
</article>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
// ---- Modo reel: palco sticky com cenas em crossfade ----
|
|
return (
|
|
<section
|
|
id="story"
|
|
ref={sectionRef}
|
|
data-story
|
|
className="relative h-[460vh] bg-[var(--ink)]"
|
|
aria-label="Apresentação em scroll contínuo"
|
|
>
|
|
<div className="sticky top-0 h-[100dvh] w-full overflow-hidden">
|
|
{/* fundo: gradiente radial + brilho do WebGL */}
|
|
<div className="absolute inset-0 bg-[radial-gradient(ellipse_70%_55%_at_62%_45%,rgba(204,255,0,0.07),transparent_65%)]" />
|
|
{webgl && (
|
|
<div className="absolute inset-0">
|
|
<StoryStage3D progress={progressRef} />
|
|
</div>
|
|
)}
|
|
{/* legibilidade do texto sobre a cena */}
|
|
<div className="pointer-events-none absolute inset-0 bg-[linear-gradient(90deg,rgba(10,10,10,0.88)_0%,rgba(10,10,10,0.55)_42%,transparent_70%)]" />
|
|
|
|
{/* cenas */}
|
|
<div className="absolute inset-0">
|
|
{chapters.map((ch, i) => (
|
|
<div
|
|
key={ch.kicker}
|
|
data-story-scene
|
|
className="absolute inset-0 flex items-center"
|
|
style={{ zIndex: 10 - i }}
|
|
>
|
|
<div className="mx-auto w-full max-w-[1240px] px-6 lg:px-16">
|
|
<div className="max-w-[720px]">
|
|
<div
|
|
data-story-kicker
|
|
className="font-mono text-[11px] uppercase tracking-[0.16em] text-[var(--slash)]"
|
|
>
|
|
{ch.kicker}
|
|
</div>
|
|
<h2 className="mt-4 font-display text-[clamp(2.4rem,7vw,5.2rem)] font-extrabold uppercase leading-[0.98] tracking-[-0.03em] text-[var(--paper)]">
|
|
{ch.lines.map((line) => (
|
|
<span key={line} className="block overflow-hidden pb-[0.06em]">
|
|
<span data-story-line className="block will-change-transform">
|
|
{line}
|
|
</span>
|
|
</span>
|
|
))}
|
|
</h2>
|
|
{ch.body && (
|
|
<p
|
|
data-story-body
|
|
className="mt-6 max-w-[54ch] text-[clamp(14px,1.4vw,17px)] leading-8 text-[rgba(244,242,237,.78)]"
|
|
>
|
|
{ch.body}
|
|
</p>
|
|
)}
|
|
{ch.stats && (
|
|
<ul className="mt-8 flex flex-wrap gap-x-12 gap-y-6">
|
|
{ch.stats.map((s) => (
|
|
<li key={s.label} data-story-stat className="min-w-[132px]">
|
|
<div className="font-display text-[clamp(2.2rem,4.5vw,3.4rem)] font-extrabold leading-none text-[var(--slash)]">
|
|
<span data-story-num data-story-num-to={s.value}>
|
|
0
|
|
</span>
|
|
{s.suffix}
|
|
</div>
|
|
<div className="mt-2 font-mono text-[10px] uppercase tracking-[0.12em] text-[rgba(244,242,237,.62)]">
|
|
{s.label}
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
{ch.cta && (
|
|
<a
|
|
data-story-body
|
|
href={buildWhatsAppUrl(
|
|
"Olá! Vi o reel do portfólio e quero conversar sobre um sistema.",
|
|
)}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="pointer-events-auto mt-8 inline-flex items-center justify-center bg-[var(--slash)] px-8 py-4 font-mono text-[11px] font-bold uppercase tracking-[0.1em] text-[var(--ink)] transition hover:bg-white"
|
|
>
|
|
Conversar agora
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* HUD: índice de capítulo + barra de progresso do reel */}
|
|
<div className="pointer-events-none absolute bottom-6 left-6 z-20 lg:left-16">
|
|
<div className="flex items-center gap-3 font-mono text-[10px] uppercase tracking-[0.14em] text-[rgba(244,242,237,.55)]">
|
|
<span data-story-index className="text-[var(--slash)]">
|
|
01
|
|
</span>
|
|
<span>/ 0{chapters.length}</span>
|
|
</div>
|
|
<div className="mt-2 h-px w-40 bg-[rgba(255,255,255,.14)]">
|
|
<div
|
|
data-story-bar
|
|
className="h-full w-full origin-left bg-[var(--slash)]"
|
|
style={{ transform: "scaleX(0)" }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
data-story-hint
|
|
className="pointer-events-none absolute right-6 top-1/2 z-20 -translate-y-1/2 font-mono text-[10px] uppercase tracking-[0.18em] text-[rgba(244,242,237,.5)] lg:right-16"
|
|
>
|
|
↕ scroll = play / rewind
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|