Alam Atelier School
Project Overview
The website of Alam Atelier, a nature-based school. The whole site is one story: a child plants a seed, and as you scroll, it grows into a clematis in full bloom - the flower the school chose to stand for its children.
Our Scope
- UX: how the story unfolds with the scroll, section by section.
- Slicing: turning the illustrated design into responsive, layered pages.
- Frontend: scroll scrub, parallax and every animation in the story.
- A collaboration with a partner agency, who designed the UI and illustrations.
What Stands Out
Three kinds of animation work together. 2D frame-by-frame sequences bring the child and the garden to life, the plant grows with CSS and JavaScript as you scroll, and its branches and leaves move with inverse kinematics (IK), so they sway and bend naturally instead of sliding as flat images.
01See It Move
A Plant That Grows as You Scroll
From the first seed to the clematis in bloom, every section is driven by the scroll, on desktop and phone.
02Scroll Scrub & Parallax
One Plant, Six Chapters
Each section of the school's story is a stage of the plant's growth, with illustrated layers moving at different speeds for depth.
-
01Plant the seed
The garden opens in layers, and a child kneels to plant a seed - a frame-by-frame sequence played by the scroll.
-
02The first leaves
Our Philosophy: the seedling rises with the text, its first leaves unfolding as you read.
-
03Branches that move
Our Educators: the plant branches out, with leaves that bend and sway through IK instead of sitting still.
-
04Tools of the garden
Our Program: a watering can, a ladder and garden tools slide in on their own layers.
-
05Life arrives
The Environment: sunlight spreads across the page and bees fly around the plant.
-
06In full bloom
Contact: the story ends with the clematis in full bloom, beside the enquiry form.
03Responsive
The Same Garden, Smaller
The illustrated layers and the growing plant are rearranged for phone screens, so the story still works one section at a time.
Let's Build The Engine
Bring the idea, or just the problem. We'll shape the experience and build the engine behind it.
