Cinematic Motion UI

Une page générée par un modèle ressemble généralement à la moyenne de toutes les pages qu’il a vues : un badge centré, un titre Inter en gras, une lueur violette à rose, deux boutons, trois cartes avec icônes, le tout apparaissant en fondu à la même vitesse. Rien n’est mauvais et rien n’a été décidé. Les gens reconnaissent cette moyenne instantanément, et cette reconnaissance est ce que signifie « ça a l’air fait par IA ».

Les pages de qualité galerie (celles vendues comme prompts premium sur motionsites.ai) se distinguent par quatre aspects, et cette compétence est construite autour d’eux :

Une idée visuelle forte porte la page. Une image ou vidéo cinématographique, un mot géant, un personnage, un champ génératif. L’interface la sert au lieu d’entrer en compétition avec elle.
Une typographie avec contraste et soin. Une décision typographique qui appartient à cette marque (un mot-symbole géant, un grotesque condensé à grande échelle, une police sérif à fort contraste seule, du mono comme voix), un crénage négatif qui évolue avec la taille, une hauteur de ligne inférieure à 1,15 sur les polices d’affichage, et parfois un crénage lettre par lettre.
Un mouvement chorégraphié. Chaque élément reçoit son propre type d’entrée et son propre délai, avec une seule famille d’easing, de sorte que la page s’assemble plutôt que d’apparaître en fondu. La page reste complète et lisible même si aucune animation ne s’exécute.
Des valeurs spécifiques partout. Code hexadécimal exact, pixel exact, easing exact, texte exact. Le vague est la façon dont les valeurs par défaut (et l’aspect IA) s’infiltrent. Les prompts MotionSites font 15 à 40 Ko de valeurs exactes pour un seul écran. Cette précision est le produit.

Le déroulement

Suivez ces étapes dans l’ordre. Les étapes 1–2 sont de la réflexion sur papier et prennent quelques minutes ; les sauter est la raison la plus courante pour laquelle le résultat glisse vers la moyenne.

1. Fiche de direction

Lisez le projet (marque existante, polices, couleurs, texte, assets) et le brief de l’utilisateur. Ensuite, rédigez une courte fiche de direction dans votre réponse ou dans un fichier brouillon, en utilisant references/spec-template.md § Direction card :

Sujet & public : à qui s’adresse la page, en une phrase, avec les noms concrets de l’utilisateur.
Archétype : choisissez un des sept dans references/archetypes.md. Lisez ce fichier maintenant ; il donne la composition, la typographie, la palette, les matériaux et le mouvement signature de chaque archétype. Si l’utilisateur cite une référence (un site, un modèle MotionSites), associez-la à l’archétype le plus proche.
Trois mots d’ambiance qui ne sont pas « moderne, propre, élégant » (ceux-ci décrivent toutes les pages).
Palette : arrière-plan, encre, encre atténuée, au plus un accent. Donnez les valeurs hexadécimales.
Paire typographique : issue de references/typography.md. Notez le rôle de chaque police.
Mouvements que je n’utilise pas : nommez au moins deux des valeurs par défaut « de bon goût IA » de references/anti-ai-tells.md § Second-order tells que cette page évitera, et ce qui les remplace. Les prompts de galerie ont été copiés si largement que leur propre recette est désormais un indice.
Moment signature : la chose qu’une personne décrirait à un ami (« les lettres du titre s’élèvent tandis que de fins anneaux se dessinent autour de son visage »). Si vous ne pouvez pas le nommer, la page sera oubliable.
Plan média : ce qui remplit la section héroïque et d’où cela provient (étape 3).

2. Spécification avant le code

Remplissez le reste de references/spec-template.md : tokens, pile de calques, ordre du balisage, chaque composant avec ses états, le tableau des mouvements (élément → type d’entrée → délai → durée), et le tableau des points de rupture. Restez concis. C’est un document de travail, pas de la prose. Cette étape rend le résultat précis : une fois les valeurs écrites, vous implémentez des décisions au lieu d’atteindre les valeurs par défaut.

