quiczz/motionsite

Que fait motionsite ?

Construit l'aspect « site animé » : un héros vidéo en plein écran en boucle, un dégradé sombre pour un texte lisible, des cartes effet verre, des mots qui s'animent, des boutons réactifs et des sections qui se révèlent au défilement. La différence entre un bon site et un site lent et inaccessible réside dans la checklist ci-dessous, ce skill construit donc la page puis l’audite.

Non affilié à motionsites.ai. Ce skill ne contient aucun prompt ou ressource tiers.

Fonctionne tout seul : lorsque vous demandez une page d'accueil, un héros ou un site animé, Claude sélectionne ce skill, construit à partir du template et exécute l'audit avant de répondre.

Procédure

1. Obtenir le brief en une seule fois. Nom de la marque, promesse en une ligne, appel à l'action principal, 3 à 6 sections (fonctionnalités, preuves, tarifs, FAQ), ton (calme, audacieux, ludique, luxe) et tout logo, couleur ou police déjà possédé. Si l'utilisateur n'en a donné aucun, choisissez vous-même une direction et dites laquelle.
2. Choisir la stack du projet. Projet React/Next/Vue/Svelte existant : construire des composants dans cette stack. Dossier vide sans préférence : utiliser le fichier unique templates/site.html (pas de build, s'ouvre en double-cliquant). S'ils demandent React, Vite, TypeScript et Tailwind, utiliser templates/Hero.tsx et templates/useReveal.ts.
3. Obtenir la vidéo honnête et légère. Voir references/assets.md. Utiliser les propres images de l'utilisateur ou un clip généré ou sous licence, jamais de lien direct vers le CDN de quelqu'un d'autre. En attendant d'avoir des images réelles, livrer l'arrière-plan animé en dégradé CSS inclus dans le template pour que la page ait déjà l'air finie. Les images réelles sont activées en remplissant trois attributs de données sur .hero-media (data-video-mp4, data-video-webm, data-poster). Créer les versions web avec scripts/make_video_assets.sh (mp4 + webm + poster).
4. Construire la page à partir du template. Conserver ces parties : héros (vidéo + superposition + titre + CTA), une barre de navigation en verre, 3 à 6 sections de contenu avec animations de révélation, pied de page. Appliquer les recettes de design dans references/design-recipes.md (échelle typographique, espacement, palette, cartes en verre, états des boutons, timing).
5. Câbler les règles de performance et d'accessibilité (ci-dessous). Elles ne sont pas facultatives ; elles sont ce qui rend la page utilisable sur un téléphone.
6. Auditer. Exécuter python3 <skill-dir>/scripts/check_motion.py <site-folder> et corriger chaque ÉCHEC. Ensuite, regarder dans un navigateur : largeur desktop et téléphone, réduction de mouvement activée, JavaScript désactivé pour le premier affichage. Détails dans references/performance-accessibility.md.
7. Rapporter les fichiers créés, comment remplacer la vidéo placeholder, ce que l'audit a dit et une chose à regarder.

Règles qui déterminent la qualité

• Vidéo : muted, loop, playsinline (sans cela, les navigateurs mobiles refusent de la lire dans la page), poster défini, preload="metadata", pas de piste audio. Démarrer la lecture depuis le script après avoir vérifié la réduction de mouvement et l'économiseur de données, comme le fait le template, afin que ces visiteurs ne téléchargent jamais la vidéo. Cibler 2 à 4 Mo pour le clip héros, 1080p au maximum, 6 à 12 secondes qui bouclent proprement.
• Le poster est le premier affichage. L'image poster (ou le dégradé) est ce que le visiteur voit et ce que mesure le Largest Contentful Paint. Lui donner fetchpriority="high" et des dimensions exactes.
• Respecter le visiteur. Sous prefers-reduced-motion: reduce, ou lorsque l'économiseur de données est activé, afficher le poster au lieu de jouer la vidéo et désactiver les animations. Mettre la vidéo en pause lorsqu'elle est défilée hors écran.
• Animer uniquement transform et opacity. Ne jamais animer top, left, width, height ou margin ; ils forcent le réarrangement et le bégaiement sur les téléphones.
• Le texte reste lisible sur la vidéo. Placer une superposition dégradée entre la vidéo et le texte, maintenir le contraste du corps du texte à au moins 4.5:1 par rapport à l'image la plus sombre et la plus claire, et ne jamais placer de petit texte directement sur des images en mouvement.
• Une idée par section, un mouvement par élément. Espacer les animations avec des pas de 60 à 100 ms, durées de 400 à 800 ms, ease-out. Si tout bouge, rien n'attire l'œil.
• Mobile d'abord. Le héros utilise 100svh, pas 100vh. Tester à 375 px de large ; pas de défilement horizontal. Envisager un héros plus léger ou statique sur les petits écrans.
• Structure de contenu réelle. Un h1, des landmarks (header, main, footer), les boutons sont des <button> ou <a>, les liens ont du texte, les images ont alt.
• Posséder ses ressources. Pas de vidéo provenant d'un CDN tiers, polices auto-hébergées ou issues d'un fournisseur de polices, licences enregistrées dans assets/README.md.

Fichiers

Fichier	Objectif
templates/site.html	Page d'accueil complète en un fichier : héros vidéo (activé avec des attributs de données) avec fallback dégradé CSS, navigation en verre, titre animé, révélation au défilement, cartes, CTA, pied de page
templates/Hero.tsx, templates/useReveal.ts	Versions React du héros et du hook de révélation au défilement
references/design-recipes.md	Typographie, couleur, espacement, verre, boutons, timing des animations, motifs de sections
references/performance-accessibility.md	Budgets, réduction de mouvement, comportement vidéo, étapes de test
references/assets.md	D'où vient la vidéo, licences, génération d'un clip, encodage
scripts/make_video_assets.sh	ffmpeg : clip d'entrée vers web mp4, webm, poster
scripts/check_motion.py	Auditer un dossier de site pour les problèmes ci-dessus