YuukiFST/stageshow

Que fait stageshow ?

Interface produit miniature : une interface crédible, encadrée dans son espace, sous forme d'une image fixe ou d'une courte animation dans laquelle une chose se produit. Le spectateur reconnaît l'écran et voit ce qui se passe.

L'idée centrale

Elle ressemble à un vrai produit, simplifié pour ce dont le spectateur a besoin, cadré avec intention, et chaque mouvement a une cause.

Cinq façons dont cela échoue :

• Trop chargé. Du texte réel dans chaque ligne, des nombres partout, tout est dense. Plus il y a de détails, plus cela semble généré.
• Wireframe. Deux blocs gris et un bouton. Construit trop petit, ou dépouillé de ce qui le rendait reconnaissable.
• Encadré. Une fenêtre entière réduite à une carte avec des marges égales : une capture d'écran collée, pas une image de produit.
• Plat. Chaque objet a le même poids dans la même carte bordée. L'œil n'a nulle part où se poser.
• Fade. Une fenêtre grise avec un curseur, quoi que dise le brief. Le style et l'énergie du brief (un plan, du verre sur de la couleur, une Dynamic Island, une mascotte) sont le point central ; prenez ce qui est demandé et construisez-le selon les règles, comme le fait examples/hero-demo avec sa popup tapée et son satellite terminal (un satellite est un second objet plus petit, un reçu, un téléphone ou une carte de détail, chevauchant le bord du hero).

La solution : un écran complet et structuré en gris calmes, des mots réels uniquement pour ce qui concerne l'histoire, des lignes de remplissage pour le reste, de l'espace pour respirer, un recadrage qui place l'œil là où se trouve l'histoire. Simplifiez les mots, pas le contexte. Un coin vide, un vide sous une liste, des lignes étalées pour remplir un panneau, une fenêtre flottant sur un plateau (un arrière-plan ou un champ teinté derrière elle) : inachevé, pas calme.

Ce sont des illustrations conçues avec soin, pas de l'automatisation de navigateur : a.click() dessine la pression du curseur, a.set() change la scène.

À quel point pousser

Construisez-le comme un designer produit construit une page de lancement sur laquelle il sera jugé. Les exemples de référence (Gold) dans examples/ sont la barre à atteindre, pas une simple référence : si le vôtre est plus vide, plus plat ou plus petit que le gold le plus proche, c'est la correction prioritaire. Ensuite, regardez le cadre comme le ferait le designer le plus exigeant que vous connaissez, celui qui capture la seule chose qui cloche et renvoie un « c'est quoi ça ? » : un point décalé de son avatar, une unité sur sa propre ligne, une poignée sous l'île dynamique, du texte touchant une carte. Si vous pouvez imaginer cette capture, vous avez trouvé la prochaine correction.

Flux de travail

La majeure partie de la qualité est décidée avant tout code. Rédigez d'abord le plan : où se situe la scène, l'objet focal, l'action, le résultat, ce qui peut être laissé de côté.

