SIX — Exploration immersive par défilement

Que fait SIX — Exploration immersive par défilement ?

Produit une page d’atterrissage où le défilement pilote une caméra : elle plonge de l’extérieur d’une scène vers son intérieur, puis en ressort et file vers la scène suivante, en continu, sans coupure visible. Les visuels sont générés par IA (MuAPI) ; la page ne fait que parcourir une vidéo pré-rendue en fonction de la position de défilement. C’est la même technique que les pages produits d’Apple — la caméra se déplace réellement, le défilement ne fait qu’avancer le temps.

Ce que vous générez : N images de scènes → N clips « plongée » → N-1 clips « connecteurs » qui relient les scènes consécutives de manière transparente → un moteur de défilement portable qui joue toute la chaîne comme un seul vol.

La règle qui fait ou défait le résultat : les coutures doivent être identiques image par image. Lisez La chaîne sans couture avant de générer un connecteur. Se tromper sur ce point est la cause d’échec la plus fréquente et produit un « saut » visible entre les scènes.

Ne supposez pas de framework frontend. Le moteur de défilement dans resources/scrub-engine.js est du JS vanille autonome (il construit son propre DOM + injecte son propre CSS dans un conteneur que vous lui fournissez, et s’expose sous le nom mountSIX), donc il s’intègre dans du HTML simple, Next.js, Vue, une page servie par Python, n’importe quoi. La valeur de cette compétence réside dans le pipeline MuAPI, les prompts et la méthode de couture — pas dans le framework.

Plan des fichiers : SKILL.md (ce fichier) → scripts/pipeline.md (bash copier-coller pour toute la génération) + scripts/knockout.py (suppression d’arrière-plan) → references/prompts.md (liste de contrôle d’accueil + tous les modèles de prompts) + references/muapi-model-roster.md (correspondance vérifiée modèle/tier/endpoint — lisez-le si quelque chose ci-dessous nécessite une vérification) → resources/scrub-engine.js + resources/index-template.html (moteur prêt à l’emploi + page minimale).

---

Étape 0 — Amorçage

1. CLI MuAPI. Si muapi n’est pas dans $PATH, installez-le selon le gestionnaire de paquets habituel de votre environnement, puis exécutez muapi auth configure (écrit MUAPI_API_KEY / son fichier de configuration — interactif, vous ne pouvez pas exécuter le flux d’authentification lui-même s’il nécessite un navigateur). Confirmez son fonctionnement avec muapi auth status. Il n’y a pas de commande documentée pour le solde de crédits en CLI ; si un lot se bloque avec une erreur de crédits, vérifiez directement le tableau de bord muapi.ai.
2. ffmpeg / ffprobe dans $PATH (extraction d’images et encodage).
3. Un outil d’image pour la suppression d’arrière-plan si vous voulez des scènes flottantes : PIL (python3 -c "import PIL"), ou cwebp/sips. Optionnel — voir Étape 3.
4. jq dans $PATH — utilisé tout au long du pipeline pour analyser les réponses --output-json et extraire les URL des ressources téléchargées.
5. Mises en garde : macOS fournit bash 3.2 (pas de declare -A) ; n’utilisez pas de tableaux associatifs dans les scripts. Les générations MuAPI prennent des minutes — exécutez-les toujours en arrière-plan (détachées) et interrogez (--async + muapi predict wait <request_id>), jamais un appel bloquant au premier plan. Les endpoints vidéo/image de MuAPI acceptent des URL hébergées, pas des chemins de fichiers locaux — c’est l’inverse de la convention d’Higgsfield, et le problème de migration le plus fréquent : chaque image de référence locale (une image de scène, une image de bordure extraite) doit d’abord passer par muapi upload file <path> --output-json --jq '.url', et l’URL renvoyée est ce qui est passé à --start-image/--end-image/--image-urls. Les noms exacts des options et les options de résolution/qualité ne sont pas documentés de manière uniforme pour tous les modèles — vérifiez avec muapi video from-image --help / muapi image generate --help avant de lancer un lot, et consultez references/muapi-model-roster.md pour ce qui a déjà été vérifié.

---

Étape 1 — Interviewer l’utilisateur

