evandro/portifolio-evandrodevbr
1
0 Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(home): remove a secao animada do notebook

Browse Source 
O mergulho do hero termina direto em Projetos. As capturas de tela seguem nos
cards (ProjectCover). Remove componentes, testes e 670 linhas de CSS do notebook.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
Evandro Fonseca JuniorandClaude Opus 5.5 committed 2026-10-05 01:12:08 -03:00
1 parent 92c602c0ad
commit 44efcfcb20
18 files changed
+30 -3059
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/components/cinematic/useCinematicScroll.ts
+7 -22
View File
@@ -36,35 +36,20 @@ const holdPrev = (tl: gsap.core.Timeline, prev: HTMLElement) =>
// a seção que entra também fica parada no topo: a transição acontece "no lugar"
const holdNext = (tl: gsap.core.Timeline, next: HTMLElement) =>
tl.fromTo(next, { y: () => -vh() }, { y: 0 }, 0);
const stageOf = (section: HTMLElement) =>
section.querySelector<HTMLElement>(".notebook-story-sticky") ?? section;
// uma linguagem diferente por passagem, na ordem das seções da home
const TRANSITIONS: Transition[] = [
// hero → notebook: o mergulho termina no escuro, o hero some e o notebook abre como tela de cinema
// hero → projetos: o mergulho termina no escuro, o hero some e os projetos abrem como tela de cinema
(tl, prev, next) => {
holdPrev(tl, prev);
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(
stageOf(next),
{ opacity: 0, clipPath: "inset(32% 0% 32% 0%)" },
{ opacity: 1, clipPath: "inset(0% 0% 0% 0%)", duration: 0.65 },
0.35,
);
},
// notebook → projetos: a seção sobe como um cartão e o notebook recolhe ao fundo
(tl, prev, next) => {
holdPrev(tl, prev);
tl.fromTo(
stageOf(prev),
{ opacity: 1, clipPath: "inset(0% 0% 0% 0% round 0px)" },
{ opacity: 0.15, clipPath: "inset(8% 6% 8% 6% round 32px)" },
0,
).fromTo(
next,
{ clipPath: "inset(0% 5% 0% 5% round 40px 40px 0px 0px)" },
{ clipPath: "inset(0% 0% 0% 0% round 0px 0px 0px 0px)" },
0,
{ opacity: 0, clipPath: band(0.36) },
{ opacity: 1, clipPath: band(1), duration: 0.65 },
0.35,
);
},
// projetos → modalidades: uma íris abre do centro enquanto a anterior avança contra a câmera
@@ -197,7 +182,7 @@ export function useCinematicScroll(mainRef: RefObject<HTMLElement | null>) {
const scenes = Array.from(main.children) as HTMLElement[];
const context = gsap.context(() => {
scenes.forEach((scene, index) => {
// quem entra fica por cima; o hero, que sai por dissolução, fica por cima do notebook
// 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 });
});
TRANSITIONS.forEach((transition, index) => {