Que fait Fable Studio ?
D'une phrase naît une pièce achevée : un seul fichier HTML, prêt à l'emploi, beau, sonore et conçu pour un enregistrement d'écran en mode portrait.
Cette compétence prend en charge les parties sujettes aux erreurs. assets/starter.html contient une structure de base éprouvée (rendu avec effet lumineux, caméra, son, écran de démarrage, mode d'enregistrement, contrôle de film et de voyage dans le temps). Vous n'écrivez que la scène, c'est-à-dire le contenu. Ainsi, toute votre attention reste sur la conception et l'histoire.
Déroulement
1. Choisir le mode
| Mode | Quand | Instructions | Modèle | Exemple |
|---|---|---|---|---|
| Monde | Un lieu, un objet, une ambiance à explorer. « Construis… », « scène », « monde », « rue », « paysage » | modes/monde.md | assets/scene-monde.js | exemples/monde-tokyo.js |
| Film | Une histoire avec un début et une fin. « Court métrage », « animation sur… », « raconte », « autoportrait » | modes/film.md | assets/scene-film.js | exemples/film-point.js |
| Voyage dans le temps | Une évolution au fil du temps. « Histoire de… », « évolution », « de X à aujourd'hui », « les 30 prochaines années » | modes/voyage-temps.md | assets/scene-voyage-temps.js | exemples/voyage-temps-humanite.js |
En cas de doute, choisissez Monde. Ne demandez pas. La valeur de cette compétence réside dans le fait qu'une seule phrase suffit.
2. Lire
Lisez dans cet ordre, et uniquement ceci :
references/moteur.md(tous les composants de la structure de base et les pièges de la bibliothèque)- les instructions de votre mode
- l'exemple de votre mode. Il montre le niveau d'exigence en densité et soin. Reprenez la méthode, pas le sujet.
Si nécessaire : references/visuels.md (recettes pour éclairage, brouillard, néon, eau, particules), references/audio.md (musique et bruitages), references/styles.md (apparences prêtes à l'emploi), references/performances.md (fluidité sur mobile).
3. Développer la phrase en un plan
L'utilisateur écrit une phrase. La qualité naît du fait que vous la transformez vous-même en un plan complet avant d'écrire du code. Fixez mentalement :
- Image clé : Quelle image doit rester en mémoire ? Tout le reste la sert.
- Ambiance et palette : deux à trois couleurs dominantes plus une couleur de fond sombre. Peu de couleurs donnent un rendu plus noble.
- Éclairage : D'où vient-il ? Qu'est-ce qui brille par soi-même ?
- Profondeur : Premier plan, milieu, arrière-plan. Brouillard et échelle des tailles.
- Mouvement : au moins trois couches qui se déplacent indépendamment (par exemple pluie, circulation, panneaux).
- Caméra : un mouvement intentionnel, pas un cercle aléatoire.
- Son : une ambiance sonore plus une musique adaptée à l'ambiance.
- Interaction ou dramaturgie : Que se passe-t-il en tapant (Monde) ? Comment se déroule l'arc narratif (Film) ? Quelles sont les étapes (Voyage dans le temps) ?
Ne montrez pas ce plan à l'avance. Construisez-le.
4. Construire
Écrivez uniquement la scène dans un fichier scene.js, à partir du modèle de votre mode. Ensuite :
python3 scripts/construire.py scene.js <nom>.html
Le script insère la scène dans la structure de base, vérifie la syntaxe et avertit des éléments qui n'existent pas ici. Vous ne modifiez jamais la structure de base elle-même. Si quelque chose vous manque, construisez-le dans la scène.
Si vous ne pouvez pas exécuter de commandes : donnez assets/starter.html complètement et inchangé, et remplacez uniquement le marqueur /*__SCENE__*/ par votre scène.
Règles strictes, car le résultat doit fonctionner partout (y compris comme Artifact dans l'application Claude) :
- Un seul fichier. Pas d'images, polices, modèles ou sons externes. Tout est créé dans le code.
- La seule bibliothèque est three.js r128, déjà chargée dans la structure de base. Il n'y a pas de modules supplémentaires comme OrbitControls, EffectComposer ou Loader. La caméra et l'effet lumineux sont fournis par la structure de base.
- Pas de
localStorage, pas deimport, pas de deuxième<script>. - Les textes à l'écran dans la langue de l'utilisateur.
5. Niveau de qualité
Avant de soumettre, parcourez cette liste. Chaque point a une raison : sans lui, le résultat ressemble à une démo technique plutôt qu'à une œuvre finie.
- Image immédiate : Derrière l'écran de démarrage, la scène est déjà visible. Rien n'est noir ou vide.
- Profondeur : Le brouillard est réglé, il y a des objets proches et lointains.
- Lumière mesurée : Quelques surfaces très lumineuses (luminosité 2 à 4), le reste reste sombre. Si tout brille, rien ne brille.
- Trois couches animées plus le mouvement de la caméra.
- Densité : La scène est composée de centaines de pièces (via
FS.inst), pas d'un espace vide avec cinq cubes. - Son : Ambiance sonore et musique démarrent avec le bouton de démarrage, assez silencieux pour être agréables.
- Format portrait : L'image clé est au centre de l'écran et fonctionne également en 9:16.
- Titre, sous-titre et indication de contrôle sont définis via
FS.setup. - Faits (uniquement Voyage dans le temps et films documentaires) : Chaque chiffre et chaque date sont exacts. Les prévisions sont marquées comme prévisions.
6. Tester
Si vous pouvez exécuter des commandes, testez réellement :
node scripts/tester.js <nom>.html
Cela lance la page dans un navigateur invisible en mode paysage et portrait, signale les erreurs et enregistre deux images. Examinez les images et corrigez jusqu'à ce qu'il n'y ait plus d'erreur et que l'image corresponde au niveau de qualité. Si aucun navigateur n'est disponible, relisez votre scène ligne par ligne en vous référant à la section « Pièges » dans references/moteur.md. Les erreurs les plus fréquentes sont les fautes de frappe dans les noms de variables et les fonctions qui n'existent pas dans three.js r128.
7. Soumettre
- Dans l'application Claude : en tant qu'Artifact HTML, pour qu'il s'exécute immédiatement et puisse être partagé.
- Dans Claude Code : en tant que fichier dans le dossier du projet, avec l'indication de l'ouvrir dans un navigateur.
La réponse est brève : une phrase sur ce qui a été créé, les contrôles (glisser, défiler, taper, touche R ou bouton « 9:16 » pour le mode d'enregistrement) et trois suggestions de variantes, chacune étant une phrase que l'utilisateur peut simplement renvoyer.
Si la page affiche plus tard un message d'erreur rouge, l'utilisateur vous l'envoie. Corrigez la cause dans la scène et reconstruisez.
Mode d'enregistrement
Le bouton « 9:16 » ou la touche R passe au format portrait sans éléments de contrôle. En mode Monde, la scène défile alors automatiquement ; en mode Film et Voyage dans le temps, elle recommence depuis le début. Ainsi, avec un enregistrement d'écran, on obtient directement une vidéo pour Reels, TikTok ou Shorts. Mentionnez-le dans votre réponse, c'est pour beaucoup le véritable objectif.