Le sujet est à l’utilisateur de l’énoncer — demandez-le comme une question ouverte en prose simple, jamais un choix multiple fabriqué. Une liste d’industries inventée les biaise et donne l’impression que vous décidez de leur activité à leur place ; laissez-les répondre avec leurs propres mots (leur vraie entreprise, celle d’un client, ou n’importe quelle idée). Réservez le choix multiple structuré (AskUserQuestion dans Claude Code ; une question simple ailleurs) pour les choix véritablement énumérables et à moindre enjeu ci-dessous — direction artistique et approche de la charte graphique — et même là, indiquez qu’ils peuvent suivre leur propre voie (« Autre »). Ne demandez que ce que vous ne pouvez pas raisonnablement définir par défaut. Couvrez :

1. Sujet (demandez ouvertement, pas en choix multiple) — « De quoi ce monde devrait-il parler ? Votre entreprise, celle d’un client, ou n’importe quelle idée — un mot ou une phrase suffit. » Capturez le secteur/produit + un argumentaire en une ligne (ex. « une entreprise de bubble tea, de la feuille à la dernière gorgée »), et un nom de marque s’ils en ont un ; sinon, vous en proposerez un ci-dessous.
2. Charte graphique — proposez trois voies, choisissez-en une :
   • Importer depuis une URL : récupérez la page vous-même (récupération web) et lisez la palette visible, le nom et le ton — aucun importateur de charte graphique MuAPI dédié n’est documenté, donc cette étape consiste en votre extraction, pas en un appel CLI. Dites-le clairement si l’utilisateur s’attend à une commande unique.
   • L’utilisateur vous donne palette + nom + ton directement.
   • Vous proposez une palette + un nom et les laissez approuver. Capturez 4 à 6 valeurs hexadécimales nommées, un nom d’affichage et un ou deux mots de ton.
3. Direction artistique — par défaut « diorama en argile low-poly mat doux, isométrique, maquette à effet tilt-shift, lumière chaude. » Proposez des alternatives (papier à plat, jouet brillant, pâte à modeler, nuit néon, photoréalisme architectural). Ce qui est choisi devient le préambule de style partagé, réutilisé textuellement dans chaque prompt de scène (c’est ce qui rend le monde cohérent).
4. Le parcours (sections) — les scènes ordonnées que la caméra survole. Proposez un ensemble dérivé de la propre chaîne de valeur du sujet et laissez l’utilisateur le modifier. 5 à 7 fonctionne bien. Exemple avec le boba : fermes → cuisine des perles → boutique phare → livraison → place communautaire → le produit vedette. Chaque section nécessite : une courte description du sujet (ce qu’il y a DANS le diorama), un accroche, un titre, une ligne de corps, et 0 à 3 pastilles. La dernière section est généralement le produit vedette + l’appel à l’action.
5. Version mobile (bêta) — DEMANDEZ TOUJOURS ; ne générez jamais les deux en silence. Posez la question sous forme de choix à deux options (AskUserQuestion dans Claude Code ; une question simple ailleurs) : « Voulez-vous aussi une version optimisée pour mobile ? Le support mobile est en bêta — le mécanisme de défilement est natif pour le desktop ; sur téléphone, vous obtenez des encodages plus légers et un renforcement du moteur, mais le format portrait recadre le cadre 16:9 et les appareils bas de gamme peuvent encore saccader. » Options : « Desktop uniquement » / « Desktop + mobile (bêta) ». L’avertissement bêta doit être communiqué à l’utilisateur, pas seulement sous-entendu. Ce que la réponse détermine :
   • Oui → produisez les encodages mobiles -m.mp4 (Étape 6) et connectez clipMobile/connectorsMobile (Étape 7) ; exécutez l’AQ mobile complète (Étape 8). Si le sujet focal d’une scène est décentré, proposez l’option de secours du héros 9:16 (crédits MuAPI supplémentaires — dites-le).
   • Non → ignorez les encodages mobiles et le câblage. Le renforcement téléphonique du moteur (fusion des demandes, amorçage iOS, CSS safe-area) est toujours activé — ce n’est pas une « version mobile », c’est juste que la page ne casse pas lorsqu’un téléphone la visite — donc une version desktop uniquement se dégrade toujours gracieusement.

