morfeo 0.1.1 → 0.1.2

package/remotion/motor/escenarios/Cuarto.tsx

@@ -0,0 +1,103 @@
+// Cuarto de Neto (serie). Dos partes para meter al personaje en medio:
+//   {tipo: 'componente', nombre: 'Cuarto'}                         pared, ventana, póster, calendario
+//   {tipo: 'componente', nombre: 'Cuarto', props: {parte: 'frente'}} escritorio, monitor, teclado RGB y ramen
+import React from 'react';
+
+type Props = {t: number; parte?: 'fondo' | 'frente'; dia?: number};
+
+const W = 1080;
+const H = 1920;
+
+function Fondo({t, dia}: {t: number; dia?: number}) {
+	return (
+		<svg width={W} height={H} viewBox={`0 0 ${W} ${H}`}>
+			<defs>
+				<pattern id="rayas" width="90" height="10" patternUnits="userSpaceOnUse">
+					<rect width="90" height="10" fill="#5B3FA0" />
+					<rect width="45" height="10" fill="#6447AE" />
+				</pattern>
+				<linearGradient id="noche" x1="0" y1="0" x2="0" y2="1">
+					<stop offset="0" stopColor="#0E1840" />
+					<stop offset="1" stopColor="#2D2A6E" />
+				</linearGradient>
+			</defs>
+			<rect width={W} height={H} fill="url(#rayas)" />
+			{/* zoclo y piso */}
+			<rect y={1520} width={W} height={400} fill="#3B2A63" />
+			<rect y={1510} width={W} height={18} fill="#2A1D4A" />
+			{/* ventana */}
+			<g transform="translate(70 360)">
+				<rect width={420} height={520} rx={10} fill="url(#noche)" stroke="#2A1D4A" strokeWidth={18} />
+				<circle cx={300} cy={130} r={50} fill="#FFF4D6" />
+				<circle cx={322} cy={118} r={46} fill="#141E4E" />
+				{Array.from({length: 14}, (_, i) => (
+					<circle key={i} cx={40 + ((i * 97) % 340)} cy={60 + ((i * 53) % 400)} r={3} fill="#fff" opacity={0.4 + 0.6 * Math.abs(Math.sin(t * 1.5 + i))} />
+				))}
+				<rect x={200} y={0} width={18} height={520} fill="#2A1D4A" />
+				<rect x={0} y={250} width={420} height={18} fill="#2A1D4A" />
+				{/* cortinas que se mecen */}
+				<path d={`M-40 -20 Q${30 + Math.sin(t) * 8} 260 -10 560 L-60 560 L-60 -20 Z`} fill="#C0304A" />
+				<path d={`M460 -20 Q${390 + Math.sin(t + 1) * 8} 260 430 560 L480 560 L480 -20 Z`} fill="#C0304A" />
+			</g>
+			{/* póster de Ari */}
+			<g transform="translate(700 330) rotate(4)">
+				<rect width={300} height={380} rx={8} fill="#FFFFFF" />
+				<rect x={18} y={18} width={264} height={290} fill="#FF9EC7" />
+				<circle cx={150} cy={150} r={70} fill="#FFE1EF" />
+				<path d="M150 120 l-28 -28 a20 20 0 0 1 28 -18 a20 20 0 0 1 28 18z" fill="#FF3B7F" transform={`translate(0 ${Math.sin(t * 3) * 4})`} />
+				<text x={150} y={355} textAnchor="middle" fontSize={44} fontWeight={900} fill="#FF3B7F" fontFamily="Montserrat, sans-serif">
+					ARI
+				</text>
+				<rect x={120} y={-14} width={60} height={26} fill="rgba(255,255,255,0.7)" />
+			</g>
+			{/* calendario con días tachados */}
+			<g transform="translate(560 780)">
+				<rect width={220} height={230} rx={8} fill="#FFFFFF" />
+				<rect width={220} height={56} rx={8} fill="#E5484D" />
+				<text x={110} y={40} textAnchor="middle" fontSize={32} fontWeight={900} fill="#fff" fontFamily="Montserrat, sans-serif">
+					{dia != null ? `DÍA ${dia}` : 'NOV'}
+				</text>
+				{Array.from({length: 20}, (_, i) => (
+					<text key={i} x={22 + (i % 5) * 42} y={90 + Math.floor(i / 5) * 38} fontSize={30} fontWeight={900} fill="#E5484D" fontFamily="sans-serif">
+						✕
+					</text>
+				))}
+			</g>
+		</svg>
+	);
+}
+
+function Frente({t}: {t: number}) {
+	const colores = ['#FF4D6D', '#FFD60A', '#4CC9F0', '#80ED99', '#B517FF', '#FF8C42'];
+	return (
+		<svg width={W} height={H} viewBox={`0 0 ${W} ${H}`}>
+			{/* luz del monitor sobre el escritorio */}
+			<ellipse cx={540} cy={1600} rx={520} ry={120} fill="rgba(120,200,255,0.12)" />
+			{/* escritorio */}
+			<rect x={-20} y={1640} width={1120} height={60} rx={10} fill="#2B2238" />
+			<rect x={-20} y={1690} width={1120} height={260} fill="#1E1828" />
+			{/* teclado RGB */}
+			<g transform="translate(250 1590)">
+				<rect width={580} height={70} rx={14} fill="#15121C" />
+				{Array.from({length: 24}, (_, i) => (
+					<rect key={i} x={14 + (i % 12) * 46} y={10 + Math.floor(i / 12) * 28} width={40} height={22} rx={5} fill={colores[Math.floor(i + t * 6) % colores.length]} opacity={0.9} />
+				))}
+			</g>
+			{/* ramen */}
+			<g transform="translate(70 1500)">
+				<path d="M0 60 L130 60 L112 150 L18 150 Z" fill="#FFFFFF" stroke="#D9D3C7" strokeWidth={4} />
+				<rect x={10} y={80} width={110} height={26} fill="#E5484D" />
+				<path d={`M50 60 Q${44 + Math.sin(t * 2) * 6} 20 56 -10`} stroke="rgba(255,255,255,0.5)" strokeWidth={6} fill="none" strokeLinecap="round" />
+				<rect x={84} y={-30} width={8} height={110} rx={4} fill="#C99A5B" transform="rotate(14 88 30)" />
+				<rect x={98} y={-30} width={8} height={110} rx={4} fill="#C99A5B" transform="rotate(20 102 30)" />
+			</g>
+			{/* mouse */}
+			<ellipse cx={920} cy={1630} rx={38} ry={22} fill="#15121C" />
+			<rect x={916} y={1612} width={8} height={14} rx={3} fill={colores[Math.floor(t * 4) % colores.length]} />
+		</svg>
+	);
+}
+
+export function Cuarto({t, parte = 'fondo', dia}: Props) {
+	return parte === 'frente' ? <Frente t={t} /> : <Fondo t={t} dia={dia} />;
+}

