primocode 9.10.0 → 10.0.9

package/lib/estudio/kit/tres.jsx

@@ -0,0 +1,308 @@
+/* kit/tres.jsx — o PRODUTO EM 3D, feito de geometria, sem arquivo de fora.
+ *
+ *   "Crie um vídeo para anunciar um headset — o vídeo deve ter um 3D do fone"
+ *   (30/09), com "sem referências": nada de foto, então o produto é modelado
+ *   aqui, com as peças do three.js, e iluminado como em estúdio.
+ *
+ * {"tipo":"kit","peca":"produto3d","modelo":"fone"|"celular"|"lata"|"caixa",
+ *  "cor":"#1b1c20","corAcento":"#ff5a1f","t":0,"giro":0.35,
+ *  "x":0,"y":0,"largura":1920,"altura":1080}
+ *
+ * O movimento: entra pequeno e girado e assenta com mola (0,9 s), depois gira
+ * devagar e flutua — produto de vitrine, nunca pião. A luz de recorte vem na
+ * cor de acento: é ela que desenha a silhueta no fundo escuro. */
+import React, { useMemo } from 'react';
+import { ThreeCanvas } from '@remotion/three';
+import * as THREE from 'three';
+import { useThree } from '@react-three/fiber';
+import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
+
+/* A LUZ DE ESTÚDIO: sem um ambiente, material brilhante ou metálico não tem o
+   que refletir e sai preto ("a engrenagem parecia uma mancha", 30/09). A sala
+   do three (RoomEnvironment, local, sem rede) vira o reflexo de tudo. */
+function Ambiente({ forca = 1 }) {
+  const { gl, scene } = useThree();
+  useMemo(() => {
+    const pm = new THREE.PMREMGenerator(gl);
+    scene.environment = pm.fromScene(new RoomEnvironment(), 0.04).texture;
+    scene.environmentIntensity = forca;
+    pm.dispose();
+  }, [gl, scene]);
+  return null;
+}
+
+const saida = (x) => 1 - Math.pow(1 - Math.max(0, Math.min(1, x)), 3);
+
+function Material({ cor, brilho = 0.35, metal = 0.25, verniz = 0.8, emissivo }) {
+  return <meshPhysicalMaterial color={cor} roughness={brilho} metalness={metal} clearcoat={verniz} clearcoatRoughness={0.25}
+    {...(emissivo ? { emissive: emissivo, emissiveIntensity: 1.2 } : {})} />;
+}
+
+// O fone: o arco, os deslizadores, as conchas com o anel de acento, as almofadas e o logo aceso.
+function Fone({ cor, acento }) {
+  const R = 1.05;
+  const concha = (lado) => (
+    <group position={[lado * R, -0.12, 0]}>
+      <mesh rotation={[0, 0, Math.PI / 2]}>
+        <cylinderGeometry args={[0.44, 0.46, 0.26, 64]} />
+        <Material cor={cor} brilho={0.3} metal={0.35} />
+      </mesh>
+      <mesh position={[lado * 0.135, 0, 0]} rotation={[0, Math.PI / 2, 0]}>
+        <torusGeometry args={[0.43, 0.035, 24, 96]} />
+        <Material cor={acento} brilho={0.18} metal={0.9} verniz={1} />
+      </mesh>
+      <mesh position={[lado * 0.14, 0, 0]} rotation={[0, Math.PI / 2, 0]}>
+        <circleGeometry args={[0.16, 48]} />
+        <Material cor={acento} brilho={0.2} metal={0.2} emissivo={acento} />
+      </mesh>
+      <mesh position={[-lado * 0.16, 0, 0]} rotation={[0, Math.PI / 2, 0]}>
+        <torusGeometry args={[0.3, 0.11, 32, 96]} />
+        <Material cor="#141416" brilho={0.85} metal={0} verniz={0} />
+      </mesh>
+    </group>
+  );
+  return (
+    <group>
+      <mesh>
+        <torusGeometry args={[R, 0.075, 32, 160, Math.PI]} />
+        <Material cor={cor} brilho={0.28} metal={0.4} />
+      </mesh>
+      <mesh position={[0, -0.06, 0]} scale={[1, 1, 1.6]}>
+        <torusGeometry args={[R - 0.07, 0.05, 24, 140, Math.PI]} />
+        <Material cor="#141416" brilho={0.9} metal={0} verniz={0} />
+      </mesh>
+      {[-1, 1].map((lado) => (
+        <mesh key={lado} position={[lado * R, 0.1, 0]}>
+          <boxGeometry args={[0.07, 0.34, 0.12]} />
+          <Material cor={acento} brilho={0.15} metal={0.95} verniz={1} />
+        </mesh>
+      ))}
+      {concha(-1)}
+      {concha(1)}
+    </group>
+  );
+}
+
+function Celular({ cor, acento }) {
+  return (
+    <group rotation={[0, 0, 0.05]}>
+      <mesh><boxGeometry args={[1.0, 2.05, 0.1]} /><Material cor={cor} brilho={0.22} metal={0.7} /></mesh>
+      <mesh position={[0, 0, 0.052]}><planeGeometry args={[0.92, 1.96]} /><Material cor="#0b0c10" brilho={0.1} metal={0} emissivo="#0d1830" /></mesh>
+      <mesh position={[0, 0.3, 0.054]}><circleGeometry args={[0.22, 48]} /><Material cor={acento} emissivo={acento} /></mesh>
+      <mesh position={[0.26, 0.78, -0.07]} rotation={[Math.PI / 2, 0, 0]}><cylinderGeometry args={[0.14, 0.14, 0.05, 48]} /><Material cor="#222" brilho={0.1} metal={0.9} /></mesh>
+    </group>
+  );
+}
+
+function Lata({ cor, acento }) {
+  return (
+    <group>
+      <mesh><cylinderGeometry args={[0.55, 0.55, 1.9, 96]} /><Material cor={cor} brilho={0.2} metal={0.85} /></mesh>
+      <mesh position={[0, 0.2, 0]}><cylinderGeometry args={[0.556, 0.556, 0.5, 96, 1, true]} /><Material cor={acento} brilho={0.3} metal={0.3} /></mesh>
+      <mesh position={[0, 0.97, 0]}><cylinderGeometry args={[0.5, 0.55, 0.06, 96]} /><Material cor="#c9ccd2" brilho={0.25} metal={1} /></mesh>
+    </group>
+  );
+}
+
+function Caixa({ cor, acento }) {
+  return (
+    <group>
+      <mesh><boxGeometry args={[1.5, 1.5, 1.5]} /><Material cor={cor} brilho={0.3} metal={0.3} /></mesh>
+      <mesh position={[0, 0, 0.752]}><planeGeometry args={[1.0, 0.18]} /><Material cor={acento} emissivo={acento} /></mesh>
+    </group>
+  );
+}
+
+const MODELOS = { fone: Fone, headset: Fone, celular: Celular, phone: Celular, lata: Lata, garrafa: Lata, caixa: Caixa };
+
+export function Produto3D({ el, t }) {
+  const W = el.largura || 1920, H = el.altura || 1080;
+  const t0 = el.t || 0;
+  const tl = Math.max(0, t - t0);
+  const k = saida(tl / 0.9);
+  const Modelo = MODELOS[el.modelo] || Caixa;
+  const cor = el.cor || '#1b1c20';
+  const acento = el.corAcento || '#ff5a1f';
+  const giro = (el.giro0 ?? -0.9) + (1 - k) * 1.4 + tl * (el.giro ?? 0.35);
+  const escala = (el.escala || 1) * (0.72 + 0.28 * k);
+  const flutua = Math.sin(tl * 1.3) * 0.05;
+  return (
+    <div style={{ position: 'absolute', left: el.x || 0, top: el.y || 0, width: W, height: H, opacity: t >= t0 ? Math.min(1, tl / 0.25) : 0 }}>
+      <ThreeCanvas width={W} height={H} camera={{ position: [0, 0.35, 4.4], fov: el.fov || 32 }} gl={{ antialias: true, preserveDrawingBuffer: true }}>
+        <Ambiente forca={0.8} />
+        <hemisphereLight args={['#ffffff', '#202020', 0.5]} />
+        <ambientLight intensity={0.35} />
+        <directionalLight position={[3, 4, 5]} intensity={3.2} />
+        <directionalLight position={[-2, 3, 4]} intensity={1.1} />
+        <directionalLight position={[-4, 1.5, -3]} intensity={3.2} color={acento} />
+        <pointLight position={[0, -2, 3]} intensity={0.8} />
+        <group position={[0, flutua - 0.05, 0]} rotation={[0.18 + (1 - k) * 0.3, giro, 0]} scale={[escala, escala, escala]}>
+          <Modelo cor={cor} acento={acento} />
+        </group>
+        {/* O chão. O gerativo dispensa (semChao): o disco virava uma faixa escura atrás do texto. */}
+        {!el.semChao && (
+          <mesh position={[0, -1.25, 0]} rotation={[-Math.PI / 2, 0, 0]}>
+            <circleGeometry args={[2.4, 64]} />
+            <meshStandardMaterial color="#0a0a0c" roughness={0.35} metalness={0.6} transparent opacity={0.85} />
+          </mesh>
+        )}
+      </ThreeCanvas>
+    </div>
+  );
+}
+
+/* ── OS ÍCONES 3D ─────────────────────────────────────────────────────────
+ * "A gente não tem ícone 3D" (30/09). Nada de emoji-3D de banco: cada ícone
+ * é geometria daqui — forma 2D extrudada com chanfro (raio, coração,
+ * estrela, escudo, balão, play, check, seta, engrenagem) ou primitivas
+ * compostas (bateria, cadeado, relógio, barras, fone, celular, sol, onda) —
+ * no material e na paleta do vídeo (argila, verniz ou metal), com a luz de
+ * recorte na cor de acento.
+ *
+ * {"tipo":"kit","peca":"icone3d","icone":"raio","x":0,"y":0,"tamanho":360,
+ *  "material":"argila","cor":"#efe8da","cor2":"#7a1f1f","luz":"#7a1f1f","t":0} */
+function forma(pts, curvas) {
+  const sh = new THREE.Shape();
+  pts.forEach(([x, y], i) => (i ? sh.lineTo(x, y) : sh.moveTo(x, y)));
+  if (curvas) curvas(sh);
+  sh.closePath();
+  return sh;
+}
+const FORMAS = {
+  raio: () => forma([[0.15, 1], [-0.55, -0.1], [-0.05, -0.1], [-0.25, -1], [0.55, 0.15], [0.05, 0.15], [0.35, 1]]),
+  estrela: () => forma(Array.from({ length: 10 }, (_, i) => { const a = Math.PI / 2 + (i * Math.PI) / 5, r = i % 2 ? 0.42 : 1; return [Math.cos(a) * r, Math.sin(a) * r]; })),
+  play: () => forma([[-0.55, 0.85], [0.85, 0], [-0.55, -0.85]]),
+  check: () => forma([[-0.95, 0.05], [-0.6, 0.4], [-0.25, 0.05], [0.6, 0.9], [0.95, 0.55], [-0.25, -0.65]]),
+  seta: () => forma([[-0.9, 0.22], [0.2, 0.22], [0.2, 0.62], [0.95, 0], [0.2, -0.62], [0.2, -0.22], [-0.9, -0.22]]),
+  coracao: () => {
+    const sh = new THREE.Shape();
+    sh.moveTo(0, -0.9);
+    sh.bezierCurveTo(-0.2, -0.65, -1, -0.2, -1, 0.3);
+    sh.bezierCurveTo(-1, 0.75, -0.6, 0.95, -0.35, 0.95);
+    sh.bezierCurveTo(-0.15, 0.95, 0, 0.8, 0, 0.62);
+    sh.bezierCurveTo(0, 0.8, 0.15, 0.95, 0.35, 0.95);
+    sh.bezierCurveTo(0.6, 0.95, 1, 0.75, 1, 0.3);
+    sh.bezierCurveTo(1, -0.2, 0.2, -0.65, 0, -0.9);
+    return sh;
+  },
+  escudo: () => {
+    const sh = new THREE.Shape();
+    sh.moveTo(0, 1); sh.lineTo(0.85, 0.7); sh.lineTo(0.8, 0);
+    sh.bezierCurveTo(0.75, -0.55, 0.35, -0.85, 0, -1);
+    sh.bezierCurveTo(-0.35, -0.85, -0.75, -0.55, -0.8, 0);
+    sh.lineTo(-0.85, 0.7); sh.closePath();
+    return sh;
+  },
+  balao: () => {
+    const sh = new THREE.Shape();
+    const r = 0.3, x0 = -0.95, x1 = 0.95, y0 = -0.45, y1 = 0.8;
+    sh.moveTo(x0 + r, y1); sh.lineTo(x1 - r, y1); sh.quadraticCurveTo(x1, y1, x1, y1 - r); sh.lineTo(x1, y0 + r);
+    sh.quadraticCurveTo(x1, y0, x1 - r, y0); sh.lineTo(-0.15, y0); sh.lineTo(-0.55, -0.95); sh.lineTo(-0.5, y0);
+    sh.lineTo(x0 + r, y0); sh.quadraticCurveTo(x0, y0, x0, y0 + r); sh.lineTo(x0, y1 - r); sh.quadraticCurveTo(x0, y1, x0 + r, y1);
+    return sh;
+  },
+  engrenagem: () => {
+    const n = 8, pts = [];
+    for (let i = 0; i < n * 4; i++) { const a = (i / (n * 4)) * Math.PI * 2, r = i % 4 < 2 ? 1 : 0.74; pts.push([Math.cos(a) * r, Math.sin(a) * r]); }
+    const sh = forma(pts);
+    const furo = new THREE.Path(); furo.absarc(0, 0, 0.34, 0, Math.PI * 2, true); sh.holes.push(furo);
+    return sh;
+  },
+};
+
+function Mat({ tipo, cor }) {
+  // Metal escovado, bala (verniz) ou argila — os três refletem a sala (Ambiente).
+  if (tipo === 'metal') return <meshPhysicalMaterial color={cor} roughness={0.32} metalness={0.85} clearcoat={0.4} envMapIntensity={1.2} />;
+  if (tipo === 'verniz') return <meshPhysicalMaterial color={cor} roughness={0.18} metalness={0} clearcoat={1} clearcoatRoughness={0.08} sheen={0.3} />;
+  return <meshPhysicalMaterial color={cor} roughness={0.72} metalness={0} clearcoat={0.15} />;   // argila: fosca, macia
+}
+
+function Extrudado({ nome, m, cor }) {
+  const geo = useMemo(() => new THREE.ExtrudeGeometry(FORMAS[nome](), { depth: 0.42, bevelEnabled: true, bevelThickness: 0.12, bevelSize: 0.08, bevelSegments: 4, curveSegments: 18 }), [nome]);
+  return <mesh geometry={geo} position={[0, 0, -0.27]}><Mat tipo={m} cor={cor} /></mesh>;
+}
+
+function Composto({ nome, m, cor, cor2, tl }) {
+  const caixa = (pos, tam, c = cor, rot) => <mesh position={pos} rotation={rot}><boxGeometry args={tam} /><Mat tipo={m} cor={c} /></mesh>;
+  switch (nome) {
+    case 'bateria': return (
+      <group>
+        {caixa([0, 0, 0], [1.7, 0.95, 0.5])}
+        {caixa([0.95, 0, 0], [0.16, 0.4, 0.3])}
+        {[0, 1, 2].map((i) => caixa([-0.52 + i * 0.52, 0, 0.27], [0.36, 0.62, 0.08], i <= Math.floor(tl * 4) % 3 + 0.5 ? cor2 : cor))}
+      </group>
+    );
+    case 'cadeado': return (
+      <group>
+        {caixa([0, -0.3, 0], [1.3, 1.0, 0.5])}
+        <mesh position={[0, 0.25, 0]}><torusGeometry args={[0.42, 0.11, 20, 48, Math.PI]} /><Mat tipo={m} cor={cor2} /></mesh>
+        <mesh position={[0, -0.3, 0.27]} rotation={[Math.PI / 2, 0, 0]}><cylinderGeometry args={[0.1, 0.1, 0.06, 24]} /><Mat tipo={m} cor={cor2} /></mesh>
+      </group>
+    );
+    case 'relogio': return (
+      <group>
+        <mesh rotation={[Math.PI / 2, 0, 0]}><cylinderGeometry args={[1, 1, 0.32, 64]} /><Mat tipo={m} cor={cor} /></mesh>
+        <mesh position={[0, 0, 0.17]}><torusGeometry args={[0.98, 0.07, 16, 64]} /><Mat tipo={m} cor={cor2} /></mesh>
+        <group position={[0, 0, 0.2]} rotation={[0, 0, -tl * 2.2]}>{caixa([0, 0.33, 0], [0.09, 0.66, 0.05], cor2)}</group>
+        <group position={[0, 0, 0.22]} rotation={[0, 0, -tl * 0.4 - 1]}>{caixa([0, 0.22, 0], [0.12, 0.44, 0.05], cor2)}</group>
+      </group>
+    );
+    case 'barras': return (
+      <group>{[0.55, 0.95, 1.5].map((h, i) => caixa([-0.6 + i * 0.6, -0.75 + (h * Math.min(1, tl * 2.4 - i * 0.25 > 0 ? Math.min(1, tl * 2.4 - i * 0.25) : 0.05)) / 2, 0],
+        [0.42, Math.max(0.05, h * Math.min(1, Math.max(0.05, tl * 2.4 - i * 0.25))), 0.42], i === 2 ? cor2 : cor))}</group>
+    );
+    case 'fone': return (
+      <group>
+        <mesh><torusGeometry args={[0.85, 0.11, 20, 64, Math.PI]} /><Mat tipo={m} cor={cor} /></mesh>
+        {[-1, 1].map((l) => <mesh key={l} position={[l * 0.85, -0.25, 0]} rotation={[0, 0, Math.PI / 2]}><cylinderGeometry args={[0.36, 0.36, 0.3, 40]} /><Mat tipo={m} cor={cor2} /></mesh>)}
+      </group>
+    );
+    case 'celular': return (
+      <group>
+        {caixa([0, 0, 0], [1.05, 1.9, 0.16])}
+        {caixa([0, 0.02, 0.085], [0.9, 1.65, 0.02], cor2)}
+      </group>
+    );
+    case 'sol': return (
+      <group rotation={[0, 0, tl * 0.5]}>
+        <mesh><sphereGeometry args={[0.52, 48, 32]} /><Mat tipo={m} cor={cor2} /></mesh>
+        {Array.from({ length: 8 }, (_, i) => <mesh key={i} position={[Math.cos(i * Math.PI / 4) * 0.85, Math.sin(i * Math.PI / 4) * 0.85, 0]} rotation={[0, 0, i * Math.PI / 4 - Math.PI / 2]}>
+          <coneGeometry args={[0.13, 0.36, 20]} /><Mat tipo={m} cor={cor} /></mesh>)}
+      </group>
+    );
+    case 'onda': return (
+      <group>{[0.5, 1.1, 1.7, 1.1, 0.5].map((h, i) => { const k = 0.55 + 0.45 * Math.abs(Math.sin(tl * 5 + i * 1.1)); return caixa([-0.9 + i * 0.45, 0, 0], [0.26, h * k, 0.26], i === 2 ? cor2 : cor); })}</group>
+    );
+    default: return null;
+  }
+}
+
+export const ICONES = [...Object.keys(FORMAS), 'bateria', 'cadeado', 'relogio', 'barras', 'fone', 'celular', 'sol', 'onda'];
+
+export function Icone3D({ el, t }) {
+  const tam = Math.round(el.tamanho || 360);
+  const tl = Math.max(0, t - (el.t || 0));
+  // Entra com mola que passa um pouco (o ícone tem peso) e gira até de frente.
+  const k = 1 - Math.exp(-7 * tl) * Math.cos(9 * tl);
+  const giro = (1 - saida(tl / 0.8)) * -1.6 + Math.sin(tl * 1.1) * 0.35;
+  const m = el.material || 'argila';
+  return (
+    <div style={{ position: 'absolute', left: el.x || 0, top: el.y || 0, width: tam, height: tam, opacity: t >= (el.t || 0) ? Math.min(1, tl / 0.12) : 0 }}>
+      {/* A sombra de contato: o objeto pousa, não flutua solto. */}
+      <div style={{ position: 'absolute', left: '18%', width: '64%', top: '84%', height: '10%', borderRadius: '50%', background: 'radial-gradient(ellipse, rgba(0,0,0,0.42) 0%, transparent 70%)', transform: 'scale(' + (0.8 + 0.2 * k).toFixed(3) + ')' }} />
+      <ThreeCanvas width={tam} height={tam} camera={{ position: [0, 0, 5.2], fov: 30 }} gl={{ antialias: true, preserveDrawingBuffer: true, alpha: true }}>
+        <Ambiente forca={1.1} />
+        <hemisphereLight args={['#ffffff', '#3a3a3a', 0.6]} />
+        <ambientLight intensity={0.25} />
+        <directionalLight position={[2.5, 3, 4]} intensity={2.6} />
+        <directionalLight position={[-3, -1, -2]} intensity={2.4} color={el.luz || '#ffffff'} />
+        <pointLight position={[0, 0, 3]} intensity={0.5} />
+        <group rotation={[0.25 + Math.sin(tl * 0.8) * 0.08, giro, Math.sin(tl * 0.6) * 0.06]} scale={[k, k, k]} position={[0, Math.sin(tl * 1.4) * 0.06, 0]}>
+          {FORMAS[el.icone] ? <Extrudado nome={el.icone} m={m} cor={el.cor || '#eeeeee'} /> : <Composto nome={el.icone} m={m} cor={el.cor || '#eeeeee'} cor2={el.cor2 || el.cor || '#ff5a1f'} tl={tl} />}
+        </group>
+      </ThreeCanvas>
+    </div>
+  );
+}
+
+export const TRES = { produto3d: Produto3D, icone3d: Icone3D };