Le modèle vidéo n’est pas une question d’entretien — par défaut, utilisez seedance-2-first-last-frame (tier global) en silence. Si l’utilisateur exprime une préférence, respectez-la uniquement si elle peut verrouiller une couture image par image — c’est-à-dire qu’elle accepte une image de début et, pour les connecteurs, une image de fin aussi (references/muapi-model-roster.md contient la liste vérifiée). Cette compétence ne livre que des sorties sans couture, donc un modèle qui ne peut pas verrouiller une couture est refusé avec une explication en une ligne, pas substitué — utilisez plutôt un modèle de la liste.

Gardez le mécanisme de défilement fixe (vol continu) — c’est l’intérêt de la compétence. Voir references/prompts.md pour la liste de contrôle d’accueil et la structure de copie.

---

Étape 2 — Générer les images des scènes

Une image par section, partageant toutes le même préambule de style pour la cohésion. Modèle par défaut gpt-image-2-text-to-image (net, excellent en illustration isométrique ; renvoie un arrière-plan uni blanc, parfait pour les « îles » de diorama flottant). Utilisez nano-banana-pro si le brief est chargé en personnages/dessins animés, ou google-imagen4-ultra pour le style architectural photoréaliste (voir references/muapi-model-roster.md pour la table complète des modèles d’image).

Forme du prompt (modèles complets dans references/prompts.md) :

<PRÉAMBULE DE STYLE, identique à chaque fois>. Sur un fond <arrière-plan> uni simple avec une ombre de contact douce. <NUANCES HEX>. Pas de texte, pas de lettres, pas de logos, centré, 3:2. Sujet : <ce qu’il y a DANS ce diorama>.

• Lancez tous les N en parallèle, détachés. Commande par scène :

  muapi image generate --model gpt-image-2-text-to-image --prompt "$(cat scene_i.txt)" \
    --aspect-ratio 3:2 --async --output-json scene_i.job.json
  id=$(jq -r '.request_id' scene_i.job.json)
  muapi predict wait "$id" --json > scene_i.json
  

• L’URL de résultat se trouve sous .result_url (ou .output_url/.url — la clé exacte n’est pas documentée de manière uniforme ; inspectez une réponse et ajustez) dans la sortie de l’interrogation. Téléchargez-la avec curl.
• Une génération peut échouer de manière transitoire — relancez celle-ci individuellement ; ne redémarrez pas le lot.
• Vérifiez les images avant de continuer. Elles doivent se lire comme un monde cohérent (même angle, palette, lumière). Si l’une d’elles est hors style, régénérez-la avec muapi image generate à nouveau (un nouvel appel, même préambule) — n’utilisez pas muapi image edit avec une image précédente comme référence pour « verrouiller » le style ; le mode d’édition fusionne/clone la pièce réelle de cette référence plutôt que de simplement correspondre à son style.

Voir scripts/pipeline.md pour le script de lot exact.

---

Étape 3 — (Optionnel) Faire flotter les scènes

Si vous voulez que les dioramas flottent sur un arrière-plan atmosphérique au lieu d’être dans une boîte unie, supprimez l’arrière-plan plat vers la transparence avec scripts/knockout.py (remplissage par propagation connectée aux bords — préserve la couleur intérieure qui correspond à l’arrière-plan, ex. murs crème). Encodez ensuite en webp. Si vous préférez rester simple, faites simplement en sorte que l’arrière-plan de la page ait la même couleur que l’arrière-plan de la scène et ignorez cette étape.

Ces images servent également de posters vidéo et de solutions de repli pour le chargement différé, donc conservez-les.

---

Étape 4 — Architecture de la caméra (choisissez-en une — cela fait ou défait la sensation)

La façon dont la caméra se déplace entre les scènes est le levier de qualité le plus important. Deux formes ; choisissez selon l’esthétique.

Modèle vidéo — choisissez-EN UN pour toute la chaîne

Cette compétence ne livre que des sorties sans couture, donc les seuls modèles utilisables sont ceux qui peuvent verrouiller une couture image par image : chaque clip enchaîné doit accepter --start-image, et les connecteurs ont également besoin de --end-image. Cette capacité — pas la préférence — est la règle de sélection. Preuves complètes dans references/muapi-model-roster.md ; résumé ici :