package/remotion/motor/escenarios/Noche.tsx

@@ -0,0 +1,163 @@
+// Escenarios nocturnos para historias, 1080×1920:
+//   lugar: 'departamento'  sala oscura: ventana con ciudad, sillón, lámpara y tele que parpadea
+//   lugar: 'tunel'         túnel del metro: arcos, rieles, luces que pasan y el tren que llega (llegar: 'palabra')
+//   lugar: 'pasillo'       pasillo con la puerta: luz bajo la puerta y golpes que la sacuden (golpe: 'palabra')
+import React from 'react';
+
+type Props = {t: number; cuando: (en: unknown) => number; lugar?: 'departamento' | 'tunel' | 'pasillo'; llegar?: string; golpe?: string};
+
+const W = 1080;
+const H = 1920;
+const clamp = (x: number) => Math.max(0, Math.min(1, x));
+const suave = (x: number) => {
+	const c = clamp(x);
+	return c * c * (3 - 2 * c);
+};
+const azar = (n: number) => {
+	const x = Math.sin(n * 91.7) * 43758.5453;
+	return x - Math.floor(x);
+};
+
+function Departamento({t}: {t: number}) {
+	const tele = 0.55 + 0.45 * Math.abs(Math.sin(t * 7) * Math.sin(t * 3.3));
+	return (
+		<svg width={W} height={H} viewBox={`0 0 ${W} ${H}`}>
+			<rect width={W} height={H} fill="#121A2B" />
+			<rect y={1480} width={W} height={440} fill="#0C111C" />
+			{/* ventana con ciudad */}
+			<g transform="translate(110 520)">
+				<rect width={460} height={560} fill="#1B2A4A" stroke="#0A0F1A" strokeWidth={16} />
+				{Array.from({length: 8}, (_, i) => {
+					const x = 10 + i * 58;
+					const h = 160 + azar(i) * 260;
+					return (
+						<g key={i}>
+							<rect x={x} y={560 - h} width={50} height={h} fill="#0E1730" />
+							{Array.from({length: 10}, (_, j) =>
+								azar(i * 10 + j) > 0.55 ? <rect key={j} x={x + 8 + (j % 3) * 14} y={560 - h + 14 + Math.floor(j / 3) * 26} width={8} height={12} fill="#FFD27A" opacity={0.5 + 0.5 * Math.abs(Math.sin(t + i + j))} /> : null,
+							)}
+						</g>
+					);
+				})}
+				<rect x={222} width={16} height={560} fill="#0A0F1A" />
+			</g>
+			{/* luz de la lámpara */}
+			<circle cx={880} cy={980} r={420} fill="rgba(255,190,110,0.12)" />
+			<rect x={872} y={900} width={16} height={600} fill="#2A2420" />
+			<path d="M800 900 L960 900 L920 800 L840 800 Z" fill="#E8B35C" />
+			<ellipse cx={880} cy={1500} rx={90} ry={16} fill="#1C1814" />
+			{/* tele que parpadea */}
+			<rect x={600} y={1180} width={260} height={160} rx={8} fill="#0A0F1A" />
+			<rect x={612} y={1192} width={236} height={136} fill={`rgba(120,170,255,${0.35 * tele})`} />
+			<circle cx={730} cy={1260} r={360} fill={`rgba(120,170,255,${0.06 * tele})`} />
+			{/* sillón */}
+			<g transform="translate(140 1300)">
+				<rect width={560} height={180} rx={40} fill="#3A2E3A" />
+				<rect y={-120} width={560} height={150} rx={40} fill="#45374A" />
+				<rect x={-30} y={-60} width={90} height={250} rx={36} fill="#3A2E3A" />
+				<rect x={500} y={-60} width={90} height={250} rx={36} fill="#3A2E3A" />
+			</g>
+		</svg>
+	);
+}
+
+function Tunel({t, tTren}: {t: number; tTren: number}) {
+	const k = suave((t - tTren) / 2.4); // el tren se acerca
+	const escala = 0.2 + k * 0.85;
+	return (
+		<svg width={W} height={H} viewBox={`0 0 ${W} ${H}`}>
+			<defs>
+				<radialGradient id="fondoTunel" cx="0.5" cy="0.48" r="0.6">
+					<stop offset="0" stopColor="#2C3446" />
+					<stop offset="1" stopColor="#07090E" />
+				</radialGradient>
+			</defs>
+			<rect width={W} height={H} fill="url(#fondoTunel)" />
+			{/* arcos del túnel hacia el fondo */}
+			{Array.from({length: 7}, (_, i) => {
+				const d = ((i + (t * 0.6) % 1) / 7);
+				const s = 0.15 + (1 - d) * 1.1;
+				return <ellipse key={i} cx={540} cy={900} rx={520 * s} ry={600 * s} fill="none" stroke="#3B4560" strokeWidth={10 * s} opacity={0.25 + (1 - d) * 0.6} />;
+			})}
+			{/* luces de pared que pasan */}
+			{Array.from({length: 6}, (_, i) => {
+				const d = ((i / 6 + t * 0.35) % 1);
+				const s = 0.1 + d * 1.2;
+				return (
+					<g key={i} opacity={d}>
+						<circle cx={540 - 470 * s} cy={900 - 120 * s} r={10 * s + 3} fill="#FFE29A" />
+						<circle cx={540 + 470 * s} cy={900 - 120 * s} r={10 * s + 3} fill="#FFE29A" />
+					</g>
+				);
+			})}
+			{/* rieles */}
+			<path d="M520 960 L250 1920 M560 960 L830 1920" stroke="#5A6378" strokeWidth={14} />
+			{Array.from({length: 10}, (_, i) => {
+				const d = (i / 10 + t * 0.5) % 1;
+				const y = 960 + d * d * 960;
+				const a = 30 + d * 420;
+				return <rect key={i} x={540 - a} y={y} width={a * 2} height={6 + d * 18} fill="#2A2F3C" />;
+			})}
+			{/* tren que llega con faros */}
+			{t >= tTren ? (
+				<g transform={`translate(540 ${930 + k * 160}) scale(${escala})`}>
+					<circle r={700} fill="rgba(255,240,200,0.08)" />
+					<rect x={-330} y={-380} width={660} height={700} rx={70} fill="#D9DEE8" />
+					<rect x={-280} y={-310} width={560} height={240} rx={26} fill="#1A2233" />
+					<rect x={-330} y={-40} width={660} height={60} fill="#E5484D" />
+					<text x={0} y={190} textAnchor="middle" fontSize={130} fontWeight={900} fill="#1A2233" fontFamily="Montserrat, sans-serif">
+						B
+					</text>
+					<circle cx={-210} cy={220} r={46} fill="#FFF6C8" />
+					<circle cx={210} cy={220} r={46} fill="#FFF6C8" />
+					<circle cx={-210} cy={220} r={120} fill="rgba(255,246,200,0.25)" />
+					<circle cx={210} cy={220} r={120} fill="rgba(255,246,200,0.25)" />
+				</g>
+			) : null}
+		</svg>
+	);
+}
+
+function Pasillo({t, tGolpe}: {t: number; tGolpe: number}) {
+	// tres golpes: la puerta se sacude y la luz de abajo parpadea
+	const g = t - tGolpe;
+	const golpe = g >= 0 && g < 1.6 ? [0, 0.45, 0.9].reduce((s, d) => s + Math.max(0, 1 - Math.abs(g - d) * 8), 0) : 0;
+	const sacudida = Math.sin(t * 80) * 10 * golpe;
+	const luz = 0.6 + 0.4 * Math.abs(Math.sin(t * 2.3)) - golpe * 0.3;
+	return (
+		<svg width={W} height={H} viewBox={`0 0 ${W} ${H}`}>
+			<rect width={W} height={H} fill="#151B26" />
+			{/* paredes en perspectiva */}
+			<path d="M0 0 L250 380 L250 1500 L0 1920 Z" fill="#1C2433" />
+			<path d="M1080 0 L830 380 L830 1500 L1080 1920 Z" fill="#1C2433" />
+			<path d="M250 1500 L830 1500 L1080 1920 L0 1920 Z" fill="#2A2018" />
+			{/* tablas del piso */}
+			{Array.from({length: 7}, (_, i) => (
+				<path key={i} d={`M${250 + i * 97} 1500 L${-60 + i * 200} 1920`} stroke="#1E1610" strokeWidth={4} />
+			))}
+			{/* cuadros en la pared */}
+			<rect x={60} y={700} width={120} height={160} fill="#2A3346" stroke="#3A4560" strokeWidth={8} transform="skewY(18)" />
+			<rect x={900} y={980} width={120} height={160} fill="#2A3346" stroke="#3A4560" strokeWidth={8} transform="skewY(-18)" />
+			{/* puerta */}
+			<g transform={`translate(${sacudida} 0)`}>
+				<rect x={320} y={540} width={440} height={960} fill="#0F1520" />
+				<rect x={340} y={560} width={400} height={930} fill="#22314A" stroke="#33466A" strokeWidth={10} />
+				<rect x={380} y={610} width={320} height={360} fill="none" stroke="#33466A" strokeWidth={8} />
+				<rect x={380} y={1030} width={320} height={400} fill="none" stroke="#33466A" strokeWidth={8} />
+				<circle cx={690} cy={1060} r={18} fill="#D9B45A" />
+				<circle cx={540} cy={760} r={14} fill="#0A0E16" stroke="#3A4560" strokeWidth={5} />
+			</g>
+			{/* luz por debajo de la puerta */}
+			<rect x={340} y={1488} width={400} height={12} fill="#FFD66B" opacity={luz} />
+			<path d={`M340 1500 L740 1500 L${900} 1920 L${180} 1920 Z`} fill={`rgba(255,214,107,${0.12 * luz})`} />
+			{/* sombra de pies bajo la puerta */}
+			{g > 0 ? <rect x={500} y={1489} width={80} height={10} fill="#0A0A0A" opacity={0.85} /> : null}
+		</svg>
+	);
+}
+
+export function Noche({t, cuando, lugar = 'departamento', llegar, golpe}: Props) {
+	if (lugar === 'tunel') return <Tunel t={t} tTren={llegar ? cuando(llegar) : 0.3} />;
+	if (lugar === 'pasillo') return <Pasillo t={t} tGolpe={golpe ? cuando(golpe) : 1} />;
+	return <Departamento t={t} />;
+}

