morfeo 0.1.2 → 0.2.0

package/lib/recursos.mjs

@@ -39,6 +39,8 @@ export const VARIANTES_2D = {
 	brutal: ['withicons-brutal'],
 	gothic: ['withicons-gothic'],
 	linea: ['ph', 'mdi', 'iconoir', 'tabler', 'lucide'],
+	// ilustración plana con muchísimos animales y objetos: último respaldo 2D antes de pasar a 3D
+	plano: ['fluent-emoji-flat', 'noto'],
 };
 
 async function pedirJSON(url, opciones = {}) {
@@ -252,19 +254,26 @@ export async function resolverRecursos(video, assetsPublico, log = console.log)
 		const {tipo, buscar, estilo = '3d', variante, fuente, indice: n = 0, color, ...resto} = c;
 		if (!buscar) throw new ErrorMorfeo('Una capa {tipo: "recurso"} necesita `buscar` (por ejemplo, buscar: "tubería")');
 		let res = await buscarRecursos(buscar, {estilo, variante, fuente});
-		// sin resultados en ese estilo: se intenta en los otros antes de fallar (3d → realista → 2d)
-		if (!res.length && !fuente)
-			for (const otro of ['3d', 'realista', '2d'].filter((e) => e !== estilo)) {
-				res = await buscarRecursos(buscar, {estilo: otro, variante});
+		// sin resultados: primero se prueba el mismo estilo con otra línea gráfica (2d glass → 2d color → otras
+		// variantes), y luego los otros estilos. Así un 2D no termina siendo un modelo realista si hay otro 2D.
+		if (!res.length && !fuente) {
+			const intentos =
+				estilo === '2d'
+					? [...Object.keys(VARIANTES_2D).filter((v) => v !== (variante ?? 'color') && v !== 'linea').map((v) => ['2d', v]), ['3d'], ['realista']]
+					: [...['3d', 'realista'].filter((e) => e !== estilo).map((e) => [e]), ['2d', variante]];
+			for (const [otro, otraVariante] of intentos) {
+				res = await buscarRecursos(buscar, {estilo: otro, variante: otraVariante});
 				if (res.length) {
-					log(`    "${buscar}" no está en ${estilo}; uso ${otro}`);
+					log(`    "${buscar}" no está en ${estilo}${variante ? ' ' + variante : ''}; uso ${otro}${otraVariante && otro === '2d' ? ' ' + otraVariante : ''}`);
 					break;
 				}
 			}
-		if (!res.length)
-			throw new ErrorMorfeo(
-				`No encontré "${buscar}" (${estilo}${variante ? ' ' + variante : ''}). Prueba un sinónimo, escríbelo en inglés (buscar: 'barrel'), otro estilo ('2d', '3d', 'realista'), o mira  npx morfeo recursos buscar "${buscar}"`,
-			);
+		}
+		// nada en ninguna biblioteca: se avisa y la capa se omite (el video se hace igual)
+		if (!res.length) {
+			log(`    ⚠ No encontré "${buscar}" en ninguna biblioteca; omito esa capa. Prueba un sinónimo o escríbelo en inglés:  npx morfeo recursos buscar "${buscar}"`);
+			return null;
+		}
 		const r = res[Math.min(n, res.length - 1)];
 		const d = await bajarRecurso(r, {color});
 		creditos.add(d.credito);
@@ -281,19 +290,22 @@ export async function resolverRecursos(video, assetsPublico, log = console.log)
 		log(`    recurso "${buscar}" → ${r.nombre} (${r.fuente})`);
 		return r.tipo === 'modelo'
 			? // modelos externos: cámara más cerca y menos luz ambiente para que no se vean chicos ni deslavados
-			  {tipo: 'modelo', src, ancho: 620, alto: 620, girar3d: [0, 30, 0], distancia: 4.3, camaraY: 0.9, luzAmbiente: 0.25, reflejos: 0.45, luz: 1.6, ...resto}
+			  {tipo: 'modelo', src, ancho: 620, alto: 620, girar3d: [0, 30, 0], levantar: true, distancia: 4.3, camaraY: 0.9, luzAmbiente: 0.25, reflejos: 0.45, luz: 1.6, ...resto}
 			: {tipo: 'imagen', src, ancho: 460, sombra: true, ...resto};
 		void base;
 	};
 	const recorrer = async (x) => {
-		if (Array.isArray(x)) return Promise.all(x.map(recorrer));
+		if (Array.isArray(x)) return (await Promise.all(x.map(recorrer))).filter((v) => v !== null);
 		if (!x || typeof x !== 'object') return x;
 		if (x.tipo === 'recurso') return resolver(x);
 		const out = {};
 		for (const [k, v] of Object.entries(x)) out[k] = await recorrer(v);
+		// un grupo cuya capa repetida no se encontró tampoco se dibuja
+		if (x.tipo === 'grupo' && x.capa && out.capa === null) return null;
 		return out;
 	};
 	const scenes = await recorrer(video.scenes);
 	const hud = await recorrer(video.hud ?? []);
-	return {video: {...video, scenes, hud}, creditos: [...creditos]};
+	const mundo = await recorrer(video.mundo ?? []);
+	return {video: {...video, scenes, hud, mundo}, creditos: [...creditos]};
 }

