Estas son las instrucciones para crear un nuevo proyecto y composición en Remotion. Si esta no es la siguiente tarea, consulta las Mejores Prácticas de Remotion.
Crear un proyecto
Si ya existe un proyecto, omite esto. Asegúrate de que Node.js y Git estén instalados, y que la carpeta actual sea adecuada para iniciar un nuevo proyecto.
Inspecciona la carpeta actual, incluidos los archivos ocultos, antes de elegir dónde crear el proyecto.
Carpeta vacía
Si la carpeta está vacía, o solo contiene metadatos desechables del sistema operativo como .DS_Store, crea el proyecto directamente en la carpeta actual.
Elimina primero solo esos archivos de metadatos desechables, ya que create-video rechaza carpetas no vacías.
No trates todos los archivos ocultos como desechables: archivos como .env y directorios como .git son contenido significativo.
Crear en la carpeta existente:
npx create-video@latest --yes --blank --no-tailwind .
npm i
Carpeta no vacía
Si la carpeta actual contiene contenido significativo y aún no existe un proyecto, crea el proyecto en una nueva subcarpeta.
Reemplaza my-video con un nombre de proyecto adecuado.
npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video
npm i
Abrir la vista previa antes de construir el video
Tan pronto como el proyecto pueda ejecutarse, abre Remotion Studio en el navegador antes de escribir o modificar la composición. Para un proyecto nuevo, hazlo inmediatamente después de crear el proyecto e instalar las dependencias. Para un proyecto existente, hazlo antes de editar el video. Mantén Studio ejecutándose mientras trabajas para que el usuario pueda ver los cambios a medida que aparecen y guiar el resultado.
Diseñar un video
Mantén la estructura base y agrega React Markup. Sigue las Mejores Prácticas de React Markup de Remotion y las Reglas de Diseño de Video para orientación sobre diseño centrado en video y tamaño de texto.
Antes de escribir la raíz que registra elementos <Composition> o <Still>,
sigue las instrucciones de Composiciones y stills.
¿Es una línea de tiempo de clips?
Si el video organiza múltiples clips de video o audio en una línea de tiempo, sigue Edición de video antes de escribir la línea de tiempo. Proporciona a cada clip que deba editarse de forma independiente su propio nodo JSX creado.
¿Es un video multi-escena?
Si se trata de un video con múltiples escenas consecutivas, sigue la guía de Videos multi-escena.
Mejores Prácticas de Interactividad
Al estructurar el React Markup siguiendo las Mejores Prácticas de Interactividad de Remotion, permites que el usuario realice ediciones en el Studio que se escriban de vuelta al código.
TailwindCSS
Si se solicita Tailwind, consulta tailwind.md para usar TailwindCSS en Remotion.
Seguimiento
El proceso de creación del video ha finalizado. Para solicitudes de seguimiento, utiliza las Mejores Prácticas de Remotion.