exiao/skills

Videos con Remotion

Crea videos animados usando Remotion (React). Basado en las mejores prácticas oficiales de remotion-dev más composiciones específicas de Bloom.

Enrutador Rápido

Lee el archivo de reglas relevante según la tarea:

Animación Principal

Tarea	Archivo de Reglas
Interpolación, easing, springs	references/rules/timing.md
Fundamentos de animaciones	references/rules/animations.md
Animaciones de texto (máquina de escribir, palabra por palabra, etc.)	references/rules/text-animations.md
Transiciones de escena (deslizamiento, fundido, cortinilla, giro)	references/rules/transitions.md
Secuenciación (retraso, recorte, limitar duración)	references/rules/sequencing.md
Recorte (cortar inicio/final)	references/rules/trimming.md

Medios

Tarea	Archivo de Reglas
Imágenes (componente Img)	references/rules/images.md
Videos (incrustar, recortar, volumen, velocidad, bucle)	references/rules/videos.md
Audio (importar, recortar, volumen, velocidad, tono)	references/rules/audio.md
Visualización de audio (espectro, formas de onda)	references/rules/audio-visualization.md
GIFs sincronizados con la línea de tiempo	references/rules/gifs.md
Fuentes (Google Fonts, locales)	references/rules/fonts.md
Recursos (importar imágenes/videos/audio)	references/rules/assets.md

Subtítulos y Locución

Tarea	Archivo de Reglas
Generar subtítulos (transcribir audio)	references/rules/transcribe-captions.md
Importar subtítulos SRT	references/rules/import-srt-captions.md
Mostrar subtítulos (subtítulos animados)	references/rules/display-captions.md
Resumen de subtítulos	references/rules/subtitles.md
Locución por IA (ElevenLabs TTS)	references/rules/voiceover.md

Avanzado

Tarea	Archivo de Reglas
Contenido 3D (Three.js / React Three Fiber)	references/rules/3d.md
Gráficos (barras, circulares, líneas, acciones)	references/rules/charts.md
Mapas (Mapbox)	references/rules/maps.md
Animaciones Lottie	references/rules/lottie.md
Superposiciones de fugas de luz	references/rules/light-leaks.md
Renderizado de video transparente	references/rules/transparent-videos.md

Configuración y Ajustes

Tarea	Archivo de Reglas
Composiciones, fotogramas, carpetas, props por defecto	references/rules/compositions.md
Metadatos dinámicos (calculateMetadata)	references/rules/calculate-metadata.md
Parametrizar con esquema Zod	references/rules/parameters.md
TailwindCSS en Remotion	references/rules/tailwind.md
Medición de texto (ajuste, desbordamiento)	references/rules/measuring-text.md
Medición de nodos DOM	references/rules/measuring-dom-nodes.md

FFmpeg y Utilidades de Medios

Tarea	Archivo de Reglas
Operaciones FFmpeg (recortar, detección de silencio)	references/rules/ffmpeg.md
Extraer fotogramas de video	references/rules/extract-frames.md
Obtener duración del video	references/rules/get-video-duration.md
Obtener dimensiones del video	references/rules/get-video-dimensions.md
Obtener duración del audio	references/rules/get-audio-duration.md
Verificar si el video se puede decodificar	references/rules/can-decode.md

---

Kit de Componentes remotion-bits

Componentes de animación preconstruidos. Instalar: npm install remotion-bits

Componentes clave: AnimatedText (revelación de palabras/caracteres/líneas), ParticleSystem (confeti, nieve, luciérnagas), GradientTransition, Scene3D (movimientos de cámara 3D), Typewriter, CodeBlock (escritura con resaltado de sintaxis).

Consulta references/remotion-bits.md para el catálogo completo y ejemplos de uso.

---

Proyecto Bloom

Ubicación del proyecto: ~/clawd/remotion-videos/

