Five websites that takes us on a journey across the Earth

We often take the world that we live in for granted as we get lost in our day-to-day. But there is always something awe-inspiring when we see the Earth from a different perspective, a view that makes us feel small yet comforted in the company of others. Given the opportunity to pause and reflect, we might just get to see the beauty in this shared universe, even more so when viewed from a planetary scale.

From channel-surfing with an astronaut to simulating what your city looked like 20 million years ago, we’re focusing on sites that simulate different aspects of the Earth for this month’s rendition of Double Click. Enjoy!

Stink Studios: amessagefrom.earth

Equipped with interactive modules, a real-time ambient music generator and a charming scroll-driven narrative, A Message from Earth is a collaboration between Stink Studio and WeTransfer to celebrate the 40th anniversary of the Golden Record Project that was included aboard the Voyager spacecraft in 1977. “The visual language of the site takes inspiration from the original Golden Record project — a 12-inch gold-plated copper disk containing sounds and images selected to portray the diversity of life and culture on Earth that is currently aboard the Voyager spacecraft,” says Viv Greywoode, Stink Studio’s design director.

Composed of six chapters, the entire site was built end-to-end in house, featuring a serverless methodology in order to handle user-generated content at scale. “A Message from Earth is an interactive site that reimagines the music, film, art and literature that would appear on the Golden Record if it was launched today,” Viv says. Navigating through sounds, music, images and writing, users are invited to hover their mouse, browse through photographs and contribute their own creations as a way to explore a collage of contemporary human experiences, a screenshot of the creative state of the world right now.

Languages and tools used:

“The site is mostly JavaScript, and the ‘Soundbox’ and ‘Starchat’ modules use the Web Audio API to control audio in real-time.”

Andrew Wong and James Thompson: astronaut.io

An old gem from the weirder days of the internet has us floating in space, a hundred miles above the surface of the Earth. As a 3D model of the Earth revolves in the background, you see fleeting moments of people on Earth. “Today, you are an astronaut,” the landing page says. “You peer through your window and this is what you see. You are people watching.” Superimposed on the 3D model are short clips from YouTube, snippets of people’s lives in the form of unnamed and unedited videos. Pressing spacebar mutes the clips and plays Claude Debussy’s Claire de Lune that accompanies your trip across Earth. Built by Andrew Wong and James Thompson, the site gives the impression of channel surfing through people’s uncensored lives.

“The design is meant to evoke the feeling of watching Earth through a telescope from space. There is minimal control like pause or resume to let the viewer focus on experiencing the stream of different scenes,” says Andrew. “An algorithm is used to find videos that are more likely unedited, unproduced. This is an attempt to extract scenes in real life during the current state of the world.” The movie player was created as a custom wrapper around YouTube’s own video player that allows the clips to transition instantly. “The way analogue TV would be like changing channels,” Andrew adds.

Passing through, muddy pigs might be feeding at a farm. You might see a short video greeting or a high school basketball game may pass through your screen. You peek into the sublime, putting into perspective what moments people decide to archive, a calming sight for troubled times.

Languages and tools used:

“Basic vanilla JavaScript and CSS are used for the frontend as well as the movie player. Websockets are used to transmit the sequence of videos. The backend is written in Node.”

Son La Pham: son-la.co

For his portfolio website, designer Son La Pham modelled his own version of a cellular automaton based on John Conway’s Game of Life. From its initial configuration, new cells populate the page following a set of rules set by the programmers. It reminds us of early cellular life on Earth, in a time where there was a different set of intelligence at work. On your screen, green, blue and red pixels slowly grow beyond their boundaries, interacting with nearby cells to create a poetic moment of entropy.

“Conway’s Game of Life is one of the great examples of a simple ruleset allowing for very unpredictable and beautiful results. I like to think my understanding of design in general mirrors this, that you can start with a very simple set of rules and it will lead you somewhere interesting, almost like a game,” he says. “Of course, being able to draw with pixels that have a birth, life and death is something that naturally interests me.”

Son La based his work upon Conway’s original design, but he found inspiration in others too. “I developed the site by myself, but obviously it builds on the work of John Conway who sadly passed away last year. I expanded upon an open source JavaScript version of the game of life developed by Pedro Verruma,” Son La says. “If I ever meet him I’ll buy him a coffee for sure.”

Languages and tools used:

“I built the site as a statically-generated JavaScript application with Vue.js and Nuxt.js. So mostly JavaScript. It could probably be built in a number of ways though, that’s just what I’m using right now and feel comfortable with.”

Ian Webster: Ancient Earth Globe

Visualising the Earth’s history over the span of hundreds of millions of years, the Ancient Earth Globe lets you view what the world looked like during our separation from Pangea, even down to the city level. “The site is built to be interactive. I hope users will click and drag, spin the globe, and enter their city. This means each visitor to the site has a unique experience that is tailored toward their location and curiosity. As far as I know, there are no other interactive paleogeographic globes on the web!” says Ian Webster. Ian developed the site based on the work of Professor Christopher Scotese on palaeogeography.

“He developed the plate tectonic model and the paleogeographic maps that inform our understanding of the past,” Ian explains. 120 million years ago, for instance, the island of Java was still separated by an entire ocean from Australia, though the two are closer to being neighbours today. A fascinating sight to behold is to see how today’s archipelagos were actually solid landmasses even as recent as twenty million years ago.

“The visualisation conveys our planet’s history over hundreds of millions of years. People are used to thinking about the geological past in the abstract. It’s sometimes difficult to wrap your mind around the fact that Earth was a living, breathing globe 750 million years ago,” Ian says. “I was fascinated by this and I wanted everyday people, not just scientists and geologists, to be able to experience and understand a little bit of the geological past themselves.”

Languages and tools used:

“JavaScript, Node.js for the website. Python for running the plate tectonic models to determine a user's location in the past.”

Nadieh Bremer: nbremer.github.io/planet-globe

Astronomer and data visualisation freelancer Nadieh Bremer animates the Earth spinning, with blacked-out patches slowly being revealed as white nodes pass over the Earth. “This page shows a 3D animating globe that’s slowly spinning and thereby reveals, during one day, where all the images were taken by all of the satellites of Planet,” says Nadieh. “Everything else on the page that isn’t the main visual is there to serve as an introduction and explanation of it, so the page is rather minimal, inviting the viewer to just watch the globe rotate and be mesmerised.”

This particular page was part of a larger project for her client where she created visualisations based on the satellite data they provided. “For this visual, I received a day’s worth of data about the images taken by all of Planet’s satellites and created the globe visualisation and the page myself,” she says. “Within the bigger project, I was also working with Shirley Wu, who, like me, is also a data visualisation freelancer, but we each worked separately on our own visuals.”

At random times, a blue circle picks out a satellite to follow, marking its location, height and astounding speed at the bottom of the page. These satellites circle the Earth at about seven kilometres per second, 500 kilometres above ground. It feels mesmerising, though a little unnerving, to watch these imaging satellites pass over your location and snap a picture of you.

Languages and tools used:

“This page is very vanilla JavaScript, HTML and CSS. For the main globe visual I used budo during the development so I could have hot-reloading and it uses regl in WebGL, while also using D3.js for some preparations of the data.”

Wix Playground is proud to support Double Click, a monthly round-up of some of the most interesting and innovative websites and digital designs out there right now. We’ll discuss minimalistic, sophisticated, and experimental websites with creatives who regularly push the limits of web design, and learn about the process that shapes their work.