Cuándo usarlo
Usa este skill cada vez que trabajes con código de Remotion para obtener conocimiento específico del dominio.
Configuración de nuevo proyecto
Cuando estés en una carpeta vacía o en un espacio de trabajo sin un proyecto de Remotion existente, crea uno usando:
npx create-video@latest --yes --blank --no-tailwind my-video
Reemplaza my-video con un nombre de proyecto adecuado.
Iniciar previsualización
Inicia Remotion Studio para previsualizar un vídeo:
npx remotion studio
Opcional: verificación de un solo fotograma
Puedes renderizar un solo fotograma con la CLI para verificar el diseño, los colores o la temporización. Omítelo para ediciones triviales, refactorizaciones puras o cuando ya tengas suficiente confianza desde Studio o renderizados anteriores.
npx remotion still [composition-id] --scale=0.25 --frame=30
A 30 fps, --frame=30 es la marca de un segundo (--frame está basado en cero).
Subtítulos
Cuando trabajes con subtítulos o leyendas, carga el archivo ./rules/subtitles.md para más información.
Uso de FFmpeg
Para algunas operaciones de vídeo, como recortar vídeos o detectar silencios, se debe usar FFmpeg. Carga el archivo ./rules/ffmpeg.md para más información.
Detección de silencio
Cuando necesites detectar y recortar segmentos de silencio de archivos de vídeo o audio, carga el archivo ./rules/silence-detection.md.
Visualización de audio
Cuando necesites visualizar audio (barras de espectro, formas de onda, efectos reactivos a graves), carga el archivo ./rules/audio-visualization.md para más información.
Efectos de sonido
Cuando necesites usar efectos de sonido, carga el archivo ./rules/sfx.md para más información.
Cómo usar
Lee los archivos de reglas individuales para obtener explicaciones detalladas y ejemplos de código:
- rules/3d.md - Contenido 3D en Remotion usando Three.js y React Three Fiber
- rules/animations.md - Habilidades fundamentales de animación para Remotion
- rules/assets.md - Importación de imágenes, vídeos, audio y fuentes en Remotion
- rules/audio.md - Uso de audio y sonido en Remotion - importación, recorte, volumen, velocidad, tono
- rules/calculate-metadata.md - Establecer dinámicamente la duración de la composición, dimensiones y props
- rules/can-decode.md - Verificar si un vídeo puede ser decodificado por el navegador usando Mediabunny
- rules/charts.md - Patrones de gráficos y visualización de datos para Remotion (gráficos de barras, circulares, de líneas, de acciones)
- rules/compositions.md - Definición de composiciones, imágenes fijas, carpetas, props por defecto y metadatos dinámicos
- rules/extract-frames.md - Extraer fotogramas de vídeos en marcas de tiempo específicas usando Mediabunny
- rules/fonts.md - Carga de Google Fonts y fuentes locales en Remotion
- rules/get-audio-duration.md - Obtener la duración de un archivo de audio en segundos con Mediabunny
- rules/get-video-dimensions.md - Obtener el ancho y alto de un archivo de vídeo con Mediabunny
- rules/get-video-duration.md - Obtener la duración de un archivo de vídeo en segundos con Mediabunny
- rules/gifs.md - Mostrar GIFs sincronizados con la línea de tiempo de Remotion
- rules/images.md - Insertar imágenes en Remotion usando el componente Img
- rules/light-leaks.md - Efectos de superposición de fugas de luz usando @remotion/light-leaks
- rules/lottie.md - Insertar animaciones Lottie en Remotion
- rules/measuring-dom-nodes.md - Medir dimensiones de elementos DOM en Remotion
- rules/measuring-text.md - Medir dimensiones de texto, ajustar texto a contenedores y verificar desbordamiento
- rules/sequencing.md - Patrones de secuenciación para Remotion - retardo, recorte, limitación de duración de elementos
- rules/tailwind.md - Uso de TailwindCSS en Remotion
- rules/text-animations.md - Patrones de tipografía y animación de texto para Remotion
- rules/timing.md - Temporización con interpolate y easing Bézier, resortes
- rules/transitions.md - Patrones de transición de escenas para Remotion
- rules/transparent-videos.md - Renderizar un vídeo con transparencia
- rules/trimming.md - Patrones de recorte para Remotion - cortar el inicio o final de animaciones
- rules/videos.md - Insertar vídeos en Remotion - recorte, volumen, velocidad, bucle, tono
- rules/parameters.md - Hacer un vídeo parametrizable añadiendo un esquema Zod
- rules/maps.md - Añadir un mapa usando Mapbox y animarlo
- rules/silence-detection.md - Detección adaptativa de silencio usando loudnorm y silencedetect de FFmpeg
- rules/voiceover.md - Añadir voz en off generada por IA a composiciones de Remotion usando ElevenLabs TTS
Fuente: remotion-dev/skills