# Plantillas de HyperFrames gratis en HTML y GSAP

Obtén 65 plantillas de vídeo HyperFrames para chat IA, dispositivos, títulos y demos. Personaliza HTML y GSAP o edita en Subclip.

Canonical URL: https://www.subclip.app/es/motion-graphics-templates/hyperframes

Las plantillas de HyperFrames son motion graphics escritos en HTML sencillo con una línea de tiempo de GSAP en pausa. Esta página es para desarrolladores y usuarios de agentes de IA que quieren escenas de video que se leen y se editan como una página web. Incluye publicaciones de redes sociales, notificaciones, hilos de chat, mapas regionales, gráficos, lower thirds, anotaciones dibujadas a mano y flujos de interfaz, todo con variables editables.

## HTML con una línea de tiempo de GSAP en pausa

Cada plantilla de HyperFrames es un documento HTML. La maquetación es HTML y CSS, y el movimiento es una línea de tiempo de GSAP que empieza en pausa. En lugar de dejar que el navegador la reproduzca en tiempo real, el renderizador la lleva a cada fotograma y lo captura. Cada fotograma es determinista, así que el render coincide con la vista previa.

Los valores editables se exponen como variables: nombre, usuario y contador en los overlays de seguir; título, subtítulo y valores en los mapas; periodos y series en Bar Chart Race; y colores de acento en muchas otras. Cambia una variable y la escena se vuelve a dibujar con ella. Como el código fuente es HTML corriente, también puedes leerlo, cambiar su estilo con CSS o añadir elementos como harías en una página web.

Muchas de estas plantillas son overlays. Instagram Follow, TikTok Follow, YouTube Lower Third, macOS Notification y Neon Border mantienen el fondo transparente para colocarse sobre tu metraje.

## Qué cubre el conjunto de HyperFrames

Las animaciones para redes sociales son uno de sus puntos fuertes. iOS Notification apila cuatro avisos en un encuadre vertical, X Post Card y Reddit Post Card animan un me gusta o un voto positivo mientras sube el contador, Comment Cards escribe dos comentarios, y ChatGPT Exchange y Claude Exchange reproducen una conversación con un asistente en 9:16.

Para datos y lugares están los mapas de Estados Unidos, Francia, España e India con valores por región editables, US Flow Map con arcos ponderados entre ciudades, Bar Chart Race, Minimal Line Graph, Animated Bar y Data Chart. Entre las piezas dibujadas a mano están Hand Drawn Scribble, Squiggle Marks, Whiteboard Bulb y Stitched Text Draw. Los flujos de interfaz incluyen Settings Toggle, Skeleton Reveal, Swipe Rail y Parallax Zoom.

## Usar plantillas de HyperFrames en Subclip

Todas las plantillas de HyperFrames son gratis y vienen preinstaladas en Subclip, el editor de video con IA para escritorio en Mac y Windows. Coloca una en la línea de tiempo sobre tu metraje y pide al agente de IA que la cambie: sustituir los valores del mapa por tus ventas por estado, poner tu usuario en el overlay de seguir o darle al lower third el nombre de tu canal y tu número de suscriptores. El agente edita las variables por ti y exportas el video cuando esté listo.

## Consigue el HTML para Claude o Codex

Todas las plantillas actuales de HyperFrames tienen paquete de código, disponible tras iniciar sesión gratis. Copia el código con un prompt para llevar a tu portapapeles el HTML completo y un prompt listo para el agente, pégalo en Claude o Codex y di qué quieres cambiar. El prompt enumera las variables, así que el agente sabe dónde van tus textos, colores y datos.

También puedes descargar el zip: index.html, props.json con los valores por defecto de las variables, un README sobre cómo ejecutarla en el reproductor de HyperFrames, y los archivos AGENTS.md y CLAUDE.md que describen qué es editable. Con eso, un agente de programación tiene contexto suficiente para cambiar el estilo de una plantilla, añadir una escena o generar varias versiones con datos distintos.

## 65 plantillas

