morfeo 0.1.3 → 0.2.1

package/remotion/motor/anotaciones.tsx

@@ -0,0 +1,296 @@
+// Anotaciones: capas que señalan y explican lo que hay en pantalla, como en un documental o un tutorial.
+//   dato      cifra grande + unidad en una pastilla oscura:  {tipo: 'dato', valor: 57, unidad: 'toneladas'}
+//   medida    línea de cota con topes y su etiqueta:          {tipo: 'medida', de: [200, 900], a: [700, 300], texto: '18 m'}
+//   trazo     línea o flecha que se dibuja por varios puntos: {tipo: 'trazo', puntos: [[x, y], ...], flecha: true, punteado: true}
+//   contorno  marco punteado que "camina" alrededor de algo:  {tipo: 'contorno', ancho: 400, alto: 300}  (forma: 'rect' | 'circulo' | 'aro')
+//   fuente    cita pequeña de dónde sale el dato:              {tipo: 'fuente', texto: 'Cook et al., 2016 · Science'}
+//   seccion   etiqueta de capítulo en monoespaciada:           {tipo: 'seccion', texto: 'paso 2 · la carpeta'}
+//   insignia  número de paso en un cuadro oscuro:              {tipo: 'insignia', texto: 2}
+//   sello     sello de goma inclinado:                         {tipo: 'sello', texto: 'AUTOMÁTICO'}
+//   cursor    puntero que viaja y hace clic:                   {tipo: 'cursor', a: [620, 900], clic: 'carpeta'}
+// `medida` y `trazo` usan coordenadas del lienzo (1080×1920). Todas aceptan `en`, `hasta` y `sigue: 'id'`.
+import React from 'react';
+import {clamp, easeIO, easeOut, lerp, resorte} from '../estilo';
+import {cuando, formatoNumero, type CtxEscena} from './util';
+
+type Capa = Record<string, any> & {tipo: string};
+
+//   nombre    etiqueta de personaje con su rol:               {tipo: 'nombre', texto: 'DOÑA ROSA', sub: 'la mamá · 48 años'}
+//   accion    lo que hace el protagonista en ese momento:      {tipo: 'accion', texto: 'Te despiertas'}
+//   terminal  ventana de terminal que se escribe sola:         {tipo: 'terminal', lineas: [{texto: 'npm install morfeo', en: 'instala'}, {texto: '✔ listo', salida: true, en: 'fin'}]}
+export const ANOTACIONES = ['dato', 'medida', 'trazo', 'contorno', 'fuente', 'seccion', 'insignia', 'sello', 'cursor', 'terminal', 'nombre', 'accion'];
+/** Las que se dibujan solas (línea que avanza): no llevan animación de entrada de capa. */
+export const ANOTACIONES_SIN_ENTRADA = ['medida', 'trazo', 'contorno', 'cursor'];
+
+const largoDe = (pts: [number, number][]) => pts.slice(1).reduce((s, p, i) => s + Math.hypot(p[0] - pts[i][0], p[1] - pts[i][1]), 0);
+
+/** Pastilla oscura translúcida: la base de `dato` y de la etiqueta de `medida`. */
+const Pastilla: React.FC<{children: React.ReactNode; color?: string; tam?: number}> = ({children, color, tam = 1}) => (
+	<div
+		style={{
+			display: 'inline-flex',
+			alignItems: 'baseline',
+			gap: 10 * tam,
+			padding: `${10 * tam}px ${22 * tam}px`,
+			background: color ?? 'rgba(10, 14, 24, 0.82)',
+			border: '2px solid rgba(255,255,255,0.14)',
+			borderRadius: 16 * tam,
+			boxShadow: '0 10px 26px rgba(0,0,0,0.35)',
+			whiteSpace: 'nowrap',
+		}}
+	>
+		{children}
+	</div>
+);
+
+export const Anotacion: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
+	const T = ctx.tema;
+	const t = ctx.t - cuando(c.en, ctx, 0);
+	// origen de la capa en el lienzo: `medida` y `trazo` reciben puntos absolutos y hay que restarlo
+	const ox = c.x ?? 540;
+	const oy = c.y ?? 960;
+	const color = c.color ?? T.colores.acento;
+
+	switch (c.tipo) {
+		case 'dato': {
+			const tam = (c.tam ?? 64) / 64;
+			const k = c.de != null ? easeOut(clamp(t / (c.duracion ?? 0.9))) : 1;
+			const v = typeof c.valor === 'number' ? formatoNumero(lerp(c.de ?? c.valor, c.valor, k), c.decimales ?? 0) : String(c.valor ?? c.texto ?? '');
+			return (
+				<Pastilla color={c.fondo} tam={tam}>
+					<span style={{fontFamily: T.fuentes.texto, fontWeight: 900, fontSize: 64 * tam, lineHeight: 1, color}}>{v}</span>
+					{c.unidad ? <span style={{fontFamily: T.fuentes.texto, fontWeight: 700, fontSize: 30 * tam, color: '#fff', opacity: 0.92}}>{c.unidad}</span> : null}
+				</Pastilla>
+			);
+		}
+
+		case 'medida': {
+			const [x1, y1] = c.de ?? [ox - 200, oy];
+			const [x2, y2] = c.a ?? [ox + 200, oy];
+			const k = easeIO(clamp(t / (c.duracion ?? 0.6)));
+			const xa = lerp(x1, x2, k);
+			const ya = lerp(y1, y2, k);
+			const ang = Math.atan2(y2 - y1, x2 - x1);
+			const nx = Math.cos(ang + Math.PI / 2) * (c.tope ?? 16);
+			const ny = Math.sin(ang + Math.PI / 2) * (c.tope ?? 16);
+			const g = c.grosor ?? 5;
+			// la etiqueta va a un lado de la mitad de la línea
+			const sep = c.separacion ?? 70;
+			const lx = (x1 + x2) / 2 - Math.cos(ang + Math.PI / 2) * sep;
+			const ly = (y1 + y2) / 2 - Math.sin(ang + Math.PI / 2) * sep;
+			const ke = resorte(clamp((t - (c.duracion ?? 0.6) * 0.6) / 0.4), 0.3);
+			return (
+				<div style={{position: 'relative', width: 0, height: 0}}>
+					<svg style={{position: 'absolute', left: -ox, top: -oy, overflow: 'visible'}} width={1} height={1}>
+						<g stroke={color} strokeWidth={g} strokeLinecap="round" style={{filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.4))'}}>
+							<line x1={x1} y1={y1} x2={xa} y2={ya} />
+							<line x1={x1 - nx} y1={y1 - ny} x2={x1 + nx} y2={y1 + ny} />
+							{k > 0.98 ? <line x1={x2 - nx} y1={y2 - ny} x2={x2 + nx} y2={y2 + ny} /> : null}
+						</g>
+					</svg>
+					{c.texto != null && ke > 0.01 ? (
+						<div style={{position: 'absolute', left: lx - ox, top: ly - oy, transform: `translate(-50%, -50%) scale(${ke})`}}>
+							<Pastilla tam={(c.tam ?? 46) / 64}>
+								<span style={{fontFamily: T.fuentes.texto, fontWeight: 900, fontSize: c.tam ?? 46, lineHeight: 1, color}}>{c.texto}</span>
+								{c.unidad ? <span style={{fontFamily: T.fuentes.texto, fontWeight: 700, fontSize: (c.tam ?? 46) * 0.5, color: '#fff'}}>{c.unidad}</span> : null}
+							</Pastilla>
+						</div>
+					) : null}
+				</div>
+			);
+		}
+
+		case 'trazo': {
+			const pts: [number, number][] = c.puntos ?? [];
+			if (pts.length < 2) return null;
+			const L = largoDe(pts);
+			const k = easeIO(clamp(t / (c.duracion ?? Math.max(0.4, L / 1400))));
+			const g = c.grosor ?? 6;
+			const d = pts.map(([x, y], i) => `${i ? 'L' : 'M'}${x} ${y}`).join(' ');
+			const [px, py] = pts[pts.length - 1];
+			const [qx, qy] = pts[pts.length - 2];
+			const ang = (Math.atan2(py - qy, px - qx) * 180) / Math.PI;
+			const guion = c.punteado ? (typeof c.punteado === 'number' ? c.punteado : g * 2.6) : 0;
+			return (
+				<svg style={{position: 'absolute', left: -ox, top: -oy, overflow: 'visible'}} width={1} height={1}>
+					<defs>
+						<mask id={`trazo-${c.id ?? `${pts[0][0]}-${pts[0][1]}`}`} maskUnits="userSpaceOnUse" x={-200} y={-200} width={1480} height={2320}>
+							<path d={d} fill="none" stroke="#fff" strokeWidth={g + 8} strokeDasharray={L} strokeDashoffset={L * (1 - k)} strokeLinecap="round" strokeLinejoin="round" />
+						</mask>
+					</defs>
+					<g mask={`url(#trazo-${c.id ?? `${pts[0][0]}-${pts[0][1]}`})`} style={{filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.35))'}}>
+						<path d={d} fill="none" stroke={color} strokeWidth={g} strokeLinecap="round" strokeLinejoin="round" strokeDasharray={guion ? `${guion} ${guion}` : undefined} strokeDashoffset={guion ? -ctx.t * (c.velocidad ?? 40) : undefined} />
+					</g>
+					{c.flecha && k > 0.97 ? <polygon points={`0,0 ${-g * 4.2},${-g * 2.4} ${-g * 4.2},${g * 2.4}`} fill={color} transform={`translate(${px} ${py}) rotate(${ang})`} /> : null}
+				</svg>
+			);
+		}
+
+		case 'contorno': {
+			const w = c.ancho ?? 400;
+			const h = c.alto ?? (c.forma === 'aro' ? w * 0.32 : c.forma === 'circulo' ? w : 300);
+			const g = c.grosor ?? 5;
+			const k = easeOut(clamp(t / (c.duracion ?? 0.45)));
+			const guion = c.punteado === false ? undefined : `${g * 3.2} ${g * 2.6}`;
+			const desfase = -ctx.t * (c.velocidad ?? 46);
+			const comun = {fill: c.relleno ?? 'none', stroke: color, strokeWidth: g, strokeDasharray: guion, strokeDashoffset: desfase, strokeLinecap: 'round' as const};
+			const m = g + 6;
+			return (
+				<svg width={w + m * 2} height={h + m * 2} style={{display: 'block', overflow: 'visible', opacity: k, transform: `scale(${lerp(1.12, 1, k)})`, filter: c.forma === 'aro' ? `drop-shadow(0 0 14px ${color})` : 'drop-shadow(0 2px 5px rgba(0,0,0,0.35))'}}>
+					{c.forma === 'circulo' || c.forma === 'aro' ? <ellipse cx={w / 2 + m} cy={h / 2 + m} rx={w / 2} ry={h / 2} {...comun} /> : <rect x={m} y={m} width={w} height={h} rx={c.radio ?? 14} {...comun} />}
+				</svg>
+			);
+		}
+
+		case 'fuente':
+			return (
+				<div style={{borderLeft: `4px solid ${color}`, paddingLeft: 14, fontFamily: T.fuentes.mono, color: c.colorTexto ?? T.colores.texto, opacity: 0.86, textShadow: T.colores.texto === '#FFFFFF' ? '0 2px 8px rgba(0,0,0,0.6)' : undefined}}>
+					<div style={{fontSize: (c.tam ?? 24) * 0.72, letterSpacing: 3, color, fontWeight: 700}}>{c.etiqueta ?? 'FUENTE'}</div>
+					<div style={{fontSize: c.tam ?? 24, whiteSpace: 'pre', marginTop: 4}}>{c.texto}</div>
+				</div>
+			);
+
+		case 'seccion':
+			return (
+				<div style={{fontFamily: T.fuentes.mono, fontSize: c.tam ?? 30, color: c.color ?? T.colores.suave, whiteSpace: 'pre', letterSpacing: 0.5}}>
+					<span style={{opacity: 0.7}}>{'// '}</span>
+					{c.texto}
+				</div>
+			);
+
+		case 'insignia': {
+			const tam = c.tam ?? 96;
+			const claro = T.colores.texto === '#FFFFFF';
+			return (
+				<div
+					style={{
+						width: tam,
+						height: tam * 1.08,
+						background: c.fondo ?? (claro ? '#fff' : '#161616'),
+						color: c.colorTexto ?? (claro ? '#111' : '#fff'),
+						fontFamily: T.fuentes.titulo,
+						fontSize: tam * 0.64,
+						lineHeight: 1,
+						display: 'flex',
+						flexDirection: 'column',
+						alignItems: 'center',
+						justifyContent: 'center',
+						gap: tam * 0.05,
+						borderRadius: tam * 0.14,
+						boxShadow: '0 8px 0 rgba(0,0,0,0.18), 0 14px 22px rgba(0,0,0,0.22)',
+						transform: `rotate(${c.inclinar ?? 0}deg)`,
+					}}
+				>
+					<span>{c.texto ?? c.valor}</span>
+					<span style={{display: 'flex', gap: tam * 0.07}}>
+						{[0, 1, 2].map((i) => (
+							<span key={i} style={{width: tam * 0.06, height: tam * 0.06, borderRadius: '50%', background: 'currentColor', opacity: 0.45}} />
+						))}
+					</span>
+				</div>
+			);
+		}
+
+		case 'sello': {
+			const tam = c.tam ?? 52;
+			// golpe de sello: cae grande y se asienta con una vibración corta
+			const k = clamp(t / 0.22);
+			const escala = lerp(1.9, 1, easeOut(k)) * (k >= 1 ? 1 + 0.03 * Math.exp(-(t - 0.22) * 14) * Math.sin((t - 0.22) * 60) : 1);
+			return (
+				<div
+					style={{
+						transform: `rotate(${c.inclinar ?? -7}deg) scale(${escala})`,
+						opacity: clamp(k * 3) * 0.92,
+						border: `${Math.max(4, tam * 0.1)}px solid ${color}`,
+						outline: `${Math.max(2, tam * 0.04)}px solid ${color}`,
+						outlineOffset: tam * 0.1,
+						borderRadius: tam * 0.2,
+						padding: `${tam * 0.12}px ${tam * 0.42}px`,
+						fontFamily: T.fuentes.titulo,
+						fontSize: tam,
+						lineHeight: 1.1,
+						letterSpacing: 2,
+						color,
+						textTransform: 'uppercase',
+						whiteSpace: 'nowrap',
+					}}
+				>
+					{c.texto}
+				</div>
+			);
+		}
+
+		case 'terminal': {
+			// ventana de terminal: cada línea se escribe letra por letra a partir de su `en`
+			const w = c.ancho ?? 820;
+			const tam = c.tam ?? 34;
+			const lineas: any[] = (c.lineas ?? []).map((l: any) => (typeof l === 'string' ? {texto: l} : l));
+			return (
+				<div style={{width: w, background: c.fondo ?? '#16171D', borderRadius: 22, boxShadow: '0 26px 50px rgba(0,0,0,0.28), 0 4px 0 rgba(0,0,0,0.25)', overflow: 'hidden', border: '2px solid rgba(255,255,255,0.08)'}}>
+					<div style={{display: 'flex', alignItems: 'center', gap: 10, padding: '16px 20px', background: 'rgba(255,255,255,0.06)'}}>
+						{['#FF5F57', '#FEBC2E', '#28C840'].map((k) => (
+							<span key={k} style={{width: 16, height: 16, borderRadius: '50%', background: k}} />
+						))}
+						<span style={{marginLeft: 12, fontFamily: T.fuentes.mono, fontSize: tam * 0.62, color: 'rgba(255,255,255,0.45)'}}>{c.titulo ?? 'terminal'}</span>
+					</div>
+					<div style={{padding: `${tam * 0.7}px ${tam * 0.8}px ${tam}px`, fontFamily: T.fuentes.mono, fontSize: tam, lineHeight: 1.55, minHeight: tam * 1.55 * Math.max(2, lineas.length)}}>
+						{lineas.map((l, i) => {
+							const tl = ctx.t - cuando(l.en, ctx, cuando(c.en, ctx, 0) + i * 0.6);
+							if (tl < 0) return null;
+							const salida = l.salida === true;
+							const n = salida ? l.texto.length : Math.floor(tl * (c.velocidad ?? 24));
+							const escribiendo = !salida && n <= l.texto.length + 6;
+							return (
+								<div key={i} style={{color: l.color ?? (salida ? '#7BE08A' : c.colorTexto ?? '#F2F2F5'), whiteSpace: 'pre-wrap', opacity: salida ? clamp(tl / 0.2) : 1}}>
+									{salida ? '' : <span style={{color}}>{'$ '}</span>}
+									{l.texto.slice(0, n)}
+									{escribiendo && Math.floor(ctx.t * 3) % 2 === 0 ? <span style={{background: c.colorTexto ?? '#F2F2F5', color: 'transparent'}}>_</span> : null}
+								</div>
+							);
+						})}
+					</div>
+				</div>
+			);
+		}
+
+		case 'nombre': {
+			// pastilla clara con el nombre en mayúsculas y el rol debajo, más chico (como en las series ilustradas)
+			const tam = c.tam ?? 40;
+			return (
+				<div style={{background: c.fondo ?? '#FFFFFF', color: c.colorTexto ?? '#141414', borderRadius: tam * 0.45, padding: `${tam * 0.24}px ${tam * 0.6}px`, textAlign: 'center', boxShadow: '0 6px 0 rgba(0,0,0,0.18), 0 10px 18px rgba(0,0,0,0.18)', border: `${Math.max(3, tam * 0.08)}px solid ${c.borde ?? '#141414'}`, whiteSpace: 'nowrap'}}>
+					<div style={{fontFamily: T.fuentes.texto, fontWeight: 900, fontSize: tam, lineHeight: 1.05, letterSpacing: 0.5}}>{String(c.texto ?? '').toUpperCase()}</div>
+					{c.sub ? <div style={{fontFamily: T.fuentes.texto, fontWeight: 700, fontSize: tam * 0.5, opacity: 0.6, marginTop: 2}}>{c.sub}</div> : null}
+				</div>
+			);
+		}
+
+		case 'accion': {
+			// "▶ Te despiertas": pastilla oscura con borde de acento; marca lo que hace el protagonista
+			const tam = c.tam ?? 36;
+			return (
+				<div style={{display: 'inline-flex', alignItems: 'center', gap: tam * 0.4, background: c.fondo ?? 'rgba(14,14,20,0.86)', color: c.colorTexto ?? '#FFFFFF', border: `${Math.max(2, tam * 0.08)}px solid ${color}`, borderRadius: 999, padding: `${tam * 0.26}px ${tam * 0.7}px`, fontFamily: T.fuentes.texto, fontWeight: 800, fontSize: tam, whiteSpace: 'nowrap', boxShadow: '0 8px 20px rgba(0,0,0,0.35)'}}>
+					<span style={{color, fontSize: tam * 0.7}}>▶</span>
+					{c.texto}
+				</div>
+			);
+		}
+
+		case 'cursor': {
+			const tam = c.tam ?? 64;
+			const [ax, ay] = c.a ?? [ox, oy];
+			const k = easeIO(clamp(t / (c.duracion ?? 0.7)));
+			const tc = c.clic != null ? ctx.t - cuando(c.clic, ctx, 0) : -1;
+			const pulso = tc >= 0 && tc < 0.5 ? tc / 0.5 : -1;
+			const hundir = tc >= 0 && tc < 0.16 ? 0.86 : 1;
+			return (
+				<div style={{position: 'relative', width: 0, height: 0, transform: `translate(${(ax - ox) * k}px, ${(ay - oy) * k}px)`}}>
+					{pulso >= 0 ? <div style={{position: 'absolute', left: -tam * (0.3 + pulso), top: -tam * (0.3 + pulso), width: tam * (0.6 + pulso * 2), height: tam * (0.6 + pulso * 2), borderRadius: '50%', border: `4px solid ${color}`, opacity: 1 - pulso}} /> : null}
+					<svg width={tam} height={tam} viewBox="0 0 24 24" style={{position: 'absolute', left: -tam * 0.14, top: -tam * 0.08, transform: `scale(${hundir})`, transformOrigin: '15% 10%', filter: 'drop-shadow(0 5px 6px rgba(0,0,0,0.4))'}}>
+						<path d="M4 2 L4 19 L8.6 15.2 L11.6 22 L14.6 20.7 L11.7 14 L18 14 Z" fill="#111" stroke="#fff" strokeWidth={1.6} strokeLinejoin="round" />
+					</svg>
+				</div>
+			);
+		}
+	}
+	return null;
+};

