morfeo 0.0.0-stage → 0.1.0

package/remotion/iconos.ts

@@ -0,0 +1,326 @@
+// Íconos pixel art originales (copiados del motor anterior). 1 = cuadro pintado.
+export const ICONOS: Record<string, {color: string; grid: string[]}> = {
+ "question": {
+  "color": "#FFD400",
+  "grid": [
+   "01110",
+   "10001",
+   "00001",
+   "00110",
+   "00100",
+   "00000",
+   "00100"
+  ]
+ },
+ "warning": {
+  "color": "#FFD400",
+  "grid": [
+   "00000100000",
+   "00001110000",
+   "00011011000",
+   "00011011000",
+   "00111011100",
+   "00111011100",
+   "01111111110",
+   "01111011110",
+   "11111111111"
+  ]
+ },
+ "building": {
+  "color": "#96A5D2",
+  "grid": [
+   "1111111",
+   "1010101",
+   "1111111",
+   "1010101",
+   "1111111",
+   "1010101",
+   "1111111",
+   "1100011",
+   "1100011"
+  ]
+ },
+ "star": {
+  "color": "#FFD400",
+  "grid": [
+   "0001000",
+   "0001000",
+   "0011100",
+   "1111111",
+   "0111110",
+   "0011100",
+   "0110110",
+   "1100011"
+  ]
+ },
+ "alien": {
+  "color": "#78F0C8",
+  "grid": [
+   "0100010",
+   "0011100",
+   "0111110",
+   "1101011",
+   "1111111",
+   "0101010",
+   "1000001"
+  ]
+ },
+ "cloud": {
+  "color": "#FAFAFF",
+  "grid": [
+   "000111000",
+   "001111100",
+   "011111110",
+   "111111111",
+   "111111111",
+   "011111110"
+  ]
+ },
+ "joystick": {
+  "color": "#FF4050",
+  "grid": [
+   "0011100",
+   "0111110",
+   "0011100",
+   "0001000",
+   "0001000",
+   "0001000",
+   "1111111",
+   "1111111",
+   "1111111"
+  ]
+ },
+ "eye": {
+  "color": "#FFFFFF",
+  "grid": [
+   "0011100",
+   "0111110",
+   "1100011",
+   "1101011",
+   "1100011",
+   "0111110",
+   "0011100"
+  ]
+ },
+ "tblock": {
+  "color": "#AA5AFF",
+  "grid": [
+   "111",
+   "010"
+  ]
+ },
+ "car": {
+  "color": "#FF4050",
+  "grid": [
+   "0011110000",
+   "0110011000",
+   "1111111111",
+   "1111111111",
+   "0110000110"
+  ]
+ },
+ "fist": {
+  "color": "#F0BE96",
+  "grid": [
+   "0111100",
+   "1111110",
+   "1111111",
+   "1111111",
+   "0111111",
+   "0011110"
+  ]
+ },
+ "book": {
+  "color": "#BE8250",
+  "grid": [
+   "0111111",
+   "1100001",
+   "1101101",
+   "1100001",
+   "1101101",
+   "1100001",
+   "1111111"
+  ]
+ },
+ "computer": {
+  "color": "#CDCDD7",
+  "grid": [
+   "1111111",
+   "1000001",
+   "1000001",
+   "1000001",
+   "1111111",
+   "0001000",
+   "0111110"
+  ]
+ },
+ "cards": {
+  "color": "#FF4050",
+  "grid": [
+   "0011111",
+   "0010001",
+   "1111101",
+   "1000101",
+   "1010101",
+   "1000111",
+   "1111100"
+  ]
+ },
+ "coin": {
+  "color": "#FFD400",
+  "grid": [
+   "0011100",
+   "0110110",
+   "1101011",
+   "1101011",
+   "1101011",
+   "0110110",
+   "0011100"
+  ]
+ },
+ "truck": {
+  "color": "#CDCDD7",
+  "grid": [
+   "1111100000",
+   "1111111100",
+   "1111110110",
+   "1111111111",
+   "0110000110"
+  ]
+ },
+ "skull": {
+  "color": "#FFFFFF",
+  "grid": [
+   "0111110",
+   "1111111",
+   "1001001",
+   "1001001",
+   "1111111",
+   "0110110",
+   "0101010"
+  ]
+ },
+ "box": {
+  "color": "#C8A064",
+  "grid": [
+   "1111111",
+   "1000001",
+   "1111111",
+   "1010101",
+   "1000001",
+   "1111111"
+  ]
+ },
+ "fog": {
+  "color": "#AAAFBE",
+  "grid": [
+   "000111000",
+   "001111100",
+   "011111110",
+   "111111111",
+   "111111111",
+   "011111110"
+  ]
+ },
+ "pickaxe": {
+  "color": "#AFAFBE",
+  "grid": [
+   "0111110",
+   "1100011",
+   "0001000",
+   "0001000",
+   "0001000",
+   "0001000"
+  ]
+ },
+ "zap": {
+  "color": "#FFD400",
+  "grid": [
+   "0001110",
+   "0011100",
+   "0111000",
+   "1111110",
+   "0001100",
+   "0011000",
+   "0110000"
+  ]
+ },
+ "phone": {
+  "color": "#CDCDD7",
+  "grid": [
+   "11111",
+   "10001",
+   "10001",
+   "10001",
+   "10001",
+   "11111",
+   "11011"
+  ]
+ },
+ "camera": {
+  "color": "#B9B9C3",
+  "grid": [
+   "1111110",
+   "1111111",
+   "1111110",
+   "0011000",
+   "0011000",
+   "1111111"
+  ]
+ },
+ "mustache": {
+  "color": "#784628",
+  "grid": [
+   "0011001100",
+   "0111111110",
+   "1111111111",
+   "1111111111",
+   "1100000011"
+  ]
+ },
+ "cap": {
+  "color": "#FF4050",
+  "grid": [
+   "0011110000",
+   "0111111000",
+   "1111111100",
+   "1111111100",
+   "1111111111"
+  ]
+ },
+ "people": {
+  "color": "#78C8FF",
+  "grid": [
+   "0110110",
+   "0110110",
+   "0000000",
+   "1111111",
+   "1111111"
+  ]
+ },
+ "sword": {
+  "color": "#CDCDE1",
+  "grid": [
+   "0000011",
+   "0000111",
+   "0001110",
+   "1011100",
+   "0111000",
+   "0110000",
+   "1001000"
+  ]
+ },
+ "trophy": {
+  "color": "#FFD400",
+  "grid": [
+   "1111111",
+   "1111111",
+   "0111110",
+   "0111110",
+   "0011100",
+   "0001000",
+   "0011100",
+   "0111110"
+  ]
+ }
+};

