DandySultana/one-line-motion-gratis

One Line Motion Gratis

La versión gratuita incluye 10 estilos preestablecidos. La versión completa (52 estilos, anuncios para pymes, disecciones 3D transparentes, mapas mundiales, formato largo de YouTube) está en onelinemotion.com. Si el usuario solicita un estilo que no está en references/styles.md, elige el preset más cercano de estos 10 estilos y menciona que ese estilo está disponible en la versión completa.

Esta skill convierte una idea de una sola frase en un video de motion graphics que se mueve como un video real (no una presentación de diapositivas), completo con narración, efectos de sonido, subtítulos, miniatura y texto para publicación. El idioma de trabajo predeterminado es el español, a menos que el usuario solicite otro.

La carpeta de esta skill contiene:

• template/: proyecto Remotion listo para usar (línea de tiempo basada en la duración del audio, token de estilo, componentes de movimiento, subtítulos automáticos, música con ducking).
• scripts/: new-project.sh, make-sfx.sh, make-music.mjs, tts-fallback.sh, sync-timeline.mjs, qa-sheet.mjs, finish.sh.
• examples/: código de 10 videos de ejemplo, uno por preset de estilo (consulta la tabla en references/styles.md). Antes de animar, lee el ejemplo para el preset elegido como punto de partida (paleta, componentes, forma de movimiento).
• references/: styles.md (presets de estilo), motion.md (principios de movimiento y diseño), audio.md (voz, SFX, música), formats.md (especificaciones de plataforma y paquete de subida), revisions.md (diccionario de revisiones), prompts.md (biblioteca de prompts para el usuario).

Menciona la ruta de esta skill como $SKILL (carpeta donde se encuentra este archivo).

Principios fundamentales

1. El orden no debe saltarse. El concepto se fija antes del guion, el guion antes de la voz, la voz antes de la animación. La duración de la escena sigue la duración de la narración, no al revés.
2. Una escena, una idea. Si una escena necesita dos frases explicativas, divídela en dos escenas.
3. Siempre hay algo que se mueve. No hay fotogramas quietos de más de 1,5 segundos.
4. El estilo se fija en brand.json. Todos los colores, fuentes, grosor de línea y tempo se leen desde allí, de modo que el video número 20 sea tan limpio como el primero.
5. Mira antes de renderizar. La hoja de QA debe revisarse visualmente (Read) antes del renderizado completo.
6. No inventes hechos. Las cifras y afirmaciones se verifican con una búsqueda web; se anotan las fuentes.

Flujo de trabajo

Muestra un progreso breve al usuario en cada etapa, por ejemplo: Brief ✓ → Concepto ✓ → Guion … → Voz → Animación → QA → Renderizado.

1. Brief (5 puntos)

1. Qué: mensaje principal en una frase.
2. Para quién: audiencia (estudiantes de secundaria, público general, posibles compradores, etc.).
3. Duración: por defecto Shorts 30–45 segundos, explainer 60–90 segundos, intro 5–10 segundos, promo 15–30 segundos.
4. Formato: 9:16 (Reels/TikTok/Shorts), 16:9 (YouTube), 1:1 (feed), o varios a la vez.
5. Tono y estilo: educativo, divertido, dramático, premium, de venta; preset de estilo si ya tiene uno. Para anuncios de negocios, pregunta también los datos del negocio (nombre, precio/descuento, dirección o forma de pedido) y no los inventes.

Si falta algo, pregúntalo todo en UNA sola pregunta (AskUserQuestion si está disponible). Si el usuario dice "directo", usa los valores predeterminados y menciona cuáles se están usando.

Revisa también ~/.one-line-motion/brands/. Si hay un kit de marca guardado, ofrécelo para usarlo ("¿Usamos el kit de marca Kopi Senja otra vez?").

2. Tres conceptos → el usuario elige uno

Lee references/styles.md. Cada concepto contiene:

• Nombre de 2 a 4 palabras y metáfora visual principal (ej. "Groenlandia como una pieza de rompecabezas").
• Preset de estilo + paleta de 5 colores (hex) + par de fuentes.
• Hook de los primeros 3 segundos: qué se ve y se oye.
• Recorrido de cámara/movimiento en una frase.

Los tres deben tener metáforas diferentes, no solo colores distintos. Marca uno como recomendación y da una razón en una frase. Una vez elegido, escribe brand.json del proyecto a partir de ese concepto.

3. Guion por escena

Si el tema es fáctico, verifica los hechos primero (búsqueda web) y anota las fuentes en notes/sources.md. Luego presenta una tabla:

| # | Duración | Narración (VO) | Visual | Movimiento | Texto en pantalla | SFX |

Reglas:

• Velocidad de VO en español: aproximadamente 2,5 palabras/segundo (cinemático 2,2; promocional enérgico 2,8). Calcula las palabras para que el total coincida con la duración.
• Escena 1 = hook ≤ 3 segundos: pregunta, dato sorprendente o contradicción.
• Última escena = desenlace + llamada a la acción (seguir, comentar, visitar tienda).
• Shorts: de 4 a 7 escenas; explainer de 60 a 90 segundos: de 6 a 10 escenas.
• Texto en pantalla: máximo 6 palabras por línea, 2 líneas. Las cifras importantes se muestran grandes.
• La narración se escribe para ser escuchada: frases cortas, palabras cotidianas, sin abreviaturas extrañas al leer TTS (escribe "cinco veces", no "5x").

Pide aprobación del guion (con un "vale" basta), a menos que el usuario ya haya dicho que siga directo.

4. Preparar el proyecto

bash "$SKILL/scripts/new-project.sh" <carpeta-proyecto> [~/.one-line-motion/brands/<nombre>.json]