Modèle	tier	image début/fin	Notes
seedance-2-first-last-frame (par défaut)	global	✓ / ✓	--mode first-last — une image = un segment/plongée (pas de fin), deux images = un connecteur. Le même modèle couvre les deux rôles.
seedance-2-first-last-frame-fast	global	✓ / ✓	Même modèle, variante file d’attente rapide — le tier de prévisualisation bon marché. Exécutez toute la chaîne ici d’abord pour valider les coutures avant de dépenser pour le rendu complet.
seedance-2-vip-first-last-frame	vip	✓ / ✓	Solution de secours NSFW / filtre de contenu — la bande de filtre VIP diffère et est documentée pour tolérer les visages humains réalistes dans les références, contrairement à global/chinese. Utilisez-la pour un clip récalcitrant, pas pour la chaîne par défaut.

Le tier chinese n’est pas dans la liste : first-last (conditionnement à deux images) n’est pas disponible sur celui-ci, seulement l’i2v à image unique — donc il ne peut pas maintenir une couture. Ignorez tout ce dont les entrées média sont à image unique pour la même raison (il ne peut que conditionner une génération, pas continuer un plan).

Règles :

• Un modèle+tier pour tous les clips enchaînés. Chaque moteur de rendu/tier a son propre caractère de mouvement/couleur/grain ; les mélanger en milieu de chaîne maintient la position continue (les images s’enchaînent toujours) mais le changement de caractère de rendu se lit comme un saut subtil. La seule exception autorisée est la solution de secours NSFW pour un seul clip récalcitrant (Problèmes connus) — un léger changement de caractère sur un connecteur de 5s vaut mieux qu’un connecteur manquant.
• Par défaut, utilisez seedance-2-first-last-frame sur global ; respectez la préférence exprimée par l’utilisateur uniquement si le modèle est qualifié (verrouillage image par image). Dans le cas contraire, dites-le et utilisez un modèle pris en charge — ne livrez jamais une version non sans couture pour satisfaire une demande de modèle.
• Les scripts du pipeline prennent le modèle/tier en tant que $VMODEL/$VTIER avec les options par tier déjà décomposées (scripts/pipeline.md).

A) Prise de vue continue vers l’avant — RECOMMANDÉ pour le réaliste / la visite guidée

Une seule caméra qui ne fait que glisser vers l’avant, de la première à la dernière scène, en une seule prise. Générez les segments séquentiellement : segment 0 à partir de l’image de la scène 0 (glissez vers l’avant dedans) ; puis le --start-image de chaque segment = la DERNIÈRE IMAGE RÉELLE du segment précédent (extrayez avec ffmpeg, téléchargez-la), invitez « continuer à glisser doucement VERS L’AVANT dans [scène i], jamais en reculant » (ou un mouvement expressif de mi-segment sous le contrat de transfert de mouvement — voir Grammaire de la caméra ci-dessous), et pas de --end-image — une image de fin d’un plan d’ensemble large force la caméra à reculer, ce qui est la cause n°1 des saccades. Extrayez la dernière image de chaque segment pour alimenter le suivant. Résultat : chaque couture est identique image par image et la caméra ne recule jamais. Il n’y a pas de connecteurs (passez l’Étape 5) — les segments SONT le parcours. Câblez chaque segment comme un clip de section avec connectors: [] et un petit crossfade (~0,08). Même sans --end-image, les segments arrivent toujours dans des pièces distinctes (le prompt guide le contenu). Coût : strictement séquentiel (impossible de paralléliser) et plus lent ; les intérieurs sont plus susceptibles de déclencher le filtre de contenu, donc prévoyez des relances (3 tentatives/segment).

B) Plongée + connecteur aérien — uniquement pour les mondes diorama / miniature / vue de Dieu

Un clip de « plongée dans chaque scène » + un connecteur qui remonte vers le haut et vers l’extérieur et survole la scène suivante (Étape 5). Le retrait inverse la direction de la caméra à chaque couture (plongée vers l’avant → retrait vers l’arrière). Dans un monde miniature/diorama, cela se lit comme un « zoom arrière » intentionnel.

[...]