Diseño de Motion para SaaS

Crea videos de producto donde la UI real del producto es la protagonista y cada movimiento explica algo.

Valores predeterminados de un vistazo

Configuración	Valor predeterminado	Cambiar solo cuando...
Relación de aspecto	16:9 (1920×1080)	El usuario solicite explícitamente 9:16
Fotogramas por segundo	60 fps	El usuario solicite otra cosa
Fondo	Blanco roto	El usuario especifique otro fondo
Colores	Tomados del tema de la UI del producto	Nunca codificar colores fijos
Gradientes	Ninguno	El usuario los solicite explícitamente
Voz en off	Ninguna	El usuario la solicite explícitamente
Música	Una pista de alta energía de Mixkit que el usuario elija	El usuario quiera un ambiente más tranquilo, nada encaje, o el video se vaya a emitir (ver Audio)

Un video por ejecución. Renderiza una sola relación de aspecto. Nunca generes 16:9 y 9:16 juntos; un corte en 9:16 solo se hace cuando el usuario lo solicita.

Stack tecnológico

Herramienta	Versión	Uso
Remotion	4.0.535	Construir cada escena como componentes React, previsualizar en Remotion Studio, exportar fotogramas y renderizar
FFmpeg	Última estable	Mezcla de audio, ducking de música bajo la voz, hojas de contacto, codificaciones finales
Node.js	24	Ejecutar Remotion y los scripts de construcción

