perf(movimento): uma transição, 3D leve e vídeo certo por aparelho

Passagens com fade e 32 px, cena anterior termina em opacidade 0, sem visibility nem clip-path. 3D do hero como fundo ambiente, sob demanda e desligado em toque, aparelho fraco, saveData e movimento reduzido. Lenis fora do toque e salto direto em âncoras distantes. Vitrine só de clientes, até 3 capítulos, fixa só no desktop e carrossel no celular; vídeo só do projeto em cena com preload metadata. Rótulos mono a partir de 12 px e limão só no contato.

app/components/cinematic/HeroFieldScene.tsx

@@ -10,11 +10,10 @@ import {
   useRef,
 } from "react";
 import * as THREE from "three";
+import FramePulse from "./FramePulse";
 
 export type HeroFieldSceneProps = {
   progressRef: RefObject<number>;
-  /** etiquetas em HTML presas às camadas (tela, integrações, dados), posicionadas a cada quadro */
-  labelsRef: RefObject<(HTMLElement | null)[]>;
   visible: boolean;
   onReady: () => void;
   onError: () => void;
@@ -26,8 +25,12 @@ export type HeroFieldSceneProps = {
  * ligados a uma central, com mensagens correndo pelas linhas); embaixo, os DADOS (uma tabela).
  * Colunas de partículas sobem da tabela até a tela: a informação chegando a quem usa.
  * Na entrada, os pontos saem de uma nuvem e se organizam; ao rolar, as camadas se afastam, ficam de
- * frente e a câmera atravessa uma a uma (as legendas de HeroField explicam cada camada nessa hora).
+ * frente e a câmera atravessa uma a uma (as legendas de Hero explicam cada camada nessa hora).
  * Tudo se move no vertex shader; o JavaScript só atualiza alguns uniforms por quadro.
+ *
+ * É um fundo ambiente: HeroField o deixa com pouca opacidade e uma máscara que o afasta do título e das
+ * molduras da direita. O desenho é sob demanda (frameloop "demand"): a cena pede um quadro a 30 por segundo
+ * e a 60 só enquanto algo muda (entrada, rolagem, cursor); sem estar à vista, não desenha nada.
  */
 
 type Layer = 1 | 0 | -1; // 1 = tela, 0 = integrações, -1 = dados
@@ -389,16 +392,9 @@ function cameraFrames(rest: number, spread: number, frame: number) {
   ] as const;
 }
 
-// ponto de cada camada onde a etiqueta se prende (canto direito da frente), na ordem tela, integrações, dados
-const LABEL_ANCHORS: [number, Layer, number][] = [
-  [2.1, 1, 1.4],
-  [1.95, 0, 0.9],
-  [2, -1, 1.3],
-];
-
 function Field({
   progressRef,
-  labelsRef,
+  visible,
   onReady,
   onError,
 }: HeroFieldSceneProps) {
@@ -444,7 +440,6 @@ function Field({
       ray: new THREE.Raycaster(),
       plane: new THREE.Plane(),
       hit: new THREE.Vector3(),
-      anchor: new THREE.Vector3(),
       zero: new THREE.Vector2(),
       target: new THREE.Vector2(),
     }),
@@ -521,12 +516,9 @@ function Field({
       0,
     );
     const settle = 1 - smooth(0, 0.28, p);
-    // em repouso: à direita do texto na tela larga; no celular, mais abaixo, atrás dos botões
-    g.position.set(
-      wide ? 1.7 * settle : 0,
-      (wide ? -0.1 : -rest * tanHalf * 0.38) * settle,
-      0,
-    );
+    // em repouso: ao centro e um pouco abaixo (a máscara de HeroField afasta o desenho do título e das molduras
+    // da direita); no celular, mais abaixo, atrás dos botões
+    g.position.set(0, (wide ? -0.5 : -rest * tanHalf * 0.38) * settle, 0);
     camera.position.z = keyframes(cameraFrames(rest, spreadMax, frameDist), p);
     // foco na próxima camada à frente da câmera (as de trás desfocam como em uma lente)
     const spread = u.uSpread.value;
@@ -561,23 +553,19 @@ function Field({
     u.uMouseAmt.value +=
       (targetAmt - u.uMouseAmt.value) * (1 - Math.exp(-dt * 4));
 
-    // etiquetas: projeta o canto de cada camada na tela e as esconde quando o mergulho começa
-    const labels = labelsRef.current ?? [];
-    const shown = smooth(0.75, 1, u.uIntro.value) * (1 - smooth(0.04, 0.16, p));
-    LABEL_ANCHORS.forEach(([x, layer, z], index) => {
-      const label = labels[index];
-      if (!label) return;
-      helpers.anchor
-        .set(x, layer * u.uSpread.value, z)
-        .applyMatrix4(g.matrixWorld)
-        .project(camera);
-      const px = ((helpers.anchor.x + 1) / 2) * size.width;
-      const py = ((1 - helpers.anchor.y) / 2) * size.height;
-      label.style.transform = `translate3d(${px.toFixed(1)}px, ${py.toFixed(1)}px, 0)`;
-      label.style.opacity = shown.toFixed(3);
-    });
-
     if (++s.frames === 2) onReady();
+
+    // sob demanda: o próximo quadro vem do FramePulse (30 por segundo); a 60 só enquanto algo ainda muda.
+    // A entrada e a rolagem terminam de assentar mesmo depois de o hero sair de cena (o último quadro tem de
+    // ser o final, com tudo já apagado); o cursor só conta com o hero à vista.
+    const settling =
+      u.uIntro.value < 1 ||
+      Math.abs((progressRef.current ?? 0) - s.progress) > 4e-4;
+    const interacting =
+      mouseActive === 1 ||
+      Math.abs(targetAmt - u.uMouseAmt.value) > 0.01 ||
+      s.frames < 3;
+    if (settling || (visible && interacting)) frame.invalidate();
   });
 
   return (
@@ -610,14 +598,15 @@ export default function HeroFieldScene(props: HeroFieldSceneProps) {
         aria-hidden="true"
         style={{ width: "100%", height: "100%" }}
         camera={{ fov: 35, position: [0, 0, 9], near: 0.05, far: 120 }}
-        dpr={[1, 1.75]}
-        frameloop={props.visible ? "always" : "never"}
+        dpr={[1, 1.5]}
+        frameloop="demand"
         gl={{
           alpha: true,
           antialias: false,
           powerPreference: "high-performance",
         }}
       >
+        <FramePulse active={props.visible} />
         <Field {...props} />
       </Canvas>
     </SceneBoundary>