Créateur de sites à animation au scroll

Une phrase suffit pour un site où le scroll fait bouger la caméra : on plonge dans une scène, on en ressort, on atterrit dans la suivante, sans coupes.

Katagiri High — The Last Light, construit dans le monde Horimiya pour cette page. Faites défiler dans le cadre : trois scènes, deux raccords, un seul vol continu.

The Descent — un pont de cristal descend en spirale dans un gouffre, texte de scène et navigation visibles

The Hollow Star — une salle du trône vue depuis l'allée, titre de scène The Hollow Center

Odyssey — le Cyclope remplit la grotte, titre de scène The Cyclops

Scroll of Colossal Things — une baleine grande comme une île sous une barque, style lavis d'encre

SENGOKU — Le camp au réveil — Acte I sur trois. Le scroll fait descendre la caméra entre les bannières jusqu'aux tentes ; la page affiche SCROLL TO DESCEND, et elle le fait. — **Le camp au réveil** — Acte I sur trois. Le scroll fait descendre la caméra entre les bannières jusqu'aux tentes ; la page affiche SCROLL TO DESCEND, et elle le fait.

SENGOKU — Le champ des lames — Acte II. Aucune coupe vers le champ de bataille : la même caméra traverse le pont rouge, lances et tambours montent autour d'elle. — **Le champ des lames** — Acte II. Aucune coupe vers le champ de bataille : la même caméra traverse le pont rouge, lances et tambours montent autour d'elle.

SENGOKU — Le château blanc — Acte III. Le vol s'arrête sur le donjon, puis propose de refaire le monde. Trois scènes, deux raccords, zéro fondu. — **Le château blanc** — Acte III. Le vol s'arrête sur le donjon, puis propose de refaire le monde. Trois scènes, deux raccords, zéro fondu.

Five Realms — La porte sous la lune — Premier des cinq royaumes. La plongée commence dehors et traverse l'arche : la porte est un lieu que la caméra franchit vraiment. — **La porte sous la lune** — Premier des cinq royaumes. La plongée commence dehors et traverse l'arche : la porte est un lieu que la caméra franchit vraiment.

Five Realms — Le sentier de bambou — Deuxième royaume. Le raccord garde la porte derrière vous au lieu de dissoudre vers l'image suivante. — **Le sentier de bambou** — Deuxième royaume. Le raccord garde la porte derrière vous au lieu de dissoudre vers l'image suivante.

Five Realms — Les falaises au-dessus des nuages — Troisième royaume. Le texte et les données restent lisibles pendant que la caméra grimpe dans les nuages. — **Les falaises au-dessus des nuages** — Troisième royaume. Le texte et les données restent lisibles pendant que la caméra grimpe dans les nuages.

Homer’s Odyssey — Ithaque : le départ — Neuf scènes issues d'une seule image maîtresse : le port, les navires et la lumière appartiennent au même monde. — **Ithaque : le départ** — Neuf scènes issues d'une seule image maîtresse : le port, les navires et la lumière appartiennent au même monde.

Homer’s Odyssey — Troie : le cheval — Deuxième scène. Le raccord depuis le port est un clip généré, pas un fondu : le feu arrive avant qu'on remarque le changement. — **Troie : le cheval** — Deuxième scène. Le raccord depuis le port est un clip généré, pas un fondu : le feu arrive avant qu'on remarque le changement.

Homer’s Odyssey — La mer vineuse — Troisième scène. Les points de navigation sautent d'une scène à l'autre ; la molette balaie chaque image entre les deux. — **La mer vineuse** — Troisième scène. Les points de navigation sautent d'une scène à l'autre ; la molette balaie chaque image entre les deux.

LIVE PROOF

À voir en vrai.

Ouvre le work et utilise-le ici.

Un site au scroll est un vol, pas un diaporama.

Studio génère le monde, une image 16:9 par scène, puis les clips de caméra qui vous portent de l'une à l'autre. La page livrée est du HTML simple et du JavaScript natif : la position de scroll règle le temps de la vidéo, donc ça tourne sur téléphone, sans framework, pour le poids de trois courtes vidéos.

Des raccords, pas des coupes — Chaque liaison est générée depuis la dernière image d'un clip et la première du suivant : la jonction est identique, pas fondue.
Un seul regard sur toutes les scènes — Chaque image de scène dérive d'une image maîtresse unique : le port de la scène 1 est le même que celui de la scène 3.
Une page, pas une vidéo — Vous obtenez une URL publiée à ouvrir, forker et envoyer. Titres de scène, surtitres, lignes de données et libellés de navigation sont du HTML modifiable.

Les questions qu'on se pose avant de lancer.

Qu'est-ce qu'un site à animation au scroll ?

Une page où le scroll ne fait pas que descendre la page : il pilote une caméra. Chaque position de scroll est une image de vidéo, donc le visiteur traverse la scène à son rythme au lieu de regarder un clip.

Faut-il GSAP ou Three.js ?

Non. Le moteur est du JavaScript natif qui balaie des clips pré-rendus selon la position de scroll. Il s'insère dans un site GSAP ou Next.js, mais rien ici ne l'exige.

Combien de scènes pour commencer ?

Trois. Environ 25 Mo de vidéo en 16:9 : chargement rapide, et cela se lit déjà comme un voyage. Chaque scène de plus ajoute deux clips, environ 9 Mo.

Est-ce que ça marche sur téléphone ?

Oui. Les petits écrans reçoivent un encodage 640×360 et le balayage suit le scroll tactile ; les gros clips desktop ne sont jamais chargés.

Que demande une construction ?

Trois images, trois plongées et deux raccords, huit éléments générés. Demandez à Studio le nombre de clips et le modèle avant de lancer : la vidéo est la partie lente et payante.

Peut-on modifier les textes après coup ?

Oui. Titres, surtitres, lignes de données et libellés sont du HTML ordinaire dans la page publiée. On change les mots sans re-rendre une seule image.

Que se passe-t-il si une génération échoue ?

La construction s'arrête et indique quel clip a échoué. Elle ne comble pas le trou avec une image de remplacement : une fausse scène casse le raccord, et l'illusion avec.

Puis-je utiliser une IP existante ou mes propres visuels ?

Oui. Les scènes peuvent dériver d'une image de référence, et les mondes de cette page ont été construits dans des mondes d'IP existants. Apportez une planche de personnage ou un visuel clé si le rendu doit coller à quelque chose.

Donnez trois étapes à un seul lieu.

Studio génère les scènes, les plongées et les raccords, puis publie une page à faire défiler et à envoyer. Commencez par le port ci-dessous, ou écrivez votre propre lieu.

Créer le marché de nuit de Liyue