morfeo 0.0.0-stage → 0.1.0

package/remotion/piezas.tsx

@@ -0,0 +1,181 @@
+// Piezas reutilizables: texto con contorno, pastillas, íconos pixel, resplandores y avatar.
+import React, {createContext, useContext} from 'react';
+import {Img, staticFile} from 'remotion';
+import {ANTON, MONO, MONT, NEGRO, ancho} from './estilo';
+import {ICONOS} from './iconos';
+import {MARCA_VACIA, type Marca} from './tipos';
+
+export const MarcaContexto = createContext<Marca>(MARCA_VACIA);
+export const useMarca = () => useContext(MarcaContexto);
+
+type Fuente = 'anton' | 'mont' | 'mono';
+const FAMILIA: Record<Fuente, string> = {anton: ANTON, mont: MONT, mono: MONO};
+
+/** Texto centrado en (x, y) con contorno negro y sombra, como los títulos del canal. */
+export const Texto: React.FC<{
+	x: number;
+	y: number;
+	s: string;
+	size: number;
+	color?: string;
+	stroke?: number;
+	escala?: number;
+	rot?: number; // grados, positivo = contra reloj (como el motor anterior)
+	fuente?: Fuente;
+	peso?: number;
+	sombra?: boolean;
+	ancla?: 'centro' | 'izquierda';
+	opacidad?: number;
+}> = ({x, y, s, size, color = '#fff', stroke = 0, escala = 1, rot = 0, fuente = 'anton', peso, sombra = true, ancla = 'centro', opacidad = 1}) => {
+	if (escala <= 0.01) return null;
+	const tx = ancla === 'centro' ? '-50%' : '0';
+	return (
+		<div
+			style={{
+				position: 'absolute',
+				left: x,
+				top: y,
+				transform: `translate(${tx}, -50%) scale(${escala}) rotate(${-rot}deg)`,
+				transformOrigin: ancla === 'centro' ? 'center' : 'left center',
+				fontFamily: FAMILIA[fuente],
+				fontWeight: peso ?? (fuente === 'mont' ? 800 : fuente === 'mono' ? 700 : 400),
+				fontSize: size,
+				lineHeight: 1,
+				whiteSpace: 'pre',
+				color,
+				opacity: opacidad,
+				WebkitTextStroke: stroke ? `${stroke * 2}px ${NEGRO}` : undefined,
+				paintOrder: 'stroke fill',
+				filter: sombra ? 'drop-shadow(8px 10px 0 rgba(0,0,0,0.55))' : undefined,
+			}}
+		>
+			{s}
+		</div>
+	);
+};
+
+/** Pastilla redonda con texto (etiquetas como "DATO CURIOSO"). */
+export const Pastilla: React.FC<{cx: number; cy: number; s: string; size?: number; fondo: string; color?: string; padx?: number; pady?: number}> = ({
+	cx,
+	cy,
+	s,
+	size = 40,
+	fondo,
+	color = '#fff',
+	padx = 34,
+	pady = 16,
+}) => {
+	const w = ancho(s, MONT, size, 900) + padx * 2;
+	const h = size + pady * 2;
+	return (
+		<div
+			style={{
+				position: 'absolute',
+				left: cx - w / 2,
+				top: cy - h / 2,
+				width: w,
+				height: h,
+				borderRadius: h,
+				background: fondo,
+				color,
+				fontFamily: MONT,
+				fontWeight: 900,
+				fontSize: size,
+				display: 'flex',
+				alignItems: 'center',
+				justifyContent: 'center',
+				whiteSpace: 'pre',
+			}}
+		>
+			{s}
+		</div>
+	);
+};
+
+/** Tamaño de cuadro para que un ícono quepa en una caja de `caja` px. */
+export const tamIcono = (nombre: string, caja: number) => {
+	const g = (ICONOS[nombre] ?? ICONOS.question).grid;
+	return caja / Math.max(g[0].length, g.length * 1.15);
+};
+
+/** Ícono pixel art centrado en (cx, cy); `u` = tamaño de cada cuadro. */
+export const Icono: React.FC<{nombre: string; cx: number; cy: number; u: number; color?: string; sombra?: boolean}> = ({nombre, cx, cy, u, color, sombra = true}) => {
+	if (u <= 0.05) return null;
+	const ic = ICONOS[nombre] ?? ICONOS.question;
+	const rows = ic.grid.length;
+	const cols = ic.grid[0].length;
+	const celdas: [number, number][] = [];
+	ic.grid.forEach((row, r) => [...row].forEach((ch, c) => ch === '1' && celdas.push([c, r])));
+	const w = cols * u + u * 0.3;
+	const h = rows * u + u * 0.3;
+	return (
+		<svg
+			style={{position: 'absolute', left: cx - (cols / 2) * u, top: cy - (rows / 2) * u, overflow: 'visible'}}
+			width={w}
+			height={h}
+			shapeRendering="crispEdges"
+		>
+			{sombra && celdas.map(([c, r]) => <rect key={`s${c}-${r}`} x={c * u + u * 0.22} y={r * u + u * 0.22} width={u + 0.5} height={u + 0.5} fill={NEGRO} />)}
+			{celdas.map(([c, r]) => (
+				<rect key={`${c}-${r}`} x={c * u} y={r * u} width={u + 0.5} height={u + 0.5} fill={color ?? ic.color} />
+			))}
+		</svg>
+	);
+};
+
+/** Resplandor suave (elipse difuminada). */
+export const Resplandor: React.FC<{cx: number; cy: number; rx: number; ry: number; color: string; fuerza: number}> = ({cx, cy, rx, ry, color, fuerza}) =>
+	fuerza <= 0 ? null : (
+		<div
+			style={{
+				position: 'absolute',
+				left: cx - rx * 1.6,
+				top: cy - ry * 1.6,
+				width: rx * 3.2,
+				height: ry * 3.2,
+				background: `radial-gradient(ellipse closest-side, ${color} 0%, ${color} 35%, transparent 100%)`,
+				opacity: fuerza,
+			}}
+		/>
+	);
+
+/** Avatar redondo con aro blanco: el logo de la marca, o su inicial si no hay logo. */
+export const Avatar: React.FC<{x: number; y: number; size: number; aro: number}> = ({x, y, size, aro}) => {
+	const marca = useMarca();
+	return (
+		<div
+			style={{
+				position: 'absolute',
+				left: x,
+				top: y,
+				width: size + aro * 2,
+				height: size + aro * 2,
+				borderRadius: '50%',
+				background: '#fff',
+				padding: aro,
+				boxSizing: 'border-box',
+			}}
+		>
+			{marca.logo ? (
+				<Img src={staticFile(marca.logo)} style={{width: size, height: size, borderRadius: '50%', display: 'block', objectFit: 'cover'}} />
+			) : (
+				<div
+					style={{
+						width: size,
+						height: size,
+						borderRadius: '50%',
+						background: 'linear-gradient(#5A3CAA, #2A1650)',
+						color: '#fff',
+						fontFamily: ANTON,
+						fontSize: size * 0.55,
+						display: 'flex',
+						alignItems: 'center',
+						justifyContent: 'center',
+					}}
+				>
+					{(marca.nombre.trim()[0] || 'M').toUpperCase()}
+				</div>
+			)}
+		</div>
+	);
+};

