326 lines
11 KiB
TypeScript
326 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import dynamic from "next/dynamic";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import type { PointerEvent } from "react";
|
|
import { useCallback, useEffect, useId, useRef, useState } from "react";
|
|
import type { HeroSystemLayer, HeroSystemSceneProps } from "./HeroSystemScene";
|
|
|
|
const DynamicScene = dynamic<HeroSystemSceneProps>(
|
|
() => import("./HeroSystemScene"),
|
|
{ ssr: false },
|
|
);
|
|
|
|
const LAYERS: { id: HeroSystemLayer; label: string; description: string }[] = [
|
|
{
|
|
id: "overview",
|
|
label: "Visão geral",
|
|
description:
|
|
"Da tela ao que acontece por trás: interface, integrações e dados trabalhando juntos.",
|
|
},
|
|
{
|
|
id: "interface",
|
|
label: "Interface",
|
|
description:
|
|
"A parte que as pessoas usam. Aqui, uma tela real do NutriScan, projeto do portfólio.",
|
|
},
|
|
{
|
|
id: "integrations",
|
|
label: "Integrações",
|
|
description:
|
|
"Conexões entre sistemas para levar informações de uma etapa da operação à próxima.",
|
|
},
|
|
{
|
|
id: "data",
|
|
label: "Dados",
|
|
description:
|
|
"A base que organiza e guarda as informações de que a operação precisa.",
|
|
},
|
|
];
|
|
|
|
const REST_POSE = { x: 0, y: 0 };
|
|
type Gesture = {
|
|
id: number;
|
|
x: number;
|
|
y: number;
|
|
startPose: number;
|
|
width: number;
|
|
dragging: boolean;
|
|
};
|
|
|
|
export default function HeroSystem() {
|
|
const descriptionId = useId();
|
|
const viewportRef = useRef<HTMLDivElement>(null);
|
|
const frameRef = useRef<number | null>(null);
|
|
const nextPoseRef = useRef(REST_POSE);
|
|
const gestureRef = useRef<Gesture | null>(null);
|
|
const suppressClickRef = useRef(false);
|
|
const [activeLayer, setActiveLayer] = useState<HeroSystemLayer>("overview");
|
|
const [pose, setPose] = useState(REST_POSE);
|
|
const [canRender, setCanRender] = useState(false);
|
|
const [ready, setReady] = useState(false);
|
|
const [failed, setFailed] = useState(false);
|
|
const [visible, setVisible] = useState(false);
|
|
const renderScene = canRender && !failed;
|
|
const sceneActive = renderScene && ready;
|
|
|
|
useEffect(() => {
|
|
const preference = window.matchMedia("(prefers-reduced-motion: reduce)");
|
|
let supported: boolean | undefined;
|
|
const updateCapability = () => {
|
|
if (preference.matches) {
|
|
setCanRender(false);
|
|
setReady(false);
|
|
return;
|
|
}
|
|
if (supported === undefined) {
|
|
if (typeof window.WebGL2RenderingContext === "undefined") {
|
|
supported = false;
|
|
} else {
|
|
try {
|
|
const canvas = document.createElement("canvas");
|
|
const context = canvas.getContext("webgl2");
|
|
supported = context !== null;
|
|
context?.getExtension("WEBGL_lose_context")?.loseContext();
|
|
} catch {
|
|
supported = false;
|
|
}
|
|
}
|
|
}
|
|
setCanRender(supported);
|
|
};
|
|
updateCapability();
|
|
preference.addEventListener("change", updateCapability);
|
|
return () => preference.removeEventListener("change", updateCapability);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const viewport = viewportRef.current;
|
|
if (!viewport) return;
|
|
let intersecting = false;
|
|
const updateVisibility = () => {
|
|
setVisible(intersecting && document.visibilityState === "visible");
|
|
};
|
|
const observer = new IntersectionObserver(([entry]) => {
|
|
intersecting = entry.isIntersecting;
|
|
updateVisibility();
|
|
});
|
|
observer.observe(viewport);
|
|
document.addEventListener("visibilitychange", updateVisibility);
|
|
return () => {
|
|
observer.disconnect();
|
|
document.removeEventListener("visibilitychange", updateVisibility);
|
|
};
|
|
}, []);
|
|
|
|
const queuePose = useCallback((x: number, y: number) => {
|
|
nextPoseRef.current = {
|
|
x: Math.max(-1, Math.min(1, x)),
|
|
y: Math.max(-1, Math.min(1, y)),
|
|
};
|
|
if (frameRef.current !== null) return;
|
|
frameRef.current = window.requestAnimationFrame(() => {
|
|
frameRef.current = null;
|
|
setPose(nextPoseRef.current);
|
|
});
|
|
}, []);
|
|
|
|
const releaseGesture = useCallback(() => {
|
|
const gesture = gestureRef.current;
|
|
gestureRef.current = null;
|
|
const viewport = viewportRef.current;
|
|
if (gesture && viewport?.hasPointerCapture(gesture.id)) {
|
|
viewport.releasePointerCapture(gesture.id);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!sceneActive || !visible) {
|
|
releaseGesture();
|
|
if (frameRef.current !== null)
|
|
window.cancelAnimationFrame(frameRef.current);
|
|
frameRef.current = null;
|
|
nextPoseRef.current = REST_POSE;
|
|
setPose(REST_POSE);
|
|
}
|
|
return () => {
|
|
releaseGesture();
|
|
if (frameRef.current !== null)
|
|
window.cancelAnimationFrame(frameRef.current);
|
|
frameRef.current = null;
|
|
};
|
|
}, [sceneActive, visible, releaseGesture]);
|
|
|
|
const handleReady = useCallback(() => setReady(true), []);
|
|
const handleError = useCallback(() => {
|
|
setFailed(true);
|
|
setReady(false);
|
|
}, []);
|
|
const selectSceneLayer = useCallback((layer: HeroSystemLayer) => {
|
|
if (!suppressClickRef.current) setActiveLayer(layer);
|
|
}, []);
|
|
|
|
const handlePointerDown = (event: PointerEvent<HTMLDivElement>) => {
|
|
if (!sceneActive || !visible || !event.isPrimary || event.button !== 0)
|
|
return;
|
|
suppressClickRef.current = false;
|
|
gestureRef.current = {
|
|
id: event.pointerId,
|
|
x: event.clientX,
|
|
y: event.clientY,
|
|
startPose: nextPoseRef.current.x,
|
|
width: event.currentTarget.clientWidth,
|
|
dragging: false,
|
|
};
|
|
};
|
|
|
|
const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {
|
|
if (!sceneActive || !visible) return;
|
|
const gesture = gestureRef.current;
|
|
if (gesture && gesture.id === event.pointerId) {
|
|
const dx = event.clientX - gesture.x;
|
|
const dy = event.clientY - gesture.y;
|
|
if (!gesture.dragging) {
|
|
if (Math.abs(dy) > 7 && Math.abs(dy) > Math.abs(dx)) {
|
|
releaseGesture();
|
|
return;
|
|
}
|
|
if (Math.abs(dx) < 7) return;
|
|
gesture.dragging = true;
|
|
suppressClickRef.current = true;
|
|
event.currentTarget.setPointerCapture(event.pointerId);
|
|
}
|
|
queuePose(gesture.startPose + (dx / Math.max(gesture.width, 1)) * 3, 0);
|
|
return;
|
|
}
|
|
if (event.pointerType !== "mouse" || event.buttons !== 0) return;
|
|
const bounds = event.currentTarget.getBoundingClientRect();
|
|
queuePose(
|
|
((event.clientX - bounds.left) / Math.max(bounds.width, 1)) * 2 - 1,
|
|
((event.clientY - bounds.top) / Math.max(bounds.height, 1)) * 2 - 1,
|
|
);
|
|
};
|
|
|
|
const cancelGesture = () => {
|
|
releaseGesture();
|
|
if (sceneActive && visible) queuePose(0, 0);
|
|
};
|
|
|
|
return (
|
|
<div className="hero-system min-w-0 w-full">
|
|
<div
|
|
ref={viewportRef}
|
|
className="hero-system-viewport relative isolate h-[350px] w-full overflow-hidden sm:h-[400px] lg:h-[440px]"
|
|
style={{
|
|
touchAction: "pan-y",
|
|
cursor: sceneActive ? "grab" : undefined,
|
|
}}
|
|
onPointerDown={handlePointerDown}
|
|
onPointerMove={handlePointerMove}
|
|
onPointerUp={releaseGesture}
|
|
onPointerCancel={cancelGesture}
|
|
onLostPointerCapture={releaseGesture}
|
|
onPointerLeave={() => {
|
|
if (!gestureRef.current?.dragging) cancelGesture();
|
|
}}
|
|
onClickCapture={(event) => {
|
|
if (suppressClickRef.current) event.stopPropagation();
|
|
}}
|
|
>
|
|
<div
|
|
className={`absolute inset-0 flex items-center px-sp-3 ${sceneActive ? "pointer-events-none opacity-0" : "opacity-100"}`}
|
|
aria-hidden={sceneActive}
|
|
>
|
|
<div className="w-full">
|
|
<div className="mb-sp-3 flex items-center justify-between gap-sp-3 text-[12px] text-white/65">
|
|
<span className="font-medium text-[#f4f2ed]">
|
|
Interface real: NutriScan
|
|
</span>
|
|
</div>
|
|
<div className="relative block aspect-[2/1] overflow-hidden rounded-lg border border-white/15 bg-[#151a16] shadow-[0_24px_70px_rgba(0,0,0,0.45)]">
|
|
<Image
|
|
src="/assets/notebook/nutriscan.webp"
|
|
alt="Tela real do projeto NutriScan."
|
|
fill
|
|
priority
|
|
sizes="(min-width: 1024px) 44vw, 92vw"
|
|
className="object-cover object-top"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{renderScene && (
|
|
<div
|
|
aria-hidden="true"
|
|
className={`absolute inset-0 ${sceneActive ? "opacity-100" : "pointer-events-none opacity-0"}`}
|
|
>
|
|
<DynamicScene
|
|
activeLayer={activeLayer}
|
|
pose={pose}
|
|
visible={visible}
|
|
onReady={handleReady}
|
|
onError={handleError}
|
|
onSelectLayer={selectSceneLayer}
|
|
/>
|
|
</div>
|
|
)}
|
|
{sceneActive && (
|
|
<p className="pointer-events-none absolute inset-x-0 bottom-sp-3 text-center text-[12px] text-white/60">
|
|
<span className="hidden sm:inline">
|
|
Mova ou arraste para explorar
|
|
</span>
|
|
<span className="sm:hidden">
|
|
Arraste para os lados para explorar
|
|
</span>
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="relative px-sp-1 sm:px-sp-3">
|
|
<fieldset
|
|
aria-label="Explorar camadas do sistema"
|
|
className="grid grid-cols-2 gap-1 min-[400px]:grid-cols-4"
|
|
>
|
|
{LAYERS.map((layer) => (
|
|
<button
|
|
key={layer.id}
|
|
type="button"
|
|
aria-pressed={activeLayer === layer.id}
|
|
aria-controls={descriptionId}
|
|
onClick={() => {
|
|
suppressClickRef.current = false;
|
|
setActiveLayer(layer.id);
|
|
if (layer.id === "overview" && sceneActive && visible)
|
|
queuePose(0, 0);
|
|
}}
|
|
className={`min-h-11 rounded-sm px-sp-2 py-sp-2 text-[12px] font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--slash)] motion-reduce:transition-none sm:text-[13px] ${activeLayer === layer.id ? "bg-[var(--slash)] text-[var(--ink)]" : "bg-white/5 text-white/75 hover:bg-white/10 hover:text-white"}`}
|
|
>
|
|
{layer.label}
|
|
</button>
|
|
))}
|
|
</fieldset>
|
|
<p
|
|
id={descriptionId}
|
|
aria-live="polite"
|
|
aria-atomic="true"
|
|
className="mt-sp-3 min-h-[4.5em] text-[13px] leading-[1.5] text-white/75 sm:min-h-[3em]"
|
|
>
|
|
{LAYERS.find((layer) => layer.id === activeLayer)?.description}
|
|
</p>
|
|
<div className="mt-sp-1 flex flex-wrap items-center justify-between gap-x-sp-3">
|
|
<p className="max-w-[230px] text-[11px] leading-[1.5] text-white/55">
|
|
Camadas ilustrativas de um sistema
|
|
</p>
|
|
<Link
|
|
href="/cases/nutriscan"
|
|
className="inline-flex min-h-11 items-center text-[12px] font-medium text-[#f4f2ed] underline decoration-white/35 underline-offset-4 hover:decoration-[var(--slash)] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[var(--slash)]"
|
|
>
|
|
Interface real: NutriScan
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|