package/remotion/motor/capas.tsx

@@ -3,7 +3,8 @@
 import React from 'react';
 import {Img, OffthreadVideo} from 'remotion';
 import {Avatar, Icono, tamIcono, useMarca} from '../piezas';
-import {H, W, backOut, clamp, easeIO, easeOut, lerp} from '../estilo';
+import {H, W, backOut, clamp, easeIO, easeOut, easeOutExpo, lerp, resorte} from '../estilo';
+import {ANOTACIONES, ANOTACIONES_SIN_ENTRADA, Anotacion} from './anotaciones';
 import {azar, cuando, formatoNumero, partesResaltadas, recurso, type CtxEscena} from './util';
 import {Particulas} from './fondo';
 import {Escena3D, Modelo3D} from './modelo3d';
@@ -16,13 +17,18 @@ export type Capa = Record<string, any> & {tipo: string};
 const ENTRADA_DUR = 0.5;
 
 // el personaje de una serie sigue en pantalla de escena en escena: no "reaparece" en cada una
-const entradaPorDefecto = (c: Capa) => (c.tipo === 'personaje' ? 'ninguna' : 'escala');
+// las anotaciones que se dibujan solas (línea que avanza) tampoco llevan entrada de capa
+const entradaPorDefecto = (c: Capa) => (c.tipo === 'personaje' || ANOTACIONES_SIN_ENTRADA.includes(c.tipo) ? 'ninguna' : c.tipo === 'fuente' || c.tipo === 'seccion' ? 'subir' : 'escala');
 
 /** Posición, escala, giro y opacidad de una capa en el instante t (entrada, movimiento, salida). */
