Animation d’interface
Une nouvelle ère du no-code
Une sphère guide dans des pages, formulaires et processus superposés. Les interfaces sont des plans combinables espacés en profondeur, pas de simples captures.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Bienvenue dans l’ère du no-code
Une traversée de l’obscurité à la lumière ouvre les interfaces et le code serrés sur un univers créatif explorable.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Comet｜Fenêtre de nébuleuse
La navigation reste ancrée en haut ; seul le masque central s’agrandit. L’image intérieure et les dimensions du conteneur sont traitées séparément.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation de texte
Framer sur un prisme de verre
Le titre reste sur l’axe central et apparaît mot par mot. Une étroite bande de verre s’allonge de gauche à droite ; le point le plus lumineux traverse le titre un peu plus tard.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation de texte
Nouvelle identité visuelle｜Révélation du logotype
Extraire un C d’une surface irisée agrandie, ramener le volume à une lettre, puis déployer le nom sur la même ligne de base.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Connexion de Google Drive au Figma agent
La lecture des retours externes entraîne des modifications du design, puis un document en explique les raisons ; la boucle de lecture et d’écriture est ainsi complète.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Figma Agent Vectors
Les éléments nouvellement générés restent sélectionnables, leurs couleurs modifiables et leurs animations organisables ; trois phases démontrent cette capacité d’édition.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Linear — état de la file de fusion dans les diffs
Le clip ne montre qu’un survol local : l’état principal reste inchangé, le survol ajoute le temps déjà passé à attendre et le masque à la sortie.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Lovable｜Connecteurs Google
Plusieurs icônes d’outils se regroupent d’abord, puis deviennent une à une des étiquettes de connecteurs dans le champ de saisie
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Notion External Agents (intégration Claude + Cursor)…
La même carte de tâche reste présente ; son état suit Triage→Plan→Build→PR→Ship.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Adaptation à l’iPhone Duo
Le dépliage augmente la surface visible du texte ; la barre latérale et le contenu suivent une relation de découpage parent-enfant.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Notion as code — des espaces de travail en TypeScript
Rédiger d’abord le besoin, puis montrer l’exécution et le code ; après confirmation du déploiement, passer au résultat réel dans l’espace de travail.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
ChatGPT｜Apple Messages
Après avoir trouvé les tâches, montrer une suggestion, puis sa modification et sa confirmation par l’utilisateur ; afficher enfin la réception dans la conversation cible.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Cloud Computer : déployer et utiliser un ordinateur cloud
Expliquer d’abord l’environnement d’exécution persistant, puis le prouver par trois exemples : bot, collecte et déploiement
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation de texte
Lancement de Claude Haiku 5.5
Les trois colonnes restent fixes, tandis que textures internes et orientations en L changent par étapes ; changer de contenu ne signifie pas déplacer tout le bloc.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation de texte
Fable 5｜Retour du personnage pixelisé
Le nom du produit apparaît lettre par lettre seulement après l’arrivée du personnage à l’enseigne ; mouvement et lettres sont liés causalement.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Mise à jour de fonctionnalité｜Mode vocal
Le même cercle central s’étend du bouton à la fenêtre d’image, puis redevient bouton ; son identité spatiale reste continue.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Android Drop — Find Hub, Motion Assist, Gemini
Chaque fonction comprend une carte principale et un petit retour qui lui est rattaché.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation graphique
Aperçu de 5 secondes du même projet · 5.0 secondes
Les groupes de points se recomposent successivement en personnes, lieux et objets ; les couleurs suivent les catégories.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation graphique
Grok Bot × Linear
Les deux marques restent alignées ; le fond s’écoule continuellement sans rivaliser avec le texte.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Grok Bot peut maintenant rechercher, lire et surveiller X.
Montrer d’abord plusieurs sources consultées, puis les condenser en synthèse thématique.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Grok Bot · Formulaires et connexion dans la conversation
L’agent ne passe la main à l’utilisateur qu’en cas d’authentification ; la procédure reprend après sa saisie.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation de texte
Grok — 21 nouvelles voix
Le titre garde sa position et sa taille ; le mouvement vient surtout de l’écoulement continu du fond.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Reception · Accueil téléphonique multisectoriel
Les appels de plusieurs secteurs établissent d’abord le même problème ; une sphère lumineuse unique représente la solution au milieu
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
ElevenLabs｜Scribe v2
Présenter d’abord les dimensions de mesure, puis expliquer la capacité par des modifications concrètes du texte
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Composer · Édition de chansons par sections
Passer d’une demande ouverte à des sections, un tempo et une tonalité contrôlables, puis aboutir à la forme d’onde et à l’œuvre
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Polymarket · Choix de direction sur cinq minutes
Poser d’abord la question de décision, puis ramener le terminal complexe à une opération à deux choix
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Cursor Multitask / Subagents — /multitask dans le nouveau…
Plusieurs tâches sont ajoutées à la même session ; le panneau de travail affiche constamment le nombre d’exécutions parallèles
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Annotate ajouté au mode design
Les annotations restent attachées à leur cible ; numéros et commentaires correspondent un à un
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Cursor — désormais sur iPad
Montrer d’abord le même résultat sur plusieurs appareils, puis se concentrer sur l’organisation et la revue sur tablette
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Cursor — créer une application web et la déployer sur Vercel
Montrer les dépôts disponibles, puis insister sur la création depuis zéro ; l’aperçu ne vient qu’après la saisie
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Computer peut générer des graphiques interactifs
Le résultat comprend des graphiques interactifs. Au survol, les infobulles de données réagissent ; il ne suffit pas de redimensionner le graphique entier.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Perplexity — Computer portable sur NVIDIA DGX Spark
Les outils locaux entourent l’appareil en anneau ; les modèles cloud occupent un niveau distinct. Les liens indiquent un recours au cloud à la demande, pas un transfert externe des données par défaut.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation 3D
Migrer vers Framer avec MCP
La fenêtre avant reste en haut à droite, celle de derrière en bas à gauche. Elles gardent la même perspective. La fenêtre arrière se replie d’abord en un point, puis se déploie sur un axe diagonal.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Framer Skills
Au début, saisir successivement dans le champ les règles de police et de guillemets. Montrer ensuite les pages achevées pour faire comprendre que ces règles concernent l’ensemble des pages.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Framer Agent Templates
Trois modèles sont alignés ; la carte centrale apparaît entièrement, les deux autres partiellement et assombries. Au changement, toute la piste coulisse horizontalement ; la carte centrale ne retrouve sa luminosité qu’une fois en place.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Portefeuille Link pour les agents
Installer et connecter d’abord l’agent, demander ensuite une modification d’itinéraire dans le chat, montrer le coût, puis confirmer sur téléphone. Coût et nom du marchand se répètent entre interfaces pour identifier la même demande.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation de texte
Directory : données de recrutement gratuites
Les avatars apparaissent successivement autour du titre central, de tailles proches et munis de courts rôles. Garder deux lignes de titre, celle de la marque en orange.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Transformer un croquis en cartoon dans Grok
La première requête transforme une esquisse en fiche de personnages ; la suivante anime ce résultat. Le chat défile vers le haut, les nouveaux résultats entrent par le bas et restent reliés au message précédent.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation 3D
Saisie vocale gratuite
Des touches de logo et de texte tombent en ligne, puis s’écartent pour révéler une capsule noire lumineuse à onde sonore. Elle devient le point d’ancrage commun des démonstrations suivantes.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Adaptation à l’iPhone Duo
Un téléphone vertical entre au centre, pivote et s’ouvre en deux colonnes horizontales. La liste reste d’un côté, le détail de l’autre. La même note traverse les deux formats.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Nouvelles capacités de Runway Agent
Montrer d’abord la page produit finale, puis revenir à la requête, extraire couleurs et produit, générer scènes et formats, finir par l’animation. La même enceinte se retrouve dans plusieurs livrables.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Mots d’état et HyperFrames
Des états à chasse fixe peu lumineux changent vite, puis un double triangle sombre apparaît. Le vert remplit le logo de bas en haut, avant le déploiement du mot-symbole blanc.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Mise à jour des capacités｜450+ intégrations
Des capsules orange relient connect, with et d’autres mots jusqu’à un plus cliquable. Au clic, des icônes affluent sur plusieurs arcs et le compteur atteint 450.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Montage en prises de vues réelles
Glass.
Le verre reste fixe, main et récipient passent derrière. La fine grille fragmente les contours en segments décalés. Le plan large montre le cadre, le gros plan relie texture et déformation.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation de texte
TIDAL｜Visuel typographique principal, version 60 secondes
Le texte est le protagoniste : mots courts agrandis, comprimés dans le cadre et enchaînés selon l’accent sémantique. Les losanges poussent chaque passage vers la palette suivante.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Disposition des boutons d’interface · 10.7 secondes
Démonter puis réassembler trois boutons à encoches comme des modules. Commencer par celui du bas et garder la proximité verticale.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Creative Cloud｜Variante en tranches magenta
Des coupes rapides montrent le logo en tranches 3D, édition plane et matière argent-blanc ; le magenta relie les versions.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
EliseAI｜Interface produit du site officiel
Un dialogue de rendez-vous complet montre l’utilité : demande temporelle, deux choix proposés, un choix confirmé.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation graphique
Nous déployons EURR, notre premier stablecoin adossé à l’euro, dans l’application Revolut.
Deux pièces échangent leur position avant-arrière sur le même plateau ; texte fixe, mouvement concentré entre elles.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Présentation de Wabi 2.0 : un nouveau type de messagerie qui crée des applications et accomplit des tâches…
Les informations du chat deviennent de petites apps utilisables, puis composent une page personnelle.
Référence vidéo uniquement ; aucun projet modifiable fourni.
Animation d’interface
Créer des présentations avec l’IA
Du thème au plan modifiable, puis aux diapositives complètes ; deux générations avec résultats distincts.
Référence vidéo uniquement ; aucun projet modifiable fourni.