1. Support et lieu. Fixe ou animation (boucle, une fois visible, ou au survol). La page, son fond, sa largeur. Concevez à la taille à laquelle il sera vu, environ 720 × 340 pour un hero à côté de texte (hero-demo), 900 à 1100 de large pour un hero pleine largeur (linear), 400 × 300 pour une carte, affiché à l'échelle 1:1 ; jamais en dessous d'environ 320 de large pour une démo, bien qu'une tuile bento ou une carte satellite puisse être plus petite. Toute démo pouvant tenir dans une colonne de téléphone livre un design compact à la largeur de la colonne (358), une refonte pas un tassement (references/framing.md, Petits formats et la page). Une grille de tuiles est un ensemble : planifiez-la avec references/bento.md.
2. Aspect. Avec le code ou le site du produit à portée de main, mappez ses tokens à ceux du kit (references/looks.md) ; si le développeur demande ses propres composants, utilisez-les à l'intérieur de la scène au lieu des petites pièces du kit. Sinon, un thème (clair, sombre, plan, verre), une palette (accent, mono) et une fidélité : minimal se compose uniquement de barres, standard comporte des mots là où ils ont du sens et des barres ailleurs, realistic contient du contenu réel partout. Par défaut : clair, accent, standard ; passez en realistic à l'échelle du hero, pour un produit réel nommé, ou pour une fixation dont le sujet est une liste ou une page. Écrivez le texte de remplissage une fois avec Text filler et la fidélité décide. Les icônes propres du produit, son chrome réel, le contenu qui le rend reconnaissable. Un brief avec un style (kawaii, papier, une couleur d'affiche) reçoit ce style en entier, toujours construit selon ces règles.
3. L'histoire. Sa forme (references/motion.md, Histoire) : ce que l'on ressent en l'utilisant, un flux, ou ce que le système fait. Trois à cinq temps forts et un résultat, 10 à 16 secondes. Pas de mouvement de curseur que vous ne puissiez expliquer. Les données ne reviennent jamais en arrière en vue sans raison. Entre une histoire plus riche et un cadre plus calme, choisissez le cadre.
4. Commencez par un exemple. Trouvez l'exemple gold le plus proche (le tableau Gold ci-dessous) et filmez-le (node scripts/film.mjs "<preview>/?capture=<gold>" --select '#example' --still --out gold.png ; npm run dev sert le preview). Copiez son dossier dans votre projet comme point de départ ; ne le réécrivez pas d'un coup d'œil. La boucle la plus rapide : copiez-le dans examples/<votre>/ ici, où le preview le détecte et ?capture=<votre> le filme, puis déplacez-le dans l'hôte lorsqu'il passe et corrigez son chemin d'import du kit. Gardez sa structure : la taille de la scène, le recadrage et le dépassement, les tailles de lignes et de polices, l'espacement, les temps forts du script, les pièces du kit. Maintenant, lisez references/craft.md en entier : il est court et contient les règles d'image fixe que le gold ne peut pas vous montrer, les cas que votre gold ne contient pas par hasard. Remplacez ensuite son aspect et son contenu par le produit du brief : les tokens de l'étape 2, les icônes, le chrome et les mots propres du produit. Une copie qui ne fait que changer le nom n'est pas terminée : elle doit ressembler au produit du brief, pas à celui du gold. Si aucun gold ne raconte votre histoire, choisissez en deux parties : d'abord la disposition (choisissez-la dans le tableau de references/framing.md ; chaque disposition nomme son exemple), et copiez cet exemple même si son histoire diffère ; ensuite, empruntez le mouvement pour vos temps forts à l'exemple dont l'histoire est la plus proche, et construisez ce qui manque dans le même style. Cadrez ensuite : recadrez au panneau dans lequel l'histoire se déroule, jugé dans le recadrage final visible (references/framing.md contient les règles et le tableau des dispositions). La forme courte : une gouttière, une pleine ou bien plus ; seul le remplissage dépasse ; ce qui s'ouvre reste dedans ; les fenêtres gardent leur forme ; la page est le fond, donc pas de plateau sous un hero sur une page blanche ou sombre et pas de fenêtre entière avec de l'air sur quatre côtés ; unframed seulement lorsque le développeur le demande ; pas de coins morts. Filmez une image fixe aux deux largeurs à côté de celle du gold ; si la vôtre est plus vide, plus plate ou plus encadrée, corrigez le cadre avant tout mouvement.
5. L'écran. Comptez les chaînes réelles, généralement 3 à 7 (references/craft.md, Retenue) : un budget pour les mots, pas pour les éléments. Construisez avec les tokens du kit, Bar, Text et Row. Ajustez le texte de chaque contrôle avant qu'il ne bouge. Marquez ce que le curseur touche avec data-target et data-cursor ; mesurez avec rect(), jamais de valeurs en dur.
6. Chorégraphiez. L'API Act. Gardez ce qui apparaît monté et basculez-le pour que les sorties soient animées (Bubble et Fly se passent explicitement le relais). Animez la relation, pas seulement l'objet : une nouvelle ligne entraîne les lignes en dessous, une surface qui se redimensionne n'étire jamais son texte. Les temps forts se chevauchent, les groupes sont décalés, le résultat tient, la boucle se termine là où elle a commencé ou se réinitialise avec une cause visible.
7. Répétez. Définissez d'abord poster : la plupart des gens ne voient que ce cadre (une vignette, un mouvement réduit, une capture d'écran), c'est donc le temps fort qui raconte l'histoire tout seul, jamais une image prise en plein changement, avec le résultat laissé à l'écran plutôt que rangé (references/motion.md, Histoire). Ensuite, filmez la boucle, pas seulement une image fixe : la planche contact à la largeur affichée et à 390, et parcourez chaque pression, menu, morphose et la jointure de la boucle (references/rehearse.md). Une image fixe ne peut pas montrer un pop. Lisez chaque cadre, corrigez d'abord le défaut visible le plus important (cadrage, puis hiérarchie, puis mouvement, puis finition), re-filmez. Ensuite, tenez-le à côté du gold le plus proche et répondez aux paires de composition complète et de style dans references/teaching.md sous forme de questions sur votre image fixe (sur quoi l'œil se pose-t-il en premier, et est-ce le résultat ? une fenêtre, une tuile ou un appareil mène-t-il clairement ?) ; tout non est le défaut le plus important. film.mjs --gate se terminant par répétition réussie est nécessaire, pas suffisant. Ensuite, effectuez la dernière passe dans references/rehearse.md : une revue à l'œil neuf (references/review.md) et REHEARSAL.md à côté du composant (template dans references/verify.md, Remise) : le gold que vous avez copié, ce que vous avez changé, ce que vous n'avez pas vérifié.

Défauts qui reviennent à chaque tour, chacun avec sa règle ; vérifiez-les avant de remettre :

• Contenu qui se substitue au lieu de se déplacer (references/motion.md, Changement de texte et valeurs).
• Barres grises où l'œil se pose ; le remplissage appartient aux bords (references/craft.md, Retenue).
• Un plateau derrière la fenêtre, ou une fenêtre flottante avec de l'air sur quatre côtés ; la fenêtre ou le téléphone remplit au moins deux tiers de la scène et touche un bord (references/framing.md, règle 5 et Petits formats et la page).
• Bandes vides, contrôles coupés et ombres (references/craft.md, Retenue ; references/framing.md, règle 4).
• IA générique et logos inventés : paillettes, violet, une lettre dans un carré coloré (references/craft.md, Icônes et logos).
• Lignes chargées et insertions inégales (references/craft.md, Retenue et Espacement et alignement).
• Longues pauses et une réinitialisation sans cause (references/motion.md, Boucles).
• Une sélection qui n'est pas sous la barre en I (references/motion.md, Glissés et sélections).
• Une barre d'état ou un indicateur d'accueil dessiné à la main ; le Phone dessine les deux (references/craft.md, Chrome et appareils).
• Un montant centré avec son signe (references/craft.md, Espacement et alignement).

Exemples

Filmez le plus proche avant de commencer (étape 4). Les exemples gold sont la barre de qualité ; les études de produit servent à emprunter une interaction, jamais l'identité d'un autre produit ; les fiches d'échantillons sont des catalogues, pas des compositions. Exécutez tout avec npm install et npm run dev. teaching/ contient des paires mauvais/bon (references/teaching.md) pour diagnostiquer un problème ; les moitiés mauvaises ne sont jamais des points de départ.

Gold

Besoin	Exemple	Ce qu'il faut apprendre
Image fixe ou carte de fonctionnalité	static-card	Hiérarchie calme, un recadrage serré, un satellite, des mots réels uniquement sur le client sélectionné, ses voisins et le total
Fixe sombre	dark-bento	Un signal dit une fois ; l'art de l'album en fait une application musicale
Hero animé, un geste	hero-demo	Cinq temps forts, cibles nommées, une annotation, un terminal qui s'avance
Chorégraphie, sans curseur	payout-flow	Arrivées lentes qui se chevauchent, temps de lecture, un résultat qui tient
Contenu changeant sur place	choreography	Pistes conservées, masques doux, dépendances temporelles
Réponse IA	ai-chat	La question envoyée, Réflexion, la réponse qui arrive en streaming avec sa hauteur, sources en dernier ; pas de paillettes, pas de violet
IA avec cartes	ai-cards	Une carte à choix multiples répondue et conservée comme trace, une carte d'options s'ouvrant dans le fil, réservée depuis son propre bouton
Validation de formulaire	form-error	Une erreur sur le champ qui l'a causée, corrigée en le réparant, puis le bouton confirme sur lui-même
Glisser pour réorganiser	reorder	Une ligne soulevée par sa poignée, les autres faisant de la place, déposée en position
Défilement de graphique	chart-scrub	Un trait fin et un point qui suivent le pointeur, la valeur du titre défilant vers le jour en dessous
Édition dans un tableau	table-edit	Une cellule éditée sur place, puis le total qu'elle alimente roule un temps plus tard
Chargement vers contenu	loading	Un squelette à la géométrie propre du contenu, lignes se résolvant de haut en bas, chrome réel partout
Hero sombre	dark-hero	Profondeur par des surfaces étagées sur du noir, une couleur éclairée, un statut qui change sur sa propre pastille
Collaborateurs en direct	presence	Chaque personne d'une couleur partout, les noms chevauchant leurs curseurs, le travail montré dans les propres marques du document
Histoire système	subscriptions	Une puce vole dans une ligne, MRR roule, une deuxième scène est la réinitialisation
Gros plan	close-up	Un contrôle à 1,4x avec le chrome de sa fenêtre, la ligne entière, un grand curseur pour correspondre
Beaucoup d'un seul	many-of-one	Une grille d'une seule chose sur chaque bord, une tuile au point par la profondeur, la seule avec des mots
Recadrage fondu	fade-crop	Une fenêtre qui s'estompe à son pied, sur du remplissage, au lieu de sortir d'un bord
Panneau sur produit	panel-annotation	Un panneau de paramètres sur la marge du produit, un seul leader du paramètre à ce qu'il a changé
Fenêtres superposées	overlap	Une carte devant une fenêtre, son bord sur la ligne de la barre latérale de la fenêtre
Cartes empilées	stacked-cards	Deux composants à une largeur, un petit écart, le plus bas hors du bas
Coins opposés	opposite-corners	Une tuile bento : texte en bas à gauche, le produit suspendu au coin supérieur droit
Pile inclinée	tilted-stack	Une pile de papier lâche, petits angles alternés, seule la carte du dessus a des mots
Puce de coin	corner-chip	Une petite puce centrée sur le coin d'une fenêtre, à moitié à l'extérieur
Monochrome	monochrome	Produits d'autres entreprises alignés, en niveaux de gris, estompés au pied
Rangée de fenêtres	window-row	Sessions côte à côte à une hauteur : mise au point par profondeur, voisins coupés par la scène, seul le remplissage est recadré
Fenêtre et téléphone	device-pair	Un tableau de bord et un écran de verrouillage racontant un seul événement ; le téléphone chevauche la marge, jamais la figure
Objets liés	story	Une facture, un plan, un connecteur, des totaux roulants
Glisser dans un calendrier	calendar	Une semaine peuplée, un événement focal, un soulèvement mesuré
Glisser librement	freeform-drag	Décalage de saisie, une grille mesurée, un emplacement de dépôt qui s'enclenche
Application téléphone	phone-touch	Une carte s'ouvre dans son écran comme un seul objet, et la boucle se replie
Dynamic Island	dynamic-island	Une forme noire, son contenu une couche séparée
Messages	messages	Compositeur, saisie, accusés de réception, durée de vie d'une bulle
Curseurs	cursors, cursor-morph, cursor-resize	Cinq styles, types basés sur les éléments, bords et coins de redimensionnement, pas de curseur du tout
Annotations	annotations	Leaders, dimensions, flux et une cible mobile ; references/annotations.md
Grille de fonctionnalités	bento	Un hero, une fenêtre, une statistique, un objet, un diagramme
Grille quadrillée sombre	ruled-bento	Règles partagées et imagerie technique
Grille grand public	staggered-bento	Tuiles décalées, art graphique, objets physiques
Grille héroïque menée par l'image	hero-grid	Différents fonds

…

[tronqué pour la traduction]