A Little Tomorrow

Inspiration

What it## Inspiration

Many 3D websites are built around spectacle first and meaning second. I wanted to create something quieter: a miniature world that feels like a living picture book, where every animation advances an emotional idea.

The visual direction combines handmade clay dioramas, soft editorial typography, and the pacing of a bedtime story.

What it does

A Little Tomorrow is a seven-chapter interactive 3D fairy tale told through one continuous scroll.

The visitor follows a small glowing creature through a sleeping world. It wakes a flower, grows a garden, warms a village, climbs the final hill, and learns that shared light is never lost.

Scrolling controls the camera and the hero’s journey. Flowers grow, windows illuminate, colours transform, particles appear, and the final world returns the kindness it received.

The experience also includes direct chapter navigation, pointer parallax, responsive mobile composition, keyboard-accessible controls, and reduced-motion support.

How I built it

The application uses React, TypeScript, Three.js, and WebGL.

Every house, flower, tree, island, cloud, prop, and character is generated procedurally in code. No external 3D models are loaded.

A single Three.js scene contains the entire world. Scroll position drives a damped master timeline that controls the camera, character movement, plant growth, window emission, particles, lighting, and background colours.

The interface uses responsive CSS, semantic navigation, scroll snapping, and locally hosted variable fonts. Vite builds a static production version, which is automatically deployed through GitHub Actions and GitHub Pages.

Challenges I ran into

The main challenge was balancing readable story cards with a detailed 3D scene. Early versions were too bright and visually flat, so I rebuilt the palette around muted storybook colours, softened the lighting, and introduced warm translucent surfaces.

Another challenge was making seven chapters feel like one continuous world. Instead of loading separate scenes, I placed every chapter along one spatial route and synchronized all transformations to the same scroll timeline.

Accomplishments that I'm proud of

Built a cohesive seven-scene world without downloaded 3D assets.
Created a continuous camera journey without cuts or loading screens.
Connected every major visual transformation to the narrative.
Made the experience responsive across mouse, touch, and keyboard input.
Added reduced-motion support and accessible chapter navigation.
Published the project using only free tools and hosting.

What I learned

Memorable 3D experiences do not require photorealism or a large asset pipeline. Strong art direction, pacing, and meaningful motion can make simple procedural geometry feel alive.

I also learned that lighting and UI restraint matter as much as model detail. The story became clearer when the interface stopped competing with the world.

What's next for A Little Tomorrow

Future versions could add an optional ambient soundscape, richer character expressions, localized story text, and a lightweight photo mode while preserving the focused fairy-tale experience. does