Un moteur de scrollytelling conçu pour l’édition en direct.

Principe

Le moteur part d’un document Scrollmade. Une story contient des scènes, chaque scène contient des blocs, et chaque bloc peut porter sa propre timeline. Le rendu public lit ce document et produit du HTML indexable.

L’éditeur ne manipule donc pas un DOM fragile. Il modifie les champs du document, compile la timeline, puis affiche le résultat dans un aperçu en direct. Cette séparation garde l’édition, les données et le rendu indépendants.

Sticky natif

Une section sticky Scrollmade se compose d’un panneau persistant, d’étapes narratives et de pistes. Les pistes décrivent des propriétés comme l’opacité, la translation, l’échelle ou le temps média. Au scroll, le moteur active aussi l’étape courante et la couche visuelle associée.

Pour un bloc animation, la hauteur de scroll est un réglage du bloc. Le moteur de rendu garde la scène épinglée sur cette distance, convertit la progression en temps virtuel, puis alimente les clips vidéo, Lottie, 3D ou MapLibre. Les panneaux de texte ont aussi une position et une durée sticky dans la même timeline.

{
  "kind": "animation",
  "scrollHeight": 3600,
  "scrollHeightMobile": 4600,
  "pin": { "offsetTop": 96, "scrub": true },
  "triggers": [
    { "id": "video", "start": 0, "end": 850 },
    { "id": "lottie", "start": 850, "end": 1900 }
  ],
  "layers": [
    { "kind": "scrollpack", "timeline": { "start": 0, "duration": 1350 } },
    { "kind": "lottie", "timeline": { "start": 850, "duration": 1050 } }
  ],
  "panels": [
    { "title": "La vidéo donne le rythme", "timeline": { "start": 0, "duration": 1100 }, "stickyDuration": 700 },
    { "title": "Lottie habille la séquence", "timeline": { "start": 1100, "duration": 1000 }, "stickyDuration": 720 }
  ]
}

Compilation timeline

Le compilateur convertit une durée narrative en hauteur de scroll. Chaque calque et chaque panneau deviennent un segment avec début, fin, progression et hauteur. Le moteur sait ainsi quand activer un clip sans déduire son état depuis la mise en page.

Vidéo native sans lecteur propriétaire

Les vidéos utilisent un média HTML5 natif : source, poster, sous-titres, durée et contrôles explicites. Le moteur peut synchroniser le temps de lecture avec la progression du scroll, tandis que la story reste lisible sans lecteur propriétaire.

Moteurs avancés

Les blocs MapLibre, Three.js, Lottie, vidéo et ScrollPack suivent le même modèle Scrollmade. Chaque bloc expose ses médias, images clés et réglages de lecture au lieu d’enfermer la logique dans un composant opaque. Le contrôleur transmet la progression, l’image courante, le segment actif et les variables CSS aux adaptateurs.

Flux de production documenté

1. Création depuis un modèle ou un document structuré.
2. Édition WYSIWYG du contenu, des étapes et des pistes.
3. Compilation en plan de rendu stable.
4. Vérification de l’accessibilité, du poids des médias, du SEO et des contenus de repli.
5. Préparation des métadonnées et fichiers nécessaires à la publication.

Le studio réunit structure, aperçu, inspecteur et timeline éditable. Pendant la bêta fermée, l’accès à l’éditeur est réservé aux personnes invitées.