A game trailer gets ninety seconds to sell a world. A game's website usually gets less: a hero image, a logline, a wishlist button and a scroll of screenshots. Sci-fi and fantasy projects, films, albums and creative studios all face the same problem. The thing they sell is a place, and a flat page is a poor way to visit a place. XENOVA is our attempt at the opposite: a sci-fi 3D website template where the scroll bar is a camera, and scrolling down means falling from orbit onto the surface of an invented world.
This post covers how it works under the hood, from procedural shaders to reduced motion.
A story, not a hero section
XENOVA is written as a field guide in eight chapters:
- Approach. The planet from orbit, with iridescent rings, two suns and two moons.
- The Lilac Veil. A dive through the cloud layer onto the valley at morning.
- Homes that float. Parasol trees and tethered seed-pod homes, with a hive city lighting up at dusk.
- They drink light. An orchard where light flows from glowing fruit into the creatures that feed on it.
- Skein. A zero-gravity game over a lake, with players leaving trails of light.
- Lightspeech. A ring of stones carved in an invented alphabet.
- The Long Glow. Night, aurora and a bioluminescent wave rolling across the plain.
- Signal received. The visitor writes a message and transmits it to the planet.
Each chapter is one screen of scroll. When the visitor stops, the page glides to the nearest chapter, so every scene is framed the way it was composed. The copy for every chapter (kicker, title, tagline, four stats, a field note, an accent colour and the HUD readings) sits in one TypeScript file, so a studio can rewrite the whole story without opening a shader.
Why everything is procedural
There is not a single model, texture or image in the scene. The planet surface, clouds, atmosphere and rings, the terrain, lake and sky dome, every plant, every creature and every glyph are built from GLSL noise and instanced primitives such as spheres, lathes and planes.
There are three practical gains: nothing to download before the first frame except JavaScript, no model licences to track, and every shape is tunable. Taller trees, pinker rings or a denser valley are numbers in code, not a round trip through a 3D package.
The valley is laid out by a deterministic scatter. Plants are dense around the places the camera looks at and sparse elsewhere, and the scatter rejects anything tall that would sit in the near part of a camera shot's line of sight. That small rule is why no chapter opens with a frond filling the lens.
One camera, two realms
The hardest moment in the story is the hand-over from space to the ground. In orbit the scene is measured in planet radii; on the surface it is measured in metres.
XENOVA splits the scene into two realms. The orbit realm has its own camera move, an ease-in dive toward the planet. The surface realm has a camera that follows a Catmull-Rom curve through eight hand-placed shots, with smootherstep easing on each leg and damping so the camera never snaps. Between the two, during chapter two, a full-screen veil shader fills the frame with lilac cloud. By the time it clears, the camera is in the surface realm and the visitor never sees the switch.
On portrait phones, where the copy covers the lower half, the rig pulls back and, where needed, re-aims at the subject.
Light that moves from morning to night
A world feels alive when the light changes. XENOVA has two suns, a warm amber one and a violet one, and the story runs from morning through dusk into night. Instead of giving every material its own lighting, all of the surface shaders read the same shared uniforms: sun directions and colours, sky zenith and horizon, fog colour and density, ambient light, and the strength of night, stars, aurora and the bioluminescent wave.
A table holds one mood per chapter. Every frame, the current scroll progress picks two neighbouring moods and blends them, and the result is written into those uniforms once. Terrain, trees, creatures, lake and sky change together. To change the time of day for a chapter, or to give your own world a third sun colour, you edit one row in that table.
Drawing dozens of creatures cheaply
The Oolune, the template's half-jellyfish, half-deer residents, are the part people remember. There are 27 of them, and each one is made of about 30 parts: a lathed bell, a glowing core, eyes, antlers, buds and 11 tentacles. Drawn as separate meshes, that would be hundreds of draw calls before counting the plants.
Instead, each kind of part is one instanced mesh shared by every creature. The vertex shaders do the animation: bells breathe, tentacles sway and trail behind the body, and each creature's role (drifting, feeding, playing, swimming or the elder at the stone ring) sets how it moves. The feeding streams in the orchard are GPU particles, and the light trails in the Skein game are ring buffers updated each frame. The same instancing approach draws about 14,000 fronds plus the stalks, trees, fruit and pods.
The creatures also respond. Tap anywhere outside the interface and a ping uniform fires, and every Oolune flashes back.
Keeping React out of the frame loop
Scroll-driven 3D in React has a classic trap: if scroll position is React state, every scroll event re-renders the tree. XENOVA keeps scroll progress, velocity, pointer position and the scene clock in a plain mutable object that R3F's frame loop reads. Only the coarse state that the interface really needs, the current chapter and whether the scene is ready, goes through useSyncExternalStore. Scrolling therefore costs a few number writes, not a reconciliation.
Two more details keep the first impression smooth. Before the intro finishes, the template briefly makes every hidden object visible and compiles all shaders for both realms, so the dive into the valley does not stutter while the GPU compiles programs. And the device pixel ratio is capped at 1.6, which keeps high-density phones from rendering more pixels than they can fill.
Post-processing with a light hand
The look comes from a short post-processing chain: bloom with a high threshold so only the glowing parts bleed, ACES filmic tone mapping, a little film grain and a vignette. The one dynamic effect is chromatic aberration, which grows with scroll velocity, like a lens under strain during a fast dive, and settles back when the visitor stops.
An alphabet that translates itself
Chapter six introduces Lightspeech, the creatures' written language. It is a procedural alphabet: each glyph is a few curved strokes generated from a seed and stored as an SVG path. The same paths are drawn in the DOM, where chapter titles arrive in glyphs and decode into English, and painted into canvas textures for the standing stones and the rotating halo above them.
The finale uses it again. In chapter eight the visitor types a message, sees it rendered in Lightspeech, and presses transmit. A beam fires from the stone ring and a reply appears.
Reduced motion
Some visitors ask their operating system for less motion, and a story built on camera moves has to respect that. With prefers-reduced-motion: reduce, XENOVA skips the intro fly-in, makes chapter jumps instant instead of gliding, settles the camera faster, cuts parallax, slows the scene clock, turns off chromatic aberration and shows text without the decode animation.
Watch the whole journey
Making it your world
XENOVA is a template, so the world is meant to be replaced. The chapter copy and stats live in one lore file, the light moods in one table, the camera shots in the world layout file, the page colours in CSS variables and the three typefaces in the root layout. The live demo on dev3.tech is a static export of the same code.
You can get the template from the XENOVA marketplace page, and read the design decisions behind it in the case study.