-function animar(c: Capa, ctx: CtxEscena, relativo: boolean) {
+export function animar(c: Capa, ctx: CtxEscena, relativo: boolean) {
 	const t = ctx.t;
 	const t0 = cuando(c.en, ctx, 0);
-	const dur = c.duracionEntrada ?? ENTRADA_DUR;
+	const mov = ctx.tema?.movimiento ?? {};
+	const dur = c.duracionEntrada ?? mov.entrada ?? ENTRADA_DUR;
+	const curva = c.curva ?? mov.curva ?? 'suave';
+	const E = curva === 'resorte' ? (x: number) => resorte(x, 0.3) : curva === 'seca' ? easeOutExpo : easeOut;
+	let b = 0; // desenfoque de entrada (px)
 	const p = dur > 0 ? clamp((t - t0) / dur) : t >= t0 ? 1 : 0;
 	let x = c.x ?? (relativo ? 0 : W / 2);
 	let y = c.y ?? (relativo ? 0 : H / 2);
@@ -32,38 +38,43 @@ function animar(c: Capa, ctx: CtxEscena, relativo: boolean) {
 	if (t < t0) return null; // con entrada 'ninguna' aparece de golpe en su momento
 	switch (c.entrada ?? entradaPorDefecto(c)) {
 		case 'aparecer':
-			o *= easeOut(p);
+			o *= E(p);
 			break;
 		case 'escala':
-			s *= easeOut(p);
+			s *= E(p);
 			o *= clamp(p * 3);
 			break;
 		case 'rebote':
 			s *= backOut(p);
 			break;
 		case 'deslizar-izq':
-			x -= (1 - easeOut(p)) * W;
+			x -= (1 - E(p)) * W;
 			break;
 		case 'deslizar-der':
-			x += (1 - easeOut(p)) * W;
+			x += (1 - E(p)) * W;
 			break;
 		case 'deslizar-arriba':
-			y += (1 - easeOut(p)) * H * 0.6;
+			y += (1 - E(p)) * H * 0.6;
 			break;
 		case 'deslizar-abajo':
-			y -= (1 - easeOut(p)) * H * 0.6;
+			y -= (1 - E(p)) * H * 0.6;
 			break;
 		case 'caer':
 			y -= (1 - backOut(p, 1.2)) * 700;
 			o *= clamp(p * 4);
 			break;
 		case 'girar':
-			r += (1 - easeOut(p)) * -200;
-			s *= easeOut(p);
+			r += (1 - E(p)) * -200;
+			s *= E(p);
+			break;
+		case 'enfocar':
+			o *= E(p);
+			b = (1 - E(p)) * 22;
+			s *= lerp(1.08, 1, E(p));
 			break;
 		case 'subir':
-			y += (1 - easeOut(p)) * 80;
-			o *= easeOut(p);
+			y += (1 - E(p)) * 80;
+			o *= E(p);
 			break;
 	}
 	// movimiento: mover: {a: [x, y], en?, duracion?, curva?: 'suave' | 'lineal'}
@@ -94,7 +105,7 @@ function animar(c: Capa, ctx: CtxEscena, relativo: boolean) {
 	// salida: hasta: palabra o segundos; sale con la animación `salida` (aparecer = desvanecer)
 	if (c.hasta != null) {
 		const h = cuando(c.hasta, ctx, ctx.dur);
-		const q = clamp((t - h) / 0.35);
+		const q = clamp((t - h) / (mov.salida ?? 0.35));
 		if (q >= 1) return null;
 		if (q > 0) {
 			const sal = c.salida ?? 'aparecer';
@@ -106,7 +117,7 @@ function animar(c: Capa, ctx: CtxEscena, relativo: boolean) {
 		}
 	}
 	if (s <= 0.001 || o <= 0.001) return null;
-	return {x, y, s, r, o};
+	return {x, y, s, r, o, b};
 }
 
 const sombra = (c: Capa) => (c.sombra === false ? undefined : c.sombra === true || c.sombra == null ? 'drop-shadow(0 18px 24px rgba(0,0,0,0.35))' : c.sombra);
@@ -133,10 +144,16 @@ function aplicarCambios(c: Capa, ctx: CtxEscena): Capa {
 }
 
 /** Una capa con su animación aplicada. */
-export const CapaVista: React.FC<{c: Capa; ctx: CtxEscena; relativo?: boolean; i?: number}> = ({c: c0, ctx, relativo = false, i = 0}) => {
+export const CapaVista: React.FC<{c: Capa; ctx: CtxEscena; relativo?: boolean; i?: number; base?: {x: number; y: number} | null}> = ({c: c0, ctx, relativo = false, i = 0, base}) => {
 	const c = aplicarCambios(c0, ctx);
-	const a = animar(c, ctx, relativo);
+	// `sigue: 'id'`: la capa se coloca respecto a otra (x, y son la distancia a su centro) y se mueve con ella
+	if (c.sigue && !base) return null;
+	const a = animar(c, ctx, relativo || !!base);
 	if (!a) return null;
+	if (base) {
+		a.x += base.x;
+		a.y += base.y;
+	}
 	const ancla = c.ancla === 'izquierda' ? '0%' : c.ancla === 'derecha' ? '-100%' : '-50%';
 	return (
 		<div
@@ -147,7 +164,7 @@ export const CapaVista: React.FC<{c: Capa; ctx: CtxEscena; relativo?: boolean; i
 				transform: `translate(${ancla}, -50%) scale(${a.s}) rotate(${a.r}deg)${c.voltear ? ' scaleX(-1)' : ''}`,
 				transformOrigin: c.ancla === 'izquierda' ? 'left center' : c.ancla === 'derecha' ? 'right center' : 'center',
 				opacity: a.o,
-				filter: [c.tipo === 'imagen' || c.tipo === 'emoji' ? sombra(c) : undefined, c.desenfoque ? `blur(${c.desenfoque}px)` : undefined].filter(Boolean).join(' ') || undefined,
+				filter: [c.tipo === 'imagen' || c.tipo === 'emoji' ? sombra(c) : undefined, c.desenfoque || a.b ? `blur(${(c.desenfoque ?? 0) + a.b}px)` : undefined].filter(Boolean).join(' ') || undefined,
 				zIndex: c.z ?? i,
 			}}
 		>
@@ -257,9 +274,10 @@ const Contenido: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
 			const Comp = componente(c.nombre);
 			if (!Comp) throw new Error(`No hay un componente llamado "${c.nombre}". Regístralo en morfeo.config.mjs → componentes. Disponibles: ${nombresComponentes().join(', ') || 'ninguno'}`);
 			const t0 = cuando(c.en, ctx, 0);
-			return <Comp {...(c.props ?? {})} t={ctx.t - t0} dur={ctx.dur} palabras={ctx.palabras} tema={ctx.tema} cuando={(en: unknown) => cuando(en, ctx) - t0} />;
+			return <Comp {...(c.props ?? {})} t={ctx.t - t0} dur={ctx.dur} palabras={ctx.palabras} tema={ctx.tema} cuando={(en: unknown) => cuando(en, ctx) - t0} escena={ctx.escena} tEscena={ctx.tEscena} inicios={ctx.inicios} camara={ctx.camara} />;
 		}
 		default:
+			if (ANOTACIONES.includes(c.tipo)) return <Anotacion c={c} ctx={ctx} />;
 			return <div style={{color: 'red', fontSize: 40, fontFamily: 'sans-serif', background: '#fff', padding: 10}}>capa desconocida: {c.tipo}</div>;
 	}
 };
@@ -621,12 +639,17 @@ const Personaje: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
 };
 
 /** Todas las capas de una escena. */
-export const Capas: React.FC<{capas: Capa[]; ctx: CtxEscena}> = ({capas, ctx}) => (
-	<>
-		{capas.map((c, i) => (
-			<CapaVista key={i} c={c} ctx={ctx} i={i} />
-		))}
-	</>
-);
+export const Capas: React.FC<{capas: Capa[]; ctx: CtxEscena}> = ({capas, ctx}) => {
+	// posiciones de las capas con `id`, para las que las siguen (`sigue: 'id'`)
+	const pos: Record<string, {x: number; y: number} | null> = {};
+	if (capas.some((c) => c.sigue)) for (const c of capas) if (c.id != null && !c.sigue) pos[c.id] = animar(aplicarCambios(c, ctx), ctx, false);
+	return (
+		<>
+			{capas.map((c, i) => (
+				<CapaVista key={i} c={c} ctx={ctx} i={i} base={c.sigue ? pos[c.sigue] ?? null : undefined} />
+			))}
+		</>
+	);
+};
 
 export {useMarca};

package/remotion/motor/fondo.tsx

@@ -156,5 +156,59 @@ export const FondoTema: React.FC<{tema: Tema; fondo?: TFondo; t: number; semilla
 	);
 };
 
-export const Vineta: React.FC<{fuerza: number}> = ({fuerza}) =>
-	fuerza > 0 ? <AbsoluteFill style={{background: `radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,${fuerza}) 100%)`, pointerEvents: 'none'}} /> : null;
+/** Convierte #RRGGBB a "r, g, b". */
+const rgb = (hex: string) => [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16)).join(', ');
+
+export const Vineta: React.FC<{fuerza: number; color?: string}> = ({fuerza, color}) =>
+	fuerza > 0 ? <AbsoluteFill style={{background: `radial-gradient(ellipse at center, transparent 45%, rgba(${color ? rgb(color) : '0, 0, 0'}, ${fuerza}) 100%)`, pointerEvents: 'none'}} /> : null;
+
+/**
+ * Acabado sobre todo el cuadro (va quieto, fuera de la cámara):
+ *   luz: cono de luz desde arriba (lámpara, foco de escenario) · tinte: capa de color que unifica la paleta ·
+ *   desenfoqueBordes: blur arriba y abajo, que da sensación de maqueta y de profundidad.
+ */
+export const Post: React.FC<{tema: Tema}> = ({tema}) => {
+	const p = tema.post;
+	if (!p) return null;
+	const L = p.luz;
+	const lx = L?.x ?? 540;
+	const ly = L?.y ?? -60;
+	const ancho = L?.ancho ?? 760;
+	const largo = L?.largo ?? 1500;
+	const borde = (mascara: string): React.CSSProperties => ({
+		backdropFilter: `blur(${p.desenfoqueBordes}px)`,
+		WebkitBackdropFilter: `blur(${p.desenfoqueBordes}px)`,
+		maskImage: mascara,
+		WebkitMaskImage: mascara,
+		pointerEvents: 'none',
+	});
+	return (
+		<>
+			{L ? (
+				<AbsoluteFill style={{mixBlendMode: 'screen', opacity: L.fuerza ?? 0.5, pointerEvents: 'none'}}>
+					<svg width={W} height={H}>
+						<defs>
+							<linearGradient id="post-luz" x1="0" y1="0" x2="0" y2="1">
+								<stop offset="0" stopColor={L.color ?? '#FFE6B0'} stopOpacity="0.95" />
+								<stop offset="1" stopColor={L.color ?? '#FFE6B0'} stopOpacity="0" />
+							</linearGradient>
+							<filter id="post-luz-blur" x="-30%" y="-10%" width="160%" height="120%">
+								<feGaussianBlur stdDeviation="38" />
+							</filter>
+						</defs>
+						<g transform={`rotate(${L.angulo ?? 0} ${lx} ${ly})`} filter="url(#post-luz-blur)">
+							<polygon points={`${lx - 40},${ly} ${lx + 40},${ly} ${lx + ancho / 2},${ly + largo} ${lx - ancho / 2},${ly + largo}`} fill="url(#post-luz)" />
+						</g>
+					</svg>
+				</AbsoluteFill>
+			) : null}
+			{p.desenfoqueBordes ? (
+				<>
+					<AbsoluteFill style={borde('linear-gradient(180deg, #000 0%, transparent 24%)')} />
+					<AbsoluteFill style={borde('linear-gradient(0deg, #000 0%, transparent 22%)')} />
+				</>
+			) : null}
+			{p.tinte ? <AbsoluteFill style={{background: p.tinte.color, opacity: p.tinte.fuerza ?? 0.25, mixBlendMode: p.tinte.modo ?? 'soft-light', pointerEvents: 'none'}} /> : null}
+		</>
+	);
+};

