Page d'Atterrissage Narrative

Utilisez cette compétence pour créer des pages d'atterrissage immersives avec un arc narratif cinématographique, des actifs d'image générés et un prompt de construction prêt à l'emploi pour les développeurs. La barre de référence est le projet Last Rites : zoom/retrait épinglé, objet d'âme morphing flamme-à-eau, curseur de mémoire glissant, particules, curseur personnalisé, boutons magnétiques, écran de chargement, superpositions PNG transparentes avec mix-blend-mode: screen, et un appel à l'action (CTA) à deux niveaux après une pause épinglée obligatoire de 2 secondes.

La sortie par défaut est un plan plus un prompt de construction. Lorsque l'utilisateur vous demande de réellement le construire, créez le projet Vite, générez ou stubbez les actifs, utilisez Open Design comme side-car de conception/prototypage lorsque c'est utile, exécutez-le localement et vérifiez en parcourant la page de travail de bout en bout. Une construction n'est pas terminée tant que la page n'a pas été visuellement testée dans un navigateur et jugée suffisamment cinématographique/impressionnante pour la marque.

Routage avec Open Design

Utilisez le flux de compétence normal pour la narration, la planification des scènes, les spécifications de mouvement, les prompts et les prompts de construction. Faites appel à Open Design lorsque la production visuelle est le goulot d'étranglement :

Si GPT Image 2 est indisponible, échoue, expire ou produit des images faibles/peu cinématographiques.
Si l'utilisateur demande de créer le site, de le prototyper, de le prévisualiser ou de "fabriquer des choses" plutôt que seulement d'écrire un prompt.
Si une direction visuelle rapide est nécessaire avant le codage manuel de la construction finale Vite/GSAP.

Commande :

/Users/yashovrattiwari/.openclaw/tools/openclaw-design make "<demande complète de page d'atterrissage narrative, incluant les réponses d'admission, l'émotion, le type de défilement, l'objet d'âme, les superpositions d'éléments et les contraintes d'actifs>"

Considérez la sortie d'Open Design comme du matériel source : réutilisez la direction visuelle la plus forte, la mise en page, le rythme de copie et les fichiers générés, puis préservez les mécanismes d'histoire GSAP/ScrollTrigger requis par cette compétence et la liste de vérification. Ne vous arrêtez pas parce que GPT Image 2 ne crée pas d'images.

Phase 1 – Entretien d'Admission

Posez ces 5 questions une par une. Ne les regroupez pas sauf si l'utilisateur a déjà fourni suffisamment de détails.

Marque et objectif : À quoi sert ce site web – et qui y arrive ?
Registre émotionnel : proposez chagrin/paix, espoir/renaissance, émerveillement/respect, ambition/entrain, calme/confiance, urgence/excitation, ou autre chose.
Type de défilement : A révélation par défilement, B défilement plus chapitres glissants, C immersion profonde, ou D zoom sur une seule scène.
Objet d'âme : un simple SVG centré qui se transforme en 2-3 étapes, avec des arrêts de dégradé nommés que GSAP peut animer.
Superpositions d'éléments PNG : 2-4 éléments physiques isolés sur fond noir pur, composés dans le code avec mix-blend-mode: screen.

Exemples : flamme à goutte à onde, graine à semis à canopée, étoile à constellation à poussière d'étoiles, aiguille de boussole à vrai nord, cercle de souffle à vague à eau calme, étincelle à traînée à éclat de lumière.

Phase 2 – Spécification de l'Objet d'Âme

Après l'admission, définissez l'objet d'âme avec SVG en ligne, id="soulGrad", id="soul-stop-1/2/3", trois étapes de défilement, couleurs de lueur, couleurs de dégradé, valeurs de morphing CSS, décalage de souris lerp, dérive sinusoïdale du défilement, opacité des sections et une pulsation de respiration GSAP.

Incluez des exemples d'animation de couleur d'arrêt GSAP :

gsap.to('#soul-stop-1', { attr: { 'stop-color': '#...' }, duration: 1.4 });

Phase 3 – Plan de Scènes

Définissez 6 à 8 scènes basées sur le type de défilement. Utilisez :

# | ID | Nom | Beat narratif | Mécanique GSAP | Mode particule | Étape âme | Image de fond

Types de scènes obligatoires :

