scroll-craft

Que fait scroll-craft ?

Le défilement est la seule entrée que chaque visiteur sait déjà utiliser. Cette compétence le traite comme une chronologie : la molette est un curseur, la page est un film avec du vrai texte par-dessus, et chaque section se comporte suffisamment différemment pour que le visiteur continue pour découvrir ce que fera la suivante.

Ce que vous produisez : un brief d'entretien, une grammaire de page, une cartographie du parcours client, une courbe d'émotion avec un pic conçu, un score de défilement, un geste signature, des assets générés, une vraie page HTML sur un terrain de conception piloté par des jetons, et une bande de captures d'écran prouvant qu'elle tient à chaque position de défilement.

Ce que ce n'est pas

Ce n'est pas "générer un survol et y déposer du texte". Cette approche produit un seul dispositif appliqué à une page entière, et chaque site construit de cette façon est reconnaissable au premier coup d'œil : même diorama en pâte à modeler, même texte centré, même compteur 01 / 06, même encouragement "défilez pour explorer". Cinq sections qui se comportent à l'identique sont une section montrée cinq fois.

Quatre règles en découlent, et elles sont l'épine dorsale de cette compétence :

1. La variété est le produit. Une page utilise au moins quatre familles de dispositifs et jamais le même dispositif deux fois de suite. Lisez references/devices.md.
2. Le monde est photographique, sauf si la marque est réellement illustrée. Le diorama en pâte à modeler basse polygones et mat doux est interdit comme choix par défaut. Lisez references/worlds.md.
3. Pas de chaîne continue. Un seul vol de caméra ininterrompu est la chose la plus chère et la plus fragile que vous puissiez construire, et il n'existe que pour cacher les coupes entre les scènes. Variez plutôt le dispositif et la coupe disparaît gratuitement, car le visiteur ne regarde pas un seul film. Chaînez uniquement lorsque le brief est littéralement "un seul voyage continu".
4. Un monde différent n'est pas une page différente. La boîte à outils des dispositifs varie l'apparence d'une page. La structure est un axe séparé, et elle doit être décidée délibérément, sinon chaque construction hérite du même squelette. Les quatre premières constructions ont fait exactement cela. Lisez references/uniqueness.md.

Préférence pour le héros debout

La superposition dimensionnelle est une exigence de base pour un héros marketing premium. Planifiez des plans d'arrière-plan, de sujet, de premier plan et atmosphérique se déplaçant indépendamment avant de demander des assets. Un seul bel arrière-plan avec des fondus de texte ne satisfait pas cette préférence. La profondeur doit provenir d'une séparation visible, d'occultation et de différences contrôlées de mouvement, tandis que le titre reste lisible et la scène raconte une histoire claire.

Lisez references/hero-depth.md avant de planifier le héros ou de générer ses assets. Il couvre les plans propres, les découpes alpha réelles, les ancres de contact partagées, la typographie entre les plans, la chorégraphie de défilement retenue, la direction artistique mobile et l'acceptation visuelle, avec l'exemple approuvé de Sonder. Utilisez la composition qui correspond à la grammaire choisie ; ne répétez pas la scène de Sonder et n'imposez pas d'ancrage sur une grammaire qui l'interdit. Respectez les instructions statiques ou plus simples explicites, et conservez la profondeur dans la composition statique lorsque le mouvement est réduit.

Norme de collection approuvée

Lisez references/approved-collection.md avant de planifier un site marketing premium. Il distille la reconstruction approuvée de dix sites : recherche de marque réelle, contrats de couches, profondeur significative du pointeur/défilement, rendu photographique ou 3D approprié, navigation et fins distinctes, interactions utiles, direction artistique mobile et preuves du package final. Ce sont des principes d'exécution et des exemples travaillés, pas un squelette de page réutilisable.

Étape 0 : Le brief et l'autorité créative

