Scroll Animation Website Builder

One prompt builds a site where scroll moves the camera — dive into a scene, fly out, land in the next, no cuts.

Katagiri High — The Last Light, built in the Horimiya world for this page. Scroll inside the frame: three scenes, two seams, one continuous flight.

The Descent — a crystal bridge spiralling down a chasm, scene copy and nav on screen

The Hollow Star — a throne hall seen down the aisle, scene copy reading The Hollow Center

Odyssey — the Cyclops filling a cave, scene copy reading The Cyclops

Scroll of Colossal Things — a whale the size of an island under a small boat, ink-wash style

SENGOKU — The War Camp — Act I of three. Scroll drops the camera through the banners to the tent line; the page prints SCROLL TO DESCEND and means it. — **The War Camp** — Act I of three. Scroll drops the camera through the banners to the tent line; the page prints SCROLL TO DESCEND and means it.

SENGOKU — The Field of Blades — Act II. No cut to the battlefield — the same camera crosses the red bridge, spears and drums arriving around it. — **The Field of Blades** — Act II. No cut to the battlefield — the same camera crosses the red bridge, spears and drums arriving around it.

SENGOKU — The White Castle — Act III. The flight ends on the keep, then offers Fly the world again. Three scenes, two seams, zero fades. — **The White Castle** — Act III. The flight ends on the keep, then offers Fly the world again. Three scenes, two seams, zero fades.

Five Realms — Moonlit Mountain Gate — Realm one of five. The dive starts outside the arch and passes through it, so the door is a place the camera goes. — **Moonlit Mountain Gate** — Realm one of five. The dive starts outside the arch and passes through it, so the door is a place the camera goes.

Five Realms — Whispering Bamboo Path — Realm two. The connector carries the gate behind you instead of dissolving to the next still. — **Whispering Bamboo Path** — Realm two. The connector carries the gate behind you instead of dissolving to the next still.

Five Realms — Cliffs Above the Cloud Sea — Realm three. Copy and stat chips stay readable while the camera climbs through cloud. — **Cliffs Above the Cloud Sea** — Realm three. Copy and stat chips stay readable while the camera climbs through cloud.

Homer’s Odyssey — Ithaca: The Departure — Nine scenes from one master still, so the harbour, the ships and the light belong to a single world. — **Ithaca: The Departure** — Nine scenes from one master still, so the harbour, the ships and the light belong to a single world.

Homer’s Odyssey — Troy: The Horse — Scene two. The join from the harbour is a generated clip, not a crossfade — fire arrives before you notice the edit. — **Troy: The Horse** — Scene two. The join from the harbour is a generated clip, not a crossfade — fire arrives before you notice the edit.

Homer’s Odyssey — The Wine-Dark Sea — Scene three. Nav dots jump between scenes; the wheel still scrubs every frame in between. — **The Wine-Dark Sea** — Scene three. Nav dots jump between scenes; the wheel still scrubs every frame in between.

LIVE PROOF

See it live.

Open the work and use it here.

A scroll site is a flight, not a slideshow.

Studio generates the world, one 16:9 still per scene, and the camera clips that carry you between them. The page that ships is plain HTML and vanilla JavaScript: scroll position sets video time, so it runs on a phone, needs no framework, and weighs about as much as three short videos.

Seams, not cuts — Each connector is generated from the last frame of one clip and the first frame of the next, so the join is identical rather than crossfaded.
One look across scenes — Every scene still is derived from a single master image, so the harbour in scene one is the same harbour in scene three.
A page, not a video — You get a published URL you can open, fork and send. Scene titles, eyebrows, stat rows and nav labels are plain HTML you can edit.

Questions people ask before building one.

What is a scroll animation website?

A page where scrolling drives a camera instead of just moving the page. Each scroll position is a frame of video, so the visitor flies through the scene at their own speed instead of watching a clip play.

Do I need GSAP or Three.js?

No. The engine is plain JavaScript that scrubs pre-rendered clips by scroll position. It drops into a GSAP or Next.js site if you already have one, but nothing here requires either.

How many scenes should I start with?

Three. That is roughly 25 MB of video at 16:9 — quick to load and already reads as a journey. Every extra scene adds two clips, about 9 MB more.

Will it work on a phone?

Yes. Small screens get a 640×360 encode and the scrub follows touch scrolling; the heavy desktop clips never load there.

What does one build involve?

Three stills, three dive clips and two connectors — eight generated assets. Ask Studio for the clip count and the model before it starts, because video is the slow, paid part.

Can I edit the copy afterwards?

Yes. Scene titles, eyebrows, stat rows and nav labels are plain HTML in the published page. Change the words without re-rendering a single frame.

What happens if a generation fails?

The build stops and tells you which clip failed. It will not fill the gap with placeholder art, because a fake scene breaks the seam and the illusion with it.

Can I use an existing IP or my own art?

Yes. Scenes can be derived from a reference still, and the worlds on this page were built inside existing IP worlds. Bring a character sheet or a key visual if the look has to match something.

Give one place three stops.

Studio generates the scenes, the dives and the seams, then publishes a page you can scroll and send. Start with the harbour below, or write your own place.

Build a Liyue night market site