Cuándo usar
Utiliza esta habilidad siempre que estés trabajando con código de Remotion para obtener el conocimiento específico del dominio.
Configuración de un nuevo proyecto
Cuando te encuentres en una carpeta o espacio de trabajo vacío sin un proyecto 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 la previsualización
Inicia Remotion Studio para previsualizar un video:
npx remotion studio
Opcional: comprobación de renderizado de un solo fotograma
Puedes renderizar un solo fotograma con la CLI para verificar diseño, colores o sincronizació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 marca el segundo uno (--frame es basado en cero).
Subtítulos
Cuando trabajes con subtítulos o leyendas, carga el archivo ./rules/subtitles.md para más información.
Usar FFmpeg
Para algunas operaciones de video, como recortar videos o detectar silencio, 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 silenciosos de archivos de video 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 bajos), 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 - Importar imágenes, videos, 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 duración, dimensiones y propiedades de la composición
- rules/can-decode.md - Verificar si un video puede ser decodificado por el navegador usando Mediabunny
- rules/charts.md - Patrones de gráficos y visualización de datos para Remotion (barras, circulares, líneas, acciones)
- rules/compositions.md - Definir composiciones, imágenes fijas, carpetas, propiedades predeterminadas y metadatos dinámicos
- rules/extract-frames.md - Extraer fotogramas de videos en marcas de tiempo específicas usando Mediabunny
- rules/fonts.md - Cargar 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 video con Mediabunny
- rules/get-video-duration.md - Obtener la duración de un archivo de video en segundos con Mediabunny
- rules/gifs.md - Mostrar GIFs sincronizados con la línea de tiempo de Remotion
- rules/images.md - Incrustar 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 - Incrustar 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: retraso, recorte, limitación de duración de elementos
- rules/tailwind.md - Usar TailwindCSS en Remotion
- rules/text-animations.md - Patrones de tipografía y animación de texto para Remotion
- rules/timing.md - Sincronizació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 video con transparencia
- rules/trimming.md - Patrones de recorte para Remotion: cortar el inicio o final de animaciones
- rules/videos.md - Incrustar videos en Remotion: recorte, volumen, velocidad, bucle, tono
- rules/parameters.md - Hacer un video 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 FFmpeg loudnorm y silencedetect
- rules/voiceover.md - Añadir voz en off generada por IA a composiciones de Remotion usando ElevenLabs TTS