feat(story): reel scrollytelling scrubbed por scroll com palco WebGL 3D
This commit is contained in:
Evandro Fonseca Junior committed
1 parent
52960313f0
commit
8be2ba572d
4 files changed
+595
-1
No files matched your search
@@ -9,6 +9,7 @@ import type {
|
|||||||
import Hero from "../Hero";
|
import Hero from "../Hero";
|
||||||
import Projects from "../Projects";
|
import Projects from "../Projects";
|
||||||
import { SectionLoading } from "../SectionLoading";
|
import { SectionLoading } from "../SectionLoading";
|
||||||
|
import ScrollStory from "../story/ScrollStory";
|
||||||
import CinematicSection from "./CinematicSection";
|
import CinematicSection from "./CinematicSection";
|
||||||
|
|
||||||
const About = dynamic(() => import("../About"), {
|
const About = dynamic(() => import("../About"), {
|
||||||
@@ -49,7 +50,7 @@ export default function CinematicHome({
|
|||||||
skillCategories: PortfolioSkillCategory[];
|
skillCategories: PortfolioSkillCategory[];
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<div className="flex min-h-screen flex-col overflow-x-hidden">
|
<div className="flex min-h-screen flex-col overflow-x-clip">
|
||||||
<main className="ds-main">
|
<main className="ds-main">
|
||||||
<Hero />
|
<Hero />
|
||||||
|
|
||||||
@@ -58,6 +59,16 @@ export default function CinematicHome({
|
|||||||
<ScrollVelocityText text="SOFTWARE ENGINEERING" baseVelocity={-1.5} />
|
<ScrollVelocityText text="SOFTWARE ENGINEERING" baseVelocity={-1.5} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Reel scrollytelling: timeline scrubbed pelo scroll (estilo product-page) */}
|
||||||
|
<ScrollStory
|
||||||
|
projectsCount={projects.length}
|
||||||
|
experiencesCount={experiences.length}
|
||||||
|
skillsCount={skillCategories.reduce(
|
||||||
|
(acc, cat) => acc + cat.skills.length,
|
||||||
|
0,
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
<CinematicSection effect="parallax-depth">
|
<CinematicSection effect="parallax-depth">
|
||||||
<About />
|
<About />
|
||||||
</CinematicSection>
|
</CinematicSection>
|
||||||
|
|||||||
@@ -0,0 +1,80 @@
|
|||||||
|
import { render, screen, waitFor } from "@testing-library/react";
|
||||||
|
import ScrollStory from "./ScrollStory";
|
||||||
|
|
||||||
|
// gsap é carregado via import() dinâmico dentro do effect; o contrato testado
|
||||||
|
// aqui é markup do reel (cenas/HUD/alvos), não a timeline — que é verificada
|
||||||
|
// no browser via probe CDP. Mock leve mantém a suíte em jsdom.
|
||||||
|
jest.mock("gsap", () => {
|
||||||
|
const chain = { set: jest.fn(), fromTo: jest.fn(), to: jest.fn() };
|
||||||
|
Object.assign(chain, {
|
||||||
|
set: jest.fn(() => chain),
|
||||||
|
fromTo: jest.fn(() => chain),
|
||||||
|
to: jest.fn(() => chain),
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
gsap: {
|
||||||
|
registerPlugin: jest.fn(),
|
||||||
|
set: jest.fn(),
|
||||||
|
timeline: jest.fn(() => chain),
|
||||||
|
ticker: { add: jest.fn(), remove: jest.fn(), lagSmoothing: jest.fn() },
|
||||||
|
utils: { toArray: jest.fn(() => []) },
|
||||||
|
context: jest.fn((fn: () => void) => {
|
||||||
|
fn();
|
||||||
|
return { revert: jest.fn() };
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
|
jest.mock("gsap/ScrollTrigger", () => ({
|
||||||
|
ScrollTrigger: { getAll: jest.fn(() => []) },
|
||||||
|
}));
|
||||||
|
|
||||||
|
const props = { projectsCount: 5, experiencesCount: 6, skillsCount: 18 };
|
||||||
|
|
||||||
|
function mockMatchMedia(matches: boolean) {
|
||||||
|
Object.defineProperty(window, "matchMedia", {
|
||||||
|
writable: true,
|
||||||
|
value: jest.fn().mockImplementation((query: string) => ({
|
||||||
|
matches,
|
||||||
|
media: query,
|
||||||
|
onchange: null,
|
||||||
|
addListener: jest.fn(),
|
||||||
|
removeListener: jest.fn(),
|
||||||
|
addEventListener: jest.fn(),
|
||||||
|
removeEventListener: jest.fn(),
|
||||||
|
dispatchEvent: jest.fn(),
|
||||||
|
})),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
describe("ScrollStory", () => {
|
||||||
|
afterEach(() => {
|
||||||
|
jest.restoreAllMocks();
|
||||||
|
mockMatchMedia(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("renderiza fallback empilhado com conteúdo real com reduced motion", () => {
|
||||||
|
mockMatchMedia(true);
|
||||||
|
const { container } = render(<ScrollStory {...props} />);
|
||||||
|
// sem palco scrub: capítulos legíveis no fluxo, números reais do portfólio
|
||||||
|
expect(container.querySelector("[data-story]")).not.toBeInTheDocument();
|
||||||
|
expect(container).toHaveTextContent("01 — Visão geral");
|
||||||
|
expect(container).toHaveTextContent("04 — Próximo ciclo");
|
||||||
|
expect(container).toHaveTextContent("5");
|
||||||
|
expect(screen.getAllByText(/sistemas ativos no portfólio/)).toHaveLength(1);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("renderiza o reel com 4 cenas, HUD e índice quando o engine liga", async () => {
|
||||||
|
mockMatchMedia(false);
|
||||||
|
const { container } = render(<ScrollStory {...props} />);
|
||||||
|
await waitFor(() =>
|
||||||
|
expect(container.querySelector("[data-story]")).toBeInTheDocument(),
|
||||||
|
);
|
||||||
|
expect(container.querySelectorAll("[data-story-scene]")).toHaveLength(4);
|
||||||
|
expect(container.querySelector("[data-story-index]")).toHaveTextContent("01");
|
||||||
|
expect(container.querySelector("[data-story-bar]")).toBeInTheDocument();
|
||||||
|
// count-up é alimentado pela timeline: markup carrega o alvo real
|
||||||
|
const num = container.querySelector("[data-story-num]");
|
||||||
|
expect(num?.getAttribute("data-story-num-to")).toBe("5");
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,377 @@
|
|||||||
|
"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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,126 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Canvas, useFrame } from "@react-three/fiber";
|
||||||
|
import { Environment, Lightformer, RoundedBox, Sparkles } from "@react-three/drei";
|
||||||
|
import { useRef } from "react";
|
||||||
|
import * as THREE from "three";
|
||||||
|
|
||||||
|
type ProgressRef = { current: number };
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Palco WebGL do scrollytelling: um "dispositivo" 3D procedural que gira,
|
||||||
|
* inclina e aproxima conforme o progresso do scroll (ref compartilhada — sem
|
||||||
|
* re-render do React por frame). O lerp interno suaviza o scrub em touch.
|
||||||
|
* Composição estilo product-page: dispositivo no terço direito, texto à esquerda.
|
||||||
|
*/
|
||||||
|
function DeviceRig({ progress }: { progress: ProgressRef }) {
|
||||||
|
const rig = useRef<THREE.Group>(null);
|
||||||
|
const halo = useRef<THREE.Mesh>(null);
|
||||||
|
const screenMat = useRef<THREE.MeshStandardMaterial>(null);
|
||||||
|
const glow = useRef<THREE.PointLight>(null);
|
||||||
|
const smooth = useRef(0);
|
||||||
|
|
||||||
|
useFrame((_, dt) => {
|
||||||
|
smooth.current += (progress.current - smooth.current) * Math.min(1, dt * 7);
|
||||||
|
const p = smooth.current;
|
||||||
|
const g = rig.current;
|
||||||
|
if (!g) return;
|
||||||
|
|
||||||
|
// tomada contínua: ~360° + um extra, como um turntable pré-renderizado
|
||||||
|
g.rotation.y = -0.7 + p * Math.PI * 2.2;
|
||||||
|
g.rotation.x = 0.1 + Math.sin(p * Math.PI) * 0.28;
|
||||||
|
g.rotation.z = Math.sin(p * Math.PI * 2) * 0.06;
|
||||||
|
g.position.x = 2.1;
|
||||||
|
g.position.y = Math.sin(p * Math.PI * 2) * 0.22;
|
||||||
|
// respiro de escala durante o reel (zoom de câmera sutil)
|
||||||
|
g.scale.setScalar(0.62 + Math.sin(Math.min(1, p * 1.05) * Math.PI) * 0.1);
|
||||||
|
|
||||||
|
if (halo.current) {
|
||||||
|
halo.current.rotation.z += dt * 0.25;
|
||||||
|
const m = halo.current.material as THREE.MeshBasicMaterial;
|
||||||
|
m.opacity = 0.1 + p * 0.08;
|
||||||
|
}
|
||||||
|
if (screenMat.current) {
|
||||||
|
// tela "liga" cena a cena: 4 pulsos ao longo do reel
|
||||||
|
screenMat.current.emissiveIntensity =
|
||||||
|
0.12 + Math.abs(Math.sin(p * Math.PI * 4)) * 0.5;
|
||||||
|
}
|
||||||
|
if (glow.current) {
|
||||||
|
glow.current.intensity = 2.2 + Math.sin(p * Math.PI * 4) * 1.4;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<group ref={rig}>
|
||||||
|
{/* corpo do dispositivo */}
|
||||||
|
<RoundedBox args={[1.62, 3.32, 0.18]} radius={0.16} smoothness={5}>
|
||||||
|
<meshStandardMaterial color="#141417" metalness={0.92} roughness={0.26} />
|
||||||
|
</RoundedBox>
|
||||||
|
{/* borda luminosa (bezel slash) */}
|
||||||
|
<RoundedBox args={[1.7, 3.4, 0.1]} radius={0.17} smoothness={4} position={[0, 0, -0.01]}>
|
||||||
|
<meshStandardMaterial
|
||||||
|
color="#0a0a0a"
|
||||||
|
emissive="#ccff00"
|
||||||
|
emissiveIntensity={0.22}
|
||||||
|
metalness={0.6}
|
||||||
|
roughness={0.5}
|
||||||
|
/>
|
||||||
|
</RoundedBox>
|
||||||
|
{/* tela emissiva */}
|
||||||
|
<mesh position={[0, 0, 0.098]}>
|
||||||
|
<planeGeometry args={[1.42, 3.06]} />
|
||||||
|
<meshStandardMaterial
|
||||||
|
ref={screenMat}
|
||||||
|
color="#050505"
|
||||||
|
emissive="#ccff00"
|
||||||
|
emissiveIntensity={0.3}
|
||||||
|
toneMapped={false}
|
||||||
|
transparent
|
||||||
|
opacity={0.92}
|
||||||
|
roughness={0.3}
|
||||||
|
metalness={0.1}
|
||||||
|
/>
|
||||||
|
</mesh>
|
||||||
|
{/* halo orbital */}
|
||||||
|
<mesh ref={halo} rotation={[Math.PI / 2.15, 0, 0]} position={[0, -0.1, -0.3]}>
|
||||||
|
<torusGeometry args={[1.9, 0.014, 10, 128]} />
|
||||||
|
<meshBasicMaterial color="#ccff00" transparent opacity={0.2} toneMapped={false} />
|
||||||
|
</mesh>
|
||||||
|
<pointLight ref={glow} position={[0, 0, 1.6]} color="#ccff00" intensity={2.4} distance={6} />
|
||||||
|
</group>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CameraRig({ progress }: { progress: ProgressRef }) {
|
||||||
|
const smooth = useRef(0);
|
||||||
|
useFrame(({ camera }, dt) => {
|
||||||
|
smooth.current += (progress.current - smooth.current) * Math.min(1, dt * 7);
|
||||||
|
const p = smooth.current;
|
||||||
|
// leve steadicam: aproxima no meio da história
|
||||||
|
camera.position.z = 7.8 - Math.sin(Math.min(1, p * 1.1) * Math.PI) * 0.8;
|
||||||
|
camera.position.y = -0.3 + p * 0.6;
|
||||||
|
camera.lookAt(0, 0, 0);
|
||||||
|
});
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function StoryStage3D({ progress }: { progress: ProgressRef }) {
|
||||||
|
return (
|
||||||
|
<Canvas
|
||||||
|
dpr={[1, 1.75]}
|
||||||
|
camera={{ position: [0, 0, 7.8], fov: 30 }}
|
||||||
|
gl={{ antialias: true, alpha: true, powerPreference: "high-performance" }}
|
||||||
|
>
|
||||||
|
<ambientLight intensity={0.32} />
|
||||||
|
<directionalLight position={[4, 6, 5]} intensity={1.1} />
|
||||||
|
<DeviceRig progress={progress} />
|
||||||
|
<CameraRig progress={progress} />
|
||||||
|
<Sparkles count={70} scale={[9, 5.5, 3.2]} size={2.4} speed={0.32} opacity={0.5} color="#ccff00" />
|
||||||
|
<Environment resolution={64} frames={1}>
|
||||||
|
<Lightformer intensity={1.6} position={[0, 4, 4]} scale={[8, 3, 1]} color="#f4f2ed" />
|
||||||
|
<Lightformer intensity={1.1} position={[-5, -1, 3]} scale={[3, 6, 1]} color="#ccff00" />
|
||||||
|
<Lightformer intensity={0.8} position={[5, 0, -4]} scale={[3, 6, 1]} color="#8f8fff" />
|
||||||
|
</Environment>
|
||||||
|
</Canvas>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in new issue
Block a user