package/remotion/tipos.ts

@@ -0,0 +1,43 @@
+// Formato de <publico>/v/<id>/datos.json (lo escribe python/preparar.py)
+export type Fila = [string, string, number]; // [texto, color, tamaño]
+
+export type Escena = {
+	tipo: string;
+	p: Record<string, any>; // los campos de la escena en videos.py (colores ya en #hex)
+	t0: number; // inicio de la escena en el video (s)
+	dur: number; // duración (s)
+	habla: [number, number]; // cuándo empieza y termina la voz, relativo a la escena (s)
+	ev: {at?: number; click?: number}; // momento de la palabra `at` / `click`, relativo a la escena (s)
+	palabras?: [string, number, number][]; // [palabra del subtítulo, inicio, fin], relativo a la escena (s)
+};
+
+export type Subtitulo = {a: number; b: number; w: [string, number, number][]};
+
+export type Datos = {
+	id: string;
+	titulo: string;
+	indice: number;
+	duracion: number;
+	estilo?: string; // 'datos-curiosos' (clásico) o un estilo del motor de capas
+	tema?: Record<string, any>; // ajustes del estilo para este video
+	hud?: Record<string, any>[]; // capas fijas sobre todo el video (día, barra de progreso, hora...)
+	audio: string;
+	whisper: number;
+	escenas: Escena[];
+	subtitulos: Subtitulo[];
+};
+
+// Identidad del canal: sale en la etiqueta de arriba y en la escena "cta".
+export type Marca = {
+	nombre: string; // "" = sin etiqueta
+	logo: string | null; // ruta dentro de la carpeta public (la copia morfeo), o null = inicial del nombre
+	redes: string; // línea pequeña bajo el botón de la escena "cta" ("" = nada)
+	seguir: string; // texto del botón de la escena "cta"
+	siguiendo: string; // texto del botón ya pulsado
+	etiqueta: string; // pastilla roja de la escena "title" (se cambia por video con `tag`)
+};
+
+export const MARCA_VACIA: Marca = {nombre: '', logo: null, redes: '', seguir: '+ SEGUIR', siguiendo: 'SIGUIENDO', etiqueta: 'DATO CURIOSO'};
+
+// Props que recibe la composición: morfeo las pasa como inputProps
+export type PropsMorfeo = {videos: Record<string, Datos>; marca: Marca; fuentes?: {familia: string; url: string}[]; estilos?: Record<string, any>};

