Créations graphiques
Typographie cinétique et globe orbital
Un globe filaire en rotation, des orbites imbriquées et une typographie à empattements aux accents rouille forment une étude animée éditoriale et chaleureuse sur la portée internationale.
Usages de la typographie cinétique
- Systèmes éditoriaux animésCréez des compositions animées qui combinent libellés, géométrie et rythme.
- Concepts de campagne mondialeÉvoquez la portée internationale par des cartes symboliques et une information structurée.
- Graphismes de diffusion d'événementsCréez des identités pensées pour l'écran pour des lancements, des conférences et des moments en direct.
- Études de code créatifExplorez le mouvement HTML local à l'aide d'une composition géométrique adaptable.
Points forts de la composition orbitale
- Globe orbitalDes anneaux et des méridiens superposés créent un point focal planétaire en rotation.
- Repères éditoriauxDe petits libellés posent le contexte de l'événement, de la date, du signal et de la diffusion.
- Contraste typographiqueDes métadonnées à chasse fixe répondent à un grand énoncé en italique pour renforcer l'accent.
- Échelle adaptableLa composition carrée s'ajuste à la fenêtre d'affichage sans changer de structure.
La composition du globe
1 / 1Typographie cinétique et globe orbital
Cette typographie cinétique avec globe est un exemple graphique officiel d'OpenDesign construit autour d'un globe orbital et d'une typographie éditoriale. L'œuvre visible commence par « ANTHROPIC LABS — APR 17 · 2026 » et « HOW IT WORKS », puis avance vers « 27 · CHARLOTTE × VINE », « 19 · 2026 » et « 175 LANGUAGES HAPPENING ». Ces libellés donnent à la composition un ordre de lecture : le contexte d'abord, les détails de l'événement ensuite, et un grand énoncé visuel en dernier.
Le globe central utilise des tracés circulaires imbriqués, des lignes de latitude courbes, des méridiens verticaux et des formes grises irrégulières évoquant des terres, autour d'un petit point central orange. La géométrie se lit comme un monde symbolique plutôt que comme une carte géographique. Ce choix garde le design lisible en tant qu'œuvre animée, tout en offrant à la typographie un centre stable autour duquel orbiter.
Couche de contexte
Les libellés du haut établissent l'événement nommé, la date et le cadrage « HOW IT WORKS » avant que le regard n'atteigne le globe.
Couche de signal
La ligne du bas, « SIGNAL · LIVE », associée à « BROADCASTING / 0001 », donne à la composition un cadre de clôture orienté transmission.
Couche d'énoncé
« Reach every country. » est composé plus grand que les métadonnées environnantes, ce qui fait du message voulu le point d’aboutissement visuel.
Usages pour des signaux mondiaux
Ce design est utile lorsqu'une identité visuelle doit rendre l'échelle tangible sans recourir à un véritable tableau de bord. Un concept de campagne pourrait adapter le globe orbital pour une annonce internationale, tout en conservant les métadonnées du haut comme index de dates et de sujets. Le compromis est assumé : la géographie symbolique communique vite la portée, mais pas la couverture réelle ni les performances mesurées.
Pour un graphisme orienté diffusion, les libellés répétés fournissent un cadrage qui peut rester en place pendant que le globe bouge. « SIGNAL · LIVE » et « BROADCASTING / 0001 » suggèrent une séquence ou un état de transmission dans le design visible, mais ils relèvent du langage graphique et ne prouvent pas l'existence d'un service en direct connecté. La même structure pourrait prendre en charge une série de scènes numérotées si ce comportement était implémenté séparément.
Ordre de lecture et échelle
La composition place des métadonnées compactes en capitales près des bords et réserve la plus grande taille de caractères à l'énoncé de clôture, près du bas. Ce contraste permet de balayer d'abord un contexte d'apparence factuelle avant d'arriver au message. Il crée aussi un compromis : les petits libellés portent l'atmosphère et la séquence, mais exigent une taille d'affichage suffisante pour rester lisibles.
Langage du mouvement local
L'exemple livré est une œuvre éditoriale animée en HTML. Son CSS définit la zone principale à 100vw et la composition comme un carré dont la largeur est plafonnée à min(78vh, 78vw). En pratique, le carré ne dépasse aucune des dimensions de la fenêtre d'affichage tout en préservant la géométrie orbitale. La technique visuelle permet un rendu local ; elle n'établit aucune capacité vidéo, audio ou de données en direct.
Composition et mouvement
Le globe est construit avec plusieurs épaisseurs de trait et types d'anneaux : des cercles extérieurs en trait continu, des arcs intérieurs plus légers et une orbite en pointillés qui élargit le champ au-delà de la sphère principale. Les courbes répétées créent des indices de mouvement même sur une image fixe, car l'œil peut comparer leurs intersections et leurs espacements. Le coût est la densité : ajouter d'autres anneaux ou libellés concurrencerait le globe central et réduirait l'importance du point central orange.
La palette reste proche du blanc cassé chaud, du charbon, du gris et d'un unique accent orange rouille. Ces couleurs sobres font de l'italique « country. » et du point central des marques d'accentuation liées. La typographie apporte la hiérarchie que la couleur n'offre pas : les libellés en capitales très espacées paraissent techniques, tandis que le grand énoncé en italique à empattements apporte une chaleur éditoriale.
| Couche | Durée | Rôle dans la composition |
|---|---|---|
| Trois anneaux orbitaux en trait continu | 60, 90 et 36 secondes par rotation | Le deuxième anneau inverse son sens. Les cercles en trait continu étant symétriques par rotation, leur seule rotation ne crée pas de repère mobile évident. |
| Anneau orbital en pointillés | 180 secondes par rotation | Les tirets répétés rendent visibles les changements d'orientation au fil d'un cycle lent. |
| Globe filaire | 38 secondes par rotation inversée | Les méridiens et les six formes irrégulières évoquant des terres tournent ensemble à l'intérieur du globe circulaire. |
| Point central orange rouille | Pulsation répétée de 2,6 secondes | Un changement d'échelle et une ombre qui s'étend soulignent le centre commun. |
| Titre de clôture | Entrée de 1,4 seconde | L'opacité et l'espacement des lettres se stabilisent dans le grand énoncé de clôture ; cette entrée ne se répète pas. |
Limites des capacités
Cet artefact est un exemple animé en HTML, uniquement de design, avec un seul fichier HTML fourni et aucun fichier média local. La capture vérifie les libellés visibles, la géométrie, la couleur, la typographie et la composition ; elle ne vérifie ni la diffusion en direct, ni la couverture linguistique, ni les connexions de données, ni l'audio, ni l'export vidéo, ni le prompt de création d'origine. Les noms, dates, chiffres et affirmations présents dans l'œuvre doivent donc être considérés comme du matériau illustratif, sauf vérification indépendante.
Une recréation peut conserver la logique visuelle tout en changeant les libellés et les données pour répondre à un brief réel. Toute implémentation future doit définir son propre comportement d'animation, sa source de contenu, son traitement de l'accessibilité et ses exigences de sortie, au lieu de supposer que cet exemple les fournit.
Comment créer une typographie cinétique avec globe dans OpenDesign
Définir la composition orbitale
Commencez par un canevas éditorial carré qui s'adapte à la fenêtre d'affichage. Placez au centre un globe fait d'anneaux imbriqués, de lignes de latitude courbes, de méridiens verticaux et d'un petit point central orange rouille. Gardez le champ orbital plus grand que le globe pour que le mouvement ait l'espace nécessaire pour se lire.
Ajouter les données éditoriales
Utilisez l'ordre de lecture de l'artefact comme modèle de contenu : libellé de contexte en haut, repères d'événement et de date, mention de langues à droite, puis grand message de clôture et ligne de signal en bas. Considérez des valeurs comme « 175 LANGUAGES HAPPENING » comme du texte illustratif, sauf si votre brief fournit des données vérifiées.
Invite suggéréeCrée une typographie cinétique avec globe sous forme d'œuvre animée en HTML local : utilise un fond blanc cassé chaud pointillé, un globe orbital carré et centré avec des cercles imbriqués, des lignes de latitude courbes, des méridiens verticaux, des formes grises évoquant des terres et un seul point central orange rouille. Ajoute exactement les rôles de mise en page visibles : métadonnées d'événement en haut, libellé de langue à droite, énoncé « Reach every country. » en bas, et plus bas « SIGNAL · LIVE » avec un index de diffusion. Reste dans le design uniquement, sans supposer de services en direct, d'audio, de vidéo, de données externes ni de comportement backend.
Affiner le mouvement et les limites
Animez la géométrie orbitale en local pour que le mouvement des lignes soutienne la typographie au lieu de la masquer. Vérifiez la règle de mise à l'échelle carrée sur des fenêtres étroites et larges, préservez l'espace vide autour du globe et assurez-vous que les petits libellés en capitales restent lisibles. Séparez clairement toute interaction ou tout comportement de données proposé de l'œuvre visible.
Exporter et obtenir un lien de partage
Exportez votre design finalisé, puis utilisez Partager dans OpenDesign pour obtenir un lien de partage. Ouvrez le lien dans une fenêtre de navigateur distincte et vérifiez que la version souhaitée ainsi que ses ressources sont disponibles avant de l'envoyer.
Conception d’affiche éditoriale sur les workflows IA
Cette affiche éditoriale sur les workflows IA présente six affirmations, organisées en chapitres numérotés, avec des exemples concrets de prompts et des accents typographiques rouille sur un fond crème.
Créations graphiques
Conception d’un carrousel social sur les workflows IA
Sept cartes verticales utilisent des titres chinois surdimensionnés, des habitudes numérotées, des aplats de couleur changeants et une conclusion pour expliquer les workflows d’édition avec l’IA.
Créations graphiques
Conception de shader Aurora Field
Un champ de bruit bleu-vert animé automatiquement donne son atmosphère à un hero WebGL, tandis qu’un titre fixe et un petit indicateur local de fréquence d’images ancrent la scène.
Créations graphiques
Conception du shader Aurora Veil
Aurora Veil est une composition shader interactive qui transforme des lumières superposées, des étoiles et les mouvements du curseur en un hero WebGL atmosphérique.
Créations graphiques