Habilidad de Remotion Video para Creadores de Contenido

YYL Remotion Video

Convierte un artículo, guión, notas o un esquema claro en un proyecto de video Remotion. Esta habilidad está orientada al video: no incluye un reproductor web interactivo, ni una presentación web, ni síntesis de voz (TTS) dentro de este flujo de trabajo.

Resultado Principal

mi-video/
├── article.md
├── guion.md
├── outline.md
├── notas.md
└── remotion/
    ├── src/Root.tsx
    ├── src/Composition.tsx
    ├── src/chapters/<NN>-<id>/
    │   ├── <Capitulo>.tsx
    │   ├── narraciones.ts
    │   └── timing.ts
    ├── public/assets/
    ├── preview-stills/
    └── out/

Recursos incluidos en la habilidad:

themes/       # sistemas de color / tipografía
templates/    # puntos de partida copiables en Remotion TSX
references/   # guías de diseño, temas y plantillas

Intensidad de Ejecución

Decide antes de escribir los archivos:

Intensidad	Cuándo Usar	Comportamiento
Rápida	<= 450 caracteres chinos, <= 60s, prueba de tema, demo borrador	1 capítulo, pocos beats, implementación directa
Estándar	1-4 min, explicación publicable normal	guión + outline, primer capítulo como ancla, luego continuar
Estricta	> 4 min, contenido de marca/comercial/alto riesgo	planificación más completa, más revisiones de fotogramas, revisión de capítulos más lenta

Reporta en una línea:

Usaré <Rápida/Estándar/Estricta> porque <longitud / riesgo / objetivo>.

Flujo de Trabajo

1. Puerta de Entrada

   • Procede solo si el usuario proporciona texto fuente, un guión, notas o un esquema claro.
   • Si solo da un tema, pídele material. No inventes un video completo.

2. Archivos de Contenido

   • Guarda el material fuente en article.md cuando se proporcione.
   • Guarda el texto final hablado en guion.md.
   • Guarda el plan de desarrollo en outline.md.
   • outline.md planifica capítulos, beats, contenido en pantalla, grupo de información, activos.
   • outline.md no prescribe la implementación exacta de las animaciones.

3. Selección de Tema

   • Usa solo los temas incluidos en esta habilidad: themes/command-film, themes/studio-white, themes/research-desk.
   • No reutilices ni importes temas de web-video-presentation.

4. Selección de Plantilla

   • Si el usuario solicita un diseño o mecanismo de animación conocido, lee references/TEMPLATES.md.
   • Usa templates/luxury-perspective-gallery para portafolios oscuros de lujo, carrusel horizontal con perspectiva 3D o solicitudes de galería premium de agencia.

5. Proyecto Remotion

   • Reutiliza remotion/ existente si está presente.
   • Crea solo si falta:

     npx create-video@latest --yes --blank --no-tailwind remotion
     

   • Si una plantilla seleccionada requiere Tailwind, crea el proyecto con soporte de Tailwind o agrega Tailwind antes de copiar los archivos de la plantilla.
   • Instala dependencias solo si remotion/node_modules falta o los comandos de Remotion fallan porque las dependencias están ausentes.

6. Temporización

   • No sintetices audio.
   • Estima las duraciones a partir de la narración y la complejidad visual.
   • Valores por defecto: fps = 30, width = 1920, height = 1080.
   • Almacena el texto en narraciones.ts; almacena los durationFrames estimados en timing.ts.

7. Implementación

   • Lee references/REMOTION-CRAFT.md antes de cada capítulo.
   • Anima con useCurrentFrame(), interpolate(), Easing y Sequence.
   • No uses CSS transition / CSS animation / GSAP para la animación principal.
   • Tailwind puede estilizar el diseño estático, pero no se permiten utilidades de animación de Tailwind.

8. Verificación

   • Ejecuta:

     cd remotion
     npm run lint
     

   • Renderiza al menos un fotograma por capítulo, o 2-4 fotogramas para un video corto completo:

     npx remotion still <id-de-composicion> --frame=<fotograma> --scale=0.5 --output=preview-stills/<nombre>.png
     

   • Renderiza el mp4 cuando los fotogramas se vean correctos:

     npx remotion render <id-de-composicion> out/<nombre>.mp4
     

9. Notas

   • Actualiza notas.md con fps, resolución, fotogramas totales, duración estimada, fotogramas verificados, ruta del mp4 renderizado, y que el audio y los subtítulos son postproducción.

Selección de Tema

Tema	Ideal Para	Sensación
command-film	agentes, terminal, automatización, herramientas para desarrolladores	sala de comando oscura cinematográfica
studio-white	demostraciones SaaS, lanzamientos, cursos, tutoriales de productos	estudio blanco limpio de producto
research-desk	ensayos, informes, artículos, análisis de negocios	escritorio analítico tranquilo

Para notas completas del tema, lee references/THEMES.md.

Selección de Plantilla

Plantilla	Ideal Para	Sensación
luxury-perspective-gallery	portafolio premium, exhibición de productos, carrusel horizontal 3D	slider oscuro ciber-mínimo de agencia
charity-doodle-poster	carteles sin fines de lucro, héroes animales dibujados a mano, efectos editoriales web en stop-motion	póster retro en tinta y pincel con stop-motion

Para notas completas de la plantilla, lee references/TEMPLATES.md.

Reglas de Remotion

• Usa Composition en Root.tsx.
• Usa Sequence para colocar beats en la línea de tiempo.
• Usa useCurrentFrame() + interpolate() para el movimiento.
• Coloca los activos estáticos en remotion/public/assets/; refiérelos con staticFile().
• Las revisiones de fotogramas son obligatorias antes del renderizado final.
• El mp4 final es silencioso a menos que el usuario agregue audio posteriormente en postproducción.