Héro : animation de chargement, texte décalé, léger zoom arrière du fond au défilement
Zoom : GSAP pin:true + scrub:true, échelle de fond 1 -> 1.55
Transition : animation de couleur de fond, changement de mode de particule
Glissement Smooothy : uniquement pour les types B/C, cartes horizontales mémoire/produit/timeline
Chapitre/Rivière : parallaxe 4 couches, texte monte de y:50
Vaste : retrait à l'échelle 1.38 -> 1.0, seule ligne de police avec empattement centrée
CTA : pause épinglée de 2 secondes, puis entrée décalée

La pause épinglée de 2 secondes avant le CTA est obligatoire. Ne sautez jamais.

Phase 4 – Couche d'Interaction

Incluez toujours le curseur lerp personnalisé, les boutons magnétiques, l'écran de chargement, les points de progression à droite, la barre de progression du défilement en haut, les particules canvas chaudes/froides/de transition, la pulsation de respiration et le morphing de défilement de l'objet d'âme, la parallaxe souris, le CTA à deux niveaux, l'échappatoire secondaire douce et 4 jetons de confiance.

Ajoutez pour le type B : curseur glissant style Smooothy et icônes SVG annulaires animées sur les cartes. Ajoutez pour le type C : modules style StringTune : StringProgress, StringParallax, StringSplit, StringCursor3, StringMagnetic. Ajoutez pour le type D : zoom épinglé GSAP uniquement ; pas de curseur ni de modules StringTune.

Phase 5 – Prompts GPT Image 2

Produisez deux séries de prompts d'image.

Série A – JPG de Fond

Un prompt JPG 16:9 par scène.

Terminez chaque prompt exactement par : Pas de personnes. Pas de texte. Pas de logos. Format d'image 16:9. Photoréaliste. Gradation cinématographique.
Ordre de génération : Héro, CTA, Zoom, Chapitre, Vaste, Transition en dernier.
Après l'image 1, ajoutez au début : Même gradation cinématographique, style photographique, gamme tonale que l'image héro –
Dites à l'utilisateur de télécharger les images générées précédentes comme références pour la continuité visuelle.
Pour l'image de transition, téléchargez les images Héro et CTA comme références et demandez de mélanger les deux palettes.
Motif de nom de fichier : scene-01-hero.jpg, scene-02-zoom.jpg, etc.

Série B – Éléments PNG Transparents

Un prompt PNG carré par type d'élément choisi lors de l'admission.

