Comment fonctionne GEN MOTION

Un tour = un fichier JSON qui scénarise ce que GEN MOTION doit filmer. L'outil est totalement agnostique au projet : il n'y a pas de "liaison" formelle entre un projet et GEN MOTION. Le seul lien c'est le champ baseUrl du tour : Puppeteer va ouvrir cette URL dans Chromium et exécuter les steps en séquence (sections, overlays, clicks, scrolls…).

1. 1
   Configurer ElevenLabs (1 fois)

   Hub → bouton Setup en haut à droite → colle ton API key + Voice ID. Stocké dans ~/.webgen-motion/config.json. Survit aux reboots, partagé entre tous tes tours.

2. 2
   Créer un tour

   Hub → bouton Nouveau tour → nom + id auto-slug + format (16:9 desktop, 9:16 mobile). Le fichier tours/<id>.json est créé et tu atterris dans l'éditeur.

3. 3
   Lier ton projet via baseUrl

   Dans le tab Script, édite le tour JSON pour renseigner baseUrl (ex : https://acme.com), brand (displayName / domain / tagline pour l'intro/outro du compose), et optionnellement voiceId pour une voix clonée spécifique à ce projet.

4. 4
   Définir les étapes (sections, overlays, clicks…)

   Ajoute des steps dans la liste : sections colorées, overlays texte, scrolls, clicks (avec sélecteurs CSS du site cible). Chaque step peut porter un texte de voix off.

5. 5
   Capture → Voice off → Compose

   Lance les 3 actions dans l'ordre dans leurs tabs respectifs. Le clip final atterrit dans ~/.webgen-motion/tours/<id>/final.mp4.

{
  "id": "acme-landing",
  "name": "Acme · Landing",
  "description": "Tour rapide de la landing.",
  "estimatedSec": 30,
  "startPath": "/",
  "baseUrl": "https://acme.com",          // ← LE LIEN avec ton projet
  "format": "16:9",
  "brand": {
    "displayName": "Acme",
    "domain": "acme.com",
    "tagline": "by Smooth & Design"
  },
  "voiceId": "<voix-clonée-acme>",        // override la config globale
  "steps": [
    {
      "type": "section",
      "categoryId": "branding",
      "title": "Acme",
      "subtitle": "Le SaaS qui simplifie tout",
      "voiceover": "Bienvenue chez Acme.",
      "dwellMs": 2500
    },
    { "type": "wait", "dwellMs": 1500 },
    {
      "type": "overlay",
      "text": "Notre promesse",
      "position": "center",
      "dwellMs": 2800
    },
    {
      "type": "click",
      "selector": "[data-testid='cta-signup']",
      "dwellMs": 2500,
      "voiceover": "Inscris-toi en un clic."
    },
    { "type": "scroll", "to": 800, "dwellMs": 1800 }
  ]
}

Schéma complet : src/lib/types/tour.ts. Types de step disponibles : section, goto, click, type, select, hover, scroll, wait, overlay, keypress.

1. Ouvre ton site dans Chrome
2. ⌘⌥I (Mac) ou F12 → DevTools
3. Clique l'icône inspect en haut-gauche
4. Survole l'élément à cliquer → clique dessus
5. Clic droit sur la balise dans l'arbre DOM → Copy → Copy selector

~/.webgen-motion/
├── config.json                 # Setup wizard (creds ElevenLabs)
├── audio/                      # Library musique de fond
│   ├── index.json
│   └── <slug>-<epoch>.mp3
├── vo-cache/                   # TTS cache (par voix + texte)
│   ├── <sha1>.mp3
│   └── <sha1>.alignment.json
└── tours/
    └── <tourId>/
        ├── manifest.json
        ├── section-NN-<cat>.mp4
        ├── voiceover.mp3
        ├── voiceover-alignment.json
        └── final.mp4

Tout reste sur ta machine. Survit aux reboots. Jamais commit dans git.