# Templates motion design HyperFrames gratuits en HTML et GSAP

Découvrez 65 modèles vidéo HyperFrames pour chat IA, appareils, titres et démos. Adaptez HTML et GSAP ou modifiez dans Subclip.

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

Les templates HyperFrames sont des animations motion design écrites en HTML simple avec une timeline GSAP en pause. Cette page s'adresse aux développeurs et aux utilisateurs d'agents IA qui veulent des scènes vidéo qu'ils peuvent lire et modifier comme une page web. Elle regroupe publications sociales, notifications, fils de discussion, cartes régionales, graphiques, lower thirds, annotations dessinées à la main et parcours d'interface, tous avec des variables modifiables.

## Du HTML avec une timeline GSAP en pause

Chaque template HyperFrames est un document HTML. La mise en page est en HTML et CSS, et le mouvement est une timeline GSAP qui démarre en pause. Au lieu de laisser le navigateur la jouer en temps réel, le moteur de rendu positionne la timeline sur chaque image et la capture. Chaque image est déterministe : le rendu correspond donc à l'aperçu.

Les valeurs modifiables sont exposées sous forme de variables : nom, identifiant et nombre d'abonnés sur les overlays d'abonnement, titre, sous-titre et valeurs sur les cartes, périodes et séries sur Bar Chart Race, et couleurs d'accent sur beaucoup d'autres. Changez une variable et la scène se redessine avec. Comme la source est du HTML ordinaire, vous pouvez aussi la lire, la restyler en CSS ou ajouter des éléments comme sur une page web.

Beaucoup de templates sont ici des overlays. Instagram Follow, TikTok Follow, YouTube Lower Third, macOS Notification et Neon Border gardent un fond transparent pour se placer par-dessus vos images.

## Ce que couvre l'ensemble HyperFrames

Les animations réseaux sociaux sont un point fort. iOS Notification empile quatre bannières dans un cadre vertical, X Post Card et Reddit Post Card animent un like ou un vote positif avec un compteur qui augmente, Comment Cards fait apparaître deux commentaires en cours de saisie, et ChatGPT Exchange et Claude Exchange rejouent une conversation scénarisée avec un assistant en 9:16.

Pour les données et les lieux, on trouve les cartes des États-Unis, de la France, de l'Espagne et de l'Inde avec des valeurs régionales modifiables, US Flow Map avec des arcs pondérés entre les villes, Bar Chart Race, Minimal Line Graph, Animated Bar et Data Chart. Côté dessin à la main, Hand Drawn Scribble, Squiggle Marks, Whiteboard Bulb et Stitched Text Draw. Côté interface, Settings Toggle, Skeleton Reveal, Swipe Rail et Parallax Zoom.

## Utiliser les templates HyperFrames dans Subclip

Tous les templates HyperFrames sont gratuits et préinstallés dans Subclip, l'éditeur vidéo IA de bureau pour Mac et Windows. Placez-en un sur la timeline au-dessus de vos images, puis demandez à l'agent IA de le modifier : remplacer les valeurs de la carte par vos ventes par État, mettre votre identifiant sur l'overlay d'abonnement, ou afficher le nom de votre chaîne et votre nombre d'abonnés dans le lower third. L'agent modifie les variables pour vous, et vous exportez la vidéo quand elle est prête.

## Récupérer le HTML pour Claude ou Codex

Les templates HyperFrames actuels ont tous un pack de code, disponible après une connexion gratuite. Copiez le code avec un prompt pour placer le HTML complet et un prompt prêt pour agent dans votre presse-papiers, puis collez-le dans Claude ou Codex en précisant ce qu'il faut changer. Le prompt liste les variables, l'agent sait donc où vont votre texte, vos couleurs et vos données.

Vous pouvez aussi télécharger le zip : index.html, props.json avec les valeurs par défaut des variables, un README pour le lancer dans le lecteur HyperFrames, et des fichiers AGENTS.md et CLAUDE.md qui décrivent ce qui est modifiable. Un agent de code a ainsi assez de contexte pour restyler un template, ajouter une scène ou produire plusieurs versions avec des données différentes.

