Terranova
An ecology website that takes shape as you scroll
Visit websiteI designed and built a website for a fictional ecological research collective, with a live 3D form and content that appears as you scroll
Make an invisible subject feel present
Terranova is a website concept for a fictional collective exploring ecology through sound. The design starts with a quiet question: how can an interface suggest the signals moving through a landscape before explaining the research behind them?
I built the opening around a translucent organic form, thin typography and a restrained grey-green palette. A glass panel presents the latest research directions, while direct navigation gives visitors a clear route into the rest of the site.
Let the page appear as the surface breaks apart
The central form is rendered live in Three.js. Its iridescent surface responds to viewing angle and pointer movement. As the visitor scrolls, the surface fades and particles spread outward, carrying the opening into the editorial sections below.
Text and links emerge through opacity and short vertical movements tied to scroll position. Moving back up reverses the reveals. Native scrolling keeps the page responsive to ordinary wheel, touch and keyboard input, and the system’s reduced-motion preference removes the moving reveal.
Build a complete place to explore the work
The homepage leads into About, Research, Projects, Journal and Contact pages. Research filters separate field studies from methods, expandable sections explain each direction, and two journal articles provide a longer reading format.
A downloadable field notebook and a short synthesized listening exercise make the concept interactive beyond the opening animation. The contact form validates a message and prepares an email draft for the visitor to review and send from their own email app.
Keep the atmosphere without making scrolling expensive
The first animated version did too much work: it copied the entire 3D scene into a second canvas and processed a large glass filter on every frame. I replaced that pipeline with one canvas and a glass treatment limited to the research panel.
The revised scene caps its rendering resolution, uses lighter geometry and particles, and reduces its idle frame rate. Rendering pauses when the introduction is offscreen, the menu is open or the tab is hidden. Content reveals use opacity and transforms, with layout measurements cached between page changes.
A working study in motion, material and editorial design
The finished site combines a live 3D introduction with responsive content pages, functional navigation and small interactive tools. Desktop and mobile browser checks covered scrolling, menu behavior, research controls and direct page access.
Terranova is a fictional collective. The research directions are illustrative and the listening exercise is synthesized; the project demonstrates interface design and development rather than scientific findings.