/* kit/personagem.jsx — o vídeo GRAVADO em 3D: o set, os personagens e a câmera.
*
* {"tipo":"kit","peca":"personagem","partitura":{…},"largura":1920,"altura":1080}
*
* A partitura vem pronta do lib/estudio/personagem.js (quem fala quando, os
* planos, a aparência, o cenário). Aqui só se desenha, quadro a quadro:
* - a boca segue a voz LETRA POR LETRA (a vogal abre, o "m" fecha, o "o" arredonda);
* - piscada, sobrancelha, sorriso e cabeça que vira para quem fala;
* - gesto de mão nas palavras fortes;
* - a câmera corta entre aberto, ombro, close e detalhe, com o balanço de mão;
* - por cima: legenda grossa palavra por palavra, o nome de quem fala, o
* cartão de destaque, o REC e o grão de filme.
* Tudo é geometria do three.js: nada é baixado. */
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';
const clamp = (x, a = 0, b = 1) => Math.max(a, Math.min(b, x));
const lerp = (a, b, k) => a + (b - a) * k;
const suave = (x) => { const k = clamp(x); return k * k * (3 - 2 * k); };
const mola = (x) => { const k = clamp(x); return 1 - Math.pow(1 - k, 3) * Math.cos(k * 4.2); };
const hash = (n) => { const s = Math.sin(n * 127.1 + 311.7) * 43758.5453; return s - Math.floor(s); };
function Ambiente() {
const { gl, scene } = useThree();
useMemo(() => {
const pm = new THREE.PMREMGenerator(gl);
scene.environment = pm.fromScene(new RoomEnvironment(), 0.04).texture;
scene.environmentIntensity = 0.35;
pm.dispose();
}, [gl, scene]);
return null;
}
function Camera({ pos, alvo, fov }) {
const { camera } = useThree();
camera.position.set(pos[0], pos[1], pos[2]);
camera.fov = fov;
camera.near = 0.05;
camera.far = 60;
camera.lookAt(alvo[0], alvo[1], alvo[2]);
camera.updateProjectionMatrix();
return null;
}
const Mat = ({ c, r = 0.6, m = 0, e, ei = 1, sheen, cc = 0 }) => (
);
/* ── A BOCA ───────────────────────────────────────────────────────────────
Cada letra vira um formato: a = abre (quanto) e w = largura (o "i" estica,
o "o" e o "u" arredondam, m/b/p fecham). Dentro da letra a boca respira
(fecha um pouco entre uma e outra), e três amostras seguidas suavizam. */
const VISEMA = (ch) => {
if (/[aáàãâ]/.test(ch)) return [1, 0.6];
if (/[eéê]/.test(ch)) return [0.6, 0.85];
if (/[iíy]/.test(ch)) return [0.32, 1];
if (/[oóôõ]/.test(ch)) return [0.78, 0.3];
if (/[uúw]/.test(ch)) return [0.45, 0.15];
if (/[mbp]/.test(ch)) return [0, 0.5];
if (/[fv]/.test(ch)) return [0.12, 0.62];
if (/[lnrdt]/.test(ch)) return [0.3, 0.6];
return [0.22, 0.55];
};
function bocaEm(falas, quem, t) {
for (const f of falas) {
if (f.quem !== quem || t < f.de - 0.05 || t > f.ate + 0.05) continue;
const w = f.palavras.find((x) => t >= x.de && t <= x.ate);
if (!w) return [0, 0.55];
const letras = String(w.t).toLowerCase().replace(/[^a-záàãâéêíóôõúçy]/g, '') || 'a';
const p = clamp((t - w.de) / Math.max(0.05, w.ate - w.de), 0, 0.999);
const pos = p * letras.length;
const [a, l] = VISEMA(letras[Math.floor(pos)]);
return [a * (0.62 + 0.38 * Math.sin(Math.PI * (pos % 1))), l];
}
return [0, 0.55];
}
function boca(falas, quem, t) {
const amostras = [0, 1 / 60, 1 / 30].map((d) => bocaEm(falas, quem, t - d));
return [amostras.reduce((s, x) => s + x[0], 0) / 3, amostras.reduce((s, x) => s + x[1], 0) / 3];
}
// O gesto: uma onda em cada palavra comprida (as fortes), alternando a mão.
function gesto(falas, quem, t) {
let esq = 0, dir = 0;
for (const f of falas) {
if (f.quem !== quem || t < f.de - 0.5 || t > f.ate + 1) continue;
f.palavras.forEach((w, k) => {
if (String(w.t).replace(/[^\p{L}\d]/gu, '').length < 6 && !/\d/.test(w.t)) return;
const x = (t - (w.de - 0.15)) / 0.9;
if (x < 0 || x > 1) return;
const b = Math.sin(Math.PI * x);
if (k % 2) esq = Math.max(esq, b); else dir = Math.max(dir, b);
});
}
return [esq, dir];
}
function piscada(quem, t) {
// A cada 2,5 a 5 s, uma piscada de 0,16 s (às vezes dupla).
let base = 0.6 + quem * 1.3, k = 0;
while (base < t + 1) {
const d = t - base;
if (d >= 0 && d < 0.16) return Math.sin((d / 0.16) * Math.PI);
if (hash(quem * 31 + k) < 0.2) { const d2 = t - (base + 0.3); if (d2 >= 0 && d2 < 0.16) return Math.sin((d2 / 0.16) * Math.PI); }
base += 2.5 + hash(quem * 17 + k) * 2.5;
k++;
}
return 0;
}
const EMO = {
neutro: { sobr: 0, sorri: 0.15, palp: 0 },
feliz: { sobr: 0.25, sorri: 0.9, palp: 0.1 },
animado: { sobr: 0.55, sorri: 0.7, palp: 0 },
serio: { sobr: -0.35, sorri: 0, palp: 0.3 },
surpreso: { sobr: 0.9, sorri: 0, palp: -0.2 },
pensativo: { sobr: -0.1, sorri: 0.05, palp: 0.35, inclina: 0.12 },
curioso: { sobr: 0.45, sorri: 0.3, palp: 0, inclina: 0.1 },
};
/* ── A PESSOA ────────────────────────────────────────────────────────────── */
function Cabelo({ estilo, cor }) {
const m = ;
const cap = (
{m}
);
if (estilo === 'careca') return null;
if (estilo === 'cacheado') {
const pts = [];
for (let i = 0; i < 150; i++) {
const y = 1 - (i / 149) * 2, r = Math.sqrt(Math.max(0, 1 - y * y)), a = i * 2.39996;
const z = Math.sin(a) * r;
if (y < 0.38 + 0.36 * z) continue; // a testa e o rosto ficam livres; atrás desce mais
pts.push([Math.cos(a) * r * 0.44, y * 0.44 + 0.03, z * 0.44 - 0.02]);
}
return {cap}{pts.map((p, i) => {m})};
}
return (
{cap}
{estilo === 'topete' && {m}}
{estilo === 'coque' && {m}}
{estilo === 'longo' && (
<>
{m}
{[-1, 1].map((s) => {m})}
)}
);
}
function Olho({ x, olhar, pisca, palp, corIris, pele }) {
// A pálpebra: meia esfera que gira por cima do olho (aberta = -0,15; fechada = 1,5).
const a = lerp(-0.5 + palp * 0.7, 1.5, clamp(pisca));
return (
);
}
function Rosto({ p, est }) {
const pele = p.pele;
const labio = new THREE.Color(pele).lerp(new THREE.Color('#8a3b3b'), 0.35).getStyle();
const e = EMO[est.emocao] || EMO.neutro;
const sobr = e.sobr + est.enfase * 0.35;
const [abre, larg] = est.boca;
const sorri = e.sorri * (1 - abre * 0.6);
const corIris = new THREE.Color(p.corCabelo).lerp(new THREE.Color('#5a3a22'), 0.5).getStyle();
const olho = (x) => ;
return (
{[-1, 1].map((s) => )}
{olho(-0.14)}{olho(0.14)}
{[-1, 1].map((s) => (
0 && e.inclina ? e.inclina * 0.1 : 0), 0.37]}
rotation={[0, 0, Math.PI / 2 + s * (-0.12 + (est.emocao === 'serio' ? 0.25 : 0) - sobr * 0.12)]}>
))}
{abre > 0.25 && }
{sorri > 0.2 && (
)}
{p.barba && }
{p.oculos && (
{[-1, 1].map((s) => )}
)}
);
}
/* ── O ROBÔ ──────────────────────────────────────────────────────────────
Cabeça branca, o visor escuro de vidro (uma segunda elipse que fura a
frente), os olhos acesos que piscam e a boca de barras que dança com a voz. */
function RostoRobo({ p, est, acento }) {
const [abre] = est.boca;
const e = EMO[est.emocao] || EMO.neutro;
const olhoY = 1 - clamp(est.pisca) * 0.88;
const feliz = e.sorri > 0.5 && abre < 0.2;
return (
{[-1, 1].map((s) => (
))}
{[-2, -1, 0, 1, 2].map((k) => {
const h = 0.012 + abre * 0.085 * (1 - Math.abs(k) * 0.18) * (0.75 + 0.25 * Math.sin(est.t * 23 + k * 1.7));
return ;
})}
{[-1, 1].map((s) => (
))}
);
}
/* ── O CORPO, OS BRAÇOS E O PERSONAGEM INTEIRO ───────────────────────────── */
function Braco({ lado, g, cor, pele, robo, t }) {
// Repouso: o antebraço deitado na mesa. Gesto: a mão sobe e mexe um pouco.
const ombroX = lerp(-0.3, -0.62, g) + Math.sin(t * 6 + lado) * 0.05 * g;
const ombroZ = lado * lerp(0.08, 0.28, g);
const cotovelo = lerp(-1.17, -1.75, g) + Math.sin(t * 7.3 + lado * 2) * 0.12 * g;
const pulso = Math.sin(t * 9 + lado) * 0.25 * g;
const tecido = robo ? : ;
return (
{tecido}{tecido}{robo ? : }
);
}
function Personagem({ p, est, acento, pos, giro }) {
const robo = p.tipo === 'robo';
const corpo = robo ? p.cor : p.roupa;
const resp = 1 + Math.sin(est.t * 1.6 + pos[0]) * 0.012;
const [cy, cp, cr] = est.cabeca;
return (
{robo ? : }
{robo
?
: }
{robo ? : }
{robo ? : }
);
}
/* ── O SET ───────────────────────────────────────────────────────────────── */
function Palco({ c, dois, t }) {
const parede = -2.6;
const paineis = [-4.2, -2.8, -1.4, 0, 1.4, 2.8, 4.2];
return (
{paineis.map((x, i) => (
))}
{/* o neon da parede: um anel e um traço na cor de acento, piscando de leve */}
0.1 ? '#ff3b3b' : '#551515'} toneMapped={false} />
{/* a estante com livros e a planta */}
{[0.9, 1.6].map((y) => )}
{[0, 1, 2, 3, 4, 5].map((k) => )}
{Array.from({ length: 9 }, (_, k) => {
const a = k * 2.4, h = 0.75 + hash(k) * 0.7;
return ;
})}
{/* a luminária de chão, acesa */}
{/* a mesa */}
{/* a xícara e o papel: a mesa de quem está gravando */}
);
}
function Microfone({ x, z, giro }) {
return (
);
}
/* ── A CÂMERA ────────────────────────────────────────────────────────────── */
function cameraDe(pl, t, part, aspecto) {
const vert = aspecto < 1;
const el = part.elenco;
const dois = el.length > 1;
const quem = el[pl.alvo] ? pl.alvo : 0;
const lugar = (i) => (dois ? [(el[i].lado || 0) * 0.95, 0, 0] : [0, 0, 0]);
const giroDe = (i) => (dois ? (el[i].lado < 0 ? 0.95 : -0.95) : 0);
const cabeca = (i) => { const p = lugar(i); return [p[0], 1.6, p[2]]; };
const frente = (i) => [Math.sin(giroDe(i)), 0, Math.cos(giroDe(i))];
const k = clamp((t - pl.de) / Math.max(0.5, pl.ate - pl.de));
const fovK = vert ? 1.5 : 1;
let pos, alvo, fov;
if (pl.tipo === 'aberto' || pl.tipo === 'largo') {
fov = (pl.tipo === 'largo' ? 40 : 36) * fovK;
const dist = Math.max(pl.tipo === 'largo' ? 5.4 : 4.4, 1.9 / (Math.tan((fov * Math.PI) / 360) * aspecto));
pos = [0, 1.75, dist]; alvo = [0, 1.25, 0];
} else if (pl.tipo === 'ombro' && dois) {
// Atrás do ombro de quem ouve, afastada para o lado da câmera: a nuca dele fica na borda do quadro.
// Na linha de quem fala até quem ouve, 1,25 m além dele e 1 m para o lado da câmera: só a borda dele entra no quadro.
const o = 1 - quem, h = cabeca(o), s = cabeca(quem);
const d = [h[0] - s[0], h[2] - s[2]], n = Math.hypot(d[0], d[1]) || 1;
const lat = [-d[1] / n, d[0] / n];
const latZ = lat[1] >= 0 ? lat : [-lat[0], -lat[1]];
pos = [h[0] + (d[0] / n) * 1.25 + latZ[0] * 1.0, 1.92, h[2] + (d[1] / n) * 1.25 + latZ[1] * 1.0];
alvo = cabeca(quem); alvo = [alvo[0], 1.5, alvo[2]]; fov = 30 * fovK;
} else {
// No vertical o quadro é estreito: a câmera recua para o rosto caber de lado a lado.
const dist = (pl.tipo === 'detalhe' ? 1.15 : pl.tipo === 'close' ? 1.75 : 2.6) * (vert ? 1.55 : 1);
fov = (pl.tipo === 'detalhe' ? 24 : pl.tipo === 'close' ? 28 : 32) * fovK;
const h = cabeca(quem), f = frente(quem);
// Um pouco de lado (o "três quartos") e da altura dos olhos.
const lado = pl.lado * 0.35;
const dir = [f[0] * Math.cos(lado) - f[2] * Math.sin(lado), 0, f[0] * Math.sin(lado) + f[2] * Math.cos(lado)];
pos = [h[0] + dir[0] * dist, pl.tipo === 'medio' ? 1.62 : 1.66, h[2] + dir[2] * dist];
alvo = [h[0], pl.tipo === 'medio' ? 1.35 : pl.tipo === 'close' ? 1.52 : 1.58, h[2]];
}
// O movimento dentro do plano: entra, sai, desliza — e o balanço de câmera na mão.
const m = suave(k);
if (pl.mov === 'entra' || pl.mov === 'sai') {
const s = pl.mov === 'entra' ? m : 1 - m;
pos = pos.map((v, i) => lerp(v, alvo[i], 0.1 * s));
} else if (pl.mov === 'lateral') {
pos = [pos[0] + (m - 0.5) * 0.3 * pl.lado, pos[1], pos[2]];
}
const mao = [Math.sin(t * 1.3) * 0.012 + Math.sin(t * 3.1) * 0.005, Math.sin(t * 1.1 + 1) * 0.009 + Math.sin(t * 2.7) * 0.004, 0];
return { pos: pos.map((v, i) => v + (mao[i] || 0)), alvo: alvo.map((v, i) => v + (mao[i] || 0) * 0.5), fov };
}
/* ── POR CIMA: legenda, nome, destaque, REC e grão ──────────────────────── */
const FONTE = "'Archivo Black','Arial Black','Helvetica Neue',Impact,system-ui,sans-serif";
function pedacos(palavras) {
const out = [];
let cur = [];
for (const w of palavras) {
cur.push(w);
const letras = cur.reduce((n, x) => n + String(x.t).length + 1, 0);
if (cur.length >= 4 || letras > 22 || /[.,!?;:]$/.test(w.t)) { out.push(cur); cur = []; }
}
if (cur.length) out.push(cur);
return out;
}
function Legenda({ part, t, W, H, acento }) {
const f = part.falas.find((x) => t >= x.de - 0.1 && t <= x.ate + 0.25);
if (!f) return null;
const grupos = pedacos(f.palavras);
const g = grupos.find((gr) => t <= gr[gr.length - 1].ate + 0.15) || grupos[grupos.length - 1];
const t0 = g[0].de;
const tam = Math.round(Math.min(W, H) * (H > W ? 0.075 : 0.058));
return (
W ? 0.7 : 0.8), display: 'flex', justifyContent: 'center', flexWrap: 'wrap', gap: `0 ${tam * 0.42}px`, padding: `0 ${W * 0.08}px` }}>
{g.map((w, i) => {
const on = t >= w.de;
const agora = t >= w.de && t < w.ate;
const k = mola((t - Math.max(t0, w.de - 0.06)) / 0.22);
return (
{w.t}
);
})}
);
}
function Nome({ part, t, W, H, acento }) {
if (!part.elenco.some((e) => e.rotulo)) return null;
// O nome entra na primeira fala de cada um, por 2,4 s.
const vistos = new Set();
let tag = null;
for (const f of part.falas) {
if (vistos.has(f.quem)) continue;
vistos.add(f.quem);
if (t >= f.de && t <= f.de + 2.4) tag = { f, k: t - f.de };
}
if (!tag) return null;
const p = part.elenco[tag.f.quem];
const entra = suave(tag.k / 0.35), sai = 1 - suave((tag.k - 2.0) / 0.4);
const tam = Math.round(Math.min(W, H) * 0.032);
return (