- [Subclip Scenic Reel Composer](https://www.subclip.app/es/motion-graphics-templates/hyperframes/subclip-scenic-reel-composer) (HyperFrames, Entrada de chat con IA): Anima un mensaje de cristal y una galería giratoria en esta plantilla de vídeo.
- [Subclip Momentum Growth Headline](https://www.subclip.app/es/motion-graphics-templates/hyperframes/subclip-momentum-growth-headline) (HyperFrames, Títulos): Anima un título escrito junto a un gráfico animado en esta plantilla de vídeo.
- [Subclip Guided Word Spotlight](https://www.subclip.app/es/motion-graphics-templates/hyperframes/subclip-guided-word-spotlight) (HyperFrames, Títulos): Anima texto palabra por palabra con cámara móvil en esta plantilla de vídeo.
- [Subclip Hinged Laptop Showcase](https://www.subclip.app/es/motion-graphics-templates/hyperframes/subclip-hinged-laptop-showcase) (HyperFrames, Pantallas y dispositivos): Anima un portátil articulado con zoom de pantalla en esta plantilla de vídeo.
- [Subclip Aurora Brand Signature](https://www.subclip.app/es/motion-graphics-templates/hyperframes/subclip-aurora-brand-signature) (HyperFrames, Títulos): Anima un logotipo y nombre sobre suaves degradados en esta plantilla de vídeo.
- [Subclip Creative Brief Launcher](https://www.subclip.app/es/motion-graphics-templates/hyperframes/subclip-creative-brief-launcher) (HyperFrames, Entrada de chat con IA): Anima un encargo escrito con confirmación de envío en esta plantilla de vídeo.
- [Subclip Panorama Device Gallery](https://www.subclip.app/es/motion-graphics-templates/hyperframes/subclip-panorama-device-gallery) (HyperFrames, Pantallas y dispositivos): Anima cuatro teléfonos en perspectiva y un título en esta plantilla de vídeo.
- [Subclip Mobile Action Spotlight](https://www.subclip.app/es/motion-graphics-templates/hyperframes/subclip-mobile-action-spotlight) (HyperFrames, Pantallas y dispositivos): Anima un botón móvil ampliado y títulos de cierre en esta plantilla de vídeo.
- [Subclip Pocket AI Composer](https://www.subclip.app/es/motion-graphics-templates/hyperframes/subclip-pocket-ai-composer) (HyperFrames, Entrada de chat con IA): Anima un chat móvil con zoom al botón de envío en esta plantilla de vídeo.
- [Subclip Release-to-Video Assistant](https://www.subclip.app/es/motion-graphics-templates/hyperframes/subclip-release-to-video-assistant) (HyperFrames, Entrada de chat con IA): Anima una respuesta de IA con una tabla de resultados en esta plantilla de vídeo.
- [Subclip Connected Creative Workspace](https://www.subclip.app/es/motion-graphics-templates/hyperframes/subclip-connected-creative-workspace) (HyperFrames, Entrada de chat con IA): Anima conexiones de archivos y un espacio creativo en esta plantilla de vídeo.
- [Subclip Intent Search Animation](https://www.subclip.app/es/motion-graphics-templates/hyperframes/subclip-intent-search-animation) (HyperFrames, Entrada de chat con IA): Anima una búsqueda seleccionada y escrita de nuevo en esta plantilla de vídeo.
- [Subclip Production Progress Tracker](https://www.subclip.app/es/motion-graphics-templates/hyperframes/subclip-production-progress-tracker) (HyperFrames, Entrada de chat con IA): Anima una lista de tareas con progreso y confirmación en esta plantilla de vídeo.
- [iOS Notification](https://www.subclip.app/es/motion-graphics-templates/hyperframes/notification-cascade) (HyperFrames, Redes y chat): Un overlay de notificaciones vertical en el que cuatro avisos estilo iPhone se apilan uno tras otro y luego desaparecen para dar paso a una tarjeta final con titular y logo.
- [Instant Carousel](https://www.subclip.app/es/motion-graphics-templates/hyperframes/share-sheet-carousel) (HyperFrames, Redes y chat): Un carrusel vertical que pasa cuatro fotos dentro de una tarjeta blanca redondeada, con una copia suave y desenfocada de la imagen actual que llena el fondo.
- [macOS Notification](https://www.subclip.app/es/motion-graphics-templates/hyperframes/macos-notification) (HyperFrames, Redes y chat): Un overlay panorámico en el que avisos de notificación estilo macOS llegan de uno en uno a la esquina superior derecha y se apilan en una columna.
- [Instagram Follow](https://www.subclip.app/es/motion-graphics-templates/hyperframes/instagram-follow) (HyperFrames, Redes y chat): Un overlay vertical transparente con una cápsula de perfil compacta cuyo botón Follow pasa a Following, pensado para invitar a seguir tu cuenta.
- [TikTok Follow](https://www.subclip.app/es/motion-graphics-templates/hyperframes/tiktok-follow) (HyperFrames, Redes y chat): Un overlay de perfil transparente en 9:16 en el que un botón Follow rojo rosado salta al estado Following con una marca de verificación.
- [X Post Card](https://www.subclip.app/es/motion-graphics-templates/hyperframes/x-post) (HyperFrames, Redes y chat): Una tarjeta panorámica de publicación social en tema oscuro con un perfil, el texto del post y una fila de acciones, que anima un me gusta con un aumento del contador.
- [Reddit Post Card](https://www.subclip.app/es/motion-graphics-templates/hyperframes/reddit-post) (HyperFrames, Redes y chat): Una tarjeta panorámica de publicación en una comunidad, con la línea del subreddit, un titular en negrita y el texto, que termina con un voto positivo que salta y sube la puntuación.
- [Thread Message](https://www.subclip.app/es/motion-graphics-templates/hyperframes/thread-message-stack) (HyperFrames, Redes y chat): Una conversación de texto panorámica en la que burbujas grises entrantes y azules salientes aparecen una tras otra sobre un campo de color suave y desenfocado.
- [Comment Cards](https://www.subclip.app/es/motion-graphics-templates/hyperframes/yt-comment-card) (HyperFrames, Redes y chat): Un overlay panorámico en el que aparecen dos comentarios seguidos, cada uno con un avatar de iniciales, usuario, etiqueta de tiempo, texto escrito y una fila de reacciones.
- [YouTube Lower Third](https://www.subclip.app/es/motion-graphics-templates/hyperframes/yt-lower-third) (HyperFrames, Rótulos y llamadas a la acción): Un lower third panorámico y transparente con el avatar y el nombre de un canal junto a un botón Subscribe que salta al estado Subscribed.
- [Grid Pixelate](https://www.subclip.app/es/motion-graphics-templates/hyperframes/grid-pixelate) (HyperFrames, Transiciones): Una transición en cuadrícula de píxeles en la que unos cuadros crecen hasta cubrir todo el encuadre y luego se encogen, dejando un instante limpio para cortar entre escenas.
- [Hand Drawn Scribble](https://www.subclip.app/es/motion-graphics-templates/hyperframes/hw-callout-circle) (HyperFrames, Anotaciones): Un destacado dibujado a mano en el que una elipse blanca irregular rodea un elemento, un sombreado de rotulador la rellena y un conector curvo lleva a una etiqueta manuscrita.
- [Squiggle Marks](https://www.subclip.app/es/motion-graphics-templates/hyperframes/hw-underline) (HyperFrames, Anotaciones): Una anotación manuscrita en la que tres líneas se marcan por turnos con un subrayado ondulado, un doble tachado y un corchete curvo.
- [Multiplayer Cursor](https://www.subclip.app/es/motion-graphics-templates/hyperframes/multiplayer-cursors) (HyperFrames, Clics): Una animación de colaboración en la que de dos a seis cursores de colores con etiquetas de nombre siguen recorridos fijos y se reúnen alrededor de un anillo luminoso.
- [Parallax Device Dive](https://www.subclip.app/es/motion-graphics-templates/hyperframes/parallax-device-dive) (HyperFrames, Pantallas y dispositivos): Una animación de mockup en la que un móvil con un panel de datos sube, se detiene y luego se amplía hasta llenar el encuadre mientras las capas de la interfaz se separan.
- [Parallax Unzoom](https://www.subclip.app/es/motion-graphics-templates/hyperframes/parallax-unzoom) (HyperFrames, Títulos): Una transición de alejamiento en la que una tarjeta a pantalla completa se encoge hacia el centro de una cuadrícula de tres por tres mientras ocho vecinas de colores entran a su alrededor.
- [Parallax Zoom](https://www.subclip.app/es/motion-graphics-templates/hyperframes/parallax-zoom) (HyperFrames, Títulos): Una transición de zoom que empieza en una cuadrícula de tres por tres tarjetas de colores y avanza hacia la tarjeta central hasta que llena el encuadre.
- [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.
- [Store Badge](https://www.subclip.app/es/motion-graphics-templates/hyperframes/store-badge-lockup) (HyperFrames, Rótulos y llamadas a la acción): Una tarjeta final de descarga de app en la que primero aparece un titular grande y después, debajo, insignias al estilo de App Store y Google Play.
- [Neon Border](https://www.subclip.app/es/motion-graphics-templates/hyperframes/lt-neon-border) (HyperFrames, Rótulos y llamadas a la acción): Un lower third transparente con una tarjeta oscura de nombre cuyo borde recorren dos arcos de neón opuestos con un brillo suave.
- [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.
- [Staggered Fade Up](https://www.subclip.app/es/motion-graphics-templates/hyperframes/staggered-fade-up) (HyperFrames, Títulos): Un revelado de texto sencillo palabra a palabra, en el que cada palabra aparece con un fundido, crece un poco y se desliza una distancia corta hasta su posición final.
- [Text Stagger](https://www.subclip.app/es/motion-graphics-templates/hyperframes/text-stagger) (HyperFrames, Títulos): Un titular de una línea que sube y se escala hasta su sitio de forma escalonada, y después recibe una única pasada de destello de color sobre el texto.
- [Intro Video](https://www.subclip.app/es/motion-graphics-templates/hyperframes/intro-video) (HyperFrames, Demos de productos): Una intro de demo de producto con guion que abre con texto cinético, escribe un prompt en un campo de asistente, pulsa enviar y muestra una tarjeta con el proyecto resultante.
- [ChatGPT Exchange](https://www.subclip.app/es/motion-graphics-templates/hyperframes/chatgpt-exchange) (HyperFrames, Entrada de chat con IA): Una animación de chat vertical en modo oscuro en la que se escribe una pregunta, llega una respuesta con una tabla de flujo de trabajo de cuatro filas y la vista se desplaza para leerla.
- [Claude Exchange](https://www.subclip.app/es/motion-graphics-templates/hyperframes/claude-exchange) (HyperFrames, Entrada de chat con IA): Una animación de chat vertical en tonos oscuros cálidos en la que una pregunta escrita da paso a pasos de planificación y búsqueda y a una larga respuesta con serifa que aparece y se desplaza.
- [Gallery Tunnel](https://www.subclip.app/es/motion-graphics-templates/hyperframes/gallery-tunnel) (HyperFrames, Demos de productos): Un túnel en perspectiva con paneles de colores vivos y finas líneas de cuadrícula en las paredes de un pasillo que avanza hacia un punto de fuga central.
- [Chat Thread 2](https://www.subclip.app/es/motion-graphics-templates/hyperframes/chat-thread-2) (HyperFrames, Redes y chat): Una conversación de texto vertical dentro de un móvil, con respuestas escritas, una vista previa de enlace, reacciones con emoji y confirmaciones de lectura, que termina en una tarjeta de cierre.
- [Minimal Line Graph](https://www.subclip.app/es/motion-graphics-templates/hyperframes/minimal-line-graph) (HyperFrames, Gráficos): Un gráfico de líneas limpio con dos series sobre fondo transparente, con etiquetas de valor en cada punto, meses en la parte inferior y una pequeña leyenda.
- [Spain Map](https://www.subclip.app/es/motion-graphics-templates/hyperframes/spain-map) (HyperFrames, Mapas): Un mapa animado de las comunidades de España coloreadas según su valor, con las islas Baleares y Canarias, un título, un subtítulo y una leyenda de color.
- [India Map](https://www.subclip.app/es/motion-graphics-templates/hyperframes/india-map) (HyperFrames, Mapas): Un mapa de India de 12 segundos que colorea cada estado y territorio de la unión según su valor, con etiquetas, título, subtítulo y una leyenda de Low a High.
- [France Map](https://www.subclip.app/es/motion-graphics-templates/hyperframes/france-map) (HyperFrames, Mapas): Un mapa coroplético de Francia metropolitana con cada región sombreada según tus valores, los nombres de las regiones, un título, un subtítulo y una escala de color.
- [US Map](https://www.subclip.app/es/motion-graphics-templates/hyperframes/us-map) (HyperFrames, Mapas): Un mapa de Estados Unidos que muestra las regiones en secuencia y colorea cada estado según su valor, con Alaska, Hawái, nombres de estados y una leyenda de color.
- [US Flow Map](https://www.subclip.app/es/motion-graphics-templates/hyperframes/us-flow-map) (HyperFrames, Mapas): Un mapa oscuro de Estados Unidos en el que arcos azules curvos unen grandes ciudades y pequeños puntos viajan por ellos para mostrar flujos entre ciudades.
- [ChatGPT Chat](https://www.subclip.app/es/motion-graphics-templates/hyperframes/ai-chat-reveal) (HyperFrames, Entrada de chat con IA): Una animación de chat con asistente en 9:16, con una pregunta escrita, una respuesta en directo con viñetas y una tarjeta final con llamada a la acción.
- [Animated Bar](https://www.subclip.app/es/motion-graphics-templates/hyperframes/animated-bar) (HyperFrames, Gráficos): Una tarjeta de gráfico monocroma y compacta con barras que crecen, una curva de tendencia suave y un gran porcentaje destacado en la esquina superior derecha.
- [Bar Chart Race](https://www.subclip.app/es/motion-graphics-templates/hyperframes/bar-chart-race) (HyperFrames, Gráficos): Un gráfico de barras horizontales ordenadas que avanza por periodos de tiempo, con adelantamientos, el primer puesto resaltado, un eje que se reescala y un contador de periodo.
- [Data Chart](https://www.subclip.app/es/motion-graphics-templates/hyperframes/data-chart) (HyperFrames, Gráficos): Un gráfico combinado de estilo editorial que une barras de ingresos mensuales con una línea de tasa de conversión, etiquetas de valor, una leyenda y una nota de fuente.
- [Camera Follow Captions](https://www.subclip.app/es/motion-graphics-templates/hyperframes/caption-camera-follow) (HyperFrames, Títulos): Subtítulos cinéticos en los que cada nueva palabra cae en un bloque creciente de mayúsculas en negrita mientras la cámara se aleja para mostrar la frase completa.
- [Whiteboard Bulb](https://www.subclip.app/es/motion-graphics-templates/hyperframes/whiteboard-bulb) (HyperFrames, Anotaciones): Un boceto de una bombilla al estilo pizarra, dibujado trazo a trazo con un rotulador en movimiento, una marca de color de acento y un texto debajo.
- [Whiteboard Rocket](https://www.subclip.app/es/motion-graphics-templates/hyperframes/whiteboard-rocket) (HyperFrames, Anotaciones): Un boceto de un cohete hecho con rotulador, con aletas, líneas de escape y una ventana de color, seguido de un breve texto de lanzamiento sobre fondo de papel.
- [Chat Thread](https://www.subclip.app/es/motion-graphics-templates/hyperframes/chat-thread) (HyperFrames, Redes y chat): Un hilo de mensajes de texto en modo oscuro y 9:16, con burbujas entrantes y salientes, puntos de escritura, una vista previa de enlace y confirmaciones de lectura.
- [CTA Lockup](https://www.subclip.app/es/motion-graphics-templates/hyperframes/cta-lockup) (HyperFrames, Rótulos y llamadas a la acción): Una pantalla de cierre con llamada a la acción: un titular grande, un botón en forma de cápsula y una pequeña línea de texto de apoyo sobre negro.
- [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.
- [Outline Draw](https://www.subclip.app/es/motion-graphics-templates/hyperframes/outline-draw) (HyperFrames, Anotaciones): Un contorno fino con esquinas redondeadas que se dibuja en sentido horario con el centro transparente, para enmarcar y resaltar una parte de tu video.
- [Oversized Cursor](https://www.subclip.app/es/motion-graphics-templates/hyperframes/oversized-cursor) (HyperFrames, Clics): Un cursor de flecha grande que va hasta un botón, hace clic para que responda con una marca de verificación y después sale del encuadre.
- [Social Proof Card](https://www.subclip.app/es/motion-graphics-templates/hyperframes/social-proof-card) (HyperFrames, Prueba social): Una tarjeta de cierre color crema con el nombre de la marca, una fila de cinco estrellas, una cita de cliente, tres iconos de funciones y un botón de llamada a la acción.
- [Stitched Text Draw](https://www.subclip.app/es/motion-graphics-templates/hyperframes/stitched-text-draw) (HyperFrames, Anotaciones): Una palabra en mayúsculas dibujada con puntadas de hilo discontinuas, con agujeros de aguja y una aguja en movimiento, sobre fondo negro.
- [Swipe Rail](https://www.subclip.app/es/motion-graphics-templates/hyperframes/swipe-rail) (HyperFrames, Transiciones): Un carril horizontal de tarjetas numeradas que se desliza con inercia y encaja una tarjeta en el centro sobre un fondo azul marino oscuro.
- [Ask Subclip](https://www.subclip.app/es/motion-graphics-templates/hyperframes/ask-subclip) (HyperFrames, Entrada de chat con IA): Una escena promocional para un editor de video con IA en la que se escribe una petición en un campo de prompt bajo un titular, seguida de un resultado y una frase final.
- [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.
- [Spatial deck](https://www.subclip.app/es/motion-graphics-templates/hyperframes/spatial-deck) (HyperFrames, Demos de productos): Una secuencia de tarjetas numeradas de color verde azulado que avanzan en una perspectiva 3D por capas, cada una con el título de un paso y una breve descripción.

## Más en Plantillas de HyperFrames gratis en HTML y GSAP

- [HyperFrames: Títulos](https://www.subclip.app/es/motion-graphics-templates/hyperframes/text-animations)
- [HyperFrames: Pantallas y dispositivos](https://www.subclip.app/es/motion-graphics-templates/hyperframes/screen-device-animations)
- [HyperFrames: Gráficos](https://www.subclip.app/es/motion-graphics-templates/hyperframes/animated-charts)
- [HyperFrames: Entrada de chat con IA](https://www.subclip.app/es/motion-graphics-templates/hyperframes/ai-chat-animations)
- [HyperFrames: Mapas](https://www.subclip.app/es/motion-graphics-templates/hyperframes/animated-maps)
- [HyperFrames: Redes y chat](https://www.subclip.app/es/motion-graphics-templates/hyperframes/social-media-animations)
- [HyperFrames: Rótulos y llamadas a la acción](https://www.subclip.app/es/motion-graphics-templates/hyperframes/lower-thirds)
- [HyperFrames: Anotaciones](https://www.subclip.app/es/motion-graphics-templates/hyperframes/hand-drawn-annotations)
- [HyperFrames: Interfaz](https://www.subclip.app/es/motion-graphics-templates/hyperframes/ui-animations)