Si l’utilisateur a demandé un prompt ou une spécification (à coller dans un autre constructeur) plutôt que du code, la spécification remplie est le livrable. Suivez la structure de references/spec-template.md § Prompt form.

3. Média

L’image ou la vidéo de la section héroïque fait la majeure partie du travail émotionnel. Lisez references/media.md, puis choisissez dans cet ordre :

Les assets fournis par l’utilisateur ou existant dans le projet.
Un fond génératif issu de assets/backgrounds/ (vague de particules canvas, champ de shader WebGL, anneaux SVG dessinés), adapté à la palette. Ce sont de vrais mouvements, pas des espaces réservés.
Un emplacement média conçu : un fallback stylisé (champ de dégradé ou couche générative) plus un prompt de génération prêt à l’emploi pour l’image ou la vidéo, dans un commentaire et dans votre rapport, afin que l’utilisateur puisse y déposer le fichier.

Ne faites jamais de lien vers des images de stock aléatoires (picsum, source.unsplash.com, services de placeholders) et ne laissez jamais de boîtes grises. Les deux sont le moyen le plus rapide de paraître inachevé.

4. Construction

HTML fichier unique (par défaut quand il n’y a pas de projet) : partez de assets/starter.src.html. C’est une base (pile de calques, kit de mouvement, sécurités, gestion de mouvement réduit, menu mobile, grain), pas un style. Restylez et recomposez-le pour l’archétype choisi. Conservez les placeholders /*@@MOTION_KIT_CSS@@*/, /*@@MOTION_KIT_JS@@*/ et /*@@BG:nom@@*/ dans votre source et produisez le fichier final avec python3 <skill>/scripts/inline_kit.py page.src.html index.html, qui intègre le kit et les fonds exactement au lieu de les retaper. (assets/starter.html est le même starter déjà intégré, pour lecture). Les pages examples/ montrent le niveau de qualité. Lors de tests à l’aveugle, elles ont obtenu des scores moins « aspect IA » que les modèles de galerie dont elles ont appris : cinematic-bay-hero.html (A : lames de bois ouvrant sur une baie brumeuse), dark-code-review-hero.html (B : le diff du produit est l’image, pas le trope du mot d’accent), light-window-hero.html (hybride A/C léger : soleil matinal dérivant sur un mur en temps réel). Parcourez celui qui est le plus proche de votre brief pour le niveau de détail et la façon dont un concept lie image, typographie et mouvement. Ne copiez pas sa composition, son style ou sa palette : chaque brief mérite sa propre idée.
React / Next / Tailwind / Framer Motion : lisez references/react-port.md. Gardez les animations d’entrée dans des keyframes CSS pour que le HTML rendu côté serveur soit visible sans hydratation, et utilisez Framer Motion pour le mouvement lié au défilement et interactif.
Détails du mouvement : references/motion.md. Surfaces : references/materials.md. Responsive : references/responsive.md.
SVG en ligne pour chaque icône et le logo, dessiné pour cette marque. Les polices d’icônes et les ensembles d’icônes de stock dans les rangées de fonctionnalités sont un fort signal de modèle.

5. Texte

Le texte est la moitié de la raison pour laquelle les pages semblent générées par IA. Règles :

Utilisez les noms et verbes concrets du sujet (« Entraînez des agents sur vos propres runbooks », « Des resorts dessinés à partir de la ligne de marée ») au lieu d’abstractions de catégorie (« Libérez la puissance de l’IA »).
Les titres font 4 à 9 mots, répartis sur deux lignes intentionnellement ; le saut de ligne fait partie du design.
Pas de preuve inventée. Les logos clients, témoignages, notes et statistiques commerciales doivent venir de l’utilisateur. Si la composition nécessite une rangée de statistiques et que vous n’avez pas de chiffres réels, utilisez soit des faits non revendicatifs (lieu, année de fondation, nombre de services proposés, heures d’ouverture), soit marquez-les clairement comme des placeholders dans les commentaires du code et dans votre rapport.
Écrivez dans la langue de l’utilisateur lorsque la page est destinée à son marché. Une copie en vietnamien nécessite une police avec une couverture complète des glyphes vietnamiens (consultez references/typography.md).
Évitez les phrases listées dans references/anti-ai-tells.md § Copy. scripts/audit.py les signale.