Établissez le brief avant de générer quoi que ce soit. Réutilisez les réponses et assets déjà fournis. Lorsque l'utilisateur délègue explicitement la direction créative (par exemple, "utilisez votre jugement" ou "je veux vous laisser faire"), rédigez un brief Auto-rédigé sous délégation créative explicite et procédez. Couvrez les huit sujets ci-dessous, distinguez les preuves des hypothèses, et n'inventez pas de citations d'utilisateurs ou ne forcez pas un autre point de contrôle d'entretien/approbation.

Sinon, interrogez pour les décisions manquantes. Posez des questions réelles, enregistrez les réponses, et évitez de déduire une marque entière de son nom.

La compétence est un instrument de gamme, pas un style de maison. L'humain apporte l'intention et tous les assets qu'il possède ; l'entretien est l'endroit où cela se transforme en le bon type de page : un monde ininterrompu, des scènes distinctes, des chapitres imprimés, une surface vivante. La compétence peut faire n'importe lequel d'entre eux. L'entretien décide lequel.

Gardez-le court. Huit questions, posées en une seule passe :

1. Ambiance en trois à cinq mots, plus jusqu'à trois références de n'importe quel média. Un film, une pochette d'album, un magasin, un magazine, un jeu. Pas "des sites que vous aimez" : nommer des sites est une façon de faire ressembler la page à un site existant.
2. Le parcours de défilement, section par section, dans leurs mots. Ce que le visiteur devrait voir en premier, ce qui vient ensuite, quelle est la dernière chose. Leur séquence, pas un menu que vous avez proposé.
3. La courbe d'énergie. Où cela devrait être calme, où cela devrait être intense. Une page forte tout du long est aussi plate qu'une page silencieuse tout du long.
4. Comment quelqu'un devrait se sentir en défilant, étape par étape, et quel est le SEUL moment dont il devrait se souvenir ? L'énergie est le volume. C'est l'émotion, et les deux ne coïncident pas : sur une page forte, l'acte calme peut être le plus intense. La réponse étape par étape devient la courbe d'émotion, l'unique moment devient le pic. Les deux sont requis dans BRIEF.md. Voir references/feel.md.
5. Une chose que ce site devrait faire qu'aucun site qu'ils ont vu ne fait. C'est la graine du geste signature. Insistez pour une réponse réelle ; "être mémorable" n'en est pas une.
6. À quelle distance du minimalisme premium ils veulent aller. Proposez la gamme dans uniqueness.md §5 : brutaliste, maximaliste, ludique, rétro, dense, éditorial, minimaliste premium. Leur réponse régit la famille esthétique, pas votre goût.
7. Un monde ininterrompu, ou des scènes distinctes ? La page entière doit-elle donner l'impression d'un seul lieu continu que le défilement traverse (worldflight, voir references/worldflight.md), ou de scènes, chapitres ou coupes séparés ? C'est la plus grande fourche structurelle unique, et c'est leur appel, pas un dispositif que vous choisissez plus tard. Proposez les deux clairement ; aucun n'est le défaut.
8. Quels assets ont-ils déjà ? Images, photos, photos de produits, kit de marque, clips d'eux-mêmes. Les assets réels ancrent le monde et réduisent le coût de génération ; la réponse décide ce qui est étalonné et encodé par rapport à ce qui est généré. "Rien" est une réponse parfaite et signifie un monde entièrement généré.

Écrivez les réponses dans <workspace>/builds/<name>/BRIEF.md avant toute planification d'acte, dans leurs mots, pas paraphrasés en prose marketing. Tout ce qui suit lit à partir de ce fichier.

BRIEF.md doit contenir, au minimum :

• Les huit sujets, avec les réponses textuelles de l'utilisateur le cas échéant et les décisions rédigées clairement étiquetées le cas de délégation.
• La courbe d'émotion. Une ligne par acte : l'émotion, puis ce qui à l'écran la provoque. Écrite avant que les actes n'existent, ajoutée au fur et à mesure que le score se remplit.
• Le pic. L'unique moment, écrit comme la phrase qu'un visiteur dirait à un ami, plus dans quel acte il se trouve.
• La phrase "dis-le à quelqu'un" complétée. "C'est le site où ___", rempli avec une expérience, pas un nom de dispositif.
• Tout silence rédigé, afin que la passe de vérification puisse le distinguer d'un défilement mort.