package/remotion/motor/plantillas.tsx

@@ -24,7 +24,7 @@ export function capasDe(tipo: string, p: P, tema: Tema, marca: Marca): Capa[] {
 			const out: Capa[] = [];
 			if (p.etiqueta) out.push({tipo: 'etiqueta', texto: p.etiqueta, x: 80, y: y - 92, ancla: 'izquierda', entrada: 'aparecer'});
 			out.push({tipo: 'texto', texto: p.texto ?? '', x: 80, y, ancla: 'izquierda', alinear: 'left', tam: p.tam ?? 104, maxAncho: p.numero != null ? 800 : 920, entrada: 'subir', en: p.en});
-			if (p.numero != null) out.push({tipo: 'numero', texto: String(p.numero), x: 1000, y, ancla: 'derecha', entrada: 'rebote', en: 0.15});
+			if (p.numero != null) out.push({tipo: 'insignia', texto: String(p.numero), x: 1000, y, ancla: 'derecha', entrada: 'rebote', en: 0.15});
 			if (p.sub) out.push({tipo: 'texto', texto: p.sub, fuente: 'texto', tam: 44, peso: 600, color: tema.colores.suave, x: 80, y: y + 110, ancla: 'izquierda', alinear: 'left', entrada: 'aparecer', en: 0.3});
 			return [...out, ...extra];
 		}