Le fond noir pur #000000 partout en dehors de l'élément est obligatoire.
L'élément remplit 50 à 70 % du cadre.
Motif de nom de fichier : element-[nom].png.
Terminez chaque prompt exactement par : Noir pur (#000000) partout ailleurs. Format carré 1:1. Ultra haute résolution. Macro photoréaliste.
Dans le prompt de construction, chaque image d'élément doit utiliser .element-overlay { mix-blend-mode: screen; }.

Formule du prompt :

[ÉLÉMENT] unique isolé sur fond noir pur. [Description de texture, lumière, détail]. [Échelle – remplit X% du cadre]. Pas de décor de fond, pas de contexte, pas d'ombre s'étendant loin au-delà de l'objet. Noir pur (#000000) partout ailleurs. Format carré 1:1. Ultra haute résolution. Macro photoréaliste.

Solution de Rechange pour la Génération d'Images

Si GPT Image 2 est indisponible, échoue ou produit des actifs faibles :

Essayez l'outil de génération d'image configuré s'il est disponible.
Si la génération d'image est toujours bloquée ou les résultats ne sont pas assez bons, utilisez Open Design : /Users/yashovrattiwari/.openclaw/tools/openclaw-design make "<demande complète de page d'atterrissage narrative>"
Si Open Design renvoie un projet utile, inspectez ses fichiers générés et portez la direction la plus forte dans la construction Vite/GSAP au lieu de remplacer aveuglément le système de mouvement de cette compétence.
Si aucune image ne peut être produite, construisez avec des dégradés CSS cinématographiques, des particules canvas, des superpositions SVG et des fichiers d'espace réservé clairement nommés afin que le site reste fonctionnel et que les prompts d'actifs puissent être utilisés ultérieurement.

Ne vous arrêtez pas seulement parce que la génération d'image a échoué. Préservez l'histoire, le système de mouvement et la page finale exécutable.

Phase 6 – Prompt de Construction Codex

Produisez un prompt complet prêt à être collé pour Codex, Cursor ou un autre agent de codage. Il doit inclure l'aperçu du projet, la pile technique, l'arborescence complète des fichiers, le package.json complet, le vite.config.ts complet, le index.html complet, le src/styles.css complet, src/main.ts complet, src/soul.ts, src/particles.ts, src/cursor.ts, src/scroll.ts, src/loader.ts et src/slider.ts uniquement pour B/C.

Détails de construction requis : Vite 5 + TypeScript, GSAP 3 + ScrollTrigger, SVG d'âme en ligne avec soul-stop-1/2/3, sections data-particle, balises PNG d'élément avec class="element-overlay" et data-float-speed, navigation, curseur, canvas, chargeur, points de progression, variables de palette chaude/froide, point de rupture responsive à 768px, instructions de configuration d'image pour public/images/, comportement de secours si les images manquent, et npm install plus npm run dev.

Le prompt de construction doit également inclure une section de test finale obligatoire pour l'agent de codage : exécutez l'application, ouvrez l'URL locale, faites défiler de haut en bas sur les largeurs de bureau et mobile, interagissez avec le curseur le cas échéant, vérifiez le zoom épinglé/la pause CTA/le morphing de l'âme/les particules/les boutons/le focus/l'absence de chevauchement, capturez des captures d'écran héro/milieu/CTA, et révisez jusqu'à ce que la page soit visuellement forte plutôt que simplement fonctionnelle.

Configuration ScrollTrigger requise :

gsap.registerPlugin(ScrollTrigger);
ScrollTrigger.normalizeScroll(true);
ScrollTrigger.config({ fastScrollEnd: true });
window.addEventListener('load', () => ScrollTrigger.refresh());

Typographie : police avec empattement distinctive plus sans empattement propre. Ne revenez jamais par défaut à Inter, Roboto, Arial ou une police système seule pour l'esthétique finale.

Format de Sortie

Livrez toujours dans cet ordre après la fin de l'admission :

## Résumé de l'Admission
## Spécification de l'Objet d'Âme
## Plan de Scènes
## Couche d'Interaction
## GPT Image 2 – Prompts de Fond (Série A)
## GPT Image 2 – Prompts d'Éléments PNG (Série B)
## Ordre de Génération
## Prompt de Construction Codex
## Plan de Vérification Finale

Liste de Vérification Qualité

Avant de livrer un plan ou un prompt de construction, vérifiez que l'admission est complète, que l'objet d'âme a 3 étapes et des arrêts de dégradé nommés, que le plan de scènes a 6 à 8 scènes, que le type B/C inclut le curseur, que le type C inclut les modules StringTune, que le CTA a la pause épinglée de 2 secondes, que les deux séries de prompts d'image sont présentes, que les superpositions PNG utilisent mix-blend-mode: screen, que tous les fichiers sont entièrement spécifiés pour une application Vite exécutable, que les variables de palette chaude/froide existent, que les règles mobiles commencent à 768px, que les noms de fichiers correspondent partout, que les instructions d'exécution incluent npm install plus npm run dev, et que le prompt de construction exige explicitement un test final de défilement dans le navigateur avec des captures d'écran et une vérification de la qualité visuelle.

Vérification Finale de la Construction

Lorsque vous construisez réellement une page avec cette compétence, ne la considérez pas terminée avant de l'avoir testée :

Exécutez l'installation/construction ou le serveur de développement selon le projet.
Ouvrez la page locale dans un navigateur.
Faites défiler du haut vers le bas sur les largeurs de bureau et mobile, de préférence en utilisant l'automatisation du navigateur plus l'inspection visuelle manuelle lorsque disponible.
Confirmez que le héro se charge, que le zoom épinglé fonctionne, que la transition change le mode de particule, que le curseur fonctionne le cas échéant, que l'objet d'âme reste visible et se transforme, que la pause CTA se produit, que les boutons/états de focus fonctionnent et que le texte ne se chevauche pas.
Capturez des captures d'écran au niveau du héro, du milieu de l'histoire et du CTA à la fois pour le viewport de bureau principal et pour au moins un viewport mobile lorsque c'est pratique.
Portez un jugement : est-ce que cela semble suffisamment cinématographique/impressionnant pour la marque demandée ? Sinon, resserrez le timing du mouvement, le contraste, l'espacement, le traitement de l'image, la copie ou la direction des actifs et retestez le défilement complet.
Rapportez la preuve : URL locale, tailles de viewport, captures d'écran/états observés, correctifs apportés après le premier passage visuel et les éventuels bloqueurs restants.

La vérification doit être fondée sur des preuves. Ne livrez pas seulement un journal de construction réussi ; la réponse finale doit dire ce qui a été observé lors du défilement de la page de travail.

Page d'Atterrissage Narrative avec Défilement

Qu'est-ce que Page d'Atterrissage Narrative avec Défilement ?

Demander à votre IA préférée

Documentation