package/remotion/motor/escenarios/index.tsx

@@ -0,0 +1,26 @@
+// Escenarios ilustrados incluidos (1080×1920), para que un personaje nunca quede sobre un fondo vacío.
+//   fondo: {tipo: 'escenario', nombre: 'cuarto'}            como fondo de escena (o del estilo)
+//   {tipo: 'escenario', nombre: 'cuarto', parte: 'frente'}   como capa (por ejemplo, el escritorio delante del personaje)
+// Todos se animan con el tiempo de la escena (estrellas, cortinas, luces, tren, golpes en la puerta...).
+import React from 'react';
+import {Bosque} from './Bosque';
+import {Cuarto} from './Cuarto';
+import {Noche} from './Noche';
+
+type P = {t: number; dur: number; cuando: (en: unknown) => number} & Record<string, any>;
+
+export const ESCENARIOS: Record<string, React.FC<P>> = {
+	bosque: (p) => <Bosque {...p} />,
+	cuarto: (p) => <Cuarto {...p} />,
+	departamento: (p) => <Noche {...p} lugar="departamento" />,
+	tunel: (p) => <Noche {...p} lugar="tunel" />,
+	pasillo: (p) => <Noche {...p} lugar="pasillo" />,
+};
+
+export const NOMBRES_ESCENARIOS = Object.keys(ESCENARIOS);
+
+export const Escenario: React.FC<P & {nombre: string}> = ({nombre, ...p}) => {
+	const Comp = ESCENARIOS[nombre];
+	if (!Comp) throw new Error(`Escenario "${nombre}" no existe. Hay: ${NOMBRES_ESCENARIOS.join(', ')}`);
+	return <Comp {...p} />;
+};