@@ -114,6 +114,31 @@ export function capasDe(tipo: string, p: P, tema: Tema, marca: Marca): Capa[] {
 		}
 		case 'cta': {
 			const nombre = marca.nombre;
+			// cierre que pide una acción concreta (lo que hacen los videos virales): comentar una palabra o mandárselo a alguien
+			if (p.pide === 'comenta' || p.pide === 'comparte') {
+				const claro = tema.colores.texto !== '#FFFFFF';
+				const caja = claro ? '#FFFFFF' : '#1C1D24';
+				const letra = claro ? '#141414' : '#FFFFFF';
+				const out: Capa[] = [{tipo: 'marca', tam: 210, x: 540, y: 640, entrada: 'rebote'}];
+				if (p.pide === 'comenta') {
+					const palabra = String(p.palabra ?? 'SÍ').toUpperCase();
+					out.push(
+						{tipo: 'texto', texto: p.texto ?? `Escribe *${palabra}*`, x: 540, y: 900, tam: 110, maxAncho: 940, entrada: 'subir', en: 0.2},
+						...(p.sub ? [{tipo: 'texto', texto: p.sub, fuente: 'texto', tam: 44, peso: 700, color: tema.colores.suave, x: 540, y: 1010, entrada: 'aparecer', en: 0.4, mayusculas: false}] : []),
+						// caja de comentario que se escribe sola y se envía
+						{tipo: 'terminal', x: 540, y: 1220, ancho: 760, tam: 46, titulo: 'comentario', fondo: caja, colorTexto: letra, en: 0.5, entrada: 'subir', color: tema.colores.acento, lineas: [{texto: palabra, en: 0.9}]},
+						{tipo: 'sello', texto: 'ENVIADO', x: 760, y: 1360, en: 2.1, color: tema.colores.acento, tam: 44},
+					);
+				} else {
+					out.push(
+						{tipo: 'texto', texto: p.texto ?? 'Mándaselo a *alguien*', x: 540, y: 900, tam: 104, maxAncho: 940, entrada: 'subir', en: 0.2},
+						...(p.sub ? [{tipo: 'texto', texto: p.sub, fuente: 'texto', tam: 44, peso: 700, color: tema.colores.suave, x: 540, y: 1010, maxAncho: 900, entrada: 'aparecer', en: 0.4, mayusculas: false}] : []),
+						{tipo: 'texto', texto: `ENVIAR A…\n${p.a ?? 'AMIGO'}`, fuente: 'texto', tam: 46, peso: 800, color: letra, fondo: caja, relleno: '24px 60px', radio: 26, interlineado: 1.5, x: 540, y: 1230, entrada: 'subir', en: 0.5, mayusculas: false},
+						{tipo: 'texto', texto: 'ENVIADO ✓', fuente: 'texto', tam: 50, peso: 900, color: '#141414', fondo: tema.colores.acento, relleno: '16px 54px', radio: 99, x: 540, y: 1390, entrada: 'rebote', en: 1.6, sombra: false, sonido: 'ding'},
+					);
+				}
+				return [...out, ...extra];
+			}
 			return [
 				{tipo: 'marca', tam: 330, x: 540, y: 760, entrada: 'rebote', latir: true},
 				...(nombre ? [{tipo: 'texto', texto: nombre, x: 540, y: 1030, tam: 120, color: tema.colores.texto, entrada: 'rebote', en: 0.25, mayusculas: false}] : []),