package/remotion/index.ts

@@ -0,0 +1,4 @@
+import {registerRoot} from 'remotion';
+import {Root} from './Root';
+
+registerRoot(Root);

package/remotion/motor/Video.tsx

@@ -0,0 +1,119 @@
+// Composición del motor de capas: fondo + cámara + capas por escena, transiciones, subtítulos y marca.
+import React from 'react';
+import {AbsoluteFill, Audio, staticFile} from 'remotion';
+import {Avatar, MarcaContexto, useMarca} from '../piezas';
+import {FPS, W, clamp, easeIO, easeOut, lerp} from '../estilo';
+import type {Datos, Escena} from '../tipos';
+import {Capas} from './capas';
+import {FondoTema, Vineta} from './fondo';
+import {capasDe} from './plantillas';
+import {Subtitulos} from './subtitulos';
+import {mezclar, temaDe, type Tema} from './tema';
+import type {CtxEscena} from './util';
+
+const TRANSICION = 0.35;
+
+/** Valor animado de cámara: número fijo o [inicio, fin] a lo largo de la escena. */
+const rango = (v: unknown, k: number, porDefecto: number) => (Array.isArray(v) ? lerp(v[0], v[1], k) : typeof v === 'number' ? v : porDefecto);
+
+const EscenaVista: React.FC<{e: Escena; t: number; tema: Tema; semilla: string}> = ({e, t, tema, semilla}) => {
+	const marca = useMarca();
+	const p = e.p;
+	const temaEsc = p.tema ? mezclar(tema, p.tema) : tema;
+	const ctx: CtxEscena = {t, dur: e.dur, habla: e.habla, palabras: e.palabras ?? [], tema: temaEsc, semilla: `${semilla}-${e.t0}`};
+	const cam = p.camara ?? {};
+	const k = easeIO(clamp((t - (cam.en ?? 0)) / (cam.duracion ?? e.dur)));
+	const zoom = rango(cam.zoom, k, lerp(1, temaEsc.zoomLento, clamp(t / e.dur)));
+	const cx = rango(cam.x, k, 0);
+	const cy = rango(cam.y, k, 0);
+	const temblor = cam.temblor && t < (cam.temblor.duracion ?? 0.4) ? Math.sin(t * 90) * (cam.temblor.fuerza ?? 12) * (1 - t / (cam.temblor.duracion ?? 0.4)) : 0;
+	return (
+		<AbsoluteFill>
+			<AbsoluteFill style={{transform: `scale(${1 + (zoom - 1) * 0.5}) translate(${-cx * 0.3}px, ${-cy * 0.3}px)`}}>
+				<FondoTema tema={temaEsc} fondo={p.fondo} t={t + e.t0} semilla={semilla} />
+			</AbsoluteFill>
+			<AbsoluteFill style={{transform: `scale(${zoom}) translate(${-cx + temblor}px, ${-cy}px)`, transformOrigin: `${540 + (cam.origen?.[0] ?? 0)}px ${960 + (cam.origen?.[1] ?? 0)}px`}}>
+				<Capas capas={capasDe(e.tipo, p, temaEsc, marca)} ctx={ctx} />
+			</AbsoluteFill>
+		</AbsoluteFill>
+	);
+};
+
+/** Capas fijas del video (HUD): usan el tiempo de todo el video; `cambios` las actualiza por escena o palabra. */
+const Hud: React.FC<{d: Datos; T: number; tema: Tema}> = ({d, T, tema}) => {
+	const palabras = d.escenas.flatMap((e) => (e.palabras ?? []).map(([w, a, b]) => [w, a + e.t0, b + e.t0] as [string, number, number]));
+	const ultima = d.escenas[d.escenas.length - 1];
+	const enCta = ultima?.tipo === 'cta' && T >= ultima.t0;
+	if (enCta) return null;
+	const ctx: CtxEscena = {t: T, dur: d.duracion, habla: [0, d.duracion], palabras, tema, semilla: `${d.id}-hud`, inicios: d.escenas.map((e) => e.t0)};
+	return <Capas capas={d.hud as any} ctx={ctx} />;
+};
+
+/** Etiqueta de la marca en la esquina (avatar + nombre). */
+const MarcaEsquina: React.FC<{tema: Tema}> = ({tema}) => {
+	const marca = useMarca();
+	if (tema.marca === 'ninguna' || (!marca.nombre && !marca.logo)) return null;
+	const claro = tema.colores.texto !== '#FFFFFF';
+	return (
+		<div style={{position: 'absolute', left: 44, top: 120, display: 'flex', alignItems: 'center', gap: 14, opacity: 0.92}}>
+			<div style={{position: 'relative', width: 74, height: 74}}>
+				<Avatar x={0} y={0} size={66} aro={4} />
+			</div>
+			{marca.nombre ? (
+				<div style={{fontFamily: tema.fuentes.texto, fontWeight: 800, fontSize: 34, color: claro ? '#141414' : '#fff', textShadow: claro ? undefined : '0 2px 8px rgba(0,0,0,0.5)'}}>{marca.nombre}</div>
+			) : null}
+		</div>
+	);
+};
+
+export const VideoMotor: React.FC<{d: Datos; T: number; estilos?: Record<string, any>}> = ({d, T, estilos}) => {
+	const tema = temaDe(d.estilo, d.tema, estilos);
+	const n = d.escenas.length;
+	let si = d.escenas.findIndex((e) => T < e.t0 + e.dur);
+	if (si < 0) si = n - 1;
+	const e = d.escenas[si];
+	const t = T - e.t0;
+	const semilla = d.id;
+	const trans = (e.p.transicion ?? tema.transicion) as string;
+	const enTransicion = si > 0 && t < TRANSICION && trans !== 'corte';
+	const k = easeOut(clamp(t / TRANSICION));
+	const prev = si > 0 ? d.escenas[si - 1] : null;
+	let estiloActual: React.CSSProperties = {};
+	let estiloPrevio: React.CSSProperties = {};
+	if (enTransicion) {
+		if (trans === 'fundido') estiloActual = {opacity: k};
+		else if (trans === 'deslizar') {
+			estiloActual = {transform: `translateX(${(1 - k) * W}px)`};
+			estiloPrevio = {transform: `translateX(${-k * W * 0.35}px)`, opacity: 1 - k * 0.5};
+		} else if (trans === 'zoom') {
+			estiloActual = {transform: `scale(${lerp(1.15, 1, k)})`, opacity: k};
+			estiloPrevio = {transform: `scale(${lerp(1, 0.9, k)})`};
+		}
+	}
+	return (
+		<AbsoluteFill style={{background: '#000', overflow: 'hidden'}}>
+			{enTransicion && prev ? (
+				<AbsoluteFill style={estiloPrevio}>
+					<EscenaVista e={prev} t={prev.dur + t} tema={tema} semilla={semilla} />
+				</AbsoluteFill>
+			) : null}
+			<AbsoluteFill style={estiloActual}>
+				<EscenaVista e={e} t={t} tema={tema} semilla={semilla} />
+			</AbsoluteFill>
+			<Vineta fuerza={tema.vineta ?? 0} />
+			{d.hud?.length ? <Hud d={d} T={T} tema={tema} /> : null}
+			{e.tipo !== 'cta' ? <Subtitulos tema={e.p.tema ? mezclar(tema, e.p.tema) : tema} palabras={e.palabras ?? []} t={t} dur={e.dur} /> : null}
+			{e.tipo !== 'cta' ? <MarcaEsquina tema={tema} /> : null}
+		</AbsoluteFill>
+	);
+};
+
+/** Componente raíz de un video del motor de capas (con su audio). */
+export const VideoConAudio: React.FC<{d: Datos; frame: number; marca: any; estilos?: Record<string, any>}> = ({d, frame, marca, estilos}) => (
+	<MarcaContexto.Provider value={marca}>
+		<AbsoluteFill>
+			<VideoMotor d={d} T={frame / FPS} estilos={estilos} />
+			<Audio src={staticFile(d.audio)} />
+		</AbsoluteFill>
+	</MarcaContexto.Provider>
+);