Contrat d'activation
À utiliser pour des sites web / landings (n'importe quelle stack) ou des vidéos rendues par code (showreel, promo, clip de lancement) dans le langage visuel du motion-designer : aplats de couleurs pleine page, capitales larges ultra-grasses, coins HUD mono, mouvement cinétique calé sur le beat, ou shaders 3D d’impression riso. Pas pour les tableaux de bord, les sites de documentation ou les applications orientées formulaires.
Règles strictes
- Tous les chemins ci-dessous sont relatifs au dossier de cette compétence (
SKILL_DIR) ; exécutez les outils avecnode "$SKILL_DIR/assets/palette/palette.mjs" …. - Répondez dans la langue de l'utilisateur ; rédigez le contenu du site / de la vidéo dans la langue du projet.
- Terminez la phase d'accueil AVANT le design ou le code. Ne codez jamais de couleur hex en dur : la couleur provient des jetons de rôle de
palette.mjs(ink,bone,action,machine,on-*,hud-on-*). - Le texte sur un champ utilise
on-<champ>; n'affichez jamais une combinaisonforbiddenPairscomme texte / arrière-plan. - Un mouvement signature par scène ; alternez fort / calme ; jamais 3 champs de même rôle à la suite ; les poses clés tiennent ≥1 temps ; une famille d'easing.
- Web : animez transform / opacity ; respectez
prefers-reduced-motion(états finaux statiques, pas de boucles, pas d'épingles) ; mettez en pause les canvases hors écran ; épinglez seulement ≥1024px ; pas de débordement à 375px. - N'inventez jamais de témoignages, de métriques ou de clients ; conservez le contenu existant.
- Rejetez la liste anti-sloup (
references/design-system.md§8).
Portes de décision
| Situation | Action |
|---|---|
| Orienté typographie, aplats de couleurs | Suisse Cinétique : design-system.md, assets/web, assets/video |
| 3D, tactile, poster / imprimé | Shader Riso : shader-print.md, assets/shader/ |
| Les deux | Hybride : champ shader derrière la typo cinétique sur des aplats (jetons on-*) |
| Couleur de marque connue | `palette.mjs --brand "#HEX" --format css |
| Préréglage | --list (affiche nom, tags, échantillons) → --preset <nom> |
| Surprise-moi | Déduire secteur / ambiance du README, du contenu, du CSS, des mots de l'utilisateur → --surprise --mood "<tags>" --seed <n> ; justifier le choix ; un nouveau tirage via --exclude <nom> |
| Site web | references/web-techniques.md ; adapter assets/web/* à la stack |
| Vidéo | Copier assets/video/reel-template/ ; references/video-pipeline.md |
| Site + vidéo | Vidéo d'abord comme storyboard, puis site à partir des mêmes scènes |
Étapes d'exécution
- Détecter la sortie (site / vidéo / les deux) et la stack ; lire le contenu existant et les éléments de marque.
- Accueil, UNE question par tour : style (Suisse Cinétique / Shader Riso / Hybride / Surprise-moi), puis palette (Couleur de marque / Préréglage / Surprise-moi).
- Polices depuis le
fontPairingdu préréglage ou §2 dedesign-system.md. BPM : préférer 120 (images entières par temps à 30 et 60ips ; 144/150 à 60ips) ; autres tempos arrondir les temps en images. - Écrire une table de scènes
# | scène | rôle du champ | mouvement signature | tempsen utilisant le rythme canonique (§7). - Construire à partir des ressources correspondantes.
- QA : site web →
assets/qa/qa-screenshots.js(1440 + 390, débordement, console), juger seulement après stabilisation des animations ; vidéo → images de test, rendu complet,ffprobe, planche contact. - Rapporter les résultats et ce qui n'a pas pu être vérifié (par ex. l'audio n'est jamais écouté).
Contrat de sortie
Retourner : palette (+ raison du choix surprise) et résumé de contraste, table de scènes, fichiers créés / modifiés, chemins des preuves QA, limitations connues.
Références
references/design-system.md— rôles, typographie, timing, easing, mouvements, rythme, anti-sloup.references/palettes.md— accueil, préréglages, formats de jetons.references/web-techniques.md— GSAP / Lenis / canvas, accessibilité, performance.references/video-pipeline.md— canvas déterministe → navigateur headless → ffmpeg, audio.references/shader-print.md— lancer de rayons WebGL2, tramage 3 encres, décalage d'impression.