Fija Remotion exactamente. Instala cada paquete remotion y @remotion/* en la versión 4.0.535 sin ^ ni ~. Las versiones de paquetes Remotion que no coincidan rompen los renders.
Verifica Node primero. Ejecuta node -v antes de instalar nada. Si no es v24, informa al usuario antes de continuar.
Deriva todo el movimiento del fotograma. Anima con useCurrentFrame() e interpolate()/Easing.bezier() usando los presets de easing siguientes, nunca transiciones CSS o temporizadores, para que cada render salga exacto al fotograma.
Configura la composición a 1920×1080 a 60 fps por defecto, o 1080×1920 solo cuando se solicite 9:16.
Fotogramas para el paso de revisión: npx remotion still <composition> --frame=<n>.
Render final: npx remotion render <composition> out/<name>.mp4 --codec=h264.

Flujo de trabajo

Planifica. Recopila el brief y escribe el plan y la lista de tomas (ver Planificación abajo). Obtén la aprobación del usuario.
Lee el producto. Lee el código del frontend si lo tienes, o la UI en vivo, y extrae su tema (ver Acceso al producto y Branding abajo).
Escribe el guión y obtén la aprobación del usuario (ver Guión abajo).
Construye el video usando las reglas de movimiento, coreografía, cámara y transiciones a continuación, en el espíritu de las referencias de Inspiración.
Añade audio: preselecciona pistas de Mixkit para que el usuario elija (ver Audio abajo), luego añade efectos de sonido y, solo si se solicita, la voz en off.
Ejecuta el control de calidad.
Muestra fotogramas y espera. Muestra al usuario los fotogramas de revisión, responde sus preguntas y haz cambios (ver Revisión de fotogramas abajo). Renderiza solo cuando el usuario lo apruebe.

No omitas un paso de aprobación. Cada uno es más barato de cambiar que el paso siguiente.

Planificación

Antes de escribir cualquier guión, acuerda para qué sirve el video.

1. Recopila el brief

Pregunta al usuario solo lo que no puedas averiguar por ti mismo:

Pregunta	Valor predeterminado si no se da
¿Cuál es el producto y puedes compartir su código del frontend? Si no, ¿dónde se puede acceder a la UI en vivo (URL, compilación local, inicio de sesión)?	Requerido. Pregunta. Prefiere el código.
¿Para quién es el video?	Clientes potenciales
¿Qué es lo único que el espectador debe recordar?	Requerido. Pregunta.
¿Qué características o flujos debe mostrar?	Los 2-3 flujos que mejor prueben el mensaje clave
¿Cuánto tiempo debe durar?	30-45 s
¿Dónde se publicará? ¿Se emitirá en TV o radio?	Sitio web y X/LinkedIn (16:9), solo online
¿Debe haber voz en off y, si es así, masculina o femenina?	Sin voz en off
¿Cuál es el llamado a la acción?	Visitar la URL del producto

2. Escribe el plan

Dale al usuario un plan breve para aprobar:

Objetivo: una frase sobre qué debe lograr el video
Audiencia: quién mira y qué saben ya
Mensaje clave: la única línea que el espectador debe recordar
Formato: duración, relación de aspecto (16:9 a menos que se pida 9:16), voz en off sí o no
Arco narrativo: la plantilla de estructura (ver Guión) completada para este producto, una línea por sección
Flujos a capturar: las pantallas e interacciones de UI exactas a grabar, con el estado de datos que necesita cada una (por ejemplo "tablero de proyecto con 12 tareas, 3 de ellas vencidas")
Prueba: la evidencia que mostrará el video, si la hay (una métrica, logotipos de clientes, una cita, un benchmark o un premio), y de dónde viene

3. Escribe la lista de tomas

Divide el arco narrativo en tomas, una fila por toma:

#	Sección	Toma	Movimiento	Duración
1	Gancho	Pregunta escrita en la barra de búsqueda del producto	Cursor escribe, respuesta aparece	4 s

La lista de tomas se convierte en la columna "Qué hay en pantalla" del guión.

Acceso al producto

El video solo es tan bueno como tu acceso al producto. En orden de preferencia:

Acceso	Lo que te da
1. Código del frontend (mejor)	Tokens de diseño exactos, componentes reales, contenido real, iconos y archivos de logotipo. La UI se puede reconstruir dentro de Remotion píxel por píxel y animar libremente.
2. Aplicación en funcionamiento (URL o compilación local, con un inicio de sesión de prueba)	El tema y flujos reales, capturados desde el navegador. Fiel, pero más difícil de animar elemento por elemento.
3. Grabaciones de pantalla o capturas de pantalla	Último recurso. Reconstruye las pantallas a partir de ellas lo más fielmente posible, e informa al usuario de que el resultado será menos exacto.

Si no tienes el código, pídelo antes de conformarte con una opción inferior.

Trabajar desde el código

Tema: lee los tokens de diseño de dondequiera que el proyecto los guarde, como propiedades personalizadas de CSS, la configuración de Tailwind, un archivo de tema o un paquete de tokens de diseño.
Componentes: reutiliza los componentes de UI del producto en las composiciones de Remotion donde se rendericen limpiamente fuera de la aplicación. De lo contrario, recréalos fielmente desde su fuente.
Contenido: toma etiquetas reales, estados vacíos, iconos y archivos de logotipo de la fuente en lugar de inventarlos. Usa datos semilla o de fixture para los estados de datos que el plan necesita.
Solo lectura. Nunca edites el código del producto. Construye el video en su propio proyecto de Remotion.

Branding

No uses colores de marca fijos. Cada color proviene del producto que se muestra.

Lee la UI principal del producto, desde el código cuando lo tengas, y extrae su tema: color primario/de acento, neutros, colores de superficie, colores de borde, tipografía, radios de esquina y estilo de sombra.
Fondo: favorece un fondo blanco roto por defecto a menos que el usuario especifique lo contrario.
Acento: usa el color de acento del producto para énfasis, anillos de cursor, cursores y resaltes.
Sin gradientes en fondos, texto, brillos o transiciones a menos que el usuario los solicite explícitamente. Usa rellenos planos.
Tipografía: usa la tipografía del producto cuando sea posible, para que los títulos se sientan nativos de la UI.
Logotipo y marca denominativa: usa los activos reales del producto. Nunca los redibujes ni los aproximes.

Guión

El guión lo impulsa todo: títulos, tiempos y la voz en off si la hay. Escríbelo a partir del plan y la lista de tomas aprobados, antes de construir cualquier escena, y obtén la aprobación del usuario antes de construir.

Formato

Escribe el guión como una tabla, una fila por línea:

#	Línea (hablada o en pantalla)	Qué hay en pantalla	Duración
1	Tu equipo pierde seis horas a la semana en actualizaciones de estado.	El contador sube a 6 sobre una lista de tareas desordenada	3 s

Reglas

Gancho en los primeros 7 segundos. Abre con el problema, un número sorprendente o el producto haciendo algo encantador, no el nombre del producto.
Cada línea tiene una imagen. Si una línea no tiene un compás visual que coincida, córtala o reescríbela.
Lenguaje sencillo. Oraciones cortas, una idea por línea, sin jerga que el espectador tenga que descifrar.
Ritmo: aproximadamente 2.5 palabras por segundo cuando se vocaliza. Presupuesta la duración de la línea a partir de su recuento de palabras.
Marca el énfasis con *asteriscos*, una frase clave por línea como máximo.
Cada afirmación es cierta. Los números y benchmarks deben ser reales y tener nota al pie cuando sea necesario.
Respeta la duración establecida en el brief. Recorta líneas antes de acelerar el movimiento.
Sin voz en off por defecto. Sin ella, el guión aparece solo como títulos en pantalla.

Suena como una persona, no como un modelo

Cada línea debe sonar como algo que una persona real le diría en voz alta a un compañero de trabajo. El texto que suene a IA hace que los espectadores se desconecten y hace que el producto se sienta genérico. Esta es una regla estricta, no una preferencia de estilo.

Escribe así:

Sé concreto. Usa los nombres de funciones reales del producto, números reales y la acción real que el usuario hace ("Arrastra una tarea al viernes", no "Gestiona tu flujo de trabajo sin esfuerzo").
Nombra el dolor específico que siente la audiencia, en sus palabras ("Tu daily duró 40 minutos otra vez").
Usa contracciones y palabras cotidianas: "vas a", "es", "no".
Prefiere verbos a adjetivos. Muestra lo que el producto hace en lugar de describir lo bueno que es.
Las líneas cortas están bien cuando dicen algo específico ("Las reuniones se mueven." funciona porque la imagen muestra exactamente eso).

Nunca escribas esto:

Patrón	Ejemplos
Encuadre de contraste	"No X, sino Y", "No es solo X, es Y", "No X. No Y. Z.", "X no es el problema. Y lo es."
Listas de tres en ritmo	"Más rápido, más inteligente, mejor", "Planifica. Construye. Envía." cuando las tres palabras no dicen nada específico
Fragmentos de adjetivos apilados	"Inteligente. Ágil. Sin fricción." sin verbo ni conexión
Jerga de producto-palabrota	"Solución", "integrado", "agilizar", "revolucionario", "potenciar", "plataforma", "ecosistema", "novedoso"
Preguntas retóricas en serie	"¿Cansado de X? ¿Frustrado con Y? ¿Hart@ de Z?"
Verbos débiles + jerga empresarial	"Aprovechar el poder de", "desbloquear el potencial", "facilitar la colaboración"
Afirmaciones vagas y presentadas como hechos	"Empoderar a los equipos para que trabajen de forma más inteligente" sin mostrar cómo

Voz en off

Si se solicita una voz en off, preselecciona voces de un proveedor que elijas (la habilidad no incluye una). Prefiere un tono cálido y conversacional.

Sincroniza la voz en off al fotograma. Edita el audio de la voz en off con la línea de tiempo, no al revés.
Ducking de la música 8 dB por debajo de la voz en off. Usa ffmpeg para mezclar las pistas.

Movimiento

Reglas fundamentales

Los objetos no se mueven al azar. Cada animación explica un cambio en estado, enfoque, jerarquía o datos.
Un eje a la vez durante la mayor parte del movimiento, a menos que una transición claramente requiera dos.
El movimiento narrativo siempre gana. Si un movimiento se ve bien pero no aclara qué ha cambiado, elimínalo.
La UI se mantiene en el interior de los límites de la pantalla. Excepto en las transiciones de escena, nada debe superponerse a los márgenes del 10%.
Sin tiempos de espera fijos. Un retardo de 2 s nunca debe ser un setTimeout o un sleep. Usa el fotograma como única fuente de verdad.

Curvas de easing

La personalidad del movimiento proviene del easing. Usa exactamente estos presets. Nunca uses un easing por defecto a menos que se especifique.

Uso	Easing	Notas
Movimiento del cursor	`easeOutCubic`	El cursor se desliza hacia su objetivo, luego se detiene suavemente. Nunca rebota.
Apariciones/desapariciones	`easeInOutCubic` para apariciones de 0-1, `easeInCubic` para desapariciones de 1-0	Apariciones con aceleración suave. Desapariciones con desaceleración al final.
Cambios de diseño (reordenación de listas, transiciones de panel)	`easeInOutCubic`	Entrada y salida simétricas.
Movimiento de cámara (paneo, zoom)	`easeInOutSine`	Suave, orgánico. No debe llamar la atención sobre sí mismo.
Rebote (animaciones juguetonas, y solo cuando el producto lo use)	`cubicBezier(0.34, 1.56, 0.64, 1)`	Rango de salida máximo de 1.15 (nunca sobrepases el 15%). Usa con moderación.
Efectos de partículas (si se usan)	`easeOutQuad`	Caída natural.

Nunca uses easeInOutBack a menos que se te pida explícitamente. Tiene un fuerte rebote hacia atrás que se siente mecánico en la UI.

Micro-interacciones

La UI real está llena de micro-interacciones. Un video que las omita se sentirá muerto:

Hover: cuando el cursor se detiene sobre un elemento interactivo, ese elemento se realza: un botón se oscurece al pasar el ratón, un enlace se subraya, una tarjeta se eleva. El cursor nunca pasa a través de elementos sin reacción.
Clic: en el fotograma del clic, el elemento presionado comprime ligeramente (escala aprox. 0.95) y rebota hacia atrás en 6 fotogramas.
Escribir: los campos de entrada y las barras de búsqueda muestran un cursor parpadeante (2 fotogramas encendido, 2 apagado, 6 ciclos) antes de que el texto aparezca letra por letra.
Carga: si el producto muestra un spinner o esqueleto en la vida real, muéstralo en el video, aunque sea breve. Oculta las cargas largas cortando.

Efectos de sonido de UI

Cada micro-interacción necesita un efecto de sonido a juego:

Interacción	Efecto de sonido	Notas
Clic	Clic suave, nítido y de alta frecuencia	Sin ecos de sonido metálico. 50-100 ms, muestra a ~-12 dB
Hover	Sonido de paso sutil (opcional)	Úsalo solo si el video anima la navegación. ~-20 dB
Apertura de panel/ventana emergente	¿Quiénosh?	150-250 ms con un ligero tono agudo. ~-15 dB
Cierre de panel/ventana emergente	¿Quiénosh? inverso o un chasquido más corto	~-18 dB
Transición de escena	¿Quiénosh? ambiental suave (que coincida con el movimiento)	200-400 ms, fundido de entrada y salida. ~-15 dB
Escritura	Clics rápidos de teclado o pitidos robóticos suaves	Cada pulsación de tecla, 20 ms. ~-18 dB
Sonidos de arrastrar y soltar	Zumbido bajo de fricción (opcional)	Solo si hay elementos arrastrándose en la pantalla. ~-22 dB

Sincroniza los efectos de sonido exactamente al fotograma. Usa Audio o @remotion/player con pistas dedicadas. No confíes en el oído; edita con la línea de tiempo de Remotion.

Coreografía de UI

La coreografía trata sobre qué se mueve y qué espera.

Principios

El foco conduce. Cuando el usuario se mueve de la tarea A a la tarea B, el cursor va primero, luego la UI de B se realza, luego los datos cambian.
Una cosa a la vez. No muevas un panel, un modal y un badge al mismo tiempo a menos que sean parte de una misma transición de escena.
Jerarquía visible. Un cambio en los datos maestros (por ejemplo, el total del carrito) puede provocar una micro-actualización en el encabezado, pero la lista de abajo espera a que el encabezado termine.
Las interacciones humanas son lentas. Un clic real lleva de 100 a 300 ms. No telegrafíes una animación a la velocidad del rayo que parezca magia; deja que el cursor se mueva de forma creíble.

Transiciones entre vistas

Cuando el video se mueve de una pantalla a otra (por ejemplo, del panel al calendario):

La escena actual se atenúa o se aleja.
La nueva escena aparece desde atrás o desde un lado.
El cursor reposiciona.

Una transición entre vistas nunca debe tomar más de 500 ms. Si necesita más, córtala con un fundido a negro o un flash.

Cámara

El video usa una cámara virtual dentro del espacio de la UI, nunca una cámara real.

Reglas

Sin zoom de ojo de pez o gran angular. Usa un FOV equivalente a ~50 mm (sin distorsión perceptible).
La cámara se mueve para revelar, no para impresionar. Paneo horizontal para seguir al cursor a través de paneles. Zoom lento (aprox. 5% sobre 2 s) para centrarse en un detalle.
Sin rotación de cámara. Mantén la cámara nivelada. Sin inclinaciones holandesas, sin giros, sin espirales.
El movimiento de la cámara se ralentiza cuando el cursor se detiene o cuando aparece un elemento de UI importante. La cámara siempre está quieta en el fotograma donde ocurre un clic.
Transiciones de escena: fundido a negro de 200 ms, luego fundido de entrada a la siguiente escena. No uses transiciones con barrido o con formas (cortinillas) a menos que el producto las use.

Transiciones

Todas las transiciones se basan en una de estas:

Tipo	Duración	Cuándo usarlo
Fundido a negro	200 ms	Entre escenas, o para indicar un lapso de tiempo
Flash/blanco	100 ms	Saltos rápidos, o después de una acción satisfactoria (por ejemplo, guardar)
Fundido cruzado	200-300 ms	Montaje o cuando dos escenas comparten el fondo
Deslizamiento	250-400 ms	Cuando la siguiente escena está claramente a la derecha o izquierda de la actual (navegación)

Nunca uses transiciones con forma (círculo, diamante, etc.) a menos que el producto las use en su propia UI, y aun así, solo si se te pide.

Audio

Música

Todas las pistas de música provienen de Mixkit. No uses música con derechos de autor, bibliotecas de muestra ni otra fuente.
Preselecciona 3-4 pistas de la categoría de alta energía de Mixkit que coincidan con el ritmo del video. Preséntalas al usuario con enlaces y deja que elija. No elijas una sin preguntar.
Si el usuario quiere un ambiente más tranquilo, vuelve a preseleccionar de la categoría corporativa o ambiental de Mixkit.
Si nada encaja o el video se emitirá en TV o radio, usa música libre de derechos de Artlist en su lugar, pero solo si se te pide explícitamente.
Edita la pista para que coincida con la duración del video: fundido de entrada durante 1 s, fundido de salida durante 3 s o en el siguiente compás.

Ducking

Sin voz en off	Con voz en off
Mezcla la música a -12 dB (pico)	Mezcla la música a -20 dB debajo de la voz en off. Usa `ffmpeg` para el ducking o edita manualmente con bandas de volumen en el software de edición que elijas.

Los efectos de sonido siempre están a -15 a -20 dB, más silenciosos que la voz pero audibles.

Control de calidad

Antes de mostrar los fotogramas de revisión, ejecuta esta lista de verificación:

Revisión de fotogramas

Después del control de calidad, renderiza fotogramas de los fotogramas clave del video (al menos uno por toma) y muéstralos al usuario para su aprobación antes de renderizar el video final.

Selecciona un fotograma de revisión de cada toma significativa (donde la composición esté completa y estable).
Renderiza los fotogramas con npx remotion still.
Preséntalos al usuario como un montaje o contacto, ya sea como un PDF o una imagen de cuadrícula. Pregunta si la disposición, los colores, la tipografía y los activos son correctos.
Haz cambios si los solicita.
Renderiza el video final solo después de que el usuario haya aprobado los fotogramas de revisión.

Inspiración

Estos videos y estudios representan el estilo que perseguimos:

Linear — demo de producto con fundido de escena limpio, movimientos de cursor deliberados y cero adornos.
Arc browser — narrativa de producto suave combinada con UI en vivo, uso comedido de zooms y fundidos.
Notion — un estudio en la coreografía de UI: cómo los elementos entran, se reorganizan y salen para contar una historia.
Linear — voz en off, música y animaciones de UI que se mueven al mismo ritmo.
Motion design for UI by Anton Gudim — principios de animación de UI de un motion designer que trabaja en producto.

Estos son puntos de referencia de intención, no de ejecución. No copies exactamente un estilo; entiende por qué funciona para ese producto y aplícalo al tuyo.

Estructura del proyecto Remotion

Boilerplate

Usa el boilerplate estándar de npx create-video con un solo directorio src/. Dentro de src/:

src/
  Root.tsx                   # registro de composiciones
  editor/
    Editor.tsx               # dimensión de la escena, tamaño de pantalla, colores globales
  scenes/
    Scene1.tsx               # una escena por archivo, nombrada para que coincida con el arco
    Scene2.tsx
    ...
  ui/
    Button.tsx               # componentes reutilizados del producto (recreados, no importados de su código)
    SearchBar.tsx
    Modal.tsx
    Cursor.tsx               # componente de cursor animado
    TypingText.tsx           # texto que se escribe a sí mismo
  helpers/
    motion.ts                # constantes de easing, duraciones, funciones de ayuda
    theme.ts                 # tokens de diseño leídos del producto
  audio/
    mix.ts                   # ducking, mezcla, exportación

Composición

// Root.tsx
import { Composition } from "remotion";

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="ProductFilm"
        component={Editor}
        durationInFrames={60 * fps}          // 60 fps * segundos
        fps={60}
        width={1920}
        height={1080}
      />
    </>
  );
};

Componente Editor

// editor/Editor.tsx
import { useVideoConfig, useCurrentFrame, interpolate } from "remotion";

export const Editor: React.FC = () => {
  const { fps } = useVideoConfig();
  const frame = useCurrentFrame();

  return (
    <div style={{
      width: 1920,
      height: 1080,
      backgroundColor: "#f7f7f7",  // color de fondo por defecto, sobrescrito por el tema
      position: "relative",
      overflow: "hidden",
    }}>
      {/* Las escenas se renderizan aquí según el fotograma */}
    </div>
  );
};