6. Vérifiez. Regardez-la, puis corrigez-la.

Réussir les vérifications n’équivaut pas à avoir une belle apparence, mais les échouer garantit qu’elle ne l’a pas.

Exécutez l’audit statique : python3 <skill>/scripts/audit.py <fichier-ou-dossier>. Corrigez chaque niveau HIGH ; corrigez ou acceptez consciemment chaque niveau MEDIUM.
Ouvrez la page dans un vrai navigateur (volet navigateur intégré, Playwright ou Chrome, selon ce qui est disponible). Attendez environ 3 s pour que l’entrée se termine, puis exécutez l’extrait de scripts/runtime_check.js via l’évaluation JS du navigateur. Il signale le texte qui reste caché, le débordement horizontal, le texte coupé par un verrouillage sur un écran, les médias cassés, les polices qui ne se sont pas chargées, les petites cibles tactiles et les éléments qui exécutent encore des animations. Lisez aussi la console pour les erreurs. Un onglet de navigateur caché ou en arrière-plan ne rend aucune image, donc les timelines CSS/WAAPI et les boucles requestAnimationFrame stagnent et la page peut sembler vide ou à moitié construite dans les captures d’écran. Avant de juger, prenez une ou deux captures d’écran (chacune rend des images), ou exécutez document.getAnimations().forEach(a => { try { a.finish() } catch (e) {} }), puis vérifiez à nouveau. Supprimez également chaque <script> d’une copie de la page et chargez-la une fois : tout le texte doit toujours être visible et la mise en page intacte.
Capture d’écran à 1440×900, 1280×720 (petit ordinateur portable : l’endroit le plus courant où les héros cassent) et 375×812. Si la page a un menu mobile, ouvrez-le et capturez-le aussi.
Regardez chaque capture d’écran et posez les questions de references/anti-ai-tells.md § The squint test. Corrigez ce qui échoue. Faites au moins un cycle de correction et de vérification, même si la première passe semble correcte.
Si vous ne pouvez pas ouvrir de navigateur du tout, dites-le dans le rapport. Ne prétendez pas avoir effectué une vérification visuelle que vous n’avez pas faite.

7. Rapport

Informez brièvement l’utilisateur : la direction (archétype, moment signature, paire de polices), ce qui est un placeholder (média, statistiques, liens) et exactement comment le remplacer, et ce que vous avez vérifié à quelles tailles.

Lois qui s’appliquent à tous les archétypes

Composition

La section héroïque fait un viewport sur desktop (100dvh, pas de défilement à l’intérieur) sauf si le brief est une longue page d’atterrissage. Le contenu s’ancre en bas ou dans les coins, pas au centre mort. La partie supérieure appartient au média.
Pile de calques, d’arrière en avant : couleur de fond → média → voile → contenu de la page → grain. Le voile est adapté au média (un assombrissement radial derrière le texte, un dégradé supérieur derrière la navigation), de sorte que le texte reste lisible sans être enfermé dans une carte.
Au plus deux appels à l’action dans la section héroïque : un solide, un fantôme ou en verre. Jamais trois.
Le « badge pilule au-dessus du titre » et les « trois statistiques en bas » sont désormais du mobilier de modèle. Utilisez-les uniquement lorsque le contenu est réellement une courte étiquette ou trois vrais chiffres, et même dans ce cas, changez la forme (un seul fait, un petit tableau, un texte de coin, une chronologie).
Utilisez un système de rayon par archétype (0–7 px net pour la tech et l’éditorial, des pilules pour le soft et le grand public) et tenez-vous-y. Un rounded-2xl uniforme sur tout est une signature de modèle.

