Simulateur de démontage (Teardown simulator)
Une machine, une page HTML hors ligne : un modèle construit en code dans des unités réelles, un solveur sous forme de fonctions pures d'une seule entrée, des panneaux en direct, un bouton par sous-système, une visite automatique, un passage critique, un film enregistré à 60 ips avec une bande sonore notée, et une étape de publication facultative.
Règles
- Référence d'abord. Avant de construire, demandez ou trouvez une vue en coupe, une photo ou un clip. Pas de référence, pas de construction.
- N'inventez jamais de nombres en silence. Chaque nombre est sourcé ou signalé comme une estimation, avec son origine.
- Confirmez d'abord le périmètre. Les constructions lourdes utilisent beaucoup de Claude Code : convenez de la machine, des séquences, du film ou pas de film.
- La publication nécessite un oui explicite, à chaque fois.
- Sur l'hôte : uniquement au niveau utilisateur, pas de sudo, laissez les services de cluster tranquilles, les longs rendus dans tmux avec des journaux.
Choisissez une bonne machine
Une entrée mobile (angle de vilebrequin, course 0..1, vent, temps) et des nombres publiés réels. Bons départs : dérailleur de vélo, échappement de montre (4 Hz), différentiel de voiture, point de chaînette de machine à coudre, bras de pelle mécanique. Évitez les machines avec de nombreuses entrées indépendantes ou des dimensions secrètes.
Anatomie du simulateur
- Machine — construite en code dans des unités réelles. 2. Modèle — un solveur, des fonctions pures d'une seule entrée. 3. Panneaux — diagrammes en direct à partir du même modèle. 4. Boutons — isoler/couper/montrer seul par sous-système, vues, curseurs. 5. Fenêtre — le sol/la scène montre ce que dit le solveur. 6. Visite — visite automatique du curseur ; toute entrée rend le contrôle ; 25 s de silence le redonne.
Installation et exécution (sur <hôte>)
npx skills add elvarofficial/teardown -g -a claude-code
cd ~/.claude/skills/teardown && npm install && npx playwright install chromium
# nécessite Node >= 20, ffmpeg, python3
mkdir -p ~/3d-studio/{projets,out,logs,fumée}
cd ~/3d-studio/projets/<machine>
tmux new -s <machine> 'claude 2>&1 | tee ~/3d-studio/logs/<machine>.log'
# dans Claude Code : /teardown ... (jamais --dangerously-skip-permissions)
Test rapide : node ~/.claude/skills/teardown/sims/build.mjs cessna-live et ouvrez le HTML depuis teardown-out/dist/.
Workflow (remplacez les [crochets])
0. Brief
Remplissez templates/brief.md (référence, entrée unique, nombres réels, pièces) et confirmez le périmètre.
1. Construction (Build)
/teardown Build [le train d'atterrissage principal du Cessna 337] en simulateur 3D interactif. Référence jointe : [un dessin en coupe du train]. Construisez-le en code dans des unités réelles : [pièces]. Avant de dessiner quoi que ce soit, écrivez le modèle sous forme de fonctions pures d'une seule entrée : [course de 0 à 1]. Utilisez les nombres réels : [la crémaillère parcourt 201 mm, le pignon a 32 dents au module 4 mm, les jambes tournent exactement à 180°]. Vérifiez-les à la main et montrez-moi la vérification. Si vous n'êtes pas sûr qu'un nombre soit réel, dites-le et indiquez d'où il vient. Chaque pièce, chaque panneau et chaque étiquette lit à partir de ce seul modèle. Rien n'est animé manuellement.
2. Console
Disposez une console autour de la machine à 1600×900 : le titre et le nombre principal en direct en haut à gauche, en grand : [régime moteur en tr/min]. Des diagrammes en direct qui bougent avec la machine : [levée de soupape sur 720° de vilebrequin, diagramme PV]. Un panneau schématique qui redessine le mécanisme en 2D à partir du même modèle. Un bouton par sous-système : isoler, couper, montrer seul. Des vues caméra sous forme de boutons : [héros, face, côté, dessus, intérieur]. Des annotations avec de fines lignes de repère. Chaque panneau se redessine à partir de l'état de l'image. Aucun nombre à l'écran n'est tapé.
3. Aspect (Look)
Style : un modèle d'étude propre sur un studio pâle. Fond clair, ombres douces sur un sol invisible, une couleur d'accent pour la pièce en cours de fonctionnement : [couleur d'accent]. La machine remplit 60 à 70 % de la vue. Les pièces sombres sont brillantes, les chemises en verre, la rugosité du métal au moins 0,45. Les pièces quasi blanches reçoivent un fin contour à l'encre ou un sol plus foncé. Choisissez la caméra pour le mécanisme : [vue 3/4] si la vue de face se réduit à un treillis.
4. Critique (Critic)
Avant de me montrer quoi que ce soit : 1. Rendez une image fixe à chaque temps de la visite et lisez chacune pour : une pièce qui en traverse une autre, une pièce flottant hors de son support, une étiquette couvrant ce qu'elle nomme, un nombre en désaccord avec la pose. 2. Parcourez chaque transition par pas de 0,2 s pour détecter les sauts. 3. Corrigez les collisions avec un nombre dans le bloc de paramètres, ne les cachez jamais avec la caméra. Dites-moi ce que vous avez vérifié et ce que vous avez corrigé. Montrez-moi les images fixes.
5. Pilotage (Drive)
La visite se joue toute seule avec un curseur appuyant sur les boutons : [temps de la visite]. Tout clic, glissement, molette ou touche rend le contrôle au visiteur ; 25 s de silence le redonne. Faites glisser pour orbiter, molette pour zoomer, [touche] masque les panneaux. Réchauffez chaque shader avant la première image. Testez sur un GPU intégré avec des niveaux de qualité : pas d'AO, rapport de pixels inférieur, ombres plus petites, panneaux toutes les deux images.
6. Enregistrement (Record)
Faites de render(t) une fonction pure du temps sur [20 s]. Dessinez chaque image à 60 ips, 1920×1080 dans Chrome sans tête, et pipez-la vers ffmpeg en H.264 yuv420p avec faststart. Donnez-moi un contact sheet de chaque temps.
7. Bande sonore (Score)
Composez-la en code sur la même timeline : [accords Am9 à 92 bpm, un coup sur chaque temps moteur, un clic par pression de bouton, un souffle montant sous la traînée de la manette des gaz]. Masterisez à -14 LUFS, crête vraie sous -1 dB, et multiplexez-la dans la vidéo.
8. Publication (Publish)
Obtenez un HTML sous 1 Mo (les grands modèles vont dans des fichiers frères). Fabriquez une carte de prévisualisation 1200×630 à partir de la meilleure image, avec des URLs d'image absolues. Déployez sur [Vercel / hôte] seulement après mon accord.
9. Cassez-la (Bonus)
Ajoutez un curseur pour [vent 0–15 m/s] et exécutez le modèle en direct avec lui ; montrez l'effet sur les mêmes panneaux.
Leçons apprises
- Gardez la page sous 1 Mo : une page de 15,9 Mo a tué la carte de lien X ; 967 Ko l'a corrigée.
- GPUs intégrés : les niveaux de qualité (pas d'AO, rapport de pixels inférieur, ombres plus petites, panneaux toutes les deux images) ont fait passer une construction de 15 ips à 75 ips.
- Les images fixes rattrapent les collisions que le mouvement cache. Exécutez toujours le passage critique.
- Corrigez les collisions dans le bloc de paramètres, jamais avec la caméra.
Livrable
Dossier avec : <machine>.html (hors ligne, <1 Mo), rapport de critique (templates/critic-report.md) avec images fixes, contact sheet, <machine>.mp4 (60 ips, -14 LUFS), la vérification manuelle des nombres avec sources/drapeaux, et une carte de prévisualisation si publication.
Crédits
Workflow et prompts par Elvar (@elvar_official), « How I Turn Any Machine Into a 3D Simulator You Can Take Apart » (X, 2026-10-30). Exécute la compétence Teardown d'Elvar, github.com/elvarofficial/teardown (MIT), construit sur whaleyxbt/claude-motion (MIT).