remotion-videos/
├── src/
│   ├── Root.tsx          # Todas las composiciones registradas aquí
│   ├── ProductDemo.tsx   # Componente principal de demo del producto
│   ├── schema.ts         # Esquemas Zod para props
│   ├── scenes/           # Componentes de escena individuales
│   │   ├── TerminalTyping.tsx
│   │   ├── FileScanning.tsx
│   │   ├── ScoreReveal.tsx
│   │   ├── ResultsSummary.tsx
│   │   └── TextOverlay.tsx
│   └── Composition.tsx
├── public/               # Recursos estáticos
├── out/                  # Salida renderizada
├── remotion.config.ts
└── package.json

Composiciones Existentes

ID	Tamaño	Caso de Uso
ProductDemo	1080x1080	Cuadrado para Twitter/Instagram
ProductDemoVertical	1080x1920	Vertical para TikTok/Reels/Shorts
BloomDemo	1080x1080	Cuadrado con marca Bloom
BloomDemoVertical	1080x1920	Vertical con marca Bloom

Todas las composiciones: 15 segundos @ 30fps (450 fotogramas).

Esquema de Props (ProductDemoProps)

{
  command: string;           // Comando de terminal que se muestra escribiendo
  files: Array<{             // Lista de archivos para animación de escaneo
    name: string;
    errors: number;
    warnings: number;
  }>;
  score: number;             // Puntuación a revelar (0-maxScore)
  maxScore: number;          // Valor máximo de puntuación
  statusLabel: string;       // ej. "Crítico", "Riesgo Moderado"
  statusColor: string;       // Color hexadecimal para el estado
  resultLines: string[];     // Hallazgos del resumen
  title: string;             // Texto del título del video
  logoText: string;          // Nombre de la marca/producto
}

---

Pre-Composición: Capturas de Pantalla Reales de Bloom

Si el video muestra la interfaz de usuario de la aplicación Bloom, primero captura capturas de pantalla reales:

1. Inicia el puente de PhoneAgent (consulta ~/clawd/skills/phoneagent/SKILL.md)
2. Ejecuta: python scripts/capture_bloom_screenshots.py --feature <portfolio|stock_detail|watchlist> --output public/screenshots/<feature>
3. Referencia las capturas de pantalla en las composiciones: staticFile("screenshots/<feature>/home.png")

Regresa de forma segura si el puente no está funcionando.

---

Renderizado

cd ~/clawd/remotion-videos

# Vista previa en el navegador (Remotion Studio)
npm run dev

# Renderizar a MP4
npx remotion render ProductDemo out/product-demo.mp4

# Renderizar vertical para TikTok
npx remotion render ProductDemoVertical out/product-demo-vertical.mp4

# Props personalizados
npx remotion render ProductDemo out/custom.mp4 --props='{"command":"mi comando","score":85}'

# Renderizar como GIF
npx remotion render ProductDemo out/demo.gif --image-format=png --codec=gif

# Rango específico de fotogramas
npx remotion render ProductDemo out/clip.mp4 --frames=0-150

Crear Nuevas Composiciones

1. Crea componentes de escena en src/scenes/
2. Crea la composición principal en src/
3. Define el esquema Zod en src/schema.ts
4. Regístrate en src/Root.tsx con dimensiones:
   • Cuadrado: 1080x1080 (Twitter, Instagram)
   • Vertical: 1080x1920 (TikTok, Reels, Shorts)
   • Horizontal: 1920x1080 (YouTube)

---

Control de Calidad Post-Renderizado

Siempre ejecuta el control de calidad después de renderizar:

python scripts/visual_qa.py out/video.mp4 "Descripción de tu objetivo"
# O usa el envoltorio:
./scripts/render_and_verify.sh BloomDemo out/demo.mp4 "Objetivo aquí"

Corrige cualquier problema señalado y vuelve a renderizar. No entregues un video que falle en la verificación de calidad.

---

Consejos

• Mantén los videos entre 15-30 segundos para redes sociales
• Usa colores de alto contraste para visualización en móvil
• Agrega subtítulos/superposiciones de texto (la mayoría de los espectadores ven sin sonido)
• Prueba tanto el formato cuadrado como el vertical antes de publicar
• Renderiza a 30fps para redes sociales (60fps para mucho movimiento)
• Usa componentes de remotion-bits antes de construir animaciones desde cero