## 65 templates

- [Subclip Scenic Reel Composer](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/subclip-scenic-reel-composer) (HyperFrames, Saisie de chat IA): Animez un prompt vitré et une galerie photo tournante dans ce modèle vidéo.
- [Subclip Momentum Growth Headline](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/subclip-momentum-growth-headline) (HyperFrames, Titres): Animez un titre saisi avec un graphique en mouvement dans ce modèle vidéo.
- [Subclip Guided Word Spotlight](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/subclip-guided-word-spotlight) (HyperFrames, Titres): Animez du texte mot à mot suivi par la caméra dans ce modèle vidéo.
- [Subclip Hinged Laptop Showcase](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/subclip-hinged-laptop-showcase) (HyperFrames, Écrans et appareils): Animez un ordinateur portable et un zoom sur son écran dans ce modèle vidéo.
- [Subclip Aurora Brand Signature](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/subclip-aurora-brand-signature) (HyperFrames, Titres): Animez un logo et un nom sur des dégradés doux dans ce modèle vidéo.
- [Subclip Creative Brief Launcher](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/subclip-creative-brief-launcher) (HyperFrames, Saisie de chat IA): Animez un brief saisi avec confirmation d'envoi dans ce modèle vidéo.
- [Subclip Panorama Device Gallery](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/subclip-panorama-device-gallery) (HyperFrames, Écrans et appareils): Animez quatre téléphones en perspective et un titre dans ce modèle vidéo.
- [Subclip Mobile Action Spotlight](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/subclip-mobile-action-spotlight) (HyperFrames, Écrans et appareils): Animez un bouton mobile en gros plan et des titres finaux dans ce modèle vidéo.
- [Subclip Pocket AI Composer](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/subclip-pocket-ai-composer) (HyperFrames, Saisie de chat IA): Animez un chat mobile avec zoom sur le bouton d'envoi dans ce modèle vidéo.
- [Subclip Release-to-Video Assistant](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/subclip-release-to-video-assistant) (HyperFrames, Saisie de chat IA): Animez une réponse IA avec un tableau de résultats dans ce modèle vidéo.
- [Subclip Connected Creative Workspace](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/subclip-connected-creative-workspace) (HyperFrames, Saisie de chat IA): Animez des connexions de fichiers et un espace créatif dans ce modèle vidéo.
- [Subclip Intent Search Animation](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/subclip-intent-search-animation) (HyperFrames, Saisie de chat IA): Animez une recherche sélectionnée puis réécrite dans ce modèle vidéo.
- [Subclip Production Progress Tracker](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/subclip-production-progress-tracker) (HyperFrames, Saisie de chat IA): Animez une liste de tâches avec suivi et validation dans ce modèle vidéo.
- [iOS Notification](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/notification-cascade) (HyperFrames, Réseaux et chat): Un overlay de notifications vertical où quatre bannières façon iPhone s'empilent l'une après l'autre, puis laissent place à un carton final avec titre et logo.
- [Instant Carousel](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/share-sheet-carousel) (HyperFrames, Réseaux et chat): Un carrousel d'images vertical qui fait défiler quatre photos dans une carte blanche arrondie, avec une copie floue de l'image en cours qui remplit l'arrière-plan.
- [macOS Notification](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/macos-notification) (HyperFrames, Réseaux et chat): Un overlay 16:9 où des bannières de notification façon macOS arrivent une à une dans le coin supérieur droit et s'empilent en colonne.
- [Instagram Follow](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/instagram-follow) (HyperFrames, Réseaux et chat): Un overlay vertical transparent avec une pastille de profil compacte dont le bouton S'abonner passe à Abonné, pour inviter les spectateurs à suivre votre compte.
- [TikTok Follow](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/tiktok-follow) (HyperFrames, Réseaux et chat): Un overlay de profil 9:16 transparent où un bouton S'abonner rouge rosé passe à l'état Abonné avec une coche et un effet ressort.
- [X Post Card](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/x-post) (HyperFrames, Réseaux et chat): Une carte de publication sociale en 16:9 et en thème sombre, avec profil, texte et rangée d'actions, qui anime un like et la hausse du compteur.
- [Reddit Post Card](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/reddit-post) (HyperFrames, Réseaux et chat): Une carte de publication communautaire en 16:9 avec une ligne de subreddit, un titre en gras et un texte, qui se termine par un vote positif faisant monter le score.
- [Thread Message](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/thread-message-stack) (HyperFrames, Réseaux et chat): Une conversation par SMS en 16:9 où des bulles grises entrantes et bleues sortantes apparaissent l'une après l'autre sur un fond coloré doux et flou.
- [Comment Cards](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/yt-comment-card) (HyperFrames, Réseaux et chat): Un overlay 16:9 où deux commentaires de spectateurs apparaissent à la suite, chacun avec avatar à initiales, pseudo, date, texte tapé et rangée de réactions.
- [YouTube Lower Third](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/yt-lower-third) (HyperFrames, Bandeaux et appels à l'action): Un lower third transparent en 16:9 qui affiche l'avatar et le nom d'une chaîne à côté d'un bouton S'abonner qui passe à Abonné avec un effet ressort.
- [Grid Pixelate](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/grid-pixelate) (HyperFrames, Transitions): Une transition en grille de pixels où des tuiles carrées grandissent jusqu'à couvrir toute l'image puis rétrécissent, laissant un instant propre pour couper entre deux scènes.
- [Hand Drawn Scribble](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/hw-callout-circle) (HyperFrames, Annotations): Une annotation dessinée à la main : une ellipse blanche tremblée entoure un sujet, des hachures au marqueur la remplissent et un trait courbe mène à une étiquette manuscrite.
- [Squiggle Marks](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/hw-underline) (HyperFrames, Annotations): Une annotation de texte manuscrite où trois lignes sont marquées tour à tour par un soulignement ondulé, un double barré et un crochet courbe.
- [Multiplayer Cursor](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/multiplayer-cursors) (HyperFrames, Clics): Une animation de collaboration où deux à six curseurs colorés avec étiquettes de nom suivent des trajectoires définies et se rassemblent autour d'un anneau lumineux.
- [Parallax Device Dive](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/parallax-device-dive) (HyperFrames, Écrans et appareils): Une animation de maquette de téléphone : un appareil affichant un tableau de bord monte, marque une pause, puis zoome jusqu'à remplir l'image pendant que ses calques d'UI s'écartent.
- [Parallax Unzoom](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/parallax-unzoom) (HyperFrames, Titres): Une transition en recul où une carte plein écran rétrécit au centre d'une grille de trois sur trois pendant que huit voisines colorées se placent autour.
- [Parallax Zoom](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/parallax-zoom) (HyperFrames, Titres): Une transition zoom qui part d'une grille de trois sur trois cartes colorées et avance dans la carte centrale jusqu'à ce qu'elle remplisse l'image.
- [Settings Toggle](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/settings-toggle-flow) (HyperFrames, Interface): Une animation de panneau de réglages où trois lignes apparaissent sur une carte blanche et leurs interrupteurs glissent en position activée ou désactivée.
- [Store Badge](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/store-badge-lockup) (HyperFrames, Bandeaux et appels à l'action): Un carton final de téléchargement d'application : un grand titre apparaît d'abord, suivi de badges façon App Store et Google Play en dessous.
- [Neon Border](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/lt-neon-border) (HyperFrames, Bandeaux et appels à l'action): Un lower third transparent avec une carte de nom sombre dont le contour est parcouru par deux arcs néon opposés au léger halo.
- [Skeleton Reveal](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/skeleton-reveal) (HyperFrames, Interface): Une courte animation d'état de chargement où un squelette scintillant laisse place en fondu à une carte avec un nom en gras et une ligne de détail.
- [Staggered Fade Up](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/staggered-fade-up) (HyperFrames, Titres): Une révélation de texte simple, mot par mot : chaque mot apparaît en fondu, grandit légèrement et glisse sur une courte distance jusqu'à sa place.
- [Text Stagger](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/text-stagger) (HyperFrames, Titres): Un titre d'une ligne qui monte et grandit en décalé jusqu'à sa place, puis reçoit un seul passage de reflet coloré.
- [Intro Video](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/intro-video) (HyperFrames, Démos produit): Une intro de démo produit scénarisée qui s'ouvre sur du texte cinétique, tape un prompt dans un champ d'assistant, clique sur Envoyer et révèle une carte de projet.
- [ChatGPT Exchange](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/chatgpt-exchange) (HyperFrames, Saisie de chat IA): Une animation de chat verticale en mode sombre : une question est tapée, la réponse arrive avec un tableau de quatre lignes, et la vue défile pour la lire.
- [Claude Exchange](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/claude-exchange) (HyperFrames, Saisie de chat IA): Une animation de chat verticale sombre et chaleureuse : une question tapée mène à des étapes de réflexion et de recherche, puis à une longue réponse à empattements qui défile.
- [Gallery Tunnel](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/gallery-tunnel) (HyperFrames, Démos produit): Un tunnel en perspective dont les parois sont bordées de panneaux colorés vifs et de fines lignes de grille, avançant vers un point de fuite central.
- [Chat Thread 2](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/chat-thread-2) (HyperFrames, Réseaux et chat): Une conversation verticale dans un cadre de téléphone, avec réponses tapées, aperçu de lien, réactions emoji et accusés de lecture, qui se termine sur un carton final.
- [Minimal Line Graph](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/minimal-line-graph) (HyperFrames, Graphiques): Un graphique épuré à deux courbes sur fond transparent, avec une valeur sur chaque point, les mois en bas et une petite légende.
- [Spain Map](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/spain-map) (HyperFrames, Cartes): Une carte animée des régions d'Espagne colorées selon leur valeur, îles Baléares et Canaries comprises, avec titre, sous-titre et légende de couleurs.
- [India Map](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/india-map) (HyperFrames, Cartes): Une carte de l'Inde de 12 secondes qui colore chaque État et territoire selon sa valeur, avec noms, titre, sous-titre et légende Low à High.
- [France Map](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/france-map) (HyperFrames, Cartes): Une carte choroplèthe de la France métropolitaine où chaque région prend une teinte selon vos valeurs, avec noms de régions, titre, sous-titre et échelle de couleurs.
- [US Map](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/us-map) (HyperFrames, Cartes): Une carte des États-Unis qui révèle les régions une à une et colore chaque État selon sa valeur, avec l'Alaska, Hawaï, les noms des États et une légende.
- [US Flow Map](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/us-flow-map) (HyperFrames, Cartes): Une carte sombre des États-Unis où des arcs bleus courbes relient les grandes villes et de petits points les parcourent pour montrer les flux de ville à ville.
- [ChatGPT Chat](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/ai-chat-reveal) (HyperFrames, Saisie de chat IA): Une animation de chat avec un assistant en 9:16, avec une question saisie, une réponse progressive à puces et un carton final d'appel à l'action.
- [Animated Bar](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/animated-bar) (HyperFrames, Graphiques): Une carte de graphique monochrome compacte avec des barres qui grandissent, une courbe de tendance douce et un grand pourcentage en haut à droite.
- [Bar Chart Race](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/bar-chart-race) (HyperFrames, Graphiques): Un graphique à barres horizontales classées qui défile dans le temps, avec dépassements, première place en surbrillance, axe qui se réajuste et compteur de période.
- [Data Chart](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/data-chart) (HyperFrames, Graphiques): Un graphique combiné de style éditorial qui associe des barres de chiffre d'affaires mensuel à une courbe de taux de conversion, avec étiquettes, légende et source.
- [Camera Follow Captions](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/caption-camera-follow) (HyperFrames, Titres): Des sous-titres cinétiques où chaque nouveau mot rejoint un bloc de capitales grasses pendant que la caméra recule pour révéler toute la phrase.
- [Whiteboard Bulb](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/whiteboard-bulb) (HyperFrames, Annotations): Un croquis d'ampoule façon tableau blanc, dessiné trait par trait par un stylo en mouvement, avec une marque colorée et une légende en dessous.
- [Whiteboard Rocket](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/whiteboard-rocket) (HyperFrames, Annotations): Un croquis de fusée au stylo avec ailerons, traits de propulsion et hublot coloré, suivi d'une courte légende de lancement sur fond papier.
- [Chat Thread](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/chat-thread) (HyperFrames, Réseaux et chat): Un fil de SMS en 9:16 et en mode sombre, avec bulles entrantes et sortantes, points de saisie, aperçu de lien et accusés de lecture.
- [CTA Lockup](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/cta-lockup) (HyperFrames, Bandeaux et appels à l'action): Un écran d'appel à l'action final avec un grand titre, un bouton en forme de pilule et une petite ligne de texte d'accompagnement sur fond noir.
- [Notes Typing](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/notes-typing) (HyperFrames, Interface): Une animation de notes sur téléphone en 9:16 qui tape un titre et sept lignes avec un clavier à l'écran, puis se termine sur une checklist à votre marque.
- [Outline Draw](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/outline-draw) (HyperFrames, Annotations): Un fin contour aux angles arrondis qui se trace dans le sens horaire avec un centre transparent, pour encadrer et mettre en avant une partie de la vidéo.
- [Oversized Cursor](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/oversized-cursor) (HyperFrames, Clics): Un grand curseur fléché qui se déplace vers un bouton, clique dessus pour faire apparaître une coche, puis sort de l'image.
- [Social Proof Card](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/social-proof-card) (HyperFrames, Preuve sociale): Un carton final couleur crème avec nom de marque, rangée de cinq étoiles, citation client, trois icônes d'atouts et un bouton d'appel à l'action.
- [Stitched Text Draw](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/stitched-text-draw) (HyperFrames, Annotations): Un mot en capitales dessiné en points de fil pointillés, avec trous d'aiguille et aiguille en mouvement, sur fond noir.
- [Swipe Rail](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/swipe-rail) (HyperFrames, Transitions): Un rail horizontal de cartes numérotées qui glisse avec élan et cale une carte au centre, sur un fond bleu marine foncé.
- [Ask Subclip](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/ask-subclip) (HyperFrames, Saisie de chat IA): Une scène promo pour un éditeur vidéo IA : une demande se tape dans une zone de prompt sous un titre, suivie d'un résultat et d'une phrase de conclusion.
- [Build console](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/build-console) (HyperFrames, Interface): Une fenêtre de terminal sombre qui exécute une commande de rendu en plusieurs étapes, avec coches, barre de progression et badge de fin.
- [Spatial deck](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/spatial-deck) (HyperFrames, Démos produit): Une séquence de cartes numérotées bleu-vert qui défilent en perspective 3D par couches, chacune avec un titre d'étape et une courte description.

## Plus de Templates motion design HyperFrames gratuits en HTML et GSAP

- [HyperFrames: Titres](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/text-animations)
- [HyperFrames: Écrans et appareils](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/screen-device-animations)
- [HyperFrames: Graphiques](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/animated-charts)
- [HyperFrames: Saisie de chat IA](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/ai-chat-animations)
- [HyperFrames: Cartes](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/animated-maps)
- [HyperFrames: Réseaux et chat](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/social-media-animations)
- [HyperFrames: Bandeaux et appels à l'action](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/lower-thirds)
- [HyperFrames: Annotations](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/hand-drawn-annotations)
- [HyperFrames: Interface](https://www.subclip.app/fr/motion-graphics-templates/hyperframes/ui-animations)