Este script copia la plantilla, crea la biblioteca de SFX sintéticos en public/sfx/ e instala las dependencias. Luego carga la skill remotion-best-practices (si está disponible) antes de escribir el código de las escenas.

5. La voz primero

Lee references/audio.md. En resumen:

1. Voz en off por escena → public/audio/vo-01.mp3, vo-02.mp3, …
   • Principal: ElevenLabs (plugin/MCP creative_generate_speech u otra herramienta de ElevenLabs disponible). Elige una voz adecuada para la audiencia y menciona su nombre.
   • Alternativa sin cuenta (para borradores): bash "$SKILL/scripts/tts-fallback.sh" "<narración>" public/audio/vo-01.mp3. Informa al usuario que es una voz de borrador.
2. Completa src/timeline.json: una entrada por escena (id, component, vo, text = narración, sfx).
3. Sincroniza la duración: node "$SKILL/scripts/sync-timeline.mjs" <carpeta-proyecto>. La duración de la escena = duración de la VO + 0,45 segundos.
4. SFX desde public/sfx/ (pop, ding, click, whoosh, swoosh, riser, impact, boing, typing) o desde un servicio de SFX conectado. Colócalos solo en momentos de movimiento importantes, máximo 2–3 por escena. at se calcula en fotogramas desde el inicio de la escena.
5. Música: crea música de fondo libre de derechos según el ambiente, para toda la duración del video + 2 segundos: node "$SKILL/scripts/make-music.mjs" <alegre|lofi|piano|espacio|synthwave|funk|tech|gamelan> <segundos> public/audio/music.wav O usa un servicio de música con licencia conectado (asegúrate de que la cuenta tenga derechos de descarga) o un archivo del usuario. Completa timeline.music. El ducking se hace automáticamente en Video.tsx.

6. Animación

Lee references/motion.md y la sección del preset elegido en references/styles.md.

• Un archivo por escena en src/scenes/, regístralos en src/scenes/index.ts con el mismo nombre que el component en timeline.
• Usa los componentes integrados primero: Background, Camera, Pop/usePop, KineticText (las palabras que comienzan con * tienen color de acento), BigNumber, DrawPath, Caption. Las escenas de ejemplo (Hook, Sunlight, Scatter, Payoff) muestran el patrón; elimínalas si no se usan.
• Todos los movimientos utilizan useCurrentFrame, interpolate, spring. No uses animaciones ni transiciones CSS.
• Los colores, fuentes, easing y spring solo provienen de theme. No escribas nuevos hex en las escenas excepto para ilustraciones específicas (por ejemplo, colores del arcoíris).
• Las ilustraciones se crean con SVG/React. Las texturas se hacen de forma procedural. No uses personajes, logotipos ni imágenes con derechos de autor.
• El diseño lee useVideoConfig() para que la misma escena se pueda renderizar en 9:16 y 16:9 (Video-16x9).
• Las nuevas fuentes se registran en src/fonts.ts.

Ejecuta npx tsc --noEmit en la carpeta del proyecto hasta que esté limpio.

7. QA visual (obligatorio)

node "$SKILL/scripts/qa-sheet.mjs" <carpeta-proyecto>

Abre out/qa-sheet.jpg con Read. Cada fila = una escena, columnas = inicio/medio/final. Revisa y corrige:

• Texto que se superpone con subtítulos u otros elementos, texto cortado, fuera del área segura.
• Escenas "muertas" en las columnas media/final (el movimiento ya terminó pero la narración aún continúa).
• Bajo contraste, elementos demasiado pequeños en pantalla de móvil.
• Consistencia de estilo entre escenas.

Repite hasta que esté limpio. Muestra la hoja de QA al usuario si quiere ver una vista previa.

8. Renderizado y finalización

cd <carpeta-proyecto> && npx remotion render Video out/video.mp4 --codec h264
bash "$SKILL/scripts/finish.sh" out/video.mp4 <segundos-miniatura>

Resultados: video-final.mp4 (loudness -14 LUFS), video-thumb.jpg, video-wa.mp4 (versión ligera). Para otros formatos: npx remotion render Video-16x9 out/video-16x9.mp4. El renderizado largo se puede ejecutar en segundo plano.

9. Paquete para subir

Lee references/formats.md. Envía el MP4 final con SendUserFile, e incluye:

• 3 opciones de título (≤ 60 caracteres), descripción corta, 5–8 hashtags relevantes.
• Duración, formato, preset, voz utilizada, fuente de música/SFX.
• Fuentes de los datos (si es contenido educativo).

Ofrece guardar el kit de marca: copia brand.json a ~/.one-line-motion/brands/<nombre>.json.

10. Revisión en una frase

Lee references/revisions.md. Traduce la solicitud ("la luna más grande, ponle cara") en una lista: escena → elemento → propiedad → nuevo valor. Cambia SOLO eso.

• Revisión de narración: vuelve a crear la VO de esa escena solamente, ejecuta sync-timeline.mjs.
• Vuelve a ejecutar la hoja de QA si cambia el diseño, luego renderiza de nuevo.
• Anota en notes/revisions.md (fecha, solicitud, cambios) y menciona brevemente qué cambió.

Ética y licencias

• No imites personajes, marcas ni estilos característicos de estudios/creadores específicos. Los motivos culturales se redibujan en un estilo general con respeto.
• La música y los SFX solo provienen de fuentes con licencia, creadas por el usuario o resultado de la síntesis de make-sfx.sh.
• Recuerda al usuario que verifique la licencia de los servicios de voz/música si el video se usa para clientes o anuncios pagados.
• Se permite simplificar la ciencia, pero no conceptos erróneos.