morfeo 0.6.7 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -0
- package/bin/morfeo.mjs +14 -0
- package/lib/estructura.mjs +12 -3
- package/lib/guion.mjs +1 -1
- package/lib/skills.mjs +40 -0
- package/package.json +2 -1
- package/plantilla/AGENTS.md +22 -6
- package/skills/CREDITOS.md +13 -0
- package/skills/morfeo-3d/SKILL.md +114 -0
- package/skills/morfeo-animacion/SKILL.md +127 -0
- package/skills/morfeo-animacion/referencias/tiempos.md +94 -0
- package/skills/morfeo-guion/SKILL.md +111 -0
- package/skills/morfeo-guion/referencias/estructura.md +61 -0
- package/skills/morfeo-guion/referencias/ganchos.md +57 -0
- package/skills/morfeo-video/SKILL.md +99 -0
package/README.md
CHANGED
|
@@ -58,8 +58,16 @@ npx morfeo render
|
|
|
58
58
|
| `morfeo guion "tema"` | Claude escribe un video completo en `guiones/<id>.json` (`--estilo documental`, `--imagenes`) |
|
|
59
59
|
| `morfeo estilos` | Lista los estilos visuales |
|
|
60
60
|
| `morfeo guion --desde guion.txt` | Convierte tu texto en escenas (con IA, o `--sin-ia`: una escena por frase) |
|
|
61
|
+
| `morfeo skills` | Instala o actualiza las guías para tu IA (guion, animación, 3D) en `.claude/skills/` |
|
|
61
62
|
| `morfeo instalar` / `doctor` | Prepara o revisa la computadora |
|
|
62
63
|
|
|
64
|
+
## Skills para tu IA
|
|
65
|
+
|
|
66
|
+
El paquete trae cuatro guías de oficio para Claude Code, Codex u otra IA: `morfeo-video` (la ruta completa),
|
|
67
|
+
`morfeo-guion` (ganchos, historia ordenada por retención, cierre), `morfeo-animacion` (tiempos, curvas, escalonado,
|
|
68
|
+
cámara) y `morfeo-3d` (luz, materiales, encuadre). `morfeo nuevo` las deja en `.claude/skills/` y `morfeo skills` las
|
|
69
|
+
pone al día; cualquier IA puede leerlas en `node_modules/morfeo/skills/`, como indica el `AGENTS.md` del proyecto.
|
|
70
|
+
|
|
63
71
|
## Un video
|
|
64
72
|
|
|
65
73
|
```js
|
package/bin/morfeo.mjs
CHANGED
|
@@ -43,6 +43,8 @@ Guiones
|
|
|
43
43
|
--formula <id> una fórmula de historia (construiste, serie, mito, misterio…)
|
|
44
44
|
--investigar busca cada dato en la web con su fuente antes de escribir (van al texto del post)
|
|
45
45
|
formulas Las fórmulas de historia medidas en videos de referencia
|
|
46
|
+
skills Instala o actualiza las guías para tu IA (guion, animación y 3D) en .claude/skills/
|
|
47
|
+
--lista solo las muestra
|
|
46
48
|
estilo Abre una página para crear tu estilo: nombre, siglas, colores, letra, voz, ritmo y cierre
|
|
47
49
|
--estilo documental estilo visual (por defecto, el del proyecto)
|
|
48
50
|
--imagenes pide ilustraciones con IA (necesita OPENAI_API_KEY)
|
|
@@ -240,6 +242,16 @@ Pruébalo: npx morfeo render ${pos[0]} y revísalo: npx morfeo hoja ${pos[0]
|
|
|
240
242
|
console.log('Úsala: npx morfeo guion "tu tema" --formula construiste (o formula: \'construiste\' en el guion para que `revisar` la revise)');
|
|
241
243
|
return;
|
|
242
244
|
}
|
|
245
|
+
case 'skills':
|
|
246
|
+
case 'skill': {
|
|
247
|
+
const {listaSkills, instalarSkills} = await import('../lib/skills.mjs');
|
|
248
|
+
const lista = listaSkills();
|
|
249
|
+
for (const s of lista) console.log(`${s.nombre.padEnd(18)} ${s.descripcion.split('. ')[0]}.`);
|
|
250
|
+
if (op.lista) return;
|
|
251
|
+
const hechas = instalarSkills(proyecto);
|
|
252
|
+
console.log(`\n${hechas.length} skills copiadas a .claude/skills/ (Claude Code las usa solas). Otras IA las leen en node_modules/morfeo/skills/, como indica AGENTS.md.`);
|
|
253
|
+
return;
|
|
254
|
+
}
|
|
243
255
|
case 'guion':
|
|
244
256
|
case 'script':
|
|
245
257
|
return guion(pos, op, proyecto);
|
|
@@ -320,6 +332,8 @@ async function nuevo(carpeta, op) {
|
|
|
320
332
|
// dos videos de ejemplo con mundo y la estructura completa (los mismos que `morfeo nuevo-video`)
|
|
321
333
|
const {nuevoVideo} = await import('../lib/nuevo-video.mjs');
|
|
322
334
|
for (const look of ['2d', '3d']) nuevoVideo({proyecto: destino, id: `ejemplo-${look}`, look});
|
|
335
|
+
// las guías para la IA (guion, animación, 3D), donde Claude Code las encuentra
|
|
336
|
+
(await import('../lib/skills.mjs')).instalarSkills(destino);
|
|
323
337
|
console.log(`Proyecto creado en ${carpeta}/\n\nCon tu IA: abre la carpeta en Claude Code o Codex y escribe «Configúrame»; luego «Hazme un video sobre…».\n\nA mano:\n cd ${carpeta}\n npm install\n npx morfeo instalar (solo la primera vez en esta computadora)\n npx morfeo estilo (tu nombre, colores, letra y voz)\n npx morfeo render`);
|
|
324
338
|
}
|
|
325
339
|
|
package/lib/estructura.mjs
CHANGED
|
@@ -27,13 +27,14 @@
|
|
|
27
27
|
|
|
28
28
|
/** Las reglas, en el orden en que se le explican a la IA y a quien escribe un guion. */
|
|
29
29
|
export const REGLAS = [
|
|
30
|
-
{id: 'gancho', regla: 'Gancho en los primeros 2 segundos', como: 'La primera frase pone al espectador dentro ("Imagina que…", "¿Y si tu…?", "Si tu…") o suelta una cifra o situación imposible. El sujeto ya está en pantalla desde el cuadro 1. Nada de títulos, logos ni "hoy te voy a contar".'},
|
|
30
|
+
{id: 'gancho', regla: 'Gancho en los primeros 2 segundos', como: 'La primera frase pone al espectador dentro ("Imagina que…", "¿Y si tu…?", "Si tu…") o suelta una cifra o situación imposible. El sujeto ya está en pantalla desde el cuadro 1. Nada de títulos, logos ni "hoy te voy a contar". Imagen, voz y rótulo dicen lo mismo y se entienden sin sonido; lo que promete el gancho, el video lo cumple.'},
|
|
31
|
+
{id: 'reserva', regla: 'Varios ganchos, no uno', como: 'Escribe de 6 a 10 de arquetipos distintos (cifra imposible, pregunta directa, contradicción, hallazgo, experimento, "este es X, pero…", error común), elige el mejor y deja 3 de reserva, cada uno de un arquetipo distinto al principal, en `hooks`.'},
|
|
31
32
|
{id: 'tu', regla: 'Habla de tú', como: 'Segunda persona y presente: "te despiertas", "abres la puerta". Si es una historia, un nombre propio en la primera frase ("Este es Alberto").'},
|
|
32
33
|
{id: 'ritmo', regla: 'Algo nuevo cada 2–4 segundos', como: 'Escenas de 2 a 5 s de voz (una idea por escena). Si la escena dura más, que algo entre a media frase (un dato, una etiqueta, un movimiento de cámara).'},
|
|
33
34
|
{id: 'pregunta', regla: 'Pregunta antes de revelar', como: 'Antes de cada dato fuerte, la pregunta que el espectador se haría ("¿Cuánto subió?"); la respuesta llega en la escena siguiente con un número que cuenta o un golpe visual.'},
|
|
34
35
|
{id: 'rotulo', regla: 'Texto en dos niveles', como: 'El subtítulo dice lo que se oye; un rótulo grande y corto (2–4 palabras) resume el momento: "¿CUÁNTO SUBIÓ?", "SALIR DE CASA", "DÍA 21".'},
|
|
35
36
|
{id: 'etiquetas', regla: 'Datos pegados a las cosas', como: 'Nombres y cifras junto a lo que señalan (nombre de personaje con su rol, "▶ acción", "57 toneladas" junto a la ballena), no en un letrero aparte.'},
|
|
36
|
-
{id: 'escalada', regla: 'Que suba la apuesta', como: 'Cada escena más grave, más grande o más rara que la anterior; lo más fuerte cerca del final, no al principio.'},
|
|
37
|
+
{id: 'escalada', regla: 'Que suba la apuesta', como: 'Cada escena más grave, más grande o más rara que la anterior; lo más fuerte (el pago: la respuesta a la pregunta del gancho) cerca del final, no al principio. Hacia la mitad, un giro que contradiga lo que ya se daba por hecho.'},
|
|
37
38
|
{id: 'cierre', regla: 'Cierre con una acción concreta', como: 'Pide algo fácil y específico: elegir A o B en comentarios, escribir una palabra ("escribe PASO"), mandárselo a alguien ("mándaselo al que dice que…") o esperar la parte 2. "Sígueme" solo no basta.'},
|
|
38
39
|
{id: 'bucle', regla: 'Final que conecta con el inicio', como: 'La última frase puede regresar a la primera imagen o dejar una pregunta abierta, para que se vuelva a ver.'},
|
|
39
40
|
{id: 'duracion', regla: 'Entre 30 y 65 segundos (o 90–130 en maqueta)', como: 'La mayoría de los de referencia dura ~1 minuto. Más de 75 s solo si es una serie, una historia o un explicador de maqueta (estilo maqueta: 90–130 s con un corte de cámara cada 2–3 s dentro del mismo mundo).'},
|
|
@@ -46,8 +47,9 @@ ${REGLAS.map((r, i) => `${i + 1}. ${r.regla}: ${r.como}`).join('\n')}`;
|
|
|
46
47
|
import {revisarVoz, revisarZona} from './calidad.mjs';
|
|
47
48
|
import {formulaDe, revisarFormula} from './formulas.mjs';
|
|
48
49
|
|
|
50
|
+
const normal = (s) => String(s ?? '').toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/[^a-z0-9ñ ]+/g, ' ').replace(/\s+/g, ' ').trim();
|
|
49
51
|
const palabrasDe = (s) => String(s ?? '').trim().split(/\s+/).filter(Boolean);
|
|
50
|
-
const GANCHOS = /^(¿|¡|imagina|la mayoría|la mayoria|y si|cómo|como se|si tu|si te|si un|qué pasaría|que pasaria|este es|esta es|esto es|nadie|nunca|todos|a \S+ |hay |tu |tú |te |tienes|cuando)/i;
|
|
52
|
+
const GANCHOS = /^(¿|¡|imagina|la mayoría|la mayoria|y si|cómo|como se|si tu|si te|si un|qué pasaría|que pasaria|este es|esta es|esto es|nadie|nunca|todos|a \S+ |hay |tu |tú |te |tienes|cuando|dentro|llevas|f[ií]jate|mira |jugu[eé]|prob[eé]|encontr[eé])/i;
|
|
51
53
|
|
|
52
54
|
/**
|
|
53
55
|
* Revisa la estructura de un video y devuelve consejos (no bloquea el render).
|
|
@@ -78,6 +80,13 @@ export function revisarEstructura(v, d) {
|
|
|
78
80
|
add('gancho', 'aviso', 'El video abre con un letrero sin imagen. En los videos de referencia el sujeto ya está en pantalla desde el primer cuadro.');
|
|
79
81
|
if (/^(hola|hoy|bienvenid|en este video|te voy a)/i.test(dicho)) add('gancho', 'aviso', 'No abras presentando ("Hoy te voy a contar…"): entra directo a la situación.');
|
|
80
82
|
|
|
83
|
+
// 1b) ganchos de reserva: tres, y que no sean el principal con otras palabras
|
|
84
|
+
const reserva = (v.hooks ?? []).filter((h) => typeof h === 'string' && h.trim());
|
|
85
|
+
const arranque = (x) => normal(x).split(' ').slice(0, 3).join(' ');
|
|
86
|
+
if (reserva.length < 3) add('reserva', 'idea', `Hay ${reserva.length} gancho${reserva.length === 1 ? '' : 's'} de reserva en \`hooks\`: deja 3, de arquetipos distintos (cifra, pregunta, contradicción, hallazgo…), para probar otro arranque sin reescribir.`);
|
|
87
|
+
const repetidos = reserva.filter((h, i) => arranque(h) === arranque(dicho) || reserva.findIndex((o) => arranque(o) === arranque(h)) !== i);
|
|
88
|
+
if (dicho && repetidos.length) add('reserva', 'aviso', `${repetidos.length === 1 ? 'Un gancho de reserva arranca' : `${repetidos.length} ganchos de reserva arrancan`} igual que otro ("${arranque(repetidos[0])}…"): son la misma idea con otras palabras. Cambia de arquetipo.`);
|
|
89
|
+
|
|
81
90
|
// 2) ritmo y duración (con los tiempos reales si ya hay voz)
|
|
82
91
|
const es = d?.escenas?.filter((e) => e.tipo !== 'cta') ?? [];
|
|
83
92
|
if (es.length) {
|
package/lib/guion.mjs
CHANGED
|
@@ -364,7 +364,7 @@ export async function guionConIA(o) {
|
|
|
364
364
|
model: o.modelo ?? MODELO_GUION,
|
|
365
365
|
max_tokens: 16000,
|
|
366
366
|
system: motor ? INSTRUCCIONES_MOTOR : INSTRUCCIONES,
|
|
367
|
-
messages: [{role: 'user', content: `${pedido}\n\n${extra.join('\n')}\nEn "id" pon un identificador corto en minúsculas sin espacios. En "title" el título para publicar (con un emoji). En "music" el estilo de música que mejor le quede. En "descripcion" el texto del post (1–2 frases). En "tags" 3–5 etiquetas sin #. En "hooks" 3 primeras frases alternativas al gancho,
|
|
367
|
+
messages: [{role: 'user', content: `${pedido}\n\n${extra.join('\n')}\nEn "id" pon un identificador corto en minúsculas sin espacios. En "title" el título para publicar (con un emoji). En "music" el estilo de música que mejor le quede. En "descripcion" el texto del post (1–2 frases). En "tags" 3–5 etiquetas sin #. En "hooks" 3 primeras frases alternativas al gancho, cada una de un arquetipo distinto al del gancho y entre sí (cifra imposible, pregunta directa, contradicción, hallazgo, experimento, error común), para probar otra versión.`}],
|
|
368
368
|
output_config: {format: zodOutputFormat(motor ? await esquemaMotor() : await esquema())},
|
|
369
369
|
});
|
|
370
370
|
} catch (e) {
|
package/lib/skills.mjs
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
// Skills de Morfeo: guías para la IA (guion, animación, 3D) que viajan en el paquete, en `skills/`.
|
|
2
|
+
// `instalarSkills` las copia a `.claude/skills/` del proyecto para que Claude Code las detecte solas; otras IA las
|
|
3
|
+
// leen desde `node_modules/morfeo/skills/` (así lo indica AGENTS.md).
|
|
4
|
+
import fs from 'node:fs';
|
|
5
|
+
import path from 'node:path';
|
|
6
|
+
import {PAQUETE} from './entorno.mjs';
|
|
7
|
+
|
|
8
|
+
export const CARPETA_SKILLS = path.join(PAQUETE, 'skills');
|
|
9
|
+
|
|
10
|
+
/** Las skills incluidas: [{nombre, descripcion, carpeta}]. */
|
|
11
|
+
export function listaSkills() {
|
|
12
|
+
if (!fs.existsSync(CARPETA_SKILLS)) return [];
|
|
13
|
+
return fs
|
|
14
|
+
.readdirSync(CARPETA_SKILLS, {withFileTypes: true})
|
|
15
|
+
.filter((d) => d.isDirectory() && fs.existsSync(path.join(CARPETA_SKILLS, d.name, 'SKILL.md')))
|
|
16
|
+
.map((d) => {
|
|
17
|
+
const texto = fs.readFileSync(path.join(CARPETA_SKILLS, d.name, 'SKILL.md'), 'utf8');
|
|
18
|
+
return {nombre: d.name, descripcion: /^description:\s*(.+)$/m.exec(texto)?.[1]?.trim() ?? '', carpeta: path.join(CARPETA_SKILLS, d.name)};
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* Copia las skills de Morfeo a `<proyecto>/.claude/skills/`. Reemplaza solo las carpetas con el nombre de una skill
|
|
24
|
+
* de Morfeo; cualquier otra skill del proyecto se queda como está.
|
|
25
|
+
* @returns {string[]} nombres instalados
|
|
26
|
+
*/
|
|
27
|
+
export function instalarSkills(proyecto) {
|
|
28
|
+
const destino = path.join(proyecto, '.claude', 'skills');
|
|
29
|
+
fs.mkdirSync(destino, {recursive: true});
|
|
30
|
+
const hechas = [];
|
|
31
|
+
for (const s of listaSkills()) {
|
|
32
|
+
const a = path.join(destino, s.nombre);
|
|
33
|
+
// un enlace (el repo de Morfeo enlaza las suyas) ya apunta a la fuente: no se toca
|
|
34
|
+
if (fs.existsSync(a) && fs.lstatSync(a).isSymbolicLink()) continue;
|
|
35
|
+
fs.rmSync(a, {recursive: true, force: true});
|
|
36
|
+
fs.cpSync(s.carpeta, a, {recursive: true});
|
|
37
|
+
hechas.push(s.nombre);
|
|
38
|
+
}
|
|
39
|
+
return hechas;
|
|
40
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "morfeo",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"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.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE",
|
|
@@ -45,6 +45,7 @@
|
|
|
45
45
|
"python/requirements.txt",
|
|
46
46
|
"assets",
|
|
47
47
|
"plantilla",
|
|
48
|
+
"skills",
|
|
48
49
|
"bases",
|
|
49
50
|
"index.d.ts",
|
|
50
51
|
"LICENSE",
|
package/plantilla/AGENTS.md
CHANGED
|
@@ -6,6 +6,19 @@ técnica. Nunca publiques nada por ella: le entregas los archivos y ella decide
|
|
|
6
6
|
|
|
7
7
|
Comandos de referencia: `npx morfeo ayuda`. Tipos de todo lo que existe: `node_modules/morfeo/index.d.ts`.
|
|
8
8
|
|
|
9
|
+
**Guías de oficio (skills).** Morfeo trae cuatro guías en `node_modules/morfeo/skills/`; ábrelas cuando toque, no
|
|
10
|
+
de memoria:
|
|
11
|
+
|
|
12
|
+
| Vas a… | Lee `node_modules/morfeo/skills/…` |
|
|
13
|
+
|---|---|
|
|
14
|
+
| Hacer un video de principio a fin | `morfeo-video/SKILL.md` |
|
|
15
|
+
| Escribir o mejorar el gancho, la historia o el cierre | `morfeo-guion/SKILL.md` |
|
|
16
|
+
| Decidir entradas, ritmo, énfasis o cámara | `morfeo-animacion/SKILL.md` |
|
|
17
|
+
| Armar un mundo 3D o modelar una pieza | `morfeo-3d/SKILL.md` |
|
|
18
|
+
|
|
19
|
+
En Claude Code ya están instaladas en `.claude/skills/` y se cargan solas; tras actualizar Morfeo, `npx morfeo skills`
|
|
20
|
+
las pone al día.
|
|
21
|
+
|
|
9
22
|
**Antes de cada video lee `gustos.md`**: son las reglas de estilo de este canal y mandan sobre lo de abajo. Cuando
|
|
10
23
|
la persona te corrija algo que deba valer para los siguientes videos, ofrécele agregarlo a `gustos.md`.
|
|
11
24
|
|
|
@@ -31,26 +44,29 @@ la persona te corrija algo que deba valer para los siguientes videos, ofrécele
|
|
|
31
44
|
`npx morfeo nuevo-video <id> --formula <fórmula>` (bases: serie, mito, escalada, biografia, construiste; o
|
|
32
45
|
`--look 2d` / `--look 3d`). Si no, `npx morfeo guion "tema" --formula <fórmula>` o escribe el guion a mano en
|
|
33
46
|
`guiones/<id>.mjs` (mira los ejemplos de `guiones/`).
|
|
34
|
-
3. **Escribe el guion** siguiendo la fórmula y estas reglas:
|
|
47
|
+
3. **Escribe el guion** siguiendo la fórmula, la guía `morfeo-guion` y estas reglas:
|
|
48
|
+
- Primero el pago (el dato o giro final) en una frase; luego de 6 a 10 ganchos de arquetipos distintos; elige uno.
|
|
35
49
|
- Gancho en los primeros 2 s, en segunda persona o con una cifra imposible. Nada de "hoy te voy a contar".
|
|
36
50
|
- Una idea por escena (2–5 s de voz). Pregunta antes de revelar. Sube la apuesta hacia el final.
|
|
37
51
|
- `say` es lo que dice la voz (cifras con letra); `show` el subtítulo con cifras.
|
|
38
52
|
- Rótulos cortos en 2–4 escenas (`rotulo`, con `rotuloEstilo` sello/paso/pixel si va), `claves` en cada escena.
|
|
39
53
|
- Cierre que pide algo: `{type: 'cta', pide: 'comenta', palabra: 'X'}` o `pide: 'comparte', a: 'tu amigo que…'`.
|
|
40
|
-
- `title`, `descripcion`, `tags`, `hooks` (3 ganchos de reserva) y `fuentes` (cada dato con su fuente).
|
|
54
|
+
- `title`, `descripcion`, `tags`, `hooks` (3 ganchos de reserva, de arquetipos distintos) y `fuentes` (cada dato con su fuente).
|
|
41
55
|
4. **Enséñale el guion** (texto de cada escena, en limpio) y espera su visto bueno o sus cambios.
|
|
42
56
|
5. **Enséñale el gancho:** `npx morfeo previa <id>` renderiza solo los primeros segundos. Si no le convence, cámbialo
|
|
43
57
|
(tiene 3 ganchos de reserva en `hooks`).
|
|
44
|
-
6. **
|
|
58
|
+
6. **Mundo y movimiento:** si el video lleva mundo 3D o capas animadas, sigue `morfeo-3d` y `morfeo-animacion`
|
|
59
|
+
(nada entra solo con `aparecer`, lo que se nombra llega en su palabra, algo cambia cada 2–4 s).
|
|
60
|
+
7. **Aprueba tomas y ritmo barato:** `npx morfeo animatica <id>` (todo el video a 1/3 de tamaño + su hoja). Si una
|
|
45
61
|
toma está mal, arréglala y vuelve a pedir solo esas escenas: `npx morfeo render <id> --escenas 5-6`.
|
|
46
|
-
|
|
62
|
+
8. **Renderiza y revisa en un paso:** `npx morfeo render <id> --revisar` (video + hoja + revisión). Tras cambiar varios
|
|
47
63
|
guiones, `npx morfeo render --cambiados --revisar` rehace solo los que cambiaron.
|
|
48
|
-
|
|
64
|
+
9. **Revisa antes de entregar** (si no usaste `--revisar`):
|
|
49
65
|
- `npx morfeo revisar <id>`: estructura, que la voz haya dicho el guion, que nada quede bajo los botones de la app,
|
|
50
66
|
el riesgo de "diapositiva" y, en el MP4, cuadros negros, tapados (cámara pegada a algo), lisos o quietos.
|
|
51
67
|
- `npx morfeo hoja <id> --zona`: mira la hoja de contacto (es una imagen); lo pintado en rojo es lo que tapan las apps.
|
|
52
68
|
- Si algo se ve mal (texto encimado, objeto cortado, cuadro vacío), arréglalo y vuelve a renderizar.
|
|
53
|
-
|
|
69
|
+
10. **Entrega:** en `salida/` quedan `<título>.mp4`, `<título>.jpg` (miniatura), `<título> (portada).jpg` y
|
|
54
70
|
`<título>.txt` (texto del post, etiquetas, fuentes y ganchos de reserva). Dile eso y nada más.
|
|
55
71
|
|
|
56
72
|
## Reglas
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
# Créditos
|
|
2
|
+
|
|
3
|
+
Las skills de esta carpeta están escritas para Morfeo. Para ordenar sus ideas se consultaron estas guías públicas
|
|
4
|
+
con licencia MIT; no se copió su texto ni viaja ninguna de ellas dentro del paquete:
|
|
5
|
+
|
|
6
|
+
- [motion-design-skill](https://github.com/LottieFiles/motion-design-skill) (LottieFiles): tiempos, curvas,
|
|
7
|
+
escalonado y principios de animación.
|
|
8
|
+
- [content-skills](https://github.com/vyralcontent/content-skills) (Vyral): arquetipos de gancho y estructura por
|
|
9
|
+
retención.
|
|
10
|
+
- [threejs-skills](https://github.com/cloudai-x/threejs-skills) (CloudAI-X): temario de luz, materiales y
|
|
11
|
+
rendimiento en three.js.
|
|
12
|
+
|
|
13
|
+
Son recomendaciones basadas en patrones: mejoran las probabilidades, no garantizan resultados.
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: morfeo-3d
|
|
3
|
+
description: Armar mundos y piezas 3D que se vean bien en un video vertical de Morfeo, cuidando luz, materiales, color, forma de las piezas, encuadre de cámara y rendimiento. Úsala al escribir `escenas/Mundo*.tsx` con `Lienzo3D`, al modelar un objeto en código con React Three Fiber, al elegir tomas (`Toma3D`), y cuando un mundo "se ve plano", "lavado", "vacío", "la cámara está metida en algo" o `npx morfeo revisar` avise de cuadros tapados o lisos.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# 3D: mundos y piezas
|
|
7
|
+
|
|
8
|
+
## Reglas duras
|
|
9
|
+
|
|
10
|
+
- **Un solo `Lienzo3D` por video.** El navegador aguanta pocos contextos WebGL.
|
|
11
|
+
- **Todo depende de `t`.** Nada de `useFrame`, relojes ni `Math.random()`; para variar usa una `semilla`.
|
|
12
|
+
- **Primero el kit, luego modelos, al final código.** `morfeo/kit` trae `Persona3D`, `Ciudad`, `Camino`, `Coche`,
|
|
13
|
+
`Cuarto3D`, `Terreno`, `Mesa`, `Ambiente`… Un objeto suelto: `{tipo: 'recurso', buscar: '…', estilo: '3d'}` o
|
|
14
|
+
`npx morfeo recursos buscar "…"`. Modela en código solo lo que no exista.
|
|
15
|
+
|
|
16
|
+
## Luz
|
|
17
|
+
|
|
18
|
+
`Lienzo3D` trae tres montajes; elige por el lugar, no por gusto:
|
|
19
|
+
|
|
20
|
+
| `luz` | Qué da | Para |
|
|
21
|
+
|---|---|---|
|
|
22
|
+
| `'dia'` | Cielo claro, sol con sombra suave; `hora` cambia cielo y sol | Exteriores, maquetas, cortes |
|
|
23
|
+
| `'calida'` | Cuarto oscuro con un foco cálido y su cono | Objetos sobre mesa, dinero, piezas |
|
|
24
|
+
| `'noche'` | Ambiente tenue y azulado; las luces las pone el set | Interiores de noche, pantallas, neón |
|
|
25
|
+
|
|
26
|
+
- **Tres luces mentales:** clave (la que da forma, de lado y arriba), relleno (suave, del lado contrario, un
|
|
27
|
+
tercio de la clave) y contra (detrás, despega la figura del fondo). Si el sujeto se funde con el fondo, falta contra.
|
|
28
|
+
- **La luz clave nunca viene de la cámara**: aplana. Muévela con `sol` o `foco` a un lado.
|
|
29
|
+
- **Una sola fuente con sombra.** Las demás, sin sombra.
|
|
30
|
+
- **Luces del set** (lámpara, tele, LED): ponlas como objeto emisivo más una luz puntual débil del mismo color.
|
|
31
|
+
Anímalas con `t` (parpadeo de tele, cambio de LED) para que el fondo viva.
|
|
32
|
+
- **`niebla: [cerca, lejos]`** da profundidad y esconde el borde del mundo; el color es el de `fondo`.
|
|
33
|
+
- **`post`**: `'cine'` (fondo desenfocado y brillo suave), `'miniatura'` (efecto maqueta), `'suave'`. Con sujeto
|
|
34
|
+
chico y set simple, `'cine'` da profundidad casi gratis.
|
|
35
|
+
|
|
36
|
+
## Color y materiales
|
|
37
|
+
|
|
38
|
+
- **Paleta corta:** un color dominante (60 %), uno secundario (30 %) y un acento (10 %) para lo que hay que mirar.
|
|
39
|
+
El acento no se repite en el fondo.
|
|
40
|
+
- **`meshStandardMaterial`** para todo. Dos perillas: `roughness` (0.3 pulido … 0.9 mate) y `metalness` (0 o cerca
|
|
41
|
+
de 0.85; los valores intermedios se ven raros).
|
|
42
|
+
|
|
43
|
+
| Material | `roughness` | `metalness` |
|
|
44
|
+
|---|---|---|
|
|
45
|
+
| Plástico | 0.4–0.5 | 0.1 |
|
|
46
|
+
| Pintura mate, tela, madera | 0.6–0.9 | 0 |
|
|
47
|
+
| Metal pulido | 0.25–0.35 | 0.85 |
|
|
48
|
+
| Goma | 0.9 | 0 |
|
|
49
|
+
| Vidrio, agua | 0.05–0.15, `transparent`, `opacity` 0.3–0.75 | 0.1–0.3 |
|
|
50
|
+
|
|
51
|
+
- **Emisivo con medida:** `emissiveIntensity` 0.3–0.8 para luces y pantallas. Si todo brilla, nada brilla, y los
|
|
52
|
+
colores se lavan.
|
|
53
|
+
- **Colores lavados** casi siempre son demasiada luz ambiente: bájala antes de saturar los colores.
|
|
54
|
+
- **Negro puro y blanco puro no**: usa `#1B1C22` y `#F7F5F0`; conservan volumen.
|
|
55
|
+
- **Contraste con el fondo:** el sujeto debe ser más claro o más saturado que lo que tiene detrás.
|
|
56
|
+
|
|
57
|
+
## Modelar una pieza en código
|
|
58
|
+
|
|
59
|
+
- **Silueta primero.** A tamaño de pulgar debe reconocerse por el contorno. Si no, exagera lo que la identifica
|
|
60
|
+
(el volante de la bici, las capas del cable) y quita detalle.
|
|
61
|
+
- **Formas simples combinadas:** cajas, cilindros, esferas, conos, aros y tubos. De 8 a 30 piezas suele bastar.
|
|
62
|
+
- **Proporciones algo exageradas** (cabezas grandes, grosores generosos): lo delgado desaparece en vertical.
|
|
63
|
+
- **Arma derecho y luego inclina el grupo.** Si inclinas cada parte por separado, quedan despegadas.
|
|
64
|
+
- **Piezas planas** (pantallas, tarjetas): inclina la cara hacia la cámara.
|
|
65
|
+
- **Corte para ver por dentro:** quita la pared de enfrente en vez de hacerla transparente; se lee mejor.
|
|
66
|
+
- **Un detalle que se mueva** (gira, parpadea, gotea, respira) con `t`.
|
|
67
|
+
- **Tamaño:** que quepa en ±1.2 unidades, centrada en el origen, para que se pueda escalar y colocar.
|
|
68
|
+
- **Segmentos:** 24–36 en cilindros protagonistas, 12 en los chicos. Más no se nota.
|
|
69
|
+
|
|
70
|
+
## Componer el mundo
|
|
71
|
+
|
|
72
|
+
- **Vertical = profundidad, no anchura.** Acomoda las cosas una detrás de otra, no lado a lado.
|
|
73
|
+
- **Tres planos:** algo cerca (aunque sea desenfocado), el sujeto en medio y fondo con vida.
|
|
74
|
+
- **Viste el set:** un cuarto vacío con un objeto se ve pobre. Suelo, pared o cielo, dos o tres cosas de utilería
|
|
75
|
+
y una luz propia. `Ambiente` (`cuarto-gamer`, `sala`, `arcade`…) ya lo trae hecho.
|
|
76
|
+
- **Suelo siempre.** Los objetos flotando sin sombra no pesan.
|
|
77
|
+
- **Lo que aún no se nombra, no está**: que llegue con `Aparece` en su palabra (`en={cuando('motor')}`).
|
|
78
|
+
|
|
79
|
+
## Cámara (fov 38, cuadro 1080×1920)
|
|
80
|
+
|
|
81
|
+
A distancia `d` se ven ±0.19·d de ancho y ±0.34·d de alto. Para que algo de ancho `W` llene ~70 % del cuadro,
|
|
82
|
+
`d ≈ 3.7·W`.
|
|
83
|
+
|
|
84
|
+
| Toma | Para | Cómo |
|
|
85
|
+
|---|---|---|
|
|
86
|
+
| General | Decir dónde estamos | En diagonal y desde arriba; nunca de frente |
|
|
87
|
+
| Media | El sujeto y lo que hace | A la altura de los ojos, un poco de lado |
|
|
88
|
+
| Detalle | Lo que se nombra | `fov` 28–32, cerca, fondo simple |
|
|
89
|
+
| Cenital | Mapas, mesas, recorridos | Desde arriba, con una ligera inclinación |
|
|
90
|
+
| Contrapicado | Que algo imponga | Cámara baja mirando hacia arriba |
|
|
91
|
+
|
|
92
|
+
- **Una toma por escena** en `TOMAS`; `a` la mueve, `corte: true` salta, `deriva` acerca despacio.
|
|
93
|
+
- **Mira al objeto por su cara buena**: comprueba que no lo ves por detrás.
|
|
94
|
+
- **Nada entre la cámara y el sujeto.** `despejado` hace que la cámara avance si algo le tapa el lente.
|
|
95
|
+
- **No pegues la cámara**: si un solo color llena el cuadro, estás dentro de algo o demasiado cerca.
|
|
96
|
+
- **Etiquetas 3D** cerca de la orilla se cortan: `lado: 'izq'` o `'der'` hacia el centro.
|
|
97
|
+
- **Aprueba las tomas barato:** `npx morfeo animatica <id>` y, para corregir una, `npx morfeo render <id> --escenas 5`.
|
|
98
|
+
|
|
99
|
+
## Rendimiento
|
|
100
|
+
|
|
101
|
+
- Repetidos (multitudes, árboles, ladrillos): `instancedMesh` o las piezas del kit que ya lo usan (`Multitud3D`).
|
|
102
|
+
- Geometría calculada (`TubeGeometry`, `ExtrudeGeometry`): dentro de `useMemo`, no en cada cuadro.
|
|
103
|
+
- Transparencias, pocas: cada una cuesta y se ordenan mal entre sí.
|
|
104
|
+
- Sombras: una luz. Modelos `.glb`: menos de unos miles de triángulos por objeto.
|
|
105
|
+
- Si el render va lento, baja primero el número de mallas, no la calidad.
|
|
106
|
+
|
|
107
|
+
## Lista antes de entregar
|
|
108
|
+
|
|
109
|
+
- [ ] El sujeto se despega del fondo (contra, contraste o niebla).
|
|
110
|
+
- [ ] Hay suelo y sombra; nada flota sin querer.
|
|
111
|
+
- [ ] Paleta de tres colores; el acento solo en lo importante.
|
|
112
|
+
- [ ] Cada toma muestra el objeto entero y por su cara buena.
|
|
113
|
+
- [ ] El fondo tiene algo que se mueve.
|
|
114
|
+
- [ ] En la hoja (`npx morfeo hoja <id>`) ningún cuadro está tapado, liso ni vacío.
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: morfeo-animacion
|
|
3
|
+
description: Decidir cómo se mueve cada cosa en un video de Morfeo, es decir entradas y salidas de capas, tiempos y curvas, escalonado, énfasis, movimiento de ambiente y cámara (2D y 3D). Úsala al poner `entrada`, `en`, `curva`, `toma`, `transicion` o `Aparece`, al animar una pieza o un mundo en código, y cuando el video "se ve como diapositiva", "todo entra igual", "se siente tieso" o `npx morfeo revisar` avise de cuadros quietos.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Animación: cómo se mueve cada cosa
|
|
7
|
+
|
|
8
|
+
## Regla dura
|
|
9
|
+
|
|
10
|
+
Todo movimiento sale del cuadro actual. En los componentes usa el `t` (segundos) que te da Morfeo, `tEscena`,
|
|
11
|
+
`cuando('palabra')` o `useCurrentFrame()`. **Nunca** `useFrame`, transiciones o animaciones CSS, `Date`,
|
|
12
|
+
`setTimeout`, `Math.random()` sin semilla ni mezcladores con reloj propio: el render saca cuadros sueltos y en
|
|
13
|
+
desorden, y cualquier cosa que dependa del reloj real sale distinta en cada cuadro. Para azar usa `ruido(t, semilla)`.
|
|
14
|
+
|
|
15
|
+
## Antes de animar: tres preguntas
|
|
16
|
+
|
|
17
|
+
1. **¿Qué debe sentir quien lo ve?** Sorpresa, calma, urgencia, gracia. De eso salen curva y duración.
|
|
18
|
+
2. **¿Quién es el protagonista de este momento?** Uno solo. Lo demás acompaña o se queda quieto.
|
|
19
|
+
3. **¿Están las tres capas de movimiento?** Principal (lo que se sigue con la vista), secundaria (lo que reacciona:
|
|
20
|
+
una sombra, una etiqueta que llega después) y de ambiente (fondo vivo). Si falta una, se ve plano.
|
|
21
|
+
|
|
22
|
+
## Entradas de capa
|
|
23
|
+
|
|
24
|
+
| `entrada` | Se siente | Úsala para |
|
|
25
|
+
|---|---|---|
|
|
26
|
+
| `escala` (por defecto) | Neutra | Casi todo |
|
|
27
|
+
| `rebote` | Juguetona, con sobrepaso | Objetos, premios, lo que "cae bien" |
|
|
28
|
+
| `caer` | Pesada | Sellos, cosas que golpean |
|
|
29
|
+
| `subir` | Tranquila | Fuentes, secciones, textos largos |
|
|
30
|
+
| `deslizar-izq` / `-der` / `-arriba` / `-abajo` | Con dirección | Lo que viene de algún lado o continúa un movimiento |
|
|
31
|
+
| `girar` | Llamativa | Una vez por video, no más |
|
|
32
|
+
| `enfocar` | De cine | Revelar algo importante |
|
|
33
|
+
| `aparecer` | Discreta | Solo apoyo; nunca para lo importante (ver reglas) |
|
|
34
|
+
| `ninguna` | Corte seco | Cambios a ritmo de la voz, listas rápidas |
|
|
35
|
+
|
|
36
|
+
`curva`: `'suave'` (frena al llegar; por defecto), `'resorte'` (sobrepasa y asienta; juguetón) o `'seca'` (rápida y
|
|
37
|
+
decidida; énfasis). El estilo fija una para todo el video en `movimiento`; cámbiala por capa solo con motivo.
|
|
38
|
+
|
|
39
|
+
## Tiempos
|
|
40
|
+
|
|
41
|
+
| Qué | Duración | En Morfeo |
|
|
42
|
+
|---|---|---|
|
|
43
|
+
| Golpe, sello, cifra que cae | 0.15–0.25 s | `duracionEntrada: 0.2`, `curva: 'seca'` |
|
|
44
|
+
| Icono, etiqueta, chip | 0.25–0.35 s | `duracionEntrada: 0.3` |
|
|
45
|
+
| Tarjeta, objeto, personaje | 0.4–0.55 s | El valor por defecto (0.5) |
|
|
46
|
+
| Revelación con peso | 0.6–1.2 s | `enfocar` o `escalar` lento |
|
|
47
|
+
| Movimiento de ambiente | 2–20 s por ciclo | `flotar`, `girar`, deriva de cámara |
|
|
48
|
+
|
|
49
|
+
- **Entrar tarda más que salir**: la salida dura entre 65 y 75 % de la entrada.
|
|
50
|
+
- **Más distancia, más tiempo**: lo que cruza media pantalla tarda ~1.5× lo que se mueve un poco.
|
|
51
|
+
- **Peso**: lo grande y pesado va más lento y sin sobrepaso; lo chico y ligero, rápido y con rebote.
|
|
52
|
+
- **Sobrepaso**: 0 % en errores y cosas serias, 5–10 % en aciertos, 15–25 % en festejos.
|
|
53
|
+
|
|
54
|
+
Curvas, resortes y equivalencias: [referencias/tiempos.md](referencias/tiempos.md).
|
|
55
|
+
|
|
56
|
+
## Coreografía
|
|
57
|
+
|
|
58
|
+
- **Primero el protagonista**; lo demás entra después y desde el mismo lado.
|
|
59
|
+
- **Escalona**: entre capas hermanas deja 0.05–0.1 s (`en: 'palabra'`, `'palabra+0.08'`, `'palabra+0.16'`). El
|
|
60
|
+
escalonado completo no pasa de 0.5 s; si hay muchas, baja el paso a 0.03 s.
|
|
61
|
+
- **Regla del tercio (cantidad):** con tres o más cosas en pantalla, se mueve a la vez como mucho una tercera parte.
|
|
62
|
+
- **Regla del tercio (distancia):** nada recorre más de un tercio del cuadro sin un cambio (pausa, giro, otra curva).
|
|
63
|
+
- **Lo secundario llega 0.05–0.15 s tarde**: la etiqueta después del objeto, el número después de la barra.
|
|
64
|
+
- **Contramovimiento**: si el protagonista va a la derecha, el fondo deriva un poco a la izquierda.
|
|
65
|
+
- **Sincroniza con la voz**: lo que se nombra aparece en la palabra (`en: 'palabra'`), no antes ni después. Para
|
|
66
|
+
golpes, `'palabra-0.05'` se siente más justo que tarde.
|
|
67
|
+
|
|
68
|
+
## Principios que más se notan
|
|
69
|
+
|
|
70
|
+
- **Anticipación:** antes de un movimiento grande, uno chico en sentido contrario (encoger 3–5 % y luego crecer;
|
|
71
|
+
retroceder antes de saltar). En código: `escala = 1 - 0.04 * campana(k)` justo antes de `en`.
|
|
72
|
+
- **Aplastar y estirar:** al caer algo, aplástalo 8–12 % un instante y recupéralo (así lo hace `Aparece`).
|
|
73
|
+
- **Arcos:** las cosas vivas se mueven en curva, no en línea recta; añade un desvío lateral a medio camino.
|
|
74
|
+
- **Seguir y asentar:** tras llegar, sobrepasa un poco y regresa (`'resorte'`, `backOut`).
|
|
75
|
+
- **Nada perfectamente quieto:** lo que queda en pantalla más de 2 s respira (`flotar`, `latir`, giro lento,
|
|
76
|
+
parpadeo). La cámara también: deriva lenta si no hay otro movimiento.
|
|
77
|
+
- **Una sola cosa llamativa por momento.** Si todo rebota, nada destaca.
|
|
78
|
+
|
|
79
|
+
## Énfasis
|
|
80
|
+
|
|
81
|
+
- Rótulos `sello` y `pixel` ya traen golpe de cámara (`golpe: false` lo quita). No sumes otro efecto encima.
|
|
82
|
+
- Cifras: `contador` o `dato` que cuenta hasta el valor; el número pesa más si llega 0.1 s después de su objeto.
|
|
83
|
+
- `latir` para lo que hay que mirar; `escalar: {a: 1.15, en: 'palabra'}` para subrayar una palabra.
|
|
84
|
+
- El sonido sale solo según la entrada; `sonido: false` cuando varias capas entran juntas (un solo golpe basta).
|
|
85
|
+
|
|
86
|
+
## Cámara
|
|
87
|
+
|
|
88
|
+
**2D (`toma` por escena):** `{x, y, zoom}` centra un punto del mundo; `a: {...}` la mueve durante la escena;
|
|
89
|
+
`deriva` la acerca despacio; `corte: true` salta sin viaje.
|
|
90
|
+
|
|
91
|
+
**3D (`Toma3D` por escena):** `{pos, mirar, fov}`; `a` para moverla, `viaje` para la duración del traslado,
|
|
92
|
+
`corte: true` para saltar, `deriva` para el acercamiento lento.
|
|
93
|
+
|
|
94
|
+
- **Cambia algo cada 2–4 s**: corte, viaje o entrada. Con `ambiente`, `cortes` reparte sub-tomas dentro de la escena.
|
|
95
|
+
- **Corta** cuando cambia el tema o el lugar; **viaja** cuando sigues la misma cosa.
|
|
96
|
+
- **Secuencia que funciona:** general (dónde estamos) → detalle (lo que se nombra) → reacción (el personaje).
|
|
97
|
+
- No encadenes dos viajes largos seguidos: marea. Viaje, corte, viaje.
|
|
98
|
+
- Acercar sube la tensión; alejar la suelta o revela escala.
|
|
99
|
+
- `transicion` entre escenas: `corte` por defecto; `barrido` o `empuje` cuando se cambia de lugar; `fundido` para
|
|
100
|
+
pasos de tiempo; `destello` y `zoom` contados (una o dos veces por video).
|
|
101
|
+
|
|
102
|
+
## Animar en código (mundos y piezas)
|
|
103
|
+
|
|
104
|
+
Del kit (`morfeo/kit`): `clamp`, `lerp`, `easeOut`, `easeIO`, `easeOutExpo`, `backOut`, `resorte`, `ruido`.
|
|
105
|
+
|
|
106
|
+
```tsx
|
|
107
|
+
const k = clamp((t - cuando('motor')) / 0.5); // avance 0..1 desde la palabra
|
|
108
|
+
const y = lerp(4, 0, easeOut(k)); // llega frenando
|
|
109
|
+
const s = backOut(k); // crece con sobrepaso
|
|
110
|
+
const respira = 1 + Math.sin(t * 1.6) * 0.02; // ambiente
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
- Movimiento en el espacio: nunca lineal (solo giros continuos y barras de progreso).
|
|
114
|
+
- Ciclos de ambiente con senos de periodos distintos (1.6, 2.3, 3.1) para que no se note la repetición.
|
|
115
|
+
- `Aparece` (`desde: 'arriba' | 'crece' | 'izq' | 'der' | 'abajo'`) ya resuelve caída, rebote y aplastamiento.
|
|
116
|
+
- Varias partes: mismo patrón con `en` escalonado (`en + i * 0.08`).
|
|
117
|
+
|
|
118
|
+
## Lista antes de entregar
|
|
119
|
+
|
|
120
|
+
- [ ] Cada escena tiene principal, secundaria y ambiente.
|
|
121
|
+
- [ ] Ninguna entrada importante es solo `aparecer`.
|
|
122
|
+
- [ ] Las hermanas entran escalonadas y el total no pasa de 0.5 s.
|
|
123
|
+
- [ ] Nada cruza más de un tercio del cuadro de un tirón.
|
|
124
|
+
- [ ] Lo que se nombra aparece en su palabra (sin avisos `!` en el render).
|
|
125
|
+
- [ ] No hay más de 3 s sin cambio visible (`npx morfeo revisar` lo marca como cuadro quieto).
|
|
126
|
+
- [ ] Hay como mucho un efecto llamativo por momento.
|
|
127
|
+
- [ ] Se entiende a velocidad normal, sin pausar.
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
# Tiempos, curvas y resortes
|
|
2
|
+
|
|
3
|
+
Morfeo trabaja a 30 cuadros por segundo: 0.1 s = 3 cuadros. Menos de 3 cuadros no se percibe como movimiento.
|
|
4
|
+
|
|
5
|
+
## Curvas del kit y cuándo usarlas
|
|
6
|
+
|
|
7
|
+
| Función (`morfeo/kit`) | Forma | Para |
|
|
8
|
+
|---|---|---|
|
|
9
|
+
| `easeOut(k)` | Arranca rápido, frena al llegar | Entradas (lo normal) |
|
|
10
|
+
| `easeOutExpo(k)` | Frena mucho más brusco | Golpes, énfasis, lo "seco" |
|
|
11
|
+
| `easeIO(k)` | Suave en los dos extremos | Lo que se mueve estando ya en pantalla; cámara |
|
|
12
|
+
| `backOut(k, s)` | Sobrepasa y regresa (`s` = cuánto) | Objetos juguetones, aciertos |
|
|
13
|
+
| `resorte(k, rebote)` | Oscila y asienta | Festejos, cosas elásticas |
|
|
14
|
+
| `Math.sin(t * w)` | Va y viene sin fin | Ambiente, respiración, flotar |
|
|
15
|
+
| lineal (`k`) | Constante | Solo giros continuos y barras de progreso |
|
|
16
|
+
|
|
17
|
+
Dirección: **entrar frena** (`easeOut`), **salir acelera** (`k * k`), **moverse en pantalla** usa `easeIO`.
|
|
18
|
+
|
|
19
|
+
En capas, `curva: 'suave'` = `easeOut`, `'seca'` = `easeOutExpo`, `'resorte'` = `resorte(k, 0.3)`; `entrada: 'rebote'`
|
|
20
|
+
usa `backOut`.
|
|
21
|
+
|
|
22
|
+
## Duración según lo que es
|
|
23
|
+
|
|
24
|
+
| Elemento | Segundos | Cuadros |
|
|
25
|
+
|---|---|---|
|
|
26
|
+
| Micro-reacción (parpadeo, pulso) | 0.08–0.12 | 3–4 |
|
|
27
|
+
| Golpe, sello | 0.15–0.25 | 5–8 |
|
|
28
|
+
| Icono, chip, etiqueta | 0.25–0.35 | 8–10 |
|
|
29
|
+
| Objeto, tarjeta, personaje | 0.4–0.55 | 12–16 |
|
|
30
|
+
| Cambio de escena (`transicion`) | 0.35–0.5 | 10–15 |
|
|
31
|
+
| Revelación con peso | 0.6–1.2 | 18–36 |
|
|
32
|
+
| Viaje de cámara | 0.8–1.6 | 24–48 |
|
|
33
|
+
| Ciclo de ambiente | 2–20 | — |
|
|
34
|
+
|
|
35
|
+
Distancia: poca = ×0.8, media = ×1, media pantalla = ×1.5, pantalla completa = ×1.8–2.
|
|
36
|
+
Salida = 65–75 % de la entrada.
|
|
37
|
+
|
|
38
|
+
## Carácter del video
|
|
39
|
+
|
|
40
|
+
Elige uno para todo el video y fíjalo en `movimiento` del estilo; no lo mezcles escena a escena.
|
|
41
|
+
|
|
42
|
+
| Carácter | Rápida / normal / lenta (s) | Curva | Sobrepaso | Va con |
|
|
43
|
+
|---|---|---|---|---|
|
|
44
|
+
| Juguetón | 0.15 / 0.25 / 0.4 | `resorte` | 10–20 % | Curiosidades, humor, niños |
|
|
45
|
+
| Enérgico | 0.1 / 0.18 / 0.3 | `seca` | 15–30 % en festejos | Retos, escaladas, conteos |
|
|
46
|
+
| Sobrio | 0.2 / 0.3 / 0.45 | `suave` | 0–3 % | Tutoriales, explicadores, noticias |
|
|
47
|
+
| Elegante | 0.35 / 0.5 / 0.8 | `suave` | 0 % | Biografías, historias serias |
|
|
48
|
+
|
|
49
|
+
## Emoción → movimiento
|
|
50
|
+
|
|
51
|
+
| Emoción | Trayectoria | Curva | Duración |
|
|
52
|
+
|---|---|---|---|
|
|
53
|
+
| Alegría | Arcos hacia arriba | `backOut` | 0.2–0.4 |
|
|
54
|
+
| Calma | Curvas suaves | seno | 0.5–1.0 |
|
|
55
|
+
| Urgencia | Rectas, cortas | `easeOutExpo` | 0.1–0.2 |
|
|
56
|
+
| Tristeza | Hacia abajo, lenta | `easeIO` | 0.6–1.2 |
|
|
57
|
+
| Sorpresa | Del centro hacia fuera | `easeOutExpo` | 0.15–0.3 |
|
|
58
|
+
| Misterio | Deriva lenta, aparece de lo oscuro | `easeIO` + `enfocar` | 0.8–1.5 |
|
|
59
|
+
|
|
60
|
+
Trayectorias: angular = tensión; curva = amable; diagonal = intención; vertical = peso o crecimiento;
|
|
61
|
+
horizontal = avance.
|
|
62
|
+
|
|
63
|
+
## Material → cómo se mueve
|
|
64
|
+
|
|
65
|
+
| Material | Duración | Sobrepaso |
|
|
66
|
+
|---|---|---|
|
|
67
|
+
| Rígido (metal, piedra) | ×1.2 | 0 % |
|
|
68
|
+
| Elástico (goma, gel) | ×0.8 | 15–25 % |
|
|
69
|
+
| Líquido | ×1.5 | 5 % |
|
|
70
|
+
| Papel, cartón | ×1 | 3–5 % |
|
|
71
|
+
| Humo, niebla | ×2 | 0 % |
|
|
72
|
+
|
|
73
|
+
## Escalonado
|
|
74
|
+
|
|
75
|
+
| Patrón | Paso entre elementos | Total máximo | Para |
|
|
76
|
+
|---|---|---|---|
|
|
77
|
+
| Cascada fina | 0.02–0.04 s | 0.2 s | Listas, rejillas, barras |
|
|
78
|
+
| Normal | 0.05–0.1 s | 0.4 s | Tarjetas, objetos |
|
|
79
|
+
| Dramático | 0.1–0.2 s | 0.6 s | Tres piezas protagonistas |
|
|
80
|
+
|
|
81
|
+
Orden: de arriba abajo en listas, de izquierda a derecha en filas, del centro hacia fuera en un protagonista,
|
|
82
|
+
inverso en las salidas.
|
|
83
|
+
|
|
84
|
+
## Fórmulas útiles (todo depende de `t`)
|
|
85
|
+
|
|
86
|
+
```tsx
|
|
87
|
+
const k = clamp((t - en) / dur); // avance 0..1
|
|
88
|
+
const campana = Math.sin(clamp(k) * Math.PI); // sube y baja: anticipación, aplastamiento
|
|
89
|
+
const anticipa = 1 - 0.04 * Math.sin(clamp((t - (en - 0.12)) / 0.12) * Math.PI); // encoge antes de salir
|
|
90
|
+
const arco = lerp(x0, x1, easeOut(k)); const alto = campana * 0.4; // trayectoria en arco
|
|
91
|
+
const sacude = k < 1 ? Math.sin(k * Math.PI * 6) * (1 - k) * 12 : 0; // 3 oscilaciones que se apagan
|
|
92
|
+
const flota = Math.sin(t * 1.6 + semilla) * 0.05; // ambiente; cambia la semilla por objeto
|
|
93
|
+
const parpadea = 0.5 + 0.5 * Math.max(0, Math.sin(t * 4 + i)); // luces
|
|
94
|
+
```
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: morfeo-guion
|
|
3
|
+
description: Escribir o mejorar el guion de un video corto vertical de Morfeo, con ganchos (generar varios y elegir), orden de la historia por retención, escalada, pago y cierre. Úsala al escribir `guiones/<id>.mjs`, cuando pidan "mejora el gancho", "el video aburre", "dame ganchos para…", "reescribe el guion", o cuando `npx morfeo revisar` avise de gancho, ritmo, preguntas o cierre.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Guion: gancho, historia y cierre
|
|
7
|
+
|
|
8
|
+
Un video corto se decide en los primeros 2 segundos y se sostiene con una pregunta abierta hasta el final. Estas
|
|
9
|
+
reglas suben las probabilidades; no prometen que un video se vuelva viral, y no lo prometas tú.
|
|
10
|
+
|
|
11
|
+
## Orden de trabajo
|
|
12
|
+
|
|
13
|
+
1. **Escribe primero el pago**: el dato, giro o imagen por el que valió la pena ver el video, en una frase. Si no
|
|
14
|
+
cabe en una frase, el tema todavía no está claro.
|
|
15
|
+
2. **Escribe de 6 a 10 ganchos** de al menos tres arquetipos distintos (tabla de abajo). Uno solo es una apuesta.
|
|
16
|
+
3. **Elige uno** con la lista de comprobación y guarda **tres de reserva, de arquetipos distintos**, en `hooks`.
|
|
17
|
+
4. **Arma hacia atrás** desde el pago: qué necesita saber el espectador, en qué orden, y qué pregunta lo mantiene.
|
|
18
|
+
5. **Cierra** pidiendo una sola cosa concreta.
|
|
19
|
+
6. Revisa con `npx morfeo revisar <id>` y con los fallos comunes de abajo.
|
|
20
|
+
|
|
21
|
+
## El gancho tiene tres capas
|
|
22
|
+
|
|
23
|
+
En los primeros 2 segundos trabajan juntas. Una buena frase sobre un cuadro vacío es medio gancho.
|
|
24
|
+
|
|
25
|
+
| Capa | Qué es en Morfeo | Regla |
|
|
26
|
+
|---|---|---|
|
|
27
|
+
| Imagen | Lo que hay en el cuadro 1: el sujeto ya en pantalla y algo moviéndose | Debe entenderse sin sonido |
|
|
28
|
+
| Voz | El `say` de la primera escena | Se dice en menos de 2 s; sin saludo ni presentación |
|
|
29
|
+
| Texto | `rotulo` de la primera escena (o el subtítulo) | 3 a 7 palabras, con la cifra o la palabra fuerte |
|
|
30
|
+
|
|
31
|
+
Las tres dicen lo mismo y coinciden con el `title`. Si el título promete algo, el primer cuadro ya lo muestra.
|
|
32
|
+
|
|
33
|
+
## Arquetipos de gancho
|
|
34
|
+
|
|
35
|
+
| Arquetipo | Molde | Cuándo |
|
|
36
|
+
|---|---|---|
|
|
37
|
+
| Cifra imposible | "Este cartucho sabe a lo más amargo del mundo: [cifra]." | Hay un número raro y verificable |
|
|
38
|
+
| Pregunta directa | "¿Y si tu [cosa] llevara [tiempo] haciendo [algo]?" | El tema toca la vida del espectador |
|
|
39
|
+
| Contradicción | "Todos creen que [X]. No es así." | Tienes cómo sostenerlo; el pago debe defenderlo |
|
|
40
|
+
| Hallazgo | "Hay [algo oculto] dentro de [cosa conocida]." | Explicadores y "por dentro" |
|
|
41
|
+
| Experimento | "Jugué [X] durante [tiempo] para saber [Y]." | Hay una prueba con resultado |
|
|
42
|
+
| Esto es X, pero… | "Este es [nombre]. Hoy va a [giro]." | Historias con personaje |
|
|
43
|
+
| Mira esto | "Fíjate en [detalle]. No debería estar ahí." | La imagen sola ya sorprende |
|
|
44
|
+
| Error común | "Llevas años [haciendo X] mal." | Tutoriales y consejos |
|
|
45
|
+
|
|
46
|
+
La contradicción es la que más sube cuando funciona y la que más falla; el hallazgo es más parejo. Un buen lote
|
|
47
|
+
lleva de las dos. Más moldes y ejemplos: [referencias/ganchos.md](referencias/ganchos.md).
|
|
48
|
+
|
|
49
|
+
**Comprobación de un gancho** (todas deben cumplirse):
|
|
50
|
+
|
|
51
|
+
- Tiene un sustantivo concreto o una cifra, no una promesa vaga ("no vas a creer…").
|
|
52
|
+
- Se entiende con el sonido apagado.
|
|
53
|
+
- Termina antes del segundo 2 y deja una pregunta abierta.
|
|
54
|
+
- Lo que promete, el video lo cumple. Si exagera, se quita.
|
|
55
|
+
- No empieza con saludo, nombre del canal, "hoy te voy a contar" ni una orden ("mira esto hasta el final").
|
|
56
|
+
|
|
57
|
+
## La historia: una pregunta abierta todo el tiempo
|
|
58
|
+
|
|
59
|
+
| Tramo | Segundos (video de 30–45 s) | Qué hace |
|
|
60
|
+
|---|---|---|
|
|
61
|
+
| Gancho | 0–2 | Abre la pregunta grande |
|
|
62
|
+
| Contexto mínimo | 2–6 | Solo lo necesario para entender la pregunta; una o dos escenas |
|
|
63
|
+
| Escalada | 6–30 | Cada escena responde una pregunta chica y abre otra; cada una más grande o más rara que la anterior |
|
|
64
|
+
| Pago | últimos 5–8 | Responde la pregunta grande con el dato o giro más fuerte |
|
|
65
|
+
| Cierre | 2–4 | Pide una cosa |
|
|
66
|
+
|
|
67
|
+
- **Una idea por escena, de 2 a 5 s de voz.** Si una escena no agrega nada nuevo, se borra.
|
|
68
|
+
- **Pregunta antes de revelar.** La pregunta en una escena, la respuesta en la siguiente con cifra o golpe visual.
|
|
69
|
+
- **Un giro hacia la mitad** ("pero ahí no acaba", un dato que contradice lo anterior): sin él, la gente se va de a poco.
|
|
70
|
+
- **Lo más fuerte cerca del final**, no al principio. El gancho promete; el pago entrega.
|
|
71
|
+
- **No adelantes el pago** en el contexto, y no lo entierres: si tarda más de 40 s, acorta la escalada.
|
|
72
|
+
- **Bucle:** la última frase puede regresar a la primera imagen o dejar una pregunta que haga volver a verlo.
|
|
73
|
+
|
|
74
|
+
La fórmula del video (`npx morfeo formulas`) fija los tramos propios de cada formato (mito, misterio, biografía,
|
|
75
|
+
experimento…); estas reglas se aplican dentro de ella. Detalle por tramo y cómo leer una caída de retención:
|
|
76
|
+
[referencias/estructura.md](referencias/estructura.md).
|
|
77
|
+
|
|
78
|
+
## Voz
|
|
79
|
+
|
|
80
|
+
- Segunda persona y presente: "te despiertas", "abres la caja". En historias, nombre propio en la primera frase.
|
|
81
|
+
- Frases cortas, una idea cada una. Lee el guion en voz alta: si te quedas sin aire, córtala.
|
|
82
|
+
- `say` lleva las cifras en letra; `show` las lleva en número. Cifras raras y exactas pesan más que las redondas,
|
|
83
|
+
pero solo si tienen fuente (`fuentes`). Si dudas de una cifra, dila en general o quítala.
|
|
84
|
+
- Sin relleno: "básicamente", "como ya sabes", "en este video".
|
|
85
|
+
|
|
86
|
+
## Cierre
|
|
87
|
+
|
|
88
|
+
Pide **una** cosa, fácil y concreta, ligada al contenido:
|
|
89
|
+
|
|
90
|
+
- Elegir: `{type: 'cta', pide: 'comenta', palabra: 'X'}` con una pregunta de A o B.
|
|
91
|
+
- Compartir: `pide: 'comparte', a: 'tu amigo que dice que…'`.
|
|
92
|
+
- Parte 2 si es serie (`serie`).
|
|
93
|
+
|
|
94
|
+
"Sígueme" solo no basta, y no se pide nada antes de haber entregado el pago.
|
|
95
|
+
|
|
96
|
+
## Fallos comunes
|
|
97
|
+
|
|
98
|
+
| Fallo | Cómo se nota | Arreglo |
|
|
99
|
+
|---|---|---|
|
|
100
|
+
| Presentación antes del gancho | Primera escena saluda o explica de qué va | Borra esa escena; empieza en la acción |
|
|
101
|
+
| Gancho vago | "Esto te va a sorprender" | Pon el sustantivo o la cifra |
|
|
102
|
+
| Gancho que no se cumple | El pago es más chico que la promesa | Baja la promesa o sube el pago |
|
|
103
|
+
| Mitad plana | Tres escenas seguidas del mismo tamaño | Añade un giro o quita dos |
|
|
104
|
+
| Pago adelantado | El dato fuerte sale en el contexto | Muévelo al final; deja la pregunta |
|
|
105
|
+
| Dos ideas en una escena | Escena de más de 5 s sin nada nuevo en pantalla | Pártela |
|
|
106
|
+
| Cierre genérico | "Sígueme para más" | Pregunta de A o B o "mándaselo a…" |
|
|
107
|
+
|
|
108
|
+
## Entrega
|
|
109
|
+
|
|
110
|
+
`title`, `descripcion`, `tags`, `hooks` (3 de reserva) y `fuentes`. Enseña el guion en limpio y espera el visto
|
|
111
|
+
bueno antes de renderizar; `npx morfeo previa <id>` muestra solo el gancho para probar variantes baratas.
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
# Estructura por retención
|
|
2
|
+
|
|
3
|
+
La retención son dos cosas: quedarse o deslizar en los primeros 3 segundos, y cuánta gente sigue en cada segundo
|
|
4
|
+
después. Un guion se arma para que la curva caiga lo menos posible.
|
|
5
|
+
|
|
6
|
+
## Tres formas de perder gente y qué cambiar en el guion
|
|
7
|
+
|
|
8
|
+
| Forma de la caída | Causa en el guion | Arreglo |
|
|
9
|
+
|---|---|---|
|
|
10
|
+
| Barranco en los primeros 3 s | Cuadro inicial flojo, primera frase lenta, saludo, o el gancho no coincide con el título | Reescribe entero el arranque; prueba otro arquetipo de `hooks` |
|
|
11
|
+
| Goteo constante en la mitad | No hay escalada ni giro: todas las escenas pesan igual | Mete un giro entre el segundo 5 y el 8 y otro hacia la mitad; quita escenas planas |
|
|
12
|
+
| Barranco antes del final | El pago tarda o no llega; la gente se rindió | Adelanta el pago o recorta la preparación |
|
|
13
|
+
|
|
14
|
+
Meta: una línea casi plana y un pequeño repunte al final por las repeticiones.
|
|
15
|
+
|
|
16
|
+
## Duración
|
|
17
|
+
|
|
18
|
+
- De 30 a 45 s es el punto dulce: alcanza para contar algo y se sostiene la atención.
|
|
19
|
+
- Menos de 15 s rara vez junta tiempo de visualización suficiente aunque se vea completo.
|
|
20
|
+
- Más de 60 s exige más giros: uno cada 8–10 s. Las maquetas (90–130 s) viven de cortes de cámara cada 2–3 s.
|
|
21
|
+
|
|
22
|
+
## Tramo por tramo
|
|
23
|
+
|
|
24
|
+
**Gancho (0–2 s).** Una escena. Sujeto en pantalla, frase de menos de 2 s, rótulo de 3 a 7 palabras.
|
|
25
|
+
|
|
26
|
+
**Contexto (2–6 s).** Lo mínimo para que la pregunta se entienda: quién, qué, cuándo. Si puedes borrarlo y el
|
|
27
|
+
video se entiende igual, bórralo.
|
|
28
|
+
|
|
29
|
+
**Escalada.** Cadena de mini-preguntas: cada escena cierra una y abre la siguiente.
|
|
30
|
+
|
|
31
|
+
```
|
|
32
|
+
escena 3: "¿Y por qué sabe así?" → abre
|
|
33
|
+
escena 4: "Porque lo pintan con esto." → cierra y abre: ¿qué es "esto"?
|
|
34
|
+
escena 5: "Es la sustancia más amarga…" → cierra y sube: ¿qué tan amarga?
|
|
35
|
+
escena 6: "[la cifra con fuente]" → giro: cifra que no esperabas
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Cada escena debe ser más grande, más rara o más cercana al espectador que la anterior. Si dos escenas se pueden
|
|
39
|
+
intercambiar sin que se note, no hay escalada.
|
|
40
|
+
|
|
41
|
+
**Giro.** Algo que contradice lo que el espectador ya daba por hecho: "pero no era para eso", "y aun así la gente
|
|
42
|
+
los lame". Uno hacia la mitad; en videos largos, uno cada 8–10 s.
|
|
43
|
+
|
|
44
|
+
**Pago.** La respuesta a la pregunta del gancho, con el dato más fuerte, dicho claro y mostrado en pantalla
|
|
45
|
+
(`dato`, `contador`, rótulo `sello`). Sin "y bueno, pues eso".
|
|
46
|
+
|
|
47
|
+
**Cierre.** Una petición. Si puedes, que la última frase haga que la primera suene distinta.
|
|
48
|
+
|
|
49
|
+
## Bucles (repeticiones gratis)
|
|
50
|
+
|
|
51
|
+
- **Visual:** el último cuadro se parece al primero (mismo objeto, mismo encuadre).
|
|
52
|
+
- **De voz:** la última frase entrega bien a la primera, sin "gracias por ver".
|
|
53
|
+
- **De pregunta:** el cierre hace releer el arranque.
|
|
54
|
+
- **De corte:** terminar en "la verdadera razón es…" y que la respuesta sea el arranque.
|
|
55
|
+
|
|
56
|
+
## Prueba rápida antes de renderizar
|
|
57
|
+
|
|
58
|
+
1. Tapa la primera escena: ¿el video sigue enganchando? Entonces el gancho estaba en la escena 2; súbelo.
|
|
59
|
+
2. Lee solo los rótulos en orden: ¿cuentan la historia?
|
|
60
|
+
3. Marca en qué escena se responde la pregunta del gancho. Si es antes del último tercio, muévela.
|
|
61
|
+
4. Cuenta las escenas sin dato, giro ni imagen nueva. Deben ser cero.
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
# Ganchos: moldes, tácticas y errores
|
|
2
|
+
|
|
3
|
+
## Lote de ejemplo
|
|
4
|
+
|
|
5
|
+
Tema: "los cartuchos de una consola llevan una sustancia amarga para que los niños no se los traguen".
|
|
6
|
+
|
|
7
|
+
| Arquetipo | Voz (`say`) | Imagen del cuadro 1 | Texto (`rotulo`) |
|
|
8
|
+
|---|---|---|---|
|
|
9
|
+
| Cifra imposible | "Este cartucho lleva la sustancia más amarga que existe." | El cartucho grande, girando, con una gota encima | LO MÁS *AMARGO* |
|
|
10
|
+
| Pregunta directa | "¿Alguna vez lamiste un cartucho? No lo hagas." | Una lengua acercándose al cartucho | ¿LO *LAMISTE*? |
|
|
11
|
+
| Hallazgo | "Hay algo escondido en la pintura de este cartucho." | Lupa sobre la superficie | ESTÁ EN LA *PINTURA* |
|
|
12
|
+
| Contradicción | "No sabe mal por accidente. Lo hicieron a propósito." | Cartucho con sello de "aprobado" | FUE *A PROPÓSITO* |
|
|
13
|
+
| Experimento | "Probé un cartucho para que tú no tengas que hacerlo." | Persona con cara de asco | NO LO *PRUEBES* |
|
|
14
|
+
|
|
15
|
+
Se elige uno y tres pasan a `hooks`. Los cinco prometen lo mismo que el video entrega.
|
|
16
|
+
|
|
17
|
+
## Más moldes
|
|
18
|
+
|
|
19
|
+
- **"Cómo [resultado] sin [molestia]."** Dice el valor en una línea. Tutoriales.
|
|
20
|
+
- **"[N] cosas que ojalá hubiera sabido antes de [Y]."** Listas; N impar o raro.
|
|
21
|
+
- **"El [enemigo conocido] es [malo]. El [héroe] es [bueno]. ¿Y si…?"** Tres golpes cortos.
|
|
22
|
+
- **Predicción:** "Esto va a cambiar cómo [público] [hace algo]." Solo con una demostración que lo respalde.
|
|
23
|
+
- **Reserva:** "Encontré lo único que volvería a comprar. No te digo cuál todavía." Sirve si el nombre llega pronto.
|
|
24
|
+
|
|
25
|
+
## De una idea, trece ganchos
|
|
26
|
+
|
|
27
|
+
Si te atoras, cambia de ángulo sobre la misma afirmación: consejo, estadística, pasos, historia, cita, beneficio,
|
|
28
|
+
lección, razón, error, ejemplo, pregunta, recurso, marco. Cada ángulo da un gancho distinto.
|
|
29
|
+
|
|
30
|
+
## Tácticas chicas que suben la retención del arranque
|
|
31
|
+
|
|
32
|
+
- **Número raro y exacto** ("37 horas", no "muchas horas"). Suena medido. Solo si es cierto.
|
|
33
|
+
- **Verbo fuerte** en la primera palabra o la segunda: "rompí", "encontré", "cuesta".
|
|
34
|
+
- **Dolor o deseo del espectador** nombrado: que se reconozca en el primer segundo.
|
|
35
|
+
- **Señal de autoridad** breve si la hay ("llevo ocho años reparando controles").
|
|
36
|
+
- **Corte de patrón visual:** el primer cuadro no se parece al video anterior del canal (otro ángulo, otro color).
|
|
37
|
+
- **La forma de la curiosidad:** di lo suficiente para que importe y calla justo lo que el video responde.
|
|
38
|
+
|
|
39
|
+
## Errores que tumban los primeros 2 segundos
|
|
40
|
+
|
|
41
|
+
| Error | Por qué falla |
|
|
42
|
+
|---|---|
|
|
43
|
+
| Saludo, logo, cortinilla, "bienvenidos" | Gasta el tiempo en que se decide si se queda |
|
|
44
|
+
| Promesa vaga ("no vas a creer lo que pasó") | No hay nada concreto que querer saber |
|
|
45
|
+
| Exagerar lo que el video entrega | Gana el clic y pierde la satisfacción; el espectador se siente engañado |
|
|
46
|
+
| Pedir seguir antes de dar valor | Nadie sigue a quien todavía no le dio nada |
|
|
47
|
+
| Abrir contando una historia larga | La historia va después del gancho, no en su lugar |
|
|
48
|
+
| Dar órdenes ("quédate hasta el final") | Se siente a truco; mejor una razón |
|
|
49
|
+
| Solo la frase, sin imagen ni texto | Con el sonido apagado no hay gancho |
|
|
50
|
+
| Marca primero | El espectador no vino por la marca |
|
|
51
|
+
| Ingenio que hay que explicar | Si necesita un segundo de pensar, ya deslizó |
|
|
52
|
+
| Gancho de 10 segundos | Planteamiento, nudo y desenlace dentro del gancho: demasiado largo |
|
|
53
|
+
|
|
54
|
+
## Cómo criticar un gancho ajeno
|
|
55
|
+
|
|
56
|
+
Di **qué capa** está floja (imagen, voz o texto) y **qué error** de la tabla comete; luego reescribe tres variantes
|
|
57
|
+
de arquetipos distintos. Señalar sin reescribir no ayuda.
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: morfeo-video
|
|
3
|
+
description: Hacer un video corto vertical con Morfeo de principio a fin a partir de un tema (historia con personajes, curiosidad, "qué pasaría si", tutorial, explicador de maqueta), en 2D o 3D. Úsala cuando pidan "haz un video de…", "otro video sobre…", "una serie de…", o cuando haya que escribir un guion y su mundo en un proyecto de Morfeo (carpeta con morfeo.config.mjs).
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Hacer un video con Morfeo
|
|
7
|
+
|
|
8
|
+
Tú escribes el guion **y** el mundo a medida, lo renderizas y lo revisas a ojo antes de decir que está listo. Nunca
|
|
9
|
+
copies videos de otros: se toma la forma, no el contenido. Si el proyecto tiene `gustos.md`, léelo primero: manda.
|
|
10
|
+
|
|
11
|
+
## 0. Dónde y qué más leer
|
|
12
|
+
|
|
13
|
+
- Proyecto: la carpeta con `morfeo.config.mjs`. Corre los comandos ahí. Tipos de todo: `node_modules/morfeo/index.d.ts`.
|
|
14
|
+
- Esta skill es la ruta completa. Para hacerlo bien, abre la que toque en cada paso:
|
|
15
|
+
|
|
16
|
+
| Cuando vayas a… | Lee |
|
|
17
|
+
|---|---|
|
|
18
|
+
| Escribir el gancho, ordenar la historia o el cierre | `morfeo-guion` |
|
|
19
|
+
| Decidir entradas, ritmo, énfasis o movimiento de cámara | `morfeo-animacion` |
|
|
20
|
+
| Armar un mundo 3D o una pieza (luz, materiales, encuadre) | `morfeo-3d` |
|
|
21
|
+
|
|
22
|
+
Están junto a esta, en `node_modules/morfeo/skills/` (y en `.claude/skills/` si corriste `npx morfeo skills`).
|
|
23
|
+
|
|
24
|
+
## 1. Decide el look (2D o 3D) — cualquier tema va en cualquiera
|
|
25
|
+
|
|
26
|
+
| Si el tema es… | Look que mejor funciona | Base |
|
|
27
|
+
|---|---|---|
|
|
28
|
+
| Historia con personas, emociones, diálogo | 2D: `Persona2D` + escenario (`CiudadNoche`, `Cuarto`, `Calle`, `Campo`, `Oficina`, `Mar`) | `--look 2d` |
|
|
29
|
+
| Curiosidad de ciencia/animales/cuerpo | 2D ilustrado (mundo SVG propio + `GraficaBarras`, `Lupa`, `medida`, `dato`) o 3D | `--look 2d` |
|
|
30
|
+
| "¿Qué pasaría si…?", ciudades, objetos, escala | 3D: `Lienzo3D` + `Persona3D`, `Ciudad`, `Camino`, `Coche` | `--look 3d` |
|
|
31
|
+
| Cómo funciona algo por dentro (agua, tráfico, máquinas), 90–130 s | Maqueta: estilo `maqueta`, kit diorama (`Maqueta`, `Trafico`, `Corte`, `Etiqueta3D`, fichas) | estilo `maqueta` |
|
|
32
|
+
| Tutorial, pasos, apps | Editorial: estilo `explicativo`, `titular` + `terminal`, `tarjeta`, `cursor`, `personaje` | estilo `explicativo` |
|
|
33
|
+
| Dinero, objetos valiosos, comparar cantidades | 3D cálido: estilo `mesa`, `Mesa`, `Pila`, contador LCD | estilo `mesa` |
|
|
34
|
+
|
|
35
|
+
## 2. Crea el video desde una base que ya renderiza
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
npx morfeo nuevo-video <id> --look 2d # o --look 3d
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
Crea `guiones/<id>.mjs` y `escenas/Mundo<Id>.tsx` y lo registra en `componentes`. Renderízalo una vez tal cual para
|
|
42
|
+
confirmar que todo funciona antes de cambiar nada.
|
|
43
|
+
|
|
44
|
+
## 3. Escribe el guion con la estructura (no negociable)
|
|
45
|
+
|
|
46
|
+
Resumen; el método completo (arquetipos de gancho, orden por retención, fallos comunes) está en `morfeo-guion`.
|
|
47
|
+
|
|
48
|
+
1. **Gancho en los primeros 2 s**, en segunda persona o con una cifra imposible: "Imagina que…", "¿Y si tu…?", "Si tu…",
|
|
49
|
+
"Este es X. Pero…". El sujeto ya en pantalla. Nada de "hoy te voy a contar".
|
|
50
|
+
2. **Una idea por escena, 2–5 s de voz.** Si dura más, que algo entre a media frase (`en: 'palabra'`).
|
|
51
|
+
3. **Pregunta antes de revelar** ("¿Cuánto crees que pagó?") y la respuesta con número que cuenta (`dato`, `contador`) o golpe visual.
|
|
52
|
+
4. **Texto en dos niveles**: subtítulo + `rotulo` corto en 2–4 escenas ("¿CUÁNTO *PAGÓ*?"). `claves: ['palabra']` en cada escena.
|
|
53
|
+
5. **Datos pegados a las cosas**: `nombre` (con rol), `accion` ("▶ Te despiertas"), `dato`, `medida`, `contorno`, `trazo`.
|
|
54
|
+
6. **Sube la apuesta** hacia el final.
|
|
55
|
+
7. **Cierre que pide algo**: `{type: 'cta', pide: 'comenta', palabra: 'X'}` o `pide: 'comparte', a: '…'` o escena `eleccion`.
|
|
56
|
+
8. Duración: ~30–65 s (maqueta 90–130 s). Series: `serie: 'NOMBRE · EP. 2'`.
|
|
57
|
+
9. `title`, `descripcion` y `tags` para publicar (salen en `salida/<id>.txt`).
|
|
58
|
+
|
|
59
|
+
Detalles que rompen videos si se olvidan:
|
|
60
|
+
- `say` = lo que dice la voz (números **en letra**); `show` = subtítulo con cifras. **Con `show`, los `en: 'palabra'` se buscan
|
|
61
|
+
en el subtítulo**: si dice "1.560.000", `en: 'millón'` no existe → usa `en: '1.560.000'` o un tiempo. El render avisa con `!`.
|
|
62
|
+
- Los momentos aceptan `'palabra+0.4'`, `'voz'`, `'fin-0.5'` o segundos.
|
|
63
|
+
- Mundo 2D: `toma: {x, y, zoom, a: {...}}` por escena (punto del mundo de 2160×1920 que queda al centro).
|
|
64
|
+
- Mundo 3D: la cámara va en el componente (`TOMAS: Toma3D[]`, una por escena). En vertical el plano general va en diagonal.
|
|
65
|
+
- Un solo `Lienzo3D` por video. Nada de `useFrame` ni timers: todo depende de `t`.
|
|
66
|
+
- Encuadre vertical en 3D (fov 38): a distancia d se ven ±0.19·d de ancho y ±0.34·d de alto; para que algo de ancho W
|
|
67
|
+
llene ~70 % del cuadro, d ≈ 3.7·W. Acomoda las cosas una detrás de otra, no lado a lado.
|
|
68
|
+
- Etiquetas 3D cerca de la orilla se cortan: usa `lado: 'izq'`/`'der'` hacia el centro del cuadro.
|
|
69
|
+
- No corras dos renders ni `hoja` pesadas a la vez: Morfeo espera su turno, pero procesos sueltos de Chrome ensucian cuadros.
|
|
70
|
+
- Cuida los hechos: solo datos que puedas sostener; si dudas de una cifra, dila en general ("unas cinco semanas").
|
|
71
|
+
|
|
72
|
+
## 4. Arma el mundo con el kit
|
|
73
|
+
|
|
74
|
+
- 2D (dentro de `<svg>`): `Filtros`, escenarios, `Persona2D` (`expresion`: feliz, triste, enojado, sorpresa, miedo,
|
|
75
|
+
dormido, pensativo; `pose`: parado, caminar, señalar, brazosArriba, pensar, cruzado, sentado; `estados: [{en, expresion, pose}]`;
|
|
76
|
+
`habla: [[t0, t1]]`), `Multitud`, `Globo` (`en`, `hasta`), `ConoLuz`, `Paralaje`, gráficas (`GraficaBarras`, `GraficaLinea`,
|
|
77
|
+
`Comparacion`, `Lupa`).
|
|
78
|
+
- 3D: `Lienzo3D` (`luz` dia/calida, `hora`, `etiquetas`), `Persona3D` (con cara y expresiones) o `Persona` (figura de maqueta),
|
|
79
|
+
`Ciudad`, `Camino`, `Coche`, `Trafico`, `Cuarto3D`, `Terreno`, `Tubo` (`agua` 0..1), `Arbol`, `Casa`, `Mesa`, `Pila`, `Modelo` (.glb).
|
|
80
|
+
- Usa `escena`, `tEscena`, `inicios` y `cuando('palabra')` para que el mundo reaccione a la historia.
|
|
81
|
+
|
|
82
|
+
## 5. Revisa, renderiza y mira el resultado
|
|
83
|
+
|
|
84
|
+
```bash
|
|
85
|
+
npx morfeo revisar <id> # estructura (gancho, ritmo, preguntas, cierre)
|
|
86
|
+
npx morfeo render <id> # avisos `!` = palabra que no existe; arréglalos
|
|
87
|
+
npx morfeo hoja <id> # mira la hoja de cuadros (y --desde 8 --hasta 11 para un tramo)
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
Lista de comprobación antes de decir "listo" (míralo en la hoja, no lo supongas):
|
|
91
|
+
- [ ] El primer cuadro ya tiene al sujeto y algo pasando.
|
|
92
|
+
- [ ] Nada importante tapado por subtítulos, rótulos o la marca; texto dentro del cuadro.
|
|
93
|
+
- [ ] Cada escena cambia algo visible cada 2–4 s.
|
|
94
|
+
- [ ] Los datos aparecen cuando la voz los dice (sin avisos `!` en el render).
|
|
95
|
+
- [ ] El cierre pide algo concreto.
|
|
96
|
+
- [ ] `npx morfeo revisar <id>` sin avisos `!`.
|
|
97
|
+
|
|
98
|
+
Para varios videos: `npx morfeo render` (los que falten). Si alguno falla, el lote sigue; corrige y
|
|
99
|
+
`npx morfeo render --solo-fallidos`.
|