Prompts · Créer un site
Un en-tête animé ou une scène 3D qui ne fait pas ramer
Un en-tête qui bouge (CSS, GSAP ou Three.js selon le besoin), avec une image fixe de secours, une pause quand on ne le voit plus, et le respect de « réduire les animations ».
Le prompt, en français
Je veux un en-tête de page animé : [Ce qu'on voit dans la scène].
Ambiance : [L'ambiance]. Couleurs : [Tes couleurs (codes hexadécimaux)].
Ce qui fait bouger la scène : [Ce qui fait bouger la scène].
Technique : [La technique, ou « choisis pour moi »].
1. Choisir la technique
Si j'ai écrit « choisis pour moi », prends la plus légère qui donne le rendu voulu, et explique ton choix en trois lignes :
- CSS seul (dégradés, transformations 3D) ou SVG animé, si la scène est plate ou faite de formes simples ;
- GSAP, pour enchaîner des mouvements ou les lier au défilement ;
- Three.js, si la scène a besoin d'un vrai objet en 3D.
Vérifie sur le site officiel de chaque bibliothèque sa version actuelle, sa licence et sa façon de s'installer, au lieu de te fier à ta mémoire. Si j'ai déjà un projet, garde sa pile technique et son gestionnaire de paquets.
2. Ne pas faire ramer
- Une seule boucle d'animation (`requestAnimationFrame`), mise en pause quand l'en-tête sort de l'écran (`IntersectionObserver`) et quand l'onglet est caché (`visibilitychange`).
- Pour la 3D : densité de pixels limitée à 2, géométrie et textures légères, objets libérés quand ils ne servent plus.
- En CSS, n'anime que `transform` et `opacity`.
- La bibliothèque et la scène se chargent après le texte : le titre et le bouton de l'en-tête sont lisibles tout de suite, même si le script n'est pas encore arrivé.
- Sur un petit écran ou un appareil faible, une version plus simple (moins d'objets, moins d'effets) ou l'image fixe.
- Vise 60 images par seconde sur un ordinateur portable ordinaire, et dis-moi comment le mesurer (onglet Performance des outils du navigateur).
3. Accessibilité
- Avec `prefers-reduced-motion: reduce`, aucune animation : on voit une image fixe de la scène, belle et complète. Pour la créer, fais une capture de la scène si tu as un outil de navigateur, sinon dis-moi comment la produire.
- Un bouton visible « Arrêter l'animation » (qui devient « Relancer l'animation »), utilisable au clavier.
- Le texte de l'en-tête reste lisible par-dessus la scène : contraste d'au moins 4,5:1, vérifié sur la partie la plus claire de la scène.
- La scène est décorative pour les lecteurs d'écran (`aria-hidden="true"` sur le canvas) : le sens passe par le texte.
- Tout le texte visible est en français, avec la typographie française : espace insécable avant « : », espace fine insécable avant « ; », « ! » et « ? », guillemets « ». Tu me parles en français.
4. Méthode
- Avant de coder : reformule, pose tes questions s'il manque quelque chose (par exemple un modèle 3D à fournir), puis décris la scène en cinq lignes (caméra, lumière, mouvement, image de secours) et attends mon accord.
- Construis d'abord l'image fixe et le texte, ensuite l'animation par-dessus.
C'est fini quand :
- l'en-tête s'affiche à 390 px et à 1440 px de large sans défilement horizontal (avec des captures si tu as un outil de navigateur) ;
- avec « réduire les animations », plus rien ne bouge ;
- l'animation se met en pause quand on fait défiler la page vers le bas, et reprend quand on remonte ;
- tu m'indiques le poids ajouté par la bibliothèque et la scène, et la commande pour lancer la page sur mon ordinateur.
5 cases sont vides : elles partiront entre crochets, et Claude te posera la question.
Voir la version anglaise, celle qui est copiée
I want an animated page header: [Ce qu'on voit dans la scène].
Mood: [L'ambiance]. Colors: [Tes couleurs (codes hexadécimaux)].
What moves the scene: [Ce qui fait bouger la scène].
Technique: [La technique, ou « choisis pour moi »].
1. Choose the technique
If I wrote "choisis pour moi", pick the lightest one that gives the intended result, and explain your choice in three lines:
- CSS only (gradients, 3D transforms) or animated SVG, if the scene is flat or made of simple shapes;
- GSAP, to chain movements or tie them to scrolling;
- Three.js, if the scene needs a real 3D object.
Check on each library's official site its current version, its license and how to install it, instead of relying on your memory. If I already have a project, keep its stack and its package manager.
2. Keep it smooth
- A single animation loop (`requestAnimationFrame`), paused when the header leaves the screen (`IntersectionObserver`) and when the tab is hidden (`visibilitychange`).
- For 3D: pixel ratio capped at 2, light geometry and textures, objects disposed of when no longer used.
- In CSS, animate only `transform` and `opacity`.
- The library and the scene load after the text: the header's title and button are readable right away, even if the script has not arrived yet.
- On a small screen or a weak device, a simpler version (fewer objects, fewer effects) or the still image.
- Aim for 60 frames per second on an ordinary laptop, and tell me how to measure it (Performance tab of the browser's developer tools).
3. Accessibility
- With `prefers-reduced-motion: reduce`, no animation at all: visitors see a still image of the scene, complete and good-looking. To create it, take a screenshot of the scene if you have a browser tool; otherwise tell me how to produce it.
- A visible "Arrêter l'animation" button (which becomes "Relancer l'animation"), usable with the keyboard.
- The header text stays readable over the scene: contrast of at least 4.5:1, checked against the brightest part of the scene.
- The scene is decorative for screen readers (`aria-hidden="true"` on the canvas): the meaning is carried by the text.
- All visible text is in French, with French typography: a non-breaking space before ":", a narrow non-breaking space before ";", "!" and "?", « » quotes. Talk to me in French.
4. Process
- Before coding: restate the request, ask your questions if something is missing (for example a 3D model I need to provide), then describe the scene in five lines (camera, light, motion, fallback image) and wait for my approval.
- Build the still image and the text first, then the animation on top.
Done when:
- the header displays at 390 px and 1440 px wide with no horizontal scroll (with screenshots if you have a browser tool);
- with reduced motion, nothing moves anymore;
- the animation pauses when the page is scrolled down, and resumes when scrolling back up;
- you tell me the weight added by the library and the scene, and the command to run the page on my computer.Comment t’en servir
Colle ce prompt dans le dossier de ton site, une fois la page elle-même en place : l'en-tête animé vient par-dessus un texte qui marche déjà. Si ta scène a besoin d'un objet en 3D précis (un modèle .glb, par exemple), mets-le d'abord dans le dossier.
Claude choisit la technique la plus légère pour l'effet voulu, décrit la scène en cinq lignes et attend ton accord. Il construit d'abord l'image fixe et le texte, puis l'animation. Ne sois pas déçu s'il propose du CSS plutôt que de la 3D : c'est plus léger, donc plus fluide au téléphone.
Pour vérifier : active « réduire les animations » dans les réglages de ton système (plus rien ne doit bouger), fais défiler la page (l'animation doit se mettre en pause), puis ouvre-la sur un vieux téléphone. La formation « Un site sur mesure, pas un site d'IA » a une leçon entière sur la scène qui bouge sans ramer.
Pour comprendre tout ce que fait ce prompt, et l’adapter : la formation Un site sur mesure, pas un site d'IA.