Skip to content
Menu
Artemis II Logo Concept · self-initiated

Design concept · scroll animation

Artemis II

A nine-day lunar mission, steered with the scroll wheel. A self-initiated concept showing what animation in the browser can do today.

artemis-ii-konzept.vercel.app
Artemis II: homepage of the website built by Christopher Rapp

Overview

In April 2026, Artemis II flew four people around the Moon and back. For this concept I reconstructed the mission as one continuous scroll animation: scrolling drives the mission clock. Every distance, every time stamp and every position on screen comes from NASA’s real navigation data, and the launch sequence from real NASA slow motion. Research, design and development are mine.

Services
Concept & researchUI/UX designWebGL developmentMotion design
Year
2026
Status
Concept · self-initiated
Tools & tech
Three.jsWebGL / GLSLGSAPLenisNASA/JPL HorizonsHiggsfieldAgentic Coding
artemis-ii-konzept.vercel.app

Real data instead of animation by feel

The trajectory comes as a vector dataset from NASA/JPL Horizons, recorded by NASA navigation in Houston, one position every five minutes. From it the page computes where Orion, Earth, Moon and Sun are at every moment. The telemetry at the edge is therefore not decoration: it shows the actual distance to Earth and to the Moon and the velocity at exactly that mission time, down to the roughly 40 minutes of radio silence behind the Moon.

The crew’s photos, recreated

Two of the mission’s best-known photos are dated to the second and their focal length is known. At that moment the reconstruction’s camera sits at Orion’s position and uses the same field of view. At Earthset, 22:41:37 UTC, the Earth fills a third of the frame width just like in the original, with the lit side on the left. Then the original photo fades in over the reconstruction.

Technology

Three.js with custom shaders: Earth with atmospheric scattering, city lights and sun glint on the water, the Moon with LRO maps and relief from the LOLA laser, 9,096 stars from the Yale catalogue and the Milky Way from NASA data. The Orion model is built from published dimensions, its solar arrays track the Sun. For the re-entry, of which no exterior footage exists, a clearly labelled AI visualisation is used. Anyone with reduced motion enabled gets calm still frames.

What makes this project special.

Scrolling drives time

Nine days of mission in one continuous camera move.

Real trajectory data

Orion, Moon and Sun from NASA/JPL Horizons.

Photo matching

Crew photos recreated with time and focal length.

Real launch footage

Launch sequence from NASA slow motion, frame by frame on the scroll wheel.

From the reconstruction

Twenty minutes after launch: Orion above the Earth with its solar arrays deployed.
Twenty minutes after launch: Orion above the Earth with its solar arrays deployed.
Behind the Moon: Orion in sidelight, the Moon’s night side and the Milky Way beyond.
Behind the Moon: Orion in sidelight, the Moon’s night side and the Milky Way beyond.
Earthset at 22:41:37 UTC, computed with the field of view of the crew’s 400 mm lens.
Earthset at 22:41:37 UTC, computed with the field of view of the crew’s 400 mm lens.
The entire trajectory from NASA navigation data: high Earth orbit, flight to the Moon, flyby and return.
The entire trajectory from NASA navigation data: high Earth orbit, flight to the Moon, flyby and return.

Scroll through it.

↳ Scroll inside the frame

artemis-ii-konzept.vercel.app
Artemis II: full landing page built by Christopher Rapp
View live
Message me on WhatsApp