STYLEGALLERY / STUDIESCODE + CURIOSITY / 16INDEPENDENT EXAMPLE

16 / Layered three-scene story

From far away to within.

Approach an original pale world, move around its light, then enter an observatory. The same three chapters also work as a stationary reading sequence.

Skip the long scroll track ↓
CHAPTER 01

A signal in the dark.

Begin with distance: a quiet sphere, a far horizon and a small point of light.

00 / 100
CHAPTER 1 / READING VIEW

A signal in the dark.

Begin with distance: a quiet sphere, a far horizon and a small point of light.

CHAPTER 2 / READING VIEW

Around the pale world.

Approach changes scale and light. A bounded pointer input adds depth without moving the chapter text.

CHAPTER 3 / READING VIEW

Inside the observatory.

A new environment replaces the outside view. Reading mode exposes every chapter without the camera move.

What this study teaches

A single progress evaluator blends an original SVG globe, atmospheric depth layers and an observatory interior. Document-owned scroll maps to bounded scale, translation and opacity; chapter availability changes immediately at explicit boundaries. Native view inputs replace pointer parallax and the static path exposes every chapter in ordinary flow.

Independent implementation informed by “Interactive Storytelling for the Web: Building Immersive Stories with Timelines, 3D, and Layered Scenes”, Bjørn Fjellstad, Codrops. This is newly authored code and artwork, not a recovered original project. Original SVG scene art and a browser progress controller replace the source project, generated panorama and authoring tool. No Instorier export, membership, paid image generator or 3D-provider connection is required.