package/lib/render.mjs

@@ -13,6 +13,7 @@ import {ponerPoses, prepararPersonajes} from './personajes.mjs';
 import {resolverRecursos} from './recursos.mjs';
 import {sintetizarVoces} from './voces.mjs';
 import {transcribir, whisperListo} from './whisper.mjs';
+import {consejosEnTexto, revisarEstructura} from './estructura.mjs';
 
 const require = createRequire(import.meta.url);
 
@@ -121,7 +122,7 @@ function prepararPublico(p) {
 	return {publico, marca: {...p.marca, logo, cta: undefined}, extras: {fuentes, estilos: p.estilos}};
 }
 
-const datosDe = (publico, id) => {
+export const datosDe = (publico, id) => {
 	const f = path.join(publico, 'v', id, 'datos.json');
 	return fs.existsSync(f) ? JSON.parse(fs.readFileSync(f, 'utf8')) : null;
 };
@@ -201,6 +202,12 @@ export async function render({proyecto = process.cwd(), ids, todos = false, log
 	}
 	if (!whisperListo()) log('(Whisper no está instalado: subtítulos repartidos por frase. Para tiempos exactos: npx morfeo instalar --whisper)');
 	const {publico, marca, extras, datos} = await preparar({proyecto, ids: lista, log, _p: p});
+	// estructura: consejos medidos en videos virales (no detienen el render; se apagan con render.consejos: false)
+	if (p.render.consejos !== false)
+		for (const id of lista) {
+			const c = revisarEstructura(p.videos[id], datos[id]);
+			if (c.length) log(`  ${id}: ${c.length} consejo(s) de estructura\n${consejosEnTexto(c)}`);
+		}
 
 	log('Empaquetando la animación...');
 	const {bundle} = await import('@remotion/bundler');
@@ -213,7 +220,7 @@ export async function render({proyecto = process.cwd(), ids, todos = false, log
 	const hechos = [];
 	// cuadros en paralelo: con GPU aguanta más; por software cada pestaña come mucha CPU y memoria
 	const nucleos = os.cpus().length;
-	const concurrenciaBase = p.render.concurrencia ?? (p.render.gl === 'angle' ? Math.max(2, Math.min(6, Math.floor(nucleos / 2))) : Math.max(1, Math.min(3, Math.floor(nucleos / 4))));
+	const concurrenciaBase = p.render.concurrencia ?? (p.render.gl === 'angle' ? Math.max(2, Math.min(10, Math.floor(nucleos * 0.75))) : Math.max(1, Math.min(3, Math.floor(nucleos / 4))));
 	const sinTTY = !process.stdout.isTTY;
 	for (const [i, id] of lista.entries()) {
 		const t = Date.now();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "morfeo",
-	"version": "0.1.2",
+	"version": "0.2.0",
 	"description": "Genera videos verticales animados (Remotion + Three.js) con voz, música y subtítulos, desde un guion en código o escrito por IA.",
 	"type": "module",
 	"license": "SEE LICENSE IN LICENSE",
@@ -32,6 +32,7 @@
 			"types": "./index.d.ts",
 			"default": "./lib/index.mjs"
 		},
+		"./kit": "./remotion/kit/index.ts",
 		"./package.json": "./package.json",
 		"./remotion/*": "./remotion/*"
 	},

package/python/preparar.py

@@ -255,7 +255,7 @@ def preparar(job):
     subs = [dict(a=round(c[0][1], 3), b=round(c[-1][2], 3), w=[[x[0].upper(), round(x[1], 3), round(x[2], 3)] for x in c])
             for ws in WORDS for c in trozos(ws)]
     datos = dict(id=vid, titulo=v.get("title", vid), indice=job.get("indice", 0), duracion=round(sum(durs), 3),
-                 estilo=v.get("estilo", "datos-curiosos"), tema=v.get("tema") or {}, hud=v.get("hud") or [],
+                 estilo=v.get("estilo", "datos-curiosos"), tema=v.get("tema") or {}, hud=v.get("hud") or [], mundo=v.get("mundo") or [], serie=v.get("serie"),
                  audio=f"v/{vid}/mix.wav", whisper=reales, escenas=escenas, subtitulos=subs)
     json.dump(datos, open(os.path.join(outdir, "datos.json"), "w", encoding="utf-8"), ensure_ascii=False, indent=1)
     print(f"    tiempos por palabra: {'Whisper' if reales else 'reparto por frase'} ({reales}/{len(TIM)} escenas)", flush=True)

package/remotion/estilo.ts

@@ -54,6 +54,19 @@ export const backOut = (x: number, s = 1.9) => {
 	const c = clamp(x) - 1;
 	return c * c * ((s + 1) * c + s) + 1;
 };
+/** Resorte amortiguado normalizado a 0..1: llega rápido, se pasa un poco y se asienta. `rebote` 0 = sin pasarse. */
+export const resorte = (x: number, rebote = 0.35) => {
+	const c = clamp(x);
+	if (c >= 1) return 1;
+	return 1 - Math.exp(-7.5 * c) * Math.cos(c * Math.PI * (1.2 + rebote * 3.2));
+};
+/** Frenado fuerte: casi todo el recorrido en el primer tercio (movimiento "seco", editorial). */
+export const easeOutExpo = (x: number) => {
+	const c = clamp(x);
+	return c >= 1 ? 1 : 1 - 2 ** (-10 * c);
+};
+/** Ruido suave determinista en -1..1 (suma de senos con fases distintas): temblores y derivas de cámara. */
+export const ruido = (t: number, semilla = 0) => (Math.sin(t * 1.7 + semilla) + Math.sin(t * 2.9 + semilla * 2.3) * 0.6 + Math.sin(t * 5.3 + semilla * 4.1) * 0.3) / 1.9;
 export const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
 export const mezclaColor = (c1: string, c2: string, t: number) => {
 	const p = (c: string) => [1, 3, 5].map((i) => parseInt(c.slice(i, i + 2), 16));

package/remotion/kit/ilustrado.tsx

@@ -0,0 +1,220 @@
+// Kit ilustrado 2D: piezas SVG para armar el mundo de un video (bosque, noche, campo) en un componente propio.
+// Todas van DENTRO de un <svg> y dependen solo de sus props (y de `t` en segundos): nada se anima solo.
+//
+//   import {Filtros, Cielo, Estrellas, Luna, Montanas, Pinos, Suelo, Pasto, Luciernagas, Paralaje, Texturizado} from 'morfeo/kit';
+//
+// Un mundo se dibuja más grande que el cuadro (p. ej. 2160×1920) y la cámara lo recorre con la `toma` de cada escena.
+// `Paralaje` mueve cada plano según la cámara: lo lejano casi no se mueve y lo cercano se mueve de más.
+import React from 'react';
+
+export const clamp01 = (x: number) => Math.max(0, Math.min(1, x));
+export const suave = (x: number) => {
+	const c = clamp01(x);
+	return c * c * (3 - 2 * c);
+};
+/** Número pseudoaleatorio estable en [0, 1) a partir de un entero. */
+export const azarN = (n: number) => {
+	const x = Math.sin(n * 127.1 + 11.7) * 43758.5453;
+	return x - Math.floor(x);
+};
+
+export type Camara = {x: number; y: number; zoom: number; giro: number};
+
+/**
+ * Filtros compartidos (ponlo una vez dentro del <svg>):
+ *   url(#kit-grano)  motas oscuras recortadas a la figura (papel, pelaje, tierra)
+ *   url(#kit-brillo) resplandor suave alrededor (luna, luciérnagas, luces)
+ *   url(#kit-lejos)  desenfoque leve para lo que queda fuera de foco
+ */
+export const Filtros: React.FC<{grano?: number}> = ({grano = 0.55}) => (
+	<defs>
+		<filter id="kit-grano" x="-5%" y="-5%" width="110%" height="110%">
+			<feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" seed="7" result="ruido" />
+			<feColorMatrix in="ruido" type="matrix" values={`0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  ${grano} 0 0 0 ${-grano * 0.32}`} result="motas" />
+			<feComposite in="motas" in2="SourceAlpha" operator="in" result="recorte" />
+			<feMerge>
+				<feMergeNode in="SourceGraphic" />
+				<feMergeNode in="recorte" />
+			</feMerge>
+		</filter>
+		<filter id="kit-brillo" x="-60%" y="-60%" width="220%" height="220%">
+			<feGaussianBlur stdDeviation="14" result="b" />
+			<feMerge>
+				<feMergeNode in="b" />
+				<feMergeNode in="SourceGraphic" />
+			</feMerge>
+		</filter>
+		<filter id="kit-lejos" x="-10%" y="-10%" width="120%" height="120%">
+			<feGaussianBlur stdDeviation="5" />
+		</filter>
+	</defs>
+);
+
+/** Grupo con grano recortado a sus figuras. Úsalo en personajes y objetos, no en fondos enormes (cuesta render). */
+export const Texturizado: React.FC<{children: React.ReactNode}> = ({children}) => <g filter="url(#kit-grano)">{children}</g>;
+
+/**
+ * Plano con paralaje. `profundidad`: 0 = pegado al mundo, 1 = fijo en pantalla (infinitamente lejos),
+ * negativo = primer plano (se mueve más que el mundo). Sin `camara` no hace nada.
+ */
+export const Paralaje: React.FC<{camara?: Camara; profundidad: number; children: React.ReactNode}> = ({camara, profundidad, children}) => {
+	if (!camara || !profundidad) return <g>{children}</g>;
+	return <g transform={`translate(${(camara.x - 540) * profundidad} ${(camara.y - 960) * profundidad * 0.6})`}>{children}</g>;
+};
+
+/** Cielo en degradado vertical. Dale margen de sobra (x0, x1, y0) para que la cámara nunca vea el borde. */
+export const Cielo: React.FC<{id?: string; colores: string[]; x0?: number; x1?: number; y0?: number; y1?: number}> = ({id = 'kit-cielo', colores, x0 = -1200, x1 = 3400, y0 = -900, y1 = 1920}) => (
+	<>
+		<defs>
+			<linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
+				{colores.map((c, i) => (
+					<stop key={i} offset={i / Math.max(1, colores.length - 1)} stopColor={c} />
+				))}
+			</linearGradient>
+		</defs>
+		<rect x={x0} y={y0} width={x1 - x0} height={y1 - y0} fill={`url(#${id})`} />
+	</>
+);
+
+/** Estrellas que titilan. */
+export const Estrellas: React.FC<{t: number; n?: number; x0?: number; x1?: number; y0?: number; y1?: number; semilla?: number}> = ({t, n = 90, x0 = -400, x1 = 2600, y0 = -300, y1 = 1100, semilla = 0}) => (
+	<g>
+		{Array.from({length: n}, (_, i) => {
+			const s = semilla + i;
+			const o = 0.3 + 0.7 * Math.abs(Math.sin(t * (0.8 + azarN(s + 300) * 1.8) + i));
+			return <circle key={i} cx={x0 + azarN(s) * (x1 - x0)} cy={y0 + azarN(s + 100) * (y1 - y0)} r={1.2 + azarN(s + 200) * 2.6} fill="#fff" opacity={o} />;
+		})}
+	</g>
+);
+
+/** Luna con halo y cráteres; con `cara` tiene ojos y boca, y con `canta` (0..1) abre la boca al ritmo. */
+export const Luna: React.FC<{x: number; y: number; r?: number; t?: number; cara?: boolean; canta?: number}> = ({x, y, r = 110, t = 0, cara, canta = 0}) => {
+	const u = r / 110;
+	const boca = canta > 0 ? (6 + Math.abs(Math.sin(t * 9)) * 14) * canta : 0;
+	return (
+		<g transform={`translate(${x} ${y}) scale(${u})`}>
+			<defs>
+				<radialGradient id="kit-halo">
+					<stop offset="0" stopColor="rgba(255,240,200,0.6)" />
+					<stop offset="1" stopColor="rgba(255,240,200,0)" />
+				</radialGradient>
+			</defs>
+			<circle r={300} fill="url(#kit-halo)" />
+			<g filter="url(#kit-grano)">
+				<circle r={110} fill="#FFF4D6" />
+				<circle cx={-34} cy={-26} r={16} fill="rgba(210,190,150,0.45)" />
+				<circle cx={38} cy={30} r={22} fill="rgba(210,190,150,0.4)" />
+				<circle cx={18} cy={-48} r={9} fill="rgba(210,190,150,0.4)" />
+			</g>
+			{cara ? (
+				<g>
+					{canta > 0.5 ? (
+						<>
+							<path d="M-42 -8 Q-30 -18 -18 -8" stroke="#6B5236" strokeWidth={6} fill="none" strokeLinecap="round" />
+							<path d="M18 -8 Q30 -18 42 -8" stroke="#6B5236" strokeWidth={6} fill="none" strokeLinecap="round" />
+						</>
+					) : (
+						<>
+							<circle cx={-30} cy={-10} r={8} fill="#6B5236" />
+							<circle cx={30} cy={-10} r={8} fill="#6B5236" />
+						</>
+					)}
+					<ellipse cx={0} cy={34} rx={canta > 0.5 ? 14 : 16} ry={canta > 0.5 ? boca : 4} fill={canta > 0.5 ? '#7A3B3B' : '#6B5236'} />
+					<circle cx={-58} cy={18} r={12} fill="rgba(255,150,150,0.45)" />
+					<circle cx={58} cy={18} r={12} fill="rgba(255,150,150,0.45)" />
+				</g>
+			) : null}
+		</g>
+	);
+};
+
+/** Cordillera: una silueta de picos irregulares entre x0 y x1, con la base en `base`. */
+export const Montanas: React.FC<{base: number; alto: number; x0?: number; x1?: number; picos?: number; semilla?: number; color: string}> = ({base, alto, x0 = -600, x1 = 2800, picos = 9, semilla = 0, color}) => {
+	let d = `M${x0} ${base + 400} L${x0} ${base}`;
+	for (let i = 0; i <= picos; i++) {
+		const x = x0 + ((x1 - x0) * i) / picos;
+		const h = alto * (0.45 + azarN(semilla + i * 5) * 0.55);
+		d += ` L${x - (x1 - x0) / picos / 2} ${base - h} L${x} ${base - h * 0.35}`;
+	}
+	return <path d={`${d} L${x1} ${base + 400} Z`} fill={color} />;
+};
+
+/** Fila de pinos como un solo trazado (liviano). */
+export const Pinos: React.FC<{base: number; alto: number; ancho: number; n: number; x0?: number; x1?: number; semilla?: number; color: string}> = ({base, alto, ancho, n, x0 = -500, x1 = 2700, semilla = 0, color}) => {
+	let d = '';
+	for (let i = 0; i < n; i++) {
+		const cx = x0 + ((x1 - x0) * i) / Math.max(1, n - 1) + (azarN(semilla + i) - 0.5) * ancho * 0.6;
+		const h = alto * (0.75 + azarN(semilla + i * 3) * 0.5);
+		const w = ancho * (0.8 + azarN(semilla + i * 7) * 0.4);
+		for (let p = 0; p < 3; p++) {
+			const top = base - h + p * h * 0.26;
+			const bot = base - h * 0.32 + p * h * 0.22;
+			const ww = w * (0.55 + p * 0.25);
+			d += `M${cx} ${top} L${cx + ww / 2} ${bot} L${cx - ww / 2} ${bot} Z `;
+		}
+		d += `M${cx - w * 0.06} ${base - h * 0.12} h${w * 0.12} v${h * 0.16} h${-w * 0.12} Z `;
+	}
+	return <path d={d} fill={color} />;
+};
+
+/** Suelo ondulado: una loma suave de x0 a x1 que baja hasta `fondo`. `y(x)` da la altura del suelo en un punto. */
+export const alturaSuelo = (x: number, y: number, onda = 28) => y + Math.sin(x / 310) * onda + Math.sin(x / 127 + 1.3) * onda * 0.3;
+export const Suelo: React.FC<{y: number; x0?: number; x1?: number; fondo?: number; onda?: number; id?: string; colores: [string, string]}> = ({y, x0 = -800, x1 = 3000, fondo = 2600, onda = 28, id = 'kit-suelo', colores}) => {
+	let d = `M${x0} ${fondo}`;
+	for (let x = x0; x <= x1; x += 40) d += ` L${x} ${alturaSuelo(x, y, onda)}`;
+	return (
+		<>
+			<defs>
+				<linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
+					<stop offset="0" stopColor={colores[0]} />
+					<stop offset="0.55" stopColor={colores[1]} />
+				</linearGradient>
+			</defs>
+			<path d={`${d} L${x1} ${fondo} Z`} fill={`url(#${id})`} />
+		</>
+	);
+};
+
+/** Briznas de pasto sobre el suelo, que se mecen con el viento. */
+export const Pasto: React.FC<{y: number; t: number; n?: number; x0?: number; x1?: number; alto?: number; onda?: number; semilla?: number; color: string; grosor?: number}> = ({y, t, n = 160, x0 = -400, x1 = 2600, alto = 46, onda = 28, semilla = 0, color, grosor = 5}) => {
+	let d = '';
+	for (let i = 0; i < n; i++) {
+		const x = x0 + ((x1 - x0) * (i + azarN(semilla + i) * 0.9)) / n;
+		const h = alto * (0.5 + azarN(semilla + i * 3) * 0.8);
+		const viento = Math.sin(t * 1.6 + x / 140) * h * 0.22 + (azarN(semilla + i * 9) - 0.5) * h * 0.5;
+		const by = alturaSuelo(x, y, onda) + 6;
+		d += `M${x} ${by} Q${x + viento * 0.3} ${by - h * 0.6} ${x + viento} ${by - h} `;
+	}
+	return <path d={d} stroke={color} strokeWidth={grosor} strokeLinecap="round" fill="none" />;
+};
+
+/** Luciérnagas: puntos cálidos que flotan y parpadean. */
+export const Luciernagas: React.FC<{t: number; n?: number; x0?: number; x1?: number; y0?: number; y1?: number; semilla?: number; color?: string}> = ({t, n = 26, x0 = 0, x1 = 2160, y0 = 1000, y1 = 1700, semilla = 0, color = '#FFE98A'}) => (
+	<g filter="url(#kit-brillo)">
+		{Array.from({length: n}, (_, i) => {
+			const s = semilla + i;
+			const x = x0 + azarN(s) * (x1 - x0) + Math.sin(t * (0.4 + azarN(s + 50) * 0.5) + i) * 40;
+			const y = y0 + azarN(s + 20) * (y1 - y0) + Math.cos(t * (0.3 + azarN(s + 70) * 0.5) + i * 2) * 30;
+			const o = 0.25 + 0.75 * Math.abs(Math.sin(t * (0.9 + azarN(s + 90)) + i * 1.7));
+			return <circle key={i} cx={x} cy={y} r={3 + azarN(s + 40) * 3} fill={color} opacity={o} />;
+		})}
+	</g>
+);
+
+/** Sombra de contacto: una elipse oscura y suave bajo los pies de algo. */
+export const Sombra: React.FC<{x: number; y: number; ancho: number; fuerza?: number}> = ({x, y, ancho, fuerza = 0.35}) => (
+	<ellipse cx={x} cy={y} rx={ancho / 2} ry={ancho * 0.09} fill={`rgba(0,0,0,${fuerza})`} filter="url(#kit-lejos)" />
+);
+
+/** Cono de luz (lámpara, luna, linterna) desde (x, y) hacia abajo, girado `angulo` grados. */
+export const ConoLuz: React.FC<{id?: string; x: number; y: number; ancho: number; largo: number; angulo?: number; color?: string; fuerza?: number}> = ({id = 'kit-cono', x, y, ancho, largo, angulo = 0, color = '#FFE8B0', fuerza = 0.35}) => (
+	<g transform={`rotate(${angulo} ${x} ${y})`} style={{mixBlendMode: 'screen'}}>
+		<defs>
+			<linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
+				<stop offset="0" stopColor={color} stopOpacity={fuerza} />
+				<stop offset="1" stopColor={color} stopOpacity="0" />
+			</linearGradient>
+		</defs>
+		<polygon points={`${x - 30},${y} ${x + 30},${y} ${x + ancho / 2},${y + largo} ${x - ancho / 2},${y + largo}`} fill={`url(#${id})`} filter="url(#kit-lejos)" />
+	</g>
+);

package/remotion/kit/index.ts

@@ -0,0 +1,6 @@
+// Kits de Morfeo: piezas para armar las escenas a medida de un video dentro de tus `componentes`.
+//   import {Cielo, Pinos, Paralaje} from 'morfeo/kit';          (2D ilustrado, dentro de un <svg>)
+//   import {Lienzo3D, Terreno, Tubo, Mesa, Pila} from 'morfeo/kit';   (3D: maqueta de día o mesa con luz cálida)
+export * from './ilustrado';
+export * from './tres';
+export {clamp, easeIO, easeOut, easeOutExpo, backOut, resorte, ruido, lerp, mezclaColor} from '../estilo';