atlassian/motion-design-skill

Conception de graphismes animés pour produit

Créez une histoire continue, pas un diaporama de cartes attrayantes sans lien. Préservez l'objet d'attention du spectateur à travers intention → action → résultat → valeur produit → marque.

Choisissez un point de départ

Lisez le README de l'exemple pertinent, puis son code source. Résolvez les chemins relatifs à cette compétence ; ne partez jamais du principe que des fichiers d'une session précédente existent.

Tâche	Commencez ici
Roue de style iOS, chiffres déroulants, segments, règle	examples/controls/README.md
Typographie cinétique, entrée d'interface déformée, présentation pilotée par le curseur	examples/relay/README.md
Grand compositeur, caméra liée à la frappe, Envoyer → résultat généré	examples/composer/README.md
Rotation courte d'un appareil en 3D réelle 9:16	examples/device-studio/README.md
Lancement mobile complet de 22 secondes	examples/milo-launch/README.md
Composition MIDI, instruments échantillonnés, mixage	examples/midi-score/README.md

Lisez references/direction.md pour la mise en scène et le timing, references/deterministic-rendering.md avant l'export vidéo, et references/asset-rights.md avant de publier ou redistribuer des actifs. Les liens d'inspiration officiels de tiers se trouvent dans references/gemini.md ; ces vidéos sont des références, pas des actifs open source inclus.

Cadrez le plan

1. Réutilisez le produit, le public, le rapport hauteur/largeur, la durée et le ton déjà fournis. Ne demandez que les informations manquantes qui modifient le travail. Pour un produit fictif, choisissez un concept cohérent plutôt que de poser des questions sur chaque détail.
2. Inspectez le matériel réel du produit/de la marque avant de faire des affirmations sur le produit. N'inventez jamais de capacités, de mesures, de témoignages ou de captures d'écran de production.
3. Pour une nouvelle direction visuelle, commencez par un plan HTML terminé de 2 à 3 secondes, sauf si un film complet a été explicitement demandé. Préservez la chorégraphie approuvée lors de son extension.
4. Utilisez du HTML/CSS/JavaScript autonome pour les prototypes par défaut. Une demande HTML n'est pas une autorisation pour effectuer un rendu vidéo coûteux, un téléchargement ou une publication dans le cloud. Ne changez de pile que si nécessaire ou demandé.
5. Énoncez brièvement la séquence des actions et les transitions de caméra avant de coder. Gardez l'objet focal de chaque plan clair.

Dirigez le mouvement, ne décorez pas

• Mesurez les mots après le chargement réel des polices. Refaites la mise en page des mots précédents lorsqu'un nouveau arrive, en maintenant le centre de la composition.
• Séparez les courbes de position, d'opacité et de flou. Rendez le mouvement visible tôt et le flou net avant le dépassement final. Animez la sortie délibérément au lieu d'un fondu par défaut.
• Utilisez un dépassement court et lisible, puis stabilisez ; ne faites pas osciller chaque objet. Le fichier examples/relay/scripts/motion-core.mjs contient des ressorts de texte/caméra testés, des fonctions de déformation de Bézier et cylindrique.
• Déformez un panneau avec plusieurs bandes horizontales lorsque la courbure est importante ; une simple rotation plate n'est pas une surface courbée. Entraînez le mouvement diagonal sur les deux axes à partir d'une seule valeur de progression.
• Zoomez sur une action réelle plutôt que d'afficher un tableau de bord illisible. Déplacez le curseur et l'interface utilisateur dans le même système de coordonnées transformé, y compris la compensation des zones réactives.
• Montrez le survol → l'appui → le relâchement → le changement d'état réel. Un glissement nécessite un ramassage, un déplacement, un dépôt et une mise à jour de l'état associé. Laissez le résultat suivre l'action qui l'a provoqué.
• Gardez le temps du shader sur l'horloge de la scène. Indiquez quand WebGL échoue ; n'appelez jamais un dégradé statique un shader en cours d'exécution.

Contrôles interactifs versus mouvement enregistré

Utilisez les contrôles fournis plutôt que de reconstruire leur physique pour chaque vidéo.

