# Plantillas gratis de animación de interfaz para videos de apps y productos Plantillas de vídeo de UI gratuitas 18: conmutadores, cargadores e introducciones de aplicaciones. Personalícelos para demostraciones de productos. Canonical URL: https://www.subclip.app/es/motion-graphics-templates/ui-animations Las plantillas de animación de interfaz muestran el movimiento de una UI por sí solo: un interruptor que se activa, un esqueleto de carga que se convierte en contenido, un carrusel de tarjetas que encaja en su sitio, la pantalla de un móvil que se separa en capas. Esta colección es para profesionales de marketing de producto, diseñadores y creadores de apps que quieren momentos de interfaz cortos para videos SaaS, previsualizaciones de apps y recorridos por funciones. ## Dónde encajan las animaciones de interfaz Los videos de producto necesitan momentos que muestren qué se siente al usar algo. Settings Toggle muestra tres filas de ajustes y desliza sus interruptores a su posición, algo que encaja con una función de privacidad o de personalización. Skeleton Reveal funde un marcador de carga brillante en una tarjeta con nombre y detalle, una forma rápida de mostrar cómo la carga se convierte en datos. Swipe Rail lanza un carrusel de tarjetas con inercia hasta que encaja. Los movimientos de cámara añaden profundidad. Parallax Device Dive levanta un móvil, se detiene y luego llena el encuadre mientras las capas de su interfaz se separan. Parallax Zoom amplía una tarjeta hasta llenar la pantalla mientras las demás se alejan, y Parallax Unzoom hace lo contrario y se aleja hasta una cuadrícula de tres por tres. Gallery Tunnel recorre un pasillo de paneles de colores o de tus propias imágenes, y Spatial deck avanza entre tarjetas en capas con perspectiva 3D. Las escenas más largas cuentan una historia breve. Intro Video escribe un prompt, hace clic y llega a la tarjeta de un proyecto. Notes Typing escribe una nota completa en un encuadre vertical con teclado y desplazamiento. Build console reproduce un render de terminal en varias fases. Generative mosaic construye un patrón con semilla alrededor de un título y un color de acento. ## Qué hace buena una animación de interfaz Muestra un comportamiento real. Un interruptor debe moverse como un interruptor y una lista debe desplazarse como una lista. El movimiento de estas plantillas sigue la física de las interfaces: los interruptores se deslizan, las tarjetas encajan y se asientan, y las capas se separan a distintas profundidades. Mantiene la interfaz legible. El texto de una UI es pequeño, así que deja cada estado el tiempo suficiente para que se lean las etiquetas. Usa tus propias etiquetas en lugar de textos de ejemplo y mantén los colores de acento cerca de los de tu producto. ## Qué puedes personalizar Settings Toggle recibe tres etiquetas, tres descripciones y el estado activado o desactivado de cada interruptor. Skeleton Reveal recibe un nombre, una línea de detalle y un tono claro u oscuro. Parallax Zoom y Parallax Unzoom reciben las etiquetas de las tarjetas, cuánto se escala la tarjeta principal y cuánto se apartan y se desvanecen las de al lado. Swipe Rail recibe el número de tarjetas, un color de acento y el texto de las etiquetas. Gallery Tunnel recibe hasta cuatro imágenes, una paleta y ajustes de niebla y cuadrícula. Todas vienen preinstaladas en Subclip, el editor de video con IA para escritorio en Mac y Windows, y el agente de IA puede cambiar cualquiera de ellas a partir de un prompt, por ejemplo "llama a los interruptores Autoguardado, Sincronización y Copias de seguridad". ## Motores y código Casi todas las animaciones de interfaz de esta página son plantillas de HyperFrames, hechas en HTML con una línea de tiempo de GSAP; Generative mosaic es un componente de Remotion. Todas tienen paquete de código tras iniciar sesión gratis. Copia el código con un prompt para Claude o Codex, o descarga un zip con el código fuente, un README e instrucciones para el agente. La página de animaciones de interfaz de HyperFrames muestra por separado el conjunto de ese motor. ## 18 plantillas - [Search Reveal](https://www.subclip.app/es/motion-graphics-templates/remotion/search-reveal) (Remotion, Interfaz): Finos círculos de construcción se expanden y encajan en una barra de búsqueda, tu texto se escribe solo y detrás se abre un panel gráfico colorido. - [Combobox](https://www.subclip.app/es/motion-graphics-templates/remotion/combobox) (Remotion, Interfaz): Un componente de selección con búsqueda, con un activador con texto de marcador, un panel de opciones abierto y una fila resaltada, para vídeos de demo de interfaz. - [Command Menu](https://www.subclip.app/es/motion-graphics-templates/remotion/command-menu) (Remotion, Interfaz): Una paleta de comandos de teclado con un campo de búsqueda y una lista de comandos con atajos, mostrada abierta sobre un fondo atenuado. - [Context Menu](https://www.subclip.app/es/motion-graphics-templates/remotion/context-menu) (Remotion, Interfaz): Un panel de menú de clic derecho con cuatro acciones y una fila bajo el puntero, listo para colocarlo en el punto del cursor en una demo de interfaz. - [Resizable](https://www.subclip.app/es/motion-graphics-templates/remotion/resizable) (Remotion, Interfaz): Un diseño de dos paneles con un tirador divisor, donde la proporción de la división y el estado del tirador se pueden ajustar para vídeos de demo de interfaz. - [Skeleton](https://www.subclip.app/es/motion-graphics-templates/remotion/skeleton) (Remotion, Interfaz): Una tarjeta de carga tipo skeleton con un brillo que recorre un avatar redondo y dos líneas de texto. - [Slider](https://www.subclip.app/es/motion-graphics-templates/remotion/slider) (Remotion, Interfaz): Un deslizador de rango limpio cuyo valor de relleno y estado del control se pueden ajustar, con el valor actual sobre el control. - [Stepper](https://www.subclip.app/es/motion-graphics-templates/remotion/stepper) (Remotion, Interfaz): Un indicador de pasos horizontal de onboarding con tres pasos etiquetados, donde se puede elegir el paso activo para mostrar el progreso. - [Tabs](https://www.subclip.app/es/motion-graphics-templates/remotion/tabs) (Remotion, Interfaz): Un componente de pestañas con indicador de píldora o subrayado y un breve panel de texto para la pestaña activa. - [Toast](https://www.subclip.app/es/motion-graphics-templates/remotion/toast) (Remotion, Interfaz): Una pequeña tarjeta de notificación con icono, título y línea de detalle, en estilo predeterminado o de éxito, para vídeos de demo de apps. - [Typing Indicator](https://www.subclip.app/es/motion-graphics-templates/remotion/typing-indicator) (Remotion, Interfaz): Una fila de pequeños puntos que rebotan uno tras otro en una onda suave, como el indicador de escritura de una app de chat. - [Signup Flow](https://www.subclip.app/es/motion-graphics-templates/remotion/signup-flow) (Remotion, Interfaz): Una tarjeta de registro al estilo de shadcn donde un cursor rellena el nombre, el email y la contraseña, envía con un estado de carga y recibe un toast de éxito. - [Checkout Flow](https://www.subclip.app/es/motion-graphics-templates/remotion/checkout-flow) (Remotion, Interfaz): Una tarjeta de pago con selector de facturación, campo de tarjeta y casilla de condiciones, que un cursor rellena y paga, con un toast de éxito al final. - [Settings Toggle Flow](https://www.subclip.app/es/motion-graphics-templates/remotion/settings-toggle-flow) (Remotion, Interfaz): Una tarjeta de ajustes a dos columnas donde un cursor activa las notificaciones, elige un tema, arrastra un deslizador y guarda. - [Settings Toggle](https://www.subclip.app/es/motion-graphics-templates/hyperframes/settings-toggle-flow) (HyperFrames, Interfaz): Una animación de panel de ajustes en la que tres filas con nombre aparecen en una tarjeta blanca y sus interruptores se deslizan a activado o desactivado. - [Skeleton Reveal](https://www.subclip.app/es/motion-graphics-templates/hyperframes/skeleton-reveal) (HyperFrames, Interfaz): Una breve animación de estado de carga en la que un esqueleto brillante se funde en una tarjeta con un nombre en negrita y una línea de detalle. - [Notes Typing](https://www.subclip.app/es/motion-graphics-templates/hyperframes/notes-typing) (HyperFrames, Interfaz): Una animación de notas en un móvil en 9:16 que escribe un título y siete líneas con un teclado en pantalla y termina en una tarjeta con lista de verificación y tu marca. - [Build console](https://www.subclip.app/es/motion-graphics-templates/hyperframes/build-console) (HyperFrames, Interfaz): Una ventana de terminal oscura que ejecuta un comando de render en varias fases, con marcas de verificación, una barra de progreso y una insignia de listo. ## Más en Plantillas gratis de animación de interfaz para videos de apps y productos - [Remotion: Interfaz](https://www.subclip.app/es/motion-graphics-templates/remotion/ui-animations) - [HyperFrames: Interfaz](https://www.subclip.app/es/motion-graphics-templates/hyperframes/ui-animations)