Dependencias

Las dependencias se instalan a través de package.json de Remotion. La única dependencia de tiempo de ejecución es Node.js 24 y FFmpeg. La habilidad se ejecuta en un directorio de proyecto de Remotion. Instala las dependencias con npm install o pnpm install después de que Node.js v24 esté confirmado.

Esta habilidad está diseñada para usarse con Claude Code, Cursor, Codex y otras herramientas de agente de IA que tengan acceso a un entorno de línea de comandos y a un sistema de archivos.

Preguntar en tu IA favorita

Vista previa

Documentación

Diseño de Motion para SaaS

Valores predeterminados de un vistazo

Stack tecnológico

Flujo de trabajo

Planificación

1. Recopila el brief

2. Escribe el plan

3. Escribe la lista de tomas

Acceso al producto

Trabajar desde el código

Branding

Guión

Formato

Reglas

Suena como una persona, no como un modelo

Voz en off

Movimiento

Reglas fundamentales

Curvas de easing

Micro-interacciones

Efectos de sonido de UI

Coreografía de UI

Principios

Transiciones entre vistas

Cámara

Reglas

Transiciones

Audio

Música

Ducking

Control de calidad

Revisión de fotogramas

Inspiración

Estructura del proyecto Remotion

Boilerplate

Composición

Componente Editor

Dependencias

Skills relacionados

steipete/video-frames

steipete/summarize

openclaw/openclaw

obra/superpowers

affaan-m/ECC

affaan-m/everything-claude-code