The front of this site is one painted lake, and every tab is a season. Books is summer, Web is fall, Workshop is winter, Play is spring. Click a tab and the lake turns: about seven seconds, with the swap hidden in the darkest moment, so the change feels like time passing rather than a page loading. This is version two. The first one worked, but it wasn't robust enough to keep building on.
Drawn in code
Everything is SVG and code. The trees, the mountains, the water, the moon. There's a night mode with stars and fireflies, and six levels of weather, from drizzle to a tempest and from flurries to a blizzard. Rain drips off the headline and snow settles on it.
How it's built
- Paint the lake in code
Everything is SVG and code: the trees, the mountains, the water, the moon. The scene file alone runs about 2,876 lines.
- Make every tab a season
Books is summer, Web is fall, Workshop is winter, Play is spring. A seven-second change hides the swap in darkness, so it feels like time passing rather than a page loading.
- Add night and weather
A night mode with stars and fireflies, and six levels of weather: drizzle, shower, tempest; flurries, snow, blizzard. Rain drips off the headline and snow settles on it.
- Send in the visitors
33 kinds of wildlife visit from 14 animal shapes plus Marley's own rig. Some are rare; hidden taps trigger rocks, a fish jump and the eagle, and the fisherman's boat sails to a hidden beach.
- Give every view a link
Words added to the address open the lake that way: 55 share links, listed in the trigger guide at the bottom of the page.
- Tune it on a phone
Tested on an iPhone and Safari the whole way: dropping will-change, a Safari fix for the SVG filters, a spyglass camera in place of the tilt camera, and reduced motion respected in 15 files.
The visitors
Then the visitors. There are 33 kinds of wildlife visit, built from 14 animal shapes plus Marley, who has her own rig: a buck walking out of the trees, a bear on the shore, a wolf howling on winter nights, a fox sniffing at the headline. Some are rare. Some come when you tap the right rock. An eagle dives for a fish, and if you tap the fisherman's boat he sails you to a hidden beach.
Anyone can say they care about detail; a lake that keeps its frame rate in a blizzard on a phone shows it.
Every view has a link. Add words to the address, like winter, night or blizzard, and the lake opens that way. There are 55 of them in the trigger guide at the bottom of the page.
?winter+night
?beach
?blizzardThe work nobody sees
Most of the work nobody sees. I tested on an iPhone the whole way, and the winter night scene ran at 12 frames a second. Dropping one CSS performance hint, will-change, took it to 56. The first load went from 319 KB to 238. Safari needed its own fix for the SVG filters, and on phones a spyglass replaced the tilt camera. If you've asked your device for less motion, 15 different files listen.
What I learned: the scene is the portfolio. Anyone can say they care about detail; a lake that keeps its frame rate in a blizzard on a phone shows it.
Build log
The first version worked, but it wasn't robust enough to keep building on.
Rebuilt as one lake where every tab is a season; 105 commits touch the main site.
The year was set to start in summer, and Lab became Play.
A spyglass camera replaced the gyro tilt camera.
Dropping will-change took the winter night from 12 to 56 fps; first load went from 319 KB to 238 KB; Safari got its own SVG filter fix.
The case study note: one lake, four seasons.