Experimental web experience
Frontier Atlas
Three subjects. Three ways to explore them.
Three interactive studies about the web, one second, and Earth’s 4.54-billion-year history. Each uses a different visual idea, but they share one clear entry point.
- Type
- Self-initiated field-study collection
- Disciplines
- Direction · interaction · editorial · creative development
- Runtime
- React · Three.js · GLSL · Web Audio
F01 / The provocation
Make the interaction carry the idea.
The hard part was not making three striking opening scenes. It was making each interaction explain its subject, then making the three projects feel like one collection. The experience also needed a useful version for smaller screens and lighter devices.
Collection thesis
“The interaction had to explain the subject, not sit on top of it.”
- 01 / MediumPlatform as ecology
- 02 / MomentDuration as field
- 03 / PlanetMatter as archive
Three different ideas, one clear collection.
The studies did not need the same look. They needed the same structure: a clear opening, an interaction tied to the subject, and a documented conclusion. The Atlas gives them one entry point while keeping each project distinct.
F03 / Platform as ecology
The Web, Alive
Particles react to the visitor across four chapters about CSS, GPU rendering, type, and human input. Instead of reading about the web as a system, the visitor can push it, disturb it, and watch it respond.
- Subject
- The web as a living material
- Visitor action
- Push and disturb the field
- Structure
- Four linked chapters
F04 / Duration as field
One Human Second
One second is usually too small to notice. This study slows it down and compares what the body, planet, networks, and atmosphere do in the same interval. The globe keeps it as one accumulating moment instead of a set of slides.
- Subject
- What shares one second
- Visitor action
- Explore one accumulating timeline
- Range
- Body · planet · networks · atmosphere
F05 / Matter as archive
Deep Time
Earth’s history is hard to grasp as a list of dates. One continuous core lets the visitor move from the present back to the planet’s formation without losing their place. The scale keeps the major shifts readable across 4.54 billion years.
- Subject
- Earth’s full history
- Visitor action
- Scroll one continuous core
- Range
- Present to 4.54 billion years ago
F06 / Interaction
Each interaction explains the subject.
The studies look different, but they work the same way: the visitor changes a live model, the model responds, and the source material stays close by. The interaction becomes part of the explanation instead of decoration.
Input
The visitor changes the model.
Scroll, pointer, and touch move the same state, so the interaction feels continuous instead of triggering separate effects.Sound
Sound supports the state.
Optional sound responds to the motion and density already on screen. It adds context without taking control away from the visitor.Reading
The sources stay close.
Labels and references remain readable alongside the visual experience, so the work does not ask the visitor to take the spectacle on faith.01 / Living field02 / Planetary second03 / Physical archiveF07 / How it works
The effects sit on top of a readable page.
The text, sources, and navigation load first. Rendering, interaction, and sound are added afterward. Visitors can still follow the idea on smaller devices, slower hardware, or with motion reduced.
How the experience is built
Content first.
Effects second.
The page carries the meaning. Rendering, interaction, and sound make it more vivid without becoming the only way to understand it.
- Public collection
- 1
- Interactive studies
- 3
- Mobile input
- Touch
- Sources in context
- 25
Field 01 / Living field
Field 02 / Planetary second
Field 03 / Physical archive
- Readable page
- Live rendering
- Scroll and touch
- Optional sound
- Same idea without effects
If a visual effect is unavailable, the chapter still makes sense.
- 01
The page explains the subject, keeps the sources close, and gives the visitor a clear reading order before any effect loads.
- 02
Live rendering gives each study its own visual model without replacing the page beneath it.
- 03
Scroll and touch change the same state, so the experience stays understandable across devices.
- 04
Sound is optional and follows what is already happening on screen.
F08 / Mobile
Mobile keeps the idea, not every desktop control.
On a smaller screen, the extra controls come out and the visual field gets simpler. The subject, core interaction, chapter order, and sources stay. It feels like the same project without pretending a phone is a desktop.
Frontier Atlas / Mobile
Same idea.
Less
machinery.
The mobile version keeps the chapter, the live subject, and the interaction that matters. Everything else gets quieter.
Live subject · clear reading · controls made for touchOpen the live experience ↗- Live subject
- Still interactive
- Reading
- Argument and sources stay
- Touch
- Controls fit the screen
Live mobile view · 390 × 844 authoring reference
One live collection with three finished field studies.
There are no business metrics attached to this self-initiated project. The result is the work itself: a public collection, three distinct experiences, and a structure that can support more studies later.
- Live collection
- 1
- One entry point explains the set and lets visitors choose where to begin.
- Finished field studies
- 3
- Each subject has its own visual model and way to interact.
- Sources in context
- 25
- References sit beside the claims and visuals they support.
- Mobile experience
- Touch
- The core idea and interaction remain on smaller screens.
How it holds together
The idea still makes sense when an effect is turned off.
- Headings, navigation, and sources remain normal page content
- Motion can be reduced without losing the chapter
- Sound begins only when the visitor asks for it
- Each study has its own route for reading and sharing
Frontier Atlas is a self-initiated project, so there are no client revenue or audience numbers to report. The collection root is live. The three clean chapter URLs still need their final release rewrite, so this case study links to the collection rather than presenting those routes as finished.
Frontier Atlas / live collection