package/remotion/tres/Capa3D.tsx

@@ -0,0 +1,153 @@
+// Capa 3D con Three.js (vía @remotion/three): fondo de cubos flotando en profundidad
+// e íconos pixel convertidos en voxels que giran y reciben luz.
+// La cámara está calibrada para que en z = 0 una unidad sea un píxel de la pantalla:
+// así los íconos se colocan con las mismas coordenadas (cx, cy) que el resto del diseño.
+import {useThree} from '@react-three/fiber';
+import {noise2D} from '@remotion/noise';
+import {ThreeCanvas} from '@remotion/three';
+import React, {useLayoutEffect, useMemo, useRef} from 'react';
+import {random} from 'remotion';
+import * as THREE from 'three';
+import type {Icono3D} from '../escenas';
+import {H, W, mezclaColor} from '../estilo';
+import {ICONOS} from '../iconos';
+
+const FOV = 30;
+const DIST = H / 2 / Math.tan(((FOV / 2) * Math.PI) / 180);
+const aMundo = (cx: number, cy: number): [number, number] => [cx - W / 2, H / 2 - cy];
+// un objeto auxiliar para cada uso: compartirlo arrastraba escala y giro de un lado al otro
+const auxVoxel = new THREE.Object3D();
+const auxCubo = new THREE.Object3D();
+
+// ---------- ícono voxel ----------
+const celdasDe = (nombre: string) => {
+	const g = (ICONOS[nombre] ?? ICONOS.question).grid;
+	const out: [number, number][] = [];
+	g.forEach((row, r) => [...row].forEach((ch, c) => ch === '1' && out.push([c - g[0].length / 2 + 0.5, g.length / 2 - r - 0.5])));
+	return out;
+};
+
+const Voxel: React.FC<{ic: Icono3D; T: number}> = ({ic, T}) => {
+	const ref = useRef<THREE.InstancedMesh>(null);
+	const celdas = useMemo(() => celdasDe(ic.nombre), [ic.nombre]);
+	const color = ic.color ?? (ICONOS[ic.nombre] ?? ICONOS.question).color;
+	useLayoutEffect(() => {
+		const m = ref.current;
+		if (!m) return;
+		celdas.forEach(([x, y], i) => {
+			auxVoxel.position.set(x, y, 0);
+			auxVoxel.updateMatrix();
+			m.setMatrixAt(i, auxVoxel.matrix);
+		});
+		m.instanceMatrix.needsUpdate = true;
+	}, [celdas]);
+	const [x, y] = aMundo(ic.cx, ic.cy);
+	const fase = ic.fase ?? 0;
+	// balanceo suave + un giro completo al aparecer
+	const rotY = 0.38 * Math.sin(T * 1.6 + fase) + (ic.giro ?? 0) * Math.PI * 2;
+	const rotX = 0.14 * Math.sin(T * 1.1 + fase);
+	return (
+		<group position={[x, y, 0]} rotation={[rotX, rotY, 0]} scale={[ic.u, ic.u, ic.u]}>
+			<instancedMesh ref={ref} args={[undefined, undefined, celdas.length]} castShadow>
+				<boxGeometry args={[0.96, 0.96, 0.96]} />
+				<meshStandardMaterial color={color} roughness={0.45} metalness={0.05} emissive={color} emissiveIntensity={0.12} />
+			</instancedMesh>
+		</group>
+	);
+};
+
+// ---------- cubos de fondo ----------
+const N_CUBOS = 46;
+const CubosFondo: React.FC<{T: number; indice: number; glow: string}> = ({T, indice, glow}) => {
+	const ref = useRef<THREE.InstancedMesh>(null);
+	const datos = useMemo(
+		() =>
+			Array.from({length: N_CUBOS}, (_, i) => {
+				const r = (k: string) => random(`c3d${indice}-${i}-${k}`);
+				const z = -2600 * r('z') - 150; // profundidad
+				const escalaZ = (DIST - z) / DIST; // cuánto más grande se ve el mundo a esa distancia
+				return {
+					x: (r('x') - 0.5) * W * escalaZ * 1.1,
+					y0: (r('y') - 0.5) * H * escalaZ,
+					alto: H * escalaZ + 300,
+					z,
+					s: 14 + r('s') * 34,
+					v: 25 + r('v') * 70,
+					rx: r('rx') * 6,
+					ry: r('ry') * 6,
+					vr: 0.3 + r('vr') * 0.9,
+					c: Math.floor(r('c') * 4),
+				};
+			}),
+		[indice],
+	);
+	const colores = useMemo(() => [0.15, 0.35, 0.55, 0.75].map((k) => new THREE.Color(mezclaColor(glow, '#5A5A82', k))), [glow]);
+	useLayoutEffect(() => {
+		const m = ref.current;
+		if (!m) return;
+		datos.forEach((d, i) => {
+			const y = ((((d.y0 + d.v * T + d.alto / 2) % d.alto) + d.alto) % d.alto) - d.alto / 2;
+			auxCubo.position.set(d.x + 60 * noise2D(`c3d${indice}`, i * 0.37, T * 0.25), y, d.z);
+			auxCubo.rotation.set(d.rx + T * d.vr, d.ry + T * d.vr * 0.7, 0);
+			auxCubo.scale.setScalar(d.s);
+			auxCubo.updateMatrix();
+			m.setMatrixAt(i, auxCubo.matrix);
+			m.setColorAt(i, colores[d.c]);
+		});
+		m.instanceMatrix.needsUpdate = true;
+		if (m.instanceColor) m.instanceColor.needsUpdate = true;
+	});
+	return (
+		<instancedMesh ref={ref} args={[undefined, undefined, N_CUBOS]}>
+			<boxGeometry args={[1, 1, 1]} />
+			<meshStandardMaterial roughness={0.6} transparent opacity={0.85} />
+		</instancedMesh>
+	);
+};
+
+// La cámara de R3F solo toma `position` al crearse: aquí se mueve en cada fotograma.
+const Camara: React.FC<{x: number; y: number}> = ({x, y}) => {
+	const camera = useThree((st) => st.camera);
+	useLayoutEffect(() => {
+		camera.position.set(x, y, DIST);
+		camera.lookAt(x * 0.3, y * 0.3, 0);
+		camera.updateProjectionMatrix();
+	});
+	return null;
+};
+
+// ---------- la capa completa ----------
+export const Capa3D: React.FC<{
+	T: number;
+	indice: number;
+	glow: string;
+	niebla: string;
+	iconos: Icono3D[];
+	salida: number; // 0..1: la escena se va hacia arriba (misma salida que la capa 2D)
+}> = ({T, indice, glow, niebla, iconos, salida}) => {
+	// la cámara se mece apenas, para que se sienta la profundidad
+	const cx = 40 * Math.sin(T * 0.35);
+	const cy = 30 * Math.sin(T * 0.27 + 1);
+	return (
+		<ThreeCanvas
+			width={W}
+			height={H}
+			style={{position: 'absolute', left: 0, top: 0}}
+			gl={{alpha: true, antialias: true, preserveDrawingBuffer: true}}
+			camera={{fov: FOV, near: 10, far: 9000, position: [0, 0, DIST]}}
+			onCreated={({gl}) => gl.setClearColor(0x000000, 0)}
+		>
+			<Camara x={cx} y={cy} />
+			<fog attach="fog" args={[niebla, DIST + 300, DIST + 2700]} />
+			<ambientLight intensity={0.9} />
+			<directionalLight position={[-600, 900, 1600]} intensity={2.4} />
+			<pointLight position={[0, 0, 900]} intensity={1.2} distance={4000} decay={0} color={glow} />
+			<CubosFondo T={T} indice={indice} glow={glow} />
+			<group position={[0, 70 * salida, 0]} scale={1 + 0.05 * salida}>
+				{iconos.map((ic, i) => (
+					<Voxel key={`${ic.nombre}-${i}`} ic={ic} T={T} />
+				))}
+			</group>
+		</ThreeCanvas>
+	);
+};