Typographie

Tailles d’affichage : crénage de −0,03em à −0,05em, hauteur de ligne de 0,9 à 1,12. Petites capitales et micro-texte mono : crénage de +0,04em à +0,12em, majuscules, 11–14 px.
Au plus un dispositif d’emphase par titre, choisi dans le brief. Le mot en italique sérif dans un titre sans sérif (« Entraînez des agents IA sur… ») est le tic « IA de bon goût » le plus reconnaissable de 2025–2026 : les évaluateurs à l’aveugle le signalent à vue. Ne l’utilisez pas par défaut. Préférez le contraste d’échelle ou de poids, un saut de ligne délibéré, la couleur, un marquage dessiné lié au concept (la ondulation d’un diacritique, un gribouillis de stylo rouge sous un bug), ou pas d’emphase. Si un italique sérif est vraiment la voix de la marque, mettez toute la ligne dans cette police plutôt qu’un seul mot.

Mouvement

Une seule famille d’easing (cubic-bezier(.16,1,.3,1) expo-out par défaut). Les entrées durent 0,6 à 1,35 s et sont décalées d’environ 0,1 s à environ 1,5 s au total, dans l’ordre de lecture. Chaque type d’élément reçoit une entrée distincte (mask-rise pour les titres, scale pour les pilules de navigation, wipe pour les boutons, rise pour les statistiques).
Le contenu est visible au repos. L’état caché n’existe que dans le 0 % du keyframe avec animation-fill-mode: both, plus une sécurité JS. Une page qui reste vide lorsque JS ou les animations échouent est cassée, aussi belle soit-elle sur le chemin heureux.
Le mouvement ambiant (vidéo, particules, shader) vit dans la couche média. L’interface au premier plan est immobile après son entrée, à l’exception du retour au survol (0,2 à 0,35 s) et des effets optionnels liés au défilement.
Respectez prefers-reduced-motion : pas d’entrée, pas de boucle ambiante (affichez une seule image fixe à la place).

Matériaux

Le verre et le métal sont réservés à un ou deux contrôles flottant sur le média, pas à toutes les cartes. Les recettes sont dans references/materials.md.
Ajoutez du grain (6 à 10 % d’opacité) sur les pages riches en médias. Il unifie l’imagerie générée avec l’interface.

Fichiers de cette compétence

Fichier	Lire quand
`references/archetypes.md`	Étape 1, toujours
`references/typography.md`	Étape 1, choix de la paire typographique
`references/spec-template.md`	Étape 2, toujours, plus le formulaire de prompt quand l’utilisateur veut un prompt
`references/media.md`	Étape 3
`references/motion.md`	Étape 4, détails du mouvement, effets de défilement, timelines WAAPI
`references/materials.md`	Étape 4, boutons, pilules, verre, métal, texte dégradé
`references/responsive.md`	Étape 4, tokens, points de rupture incluant la hauteur, mise à l’échelle du plan de travail, menu mobile
`references/react-port.md`	Le projet est React, Next, Tailwind ou Framer Motion
`references/anti-ai-tells.md`	Étapes 5–6
`assets/starter.html`	Constructions fichier unique
`assets/motion-kit.css`, `assets/motion-kit.js`	Toute construction (intégrez-les ou importez-les)
`assets/backgrounds/*.js`	Couche média générative
`examples/*.html`	Pour calibrer le niveau de qualité (trois héros)
`scripts/audit.py`	Audit statique des indices IA et de la robustesse
`scripts/runtime_check.js`	Vérifications dans le navigateur après chargement
`scripts/inline_kit.py`	Construire le fichier unique final à partir d’une source avec des placeholders de kit/fonds

Cinematic Motion UI : des landing pages qui ne font pas IA

Qu'est-ce que Cinematic Motion UI : des landing pages qui ne font pas IA ?

Demander à votre IA préférée

Documentation