• setValue(value) est interactif : intégrez un ressort à partir de la position et de la vitesse d'affichage actuelles. Permettez à l'entrée de l'interrompre.
• renderAt(value) est déterministe : définissez immédiatement une valeur de composant fractionnaire. Dans une vidéo, dérivez cette valeur de l'image/fps ; n'exécutez pas un ressort en direct ou une boucle d'horloge pendant la capture.
• Pour une roue, affichez une fenêtre de sélection centrale fixe et deux options courbées de chaque côté au milieu de la liste. Calculez la position, l'inclinaison, l'échelle et l'opacité à partir de la distance fractionnaire par rapport au centre.
• Suivez le glissement 1:1 avec la capture du pointeur. Lors du relâchement, projetez l'élan, accrochez-vous à un élément valide et transportez la vitesse dans la stabilisation. Appliquez une résistance progressive aux limites.
• Prenez en charge la molette/le pavé tactile, le clavier, le focus, les noms/valeurs courantes accessibles, les fenêtres étroites et le mouvement réduit. Ne jouez pas de sons ni de vibrations sans une exigence délibérée.
• Arrêtez une chronologie de démonstration externe lors d'une manipulation directe ; deux horloges ne doivent pas se battre pour le même composant.

Compositeur et caméra

Affichez les deux extrémités arrondies lorsque le champ est vide. Développez un champ fini lors de la frappe. Mesurez le texte et la position d'Envoi ; suivez le texte qui s'allonge depuis le début avec accélération et freinage, et arrêtez-vous sur Envoyer. Protégez une zone de texte séparée afin que les lettres ne passent jamais sous le bouton. Après Envoyer, révélez un résultat mis en scène indépendamment et une action significative à l'intérieur ; ne transformez pas l'entrée en sortie. Utilisez l'exemple générique Canvas Lab pour la chorégraphie, pas comme une affirmation sur le comportement ou la latence d'un modèle réel.

Plans d'appareil en 3D réelle

Utilisez un vrai GLB et le maillage d'affichage d'origine, pas un cadre PNG ou un écran DOM flottant. Gardez l'écran et le corps sur un seul rig. Utilisez des réflexions de boîte à lumière en studio, des matériaux métal/verre/optique séparés, une caméra à longue focale, une rotation avec assouplissement et une tenue lisible face à l'écran. Animez les actions de l'application dans la texture de l'écran afin que les indicateurs tactiles respectent la perspective. Capturez la typographie DOM et WebGL ensemble pour la vidéo.

Le GLB de l'iPhone de référence n'est pas inclus et n'est pas sous licence MIT. Exigez la copie sous licence séparée de l'utilisateur ou une alternative explicitement sous licence. Vérifiez les noms des maillages, les normales d'affichage, les UV, l'échelle et le cadrage avant d'utiliser un modèle différent. N'appelez jamais l'exemple Apple CAD officiel, un rendu Apple officiel, ou du lancer de rayons.

Son, uniquement sur demande

Lisez references/music.md. Préférez une partition MIDI originale multipiste → SoundFont sous licence obtenue séparément → pistes rendues → mixage lorsque du MIDI/des instruments sont demandés ; ne rendez pas une API neuronale payante obligatoire. Liez les accents sonores épars aux repères visuels réels. Gardez la musique, les effets sonores et la parole modifiables indépendamment. Ne prétendez pas qu'une partition est bonne ou approuvée sans écoute/révision de l'utilisateur. Les mesures et une feuille de repères ne sont pas une piste finie et auditionnée.

Pour le HTML en direct, verrouillez l'audio derrière un geste et gardez l'horloge visuelle indépendante d'une promesse resume() audio ou d'une horloge audio bloquée. Les échecs audio ne doivent pas bloquer l'animation. Pour la vidéo hors ligne, alignez les échantillons sur la chronologie plutôt que d'enregistrer un flux audio de navigateur en direct comme seule source principale.

Vérifiez et livrez

1. Exécutez les tests mathématiques/fonctionnels pertinents. Vérifiez la recherche directe, inverse, arbitraire et répétée ; les hits du curseur ; la causalité d'état ; l'interruption clavier/glissement ; la disposition à 390px ; et les erreurs JS.
2. Respectez la portée de l'utilisateur pour la révision visuelle. Ne prétendez pas que le rendu ou les vérifications de métadonnées sont une inspection visuelle. Si une QA visuelle est demandée, inspectez réellement les images représentatives d'entrée/intermédiaire/interaction/sortie et corrigez les chevauchements, les coupures, le texte illisible et les calques incorrects.
3. Pour le MP4, effectuez réellement le rendu et vérifiez la durée, les dimensions, les fps, le nombre d'images, le décodage et la présence audio. Ne livrez pas d'instructions en les appelant une vidéo exportée.
4. Livrez le HTML ou MP4 demandé ainsi que la source reproductible, la configuration exacte, les notes sur les droits des actifs et les limitations honnêtes. N'ajoutez pas de musique en silence.
5. Gardez les informations d'identification privées, les URL de session, les actifs du système d'exploitation, les modèles commerciaux téléchargés et les bundles générés avec des actifs restreints intégrés en dehors d'un dépôt public. La licence MIT racine couvre le code/la documentation d'origine, pas chaque dépendance ou actif externe.