references/feel.md est le cahier des charges pour les quatre.

Si l'humain est vraiment injoignable et que l'exécution est entièrement autonome, rédigez BRIEF.md vous-même : répondez aux huit questions dans la voix de la marque, marquez le fichier Auto-rédigé, pas interviewé en haut, et dites-le dans le rapport final. Un brief auto-rédigé sans délégation est un pis-aller. La délégation explicite ci-dessus est un flux de travail normal et pris en charge et ne nécessite pas que l'humain soit injoignable.

Bootstrap

Environnement, pas une étape du travail. Faites-le une fois l'entretien répondu et avant l'étape 1.

Exécutez le prévol plutôt que de vérifier à la main. Il connaît les modes de défaillance qui apparaissent autrement plus tard sous forme d'erreurs trompeuses, principalement un ffmpeg dépouillé qui signale un filtre manquant comme une erreur de syntaxe dans votre commande :

node <skill>/scripts/doctor.mjs

Il signale node, une version complète de ffmpeg, Playwright et Chrome, la clé API et l'espace de travail résolu. Les échecs requis se terminent avec un code non nul. Dites clairement quels éléments manquent plutôt que de les contourner silencieusement.

L'espace de travail

Les builds et le registre d'empreintes digitales vivent dans un seul répertoire, et il est résolu, jamais supposé :

node <skill>/scripts/workspace.mjs --ensure     # l'affiche, le crée, amorce le registre

Ordre de résolution, première correspondance gagnante :

1. SCROLLCRAFT_HOME
2. le fichier .scrollcraft.json le plus proche en remontant du répertoire de travail courant, { "workspace": "..." }
3. <racine du projet>/scrollcraft, où la racine du projet est l'ancêtre le plus proche contenant un .git

Ainsi, un dossier de build est <workspace>/builds/<name>/ et le registre est <workspace>/FINGERPRINTS.md. Le registre commence vide : la porte existe pour vous empêcher de vous répéter, donc votre première build n'a rien à effacer.

Si vous conservez déjà des builds ailleurs, déposez un .scrollcraft.json à la racine de votre projet pointant vers celui-ci et rien ne bouge.

Le reste

1. KIE_AI_API_KEY, uniquement si vous générez des assets. Une build à partir des propres photos et images de l'utilisateur n'a besoin d'aucune clé et d'aucune dépense, et c'est une voie de première classe, pas un pis-aller. Confirmez le solde avec node <skill>/scripts/kie.mjs probe. Une image coûte quelques centimes et un clip de 5s coûte plus cher ; une page à six actes avec deux clips est une petite dépense, pas une grosse.
2. Un kit de marque s'il en existe un (couleurs, logo, typographie, photos de produits existantes). Si la marque a un dossier dans ce dépôt, lisez-le avant de générer quoi que ce soit, et respectez ses règles strictes. Une marque qui interdit les nombres inventés signifie pas de compteurs de statistiques, aussi beaux soient-ils.

Copiez engine/scrollcraft.js et engine/scrollcraft.css dans le dossier de build. Ne modifiez jamais le moteur par projet ; c'est le mécanisme. Thématisez-le avec des jetons et écrivez votre propre balisage.

Étape 1 : Le brief, parcours d'abord

Le sujet est à l'utilisateur de l'énoncer. Demandez-le ouvertement, en prose simple, jamais comme une liste à choix multiples fabriquée d'industries : un menu inventé les biaise et donne l'impression que vous décidez de leur entreprise à leur place.

L'étape 0 a déjà couvert l'ambiance, la séquence, l'énergie et la gamme. Ne redemandez rien de tout cela. Demandez uniquement ce que vous ne pouvez pas raisonnablement définir par défaut :

