6space7/autozoom-demo-scenes

Vidéos de démonstration AutoZoom

Vous êtes dans le projet de l'utilisateur. Lisez le code réel de la fonctionnalité, reconstruisez son écran en tant que composant React dans un projet Remotion, et filmez-le comme AutoZoom filme un enregistrement d'écran : la caméra zoome automatiquement sur chaque action. Les écrans construits avec du code surpassent les captures d'écran : le texte tape dans le champ réel, les lignes glissent, les boutons changent d'état, et tout reste net à n'importe quel zoom.

Fichiers de ce skill :

• scripts/setup.mjs crée le projet Remotion et l'installe (Remotion + React).
• assets/remotion-template/ est ce qui est copié : la caméra auto-zoom, la fenêtre, le curseur, les projecteurs, les superpositions, et un exemple d'écran et d'histoire. Seuls src/story.tsx et src/screens/* changent par démo.
• references/story-api.md documente chaque champ de l'histoire, les hooks d'écran et comment mesurer les positions. Lisez-le avant d'écrire une histoire.
• references/style.md est le look AutoZoom : cadre, mouvement et superpositions.

Flux de travail

1. Définir l'histoire

Convenez d'une seule chose que le spectateur doit apprendre, en une phrase (« Recherchez n'importe quelle métrique, puis partagez-la en un clic »). Limitez-vous à 6–15 secondes et 2–4 temps forts. Une seule idée par vidéo : s'il y a deux fonctionnalités, faites deux vidéos. Demandez seulement si la fonctionnalité à montrer n'est pas claire ; sinon, choisissez le flux le plus impressionnant.

2. Lire le projet

Trouvez ce que la démo montre :

• la route, la page ou le composant et ses enfants ;
• les tokens de design : configuration Tailwind, variables CSS, fichiers de thème ;
• les polices, la bibliothèque d'icônes, le logo ;
• des données d'exemple réalistes : fixtures, seeds, histoires Storybook, mocks, tests.

N'inventez jamais un look différent. La démo doit ressembler à leur produit.

3. Configurer Remotion

node <skill-dir>/scripts/setup.mjs demo     # crée ./demo et l'installe

Réexécuter est sans danger. Ajoutez demo/ au workspace du projet ou laissez-le indépendant.

4. Construire l'écran (demo/src/screens/<Nom>.tsx)

Dessinez-le dans la zone d'affichage de l'histoire (par défaut 1440 × 900, comme une fenêtre de navigateur). Choisissez la route qui correspond au projet :

• A. Importer les composants réels (projets React). Meilleure fidélité. Fonctionne quand les composants sont présentatifs. Donnez-leur des props et des données statiques, et enveloppez-les dans les fournisseurs nécessaires (thème, routeur, client de requête, i18n) avec des valeurs factices. Ne les laissez jamais effectuer des appels réseau ou lire l'authentification. Faites en sorte que les alias se résolvent et que leurs styles se chargent ; voir references/story-api.md › « Utiliser les propres composants du projet ».
• B. Reconstruire (n'importe quelle stack : Svelte, Vue, Angular, natif, ou React avec des dépendances d'exécution lourdes). Portez la page en React avec la même structure, les noms de classe ou valeurs, les couleurs, les rayons, les espacements, la police, les icônes et le texte, lus directement depuis la source. Incluez uniquement ce qui est visible à l'écran.

Dans les deux cas :

• Utilisez des données réalistes provenant du projet (noms, nombres, statuts), jamais de lorem ipsum.
• Donnez aux éléments visés par l'histoire des positions connues. Disposez-les pour pouvoir énoncer leurs boîtes, ou mesurez avec la grille de débogage (étape 6).
• Faites animer l'écran lui-même avec les hooks dans src/lib/hooks.ts (useTyped, useAfter, useProgress, usePop, useCount). Passez les numéros d'images en tant que props depuis l'histoire, afin que la chronologie se trouve en un seul endroit. src/screens/MockDashboard.tsx est l'exemple concret.

5. Écrire l'histoire (demo/src/story.tsx)

Commencez par la chronologie sous forme de commentaire, en images (fps 60) :

0–60     aperçu ; curseur se dirige vers la recherche, clique (58)
60–130   caméra zoome sur la recherche
140–260  la requête se tape toute seule ; légende 1
268      ⟩ ; les résultats se mettent à jour
280–345  caméra recule vers le résultat
...      déplacement curseur + caméra → clic → résultat → toast ; légende 2
520–600  caméra revient doucement

Ensuite, remplissez camera, cursor, clicks, keys, captions, toasts et spotlights, tous en pixels écran. Laissez rec désactivé : les superpositions dans les coins restent au-dessus de l'application lorsqu'elle est zoomée. La référence des champs se trouve dans references/story-api.md.

6. Vérifier les images fixes, puis rendre

cd demo
npx remotion still Demo out/f.png --frame=150    # regardez les images clés (lisez le PNG)
npm run studio                                   # aperçu en direct pour l'utilisateur
npm run render                                   # → out/demo.mp4

Activez debug: true dans l'histoire pour dessiner une grille étiquetée de 100 pixels sur l'écran, afin de lire les positions à partir d'une image fixe. Désactivez-la avant le rendu. Vérifiez une image fixe à chaque temps fort : le sujet est entièrement dans le cadre quand il est zoomé, la pointe du curseur se trouve sur la cible, le texte est lisible, et les superpositions ne couvrent pas l'action.

7. Remettre le résultat

Donnez à l'utilisateur le chemin du MP4 et montrez-lui une ou deux images. Optionnellement, intégrez la composition live sur leur site avec @remotion/player (voir references/story-api.md).

Règles de mouvement (le style AutoZoom)

• Caméra auto-zoom : soit toute la fenêtre (1×), soit un plan rapproché net (1.6–2.2×), jamais entre les deux : un zoom de 1.1–1.5× recadre simplement la fenêtre et donne un aspect cassé. Zoomez sur ce qui compte, maintenez, déplacez-vous directement vers l'élément suivant, et terminez à 1×. Les déplacements prennent 60–100 images ; les arrêts durent au moins 50 images. Utilisez ease: 'smooth' (par défaut) pour les déplacements et 'snap' seulement pour les arrivées rapides. Pas de flou de mouvement.
• Curseur : arrive en premier, puis clique (pression + ondulation, automatique à chaque image dans clicks), puis le résultat apparaît 2–6 images plus tard. Pendant la frappe, déplacez-le légèrement sur le côté pour ne pas cacher le texte.
• Ordre d'un temps fort : la caméra commence à bouger → le curseur arrive → clique → changement d'état → toast ou touche clavier → la légende porte le sens.
• Légendes : ce qu'un présentateur dirait, 3–6 mots par ligne, deux lignes maximum par vidéo.
• Superpositions (légendes, touches, toasts, REC) restent en dehors de la caméra : elles ne zooment pas, et ne couvrent jamais l'action.
• Retenue : une couleur d'accent, pas de confettis, pas de rotation, pas de texte rebondissant. Le produit est la star.

Checklist qualité

• Ressemble à leur produit : même police, couleurs, texte et données.
• Commentaire de chronologie en haut de story.tsx ; les numéros d'images proviennent d'un seul endroit.
• Chaque temps fort vérifié avec une image fixe ; rien d'important n'est coupé pendant le zoom ou couvert par les superpositions.
• Le curseur arrive exactement sur les cibles ; les clics précèdent les résultats.
• Texte lisible en 1080p ; légendes courtes.
• debug désactivé, et le rendu se termine sans erreur.