Evandro Fonseca Junior
318a764190
Projetos sobem sobre o palco do hero e o celular tem hero de uma tela sem mergulho; passagens com animation-timeline em CSS, sem GSAP nem motion; troca da vitrine sem texto duplicado; moldura de celular só com pôster e scrub reencodado em 960 px (9,4 para 5,2 MB); 3D monta na primeira interação e para quando parado; transição entre páginas do mesmo segmento; foco em anel duplo; texto de 15 px no celular; código morto removido.
36 lines
1.0 KiB
TypeScript
36 lines
1.0 KiB
TypeScript
"use client";
|
|
|
|
import { usePathname } from "next/navigation";
|
|
import { type ComponentType, useEffect, useState } from "react";
|
|
import { isCoarsePointer, prefersReducedMotion } from "@/lib/device";
|
|
import ScrollProgress from "./ScrollProgress";
|
|
|
|
/**
|
|
* Efeitos por cima da home: a barra de progresso (CSS puro) e o grão de filme. O grão só existe com mouse e sem
|
|
* movimento reduzido, e é importado só nesse caso: no toque o pacote dele nem é baixado, e nada fica montado,
|
|
* invisível, medindo a tela.
|
|
*/
|
|
export default function CinematicOverlays() {
|
|
const isHome = usePathname() === "/";
|
|
const [Grain, setGrain] = useState<ComponentType | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (!isHome || isCoarsePointer() || prefersReducedMotion()) return;
|
|
let alive = true;
|
|
import("./FilmGrain").then((module) => {
|
|
if (alive) setGrain(() => module.default);
|
|
});
|
|
return () => {
|
|
alive = false;
|
|
};
|
|
}, [isHome]);
|
|
|
|
if (!isHome) return null;
|
|
return (
|
|
<>
|
|
{Grain && <Grain />}
|
|
<ScrollProgress />
|
|
</>
|
|
);
|
|
}
|