Le jour où un site a appris à se filmer

Tout produit qui a un site a besoin de vidéo. Une démo pour la page d'accueil, un format court pour les réseaux, une présentation pour un lancement, un extrait pour la plaquette commerciale. Chacune réclame le même après-midi : un enregistreur d'écran, un script, une voix, un logiciel de montage et beaucoup de patience.

Puis le site change. Un nouveau tableau de prix, une fonctionnalité renommée, une nouvelle image d'accueil, et la vidéo se met à raconter discrètement une autre histoire que la page qu'elle est censée montrer.

Une question revenait sans cesse. Si le site contient déjà la vérité sur le produit, pourquoi la vidéo devrait-elle être fabriquée ailleurs ?

PageToVid part d'une promesse simple. Le film vient du site en ligne, pas d'une maquette de ce site. Pas d'images d'archive déguisées en produit, pas de diapositives refaites à la main, rien à installer. Si la page le dit, le film le montre.

Cette promesse exige trois choses à la fois :

• Un vrai navigateur. Le site est ouvert, parcouru et filmé sur nos serveurs, exactement comme un visiteur le voit : chaque capture est nette et reproductible.
• Une histoire, pas un défilement. Une IA lit d'abord la page et décide de ce qui mérite d'être dit : ce qu'est le produit, à qui il s'adresse, ce qu'il promet.
• Une voix et un format. Le film est commenté, sous-titré et cadré pour l'endroit où il sera vu : un grand écran, un téléphone ou un fil carré.

Le champ de la page d'accueil paraît presque trop simple. Derrière lui, cinq étapes se passent le relais :

1. 1Lire. Un navigateur ouvre la page, en récupère le texte, les liens, les couleurs et une capture, et un modèle d'IA rédige une courte note sur le produit.
2. 2Planifier. Un second passage transforme cette note en scènes : ce que dit la voix, quelle partie de la page montrer, quel type de plan utiliser.
3. 3Filmer. Un vrai navigateur joue chaque scène sur le site en ligne, défile, survole, clique, et capture des écrans haute densité bien nets et de courts clips de mouvement.
4. 4Commenter. Une voix IA lit le script, et chaque mot est calé sur l'audio pour que les sous-titres s'allument au moment où il est prononcé.
5. 5Monter. Remotion, un moteur vidéo construit sur React, assemble écrans, clips, animations, musique et sous-titres dans le film final.

Un choix fait dès le départ compte plus qu'il n'y paraît. Les écrans nets viennent de captures haute résolution que le moteur anime, et la vraie vidéo est réservée aux moments qui demandent du mouvement, comme un survol ou un clic. C'est pour cela que le texte d'un film PageToVid reste lisible, même sur un petit téléphone.

L'idée prenait forme depuis une semaine sur un ordinateur portable, sous un nom de travail. Le 23 juin, elle est devenue PageToVid et a reçu ce qu'exige un vrai produit : un conteneur qui réunit le navigateur, les outils vidéo et le moteur de rendu, des en-têtes de sécurité et de cache, et une chaîne automatique qui vérifie, construit et met en ligne chaque changement.

Dès son premier jour, il tournait en public. La connexion est arrivée, et la page d'accueil s'est réduite à une ligne : collez une URL, appuyez sur Entrée. Très vite, cette ligne a posé d'abord une question, le format du film, avec trois cartes pour 16:9, 9:16 et 1:1, car le format change tout ce que fait l'enregistreur.

Les premiers films étaient regardables. Nous voulions mieux que regardable : nous les avons donc regardés comme un spectateur, sur un téléphone et à vitesse réelle, et nous avons ajusté ce que nous voyions.

• Un défilement serein. Le défilement avance désormais à vitesse constante, mesurée en hauteurs d'écran par seconde : une scène courte glisse aussi calmement qu'une longue, quelle que soit la longueur de la page.
• La vraie mise en page mobile. Un film 9:16 est tourné à une vraie largeur de téléphone, en haute densité, pour que le site affiche la version que voient réellement ses visiteurs mobiles.
• Une voix qui respire. La narration est un peu plus lente, sans changer de hauteur, et chaque scène et chaque sous-titre suivent son rythme.
• Des sous-titres qui ont de la place. Les scènes graphiques gardent une bande libre en bas dès que les sous-titres sont activés : textes et chiffres ne passent jamais dessous.

Ces premiers rendus nous ont donné l'habitude que nous comptons garder : rendre un vrai site, regarder le film de près, trouver la seule chose qui rompt le charme, et corriger sa cause plutôt que son symptôme. Un film correct sur un ordinateur peut être difficile à lire sur un téléphone : chaque changement est donc jugé sur un vrai rendu, dans le format où quelqu'un le regardera.

Ce blog suivra PageToVid étape par étape, de ce premier champ à tout ce qu'il deviendra, avec des mots simples et en quatre langues. Pour voir ce premier chapitre de vos propres yeux, collez votre site dans PageToVid ou parcourez les fonctionnalités.