package/remotion/motor/fondo.tsx

@@ -4,9 +4,10 @@ import React from 'react';
 import {AbsoluteFill, Img, OffthreadVideo} from 'remotion';
 import {H, W} from '../estilo';
 import type {Fondo as TFondo, Particulas as TParticulas, Tema} from './tema';
-import {azar, recurso} from './util';
+import {azar, cuando, recurso, type CtxEscena} from './util';
+import {Escenario} from './escenarios';
 
-const Base: React.FC<{f: TFondo}> = ({f}) => {
+const Base: React.FC<{f: TFondo; ctx?: CtxEscena}> = ({f, ctx}) => {
 	switch (f.tipo) {
 		case 'color':
 			return <AbsoluteFill style={{background: f.color}} />;
@@ -19,6 +20,17 @@ const Base: React.FC<{f: TFondo}> = ({f}) => {
 					{f.oscurecer ? <AbsoluteFill style={{background: `rgba(0,0,0,${f.oscurecer})`}} /> : null}
 				</AbsoluteFill>
 			);
+		case 'escenario': {
+			// escenario ilustrado animado: usa el tiempo de la escena (sin ctx, por ejemplo en la miniatura de otro lado, queda quieto)
+			const {tipo, nombre, oscurecer, ...props} = f as any;
+			const c = ctx ?? ({t: 0, dur: 1, habla: [0, 1], palabras: [], semilla: '', tema: undefined as any} as CtxEscena);
+			return (
+				<AbsoluteFill>
+					<Escenario nombre={nombre} {...props} t={c.t} dur={c.dur} cuando={(en: unknown) => cuando(en, c)} />
+					{oscurecer ? <AbsoluteFill style={{background: `rgba(0,0,0,${oscurecer})`}} /> : null}
+				</AbsoluteFill>
+			);
+		}
 		case 'video':
 			return (
 				<AbsoluteFill>
@@ -123,12 +135,12 @@ export const Textura: React.FC<{tipo: 'papel' | 'grano'}> = ({tipo}) => (
 );
 
 /** El fondo completo de una escena (el de la escena gana sobre el del estilo). */
-export const FondoTema: React.FC<{tema: Tema; fondo?: TFondo; t: number; semilla: string}> = ({tema, fondo, t, semilla}) => {
+export const FondoTema: React.FC<{tema: Tema; fondo?: TFondo; t: number; semilla: string; ctx?: CtxEscena}> = ({tema, fondo, t, semilla, ctx}) => {
 	const f = fondo ?? tema.fondo;
 	const foco = tema.foco;
 	return (
 		<AbsoluteFill>
-			<Base f={f} />
+			<Base f={f} ctx={ctx} />
 			{tema.rayos ? <Rayos color={tema.rayos.color} fuerza={tema.rayos.fuerza ?? 1} t={t} /> : null}
 			{foco ? (
 				<AbsoluteFill

package/remotion/motor/modelo3d.tsx

@@ -14,6 +14,7 @@ import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js';
 import {RoomEnvironment} from 'three/examples/jsm/environments/RoomEnvironment.js';
 import {clamp, easeOut} from '../estilo';
 import {cuando, recurso, type CtxEscena} from './util';
+import {OBJETOS_3D, Objeto3D} from './objetos3d';
 
 const RAD = Math.PI / 180;
 type Gltf = {scene: THREE.Group; animations: THREE.AnimationClip[]};
@@ -88,7 +89,7 @@ const Forma: React.FC<{forma: string; color?: string; metal?: number; rugosidad?
 			return (
 				<mesh>
 					<boxGeometry args={[1.8, 0.55, 0.8]} />
-					{mat('#E8B84A', 0.95, 0.22)}
+					{mat('#E8B84A', 0.7, 0.28)}
 				</mesh>
 			);
 		case 'esfera':
@@ -137,6 +138,8 @@ export const Modelo3D: React.FC<{c: Record<string, any>; ctx: CtxEscena}> = ({c,
 				<group scale={c.tamano ?? 1} rotation={[rx + gx * t, ry + gy * t, rz + gz * t]} position={[0, n > 1 ? -altoPila / 2 : 0, 0]}>
 					{c.src ? (
 						<Glb src={c.src} />
+					) : (OBJETOS_3D as readonly string[]).includes(c.forma) ? (
+						<Objeto3D forma={c.forma} t={t} opciones={c} color={c.color} metal={c.metal} rugosidad={c.rugosidad} />
 					) : (
 						pila.slice(0, visibles).map(([x, y, z, giro], i) => (
 							<group key={i} position={[x, y, z]} rotation={[0, n > 1 ? giro : 0, 0]}>