1. Qu'est-ce que c'est, et pour qui est-ce ? Une ou deux phrases dans leurs mots.
2. Que doit croire le visiteur à la fin ? La phrase unique que la page existe pour installer. Pas une liste de fonctionnalités. S'ils en donnent trois, faites-les choisir.
3. Que fait le visiteur ensuite ? Une action. Un intitulé, utilisé partout sur la page.
4. Qu'avez-vous déjà ? Logo, palette, photographie, photos de produits, images, un document de marque. Les assets réels battent les assets générés à chaque fois.
5. Direction artistique : proposez les mondes dans references/worlds.md comme un vrai choix, et dites qu'ils peuvent suivre leur propre voie.

Ensuite, écrivez le parcours avant toute autre chose : quatre à sept temps, chacun un changement dans ce que le visiteur sait ou ressent.

1  Reconnaissance   ils voient leur propre matin
2  Tension          le coût de cela, nommé clairement
3  Virage           la chose qui change
4  Substance        pourquoi cela tient
5  Gamme            ce qu'ils peuvent choisir
6  Engagement       l'action unique

Les temps sont l'épine dorsale. Les sections servent les temps ; une section qui ne sert aucun temps est supprimée, aussi belle que soit l'image. Résolvez le parcours avant de générer des assets. Montrez-le à l'utilisateur lorsque ses décisions sont nécessaires ; en cas de délégation créative explicite, enregistrez le parcours choisi et procédez dans le cadre de la portée autorisée.

Étape 2 : Grammaire, porte, puis score

Trois choses dans l'ordre, et les deux premières viennent avant toute planification d'acte. Détail complet dans references/uniqueness.md.

Choisissez une grammaire. Commencez par les huit grammaires définies et leurs contraintes. Une nouvelle grammaire est autorisée lorsque sa navigation, sa séquence, sa fin et ses interdictions explicites décrivent une structure différente ; un nouveau seul label ne rapporte aucun crédit. Le plan-séquence filmique est celui que les quatre premières constructions ont toutes utilisé, donc le choisir à nouveau signifie dire dans le rapport pourquoi les sept autres ne correspondaient pas à l'entretien. La navigation, le héros et la clôture découlent tous de la grammaire ; ils ne sont pas décidés séparément.

Inventez le geste signature. Une interaction sur mesure qui vit sur ce site uniquement, codée dans la page, pas un changement de paramètre pour un dispositif de kit. La question 5 de l'entretien est la graine. Le moteur reste intact.

Exécutez la porte d'empreinte digitale. Lisez votre registre dans <workspace>/FINGERPRINTS.md (voir L'espace de travail dans Bootstrap ; exécutez node <skill>/scripts/workspace.mjs pour afficher le chemin). La construction planifiée doit différer de chaque ligne existante sur au moins 4 des 6 dimensions : grammaire, traitement de la navigation, dispositif de héros, forme de la séquence des actes, modèle de clôture, geste signature. Quatre contre chaque ligne individuellement. Si elle échoue, modifiez le plan, pas le journal.

Écrivez la courbe d'émotion avant le tableau des scores. Une ligne par acte : l'émotion, puis ce qui la provoque. Courbe d'abord, actes ensuite, car un dispositif choisi avant l'émotion est un dispositif à la recherche d'une raison. Deux actes adjacents avec la même émotion signifient que l'un est un remplissage, et il est moins cher de le couper ici qu'après l'existence des assets. Nommez le pic dans la même passe et donnez-lui la plus grande étendue sur la page. Méthode complète dans references/feel.md.

Ensuite, attribuez à chaque temps un dispositif. Faites-le délibérément et écrivez-le sous forme de tableau :

Temps	Dispositif	Pourquoi celui-ci
Reconnaissance	scrub	La caméra se déplaçant sous la propre main du lecteur est la meilleure ouverture possible
Tension	pin + cinétique	Le copie s'assemble ligne par ligne tandis que le cadre reste immobile
Virage	reveal	Une r...