Design System & Build Notes

00 About this build

The brief

Stellar Voyages is a cinematic redesign of the classic multipage "space tourism" challenge, rebuilt as a portfolio piece. The goal was to escape the generic template look and make something that reads as deliberate art direction with a couple of genuine technical showpieces, while staying fast and accessible.

The approach

Art direction first: a cold deep-space void, one warm ember accent for calls to action, and an electric signal cyan for data and interactive states. A single design-token layer re-skins every page at once; a separate cinematic layer adds film grain, an edge vignette, and a letterbox intro on top. Deliberate restraint too, the original build had accumulated a lot of micro-effects, so part of the work was cutting noise so the signature moments could breathe.

Signature moments

• WebGL nebula hero — a domain-warped fragment shader with a warm galactic core and pointer parallax, drifting behind the headline.
• Interactive 3D planet — a real-texture Three.js sphere (Moon, Mars, Europa, Titan) you drag to rotate, with a fresnel atmosphere rim, a crossfade between worlds, and Saturn's rings when you pick Titan.
• Holographic crew portrait — the astronaut tilts in 3D toward the pointer over a glowing pedestal.

Engineering

Everything degrades gracefully. The 3D planet and shaders are progressive enhancement: without WebGL, or when a visitor prefers reduced motion, the page falls back to flat imagery and the render loop never starts. The renderer caps its pixel ratio, pauses on tab-hide, and disposes its GPU resources on teardown. Accessibility from the original build is preserved, semantic HTML, ARIA tab panels, keyboard navigation, and a skip link. Planet textures are license-clean (Solar System Scope, CC BY 4.0; NASA/JPL/USGS public domain), credited in the footer.

Stack

VANILLA HTML · CSS CUSTOM PROPERTIES · JAVASCRIPT (ES MODULES) · THREE.JS · VITE · NO UI FRAMEWORK

01 colors

02 Typography

03 Interactive elements