XENOVA – Immersive 3D Sci-Fi Alien World Landing Page Template (Next.js, React Three Fiber)

XENOVA is an immersive 3D landing page template for Next.js. It tells a story as you scroll: the visitor falls from orbit through a lilac cloud layer into a valley under two suns, follows a gentle species of glowing creatures (the Oolune, half jellyfish, half deer) from morning through dusk into a bioluminescent night, and ends by sending them a message. It suits game and film launches, sci-fi and fantasy worlds, music releases, creative studios, science communication and any brand that wants a page people remember. All of the lore, names and figures are fiction you replace with your own.

Try the live demo at dev3.tech/demos/xenova, or watch the video tour and step through the screenshots at desktop, tablet and phone sizes.

The story in eight chapters

1. Approach – the ringed planet from orbit: iridescent rings, a violet sun in frame, an amber sun lighting the day side, a glowing night side and two moons.
2. The Lilac Veil – a dive through the cloud layer, where a full-screen shader hides the hand-over from space to the surface, then the whole valley at morning.
3. Homes that float – parasol trees, tethered seed-pod homes and a hive city that lights up at coral dusk.
4. They drink light – an orchard where streams of light flow from lanternfruit into feeding creatures.
5. Skein – a zero-gravity game over a lake, with players leaving light trails.
6. Lightspeech – a ring of glyph stones and a rotating glyph halo; chapter titles arrive in an invented alphabet and translate themselves.
7. The Long Glow – night: aurora curtains, glowing moss veins and a bioluminescent wave rolling across the plain.
8. Signal received – the visitor types a message, sees it rendered in glyphs and transmits it; a beam fires from the stone ring and the creatures reply.

Tap anywhere outside the interface and every creature flashes back. Arrow keys and Page Up / Page Down step between chapters, and after a scroll the page glides to the nearest chapter so each scene is framed.

Fully procedural 3D

Nothing is downloaded but code. The planet, clouds, atmosphere, rings, terrain, lake, sky dome, flora, creatures and glyphs are GLSL noise and instanced primitives:

• About 14,000 instanced fronds plus lumen stalks, parasol and lantern trees, fruit, seed pods and hive towers, scattered deterministically so they never block a camera shot.
• 27 creatures, each assembled from about 30 instanced parts (bell, core, eyes, antlers, buds, 11 tentacles). Vertex shaders breathe the bells and sway the tentacles, and GPU particles and ring-buffer trails drive the feeding and play scenes.
• One set of shared uniforms carries two suns, sky, fog, night, aurora and the wave, so the whole valley shifts from day to night as you scroll.
• Post-processing with bloom, ACES filmic tone mapping, film grain, vignette and a chromatic aberration that grows with scroll speed.
• A HUD with local time, altitude, air and a glow index, a chapter rail, field-note cards, a glyph decode effect and a glowing cursor.

Performance and accessibility

• Scrolling writes to a mutable per-frame store instead of React state, so the page does not re-render while you scroll; only the chapter index and ready state go through useSyncExternalStore.
• Every shader in both realms (space and surface) is compiled before the intro, so the first scroll does not hitch. The 3D canvas is client-only and the device pixel ratio is capped at 1.6.
• With prefers-reduced-motion, there is no intro fly-in, chapter jumps are instant, parallax is reduced, the scene clock slows, chromatic aberration is off and text reveals are instant.
• Portrait phones get their own camera framing so the subject stays visible above the copy.

Make it yours

All copy, stats, field notes, accent colours and HUD values for the eight chapters live in one file, lib/lore.ts. The light mood of each chapter (sky, fog, sun angles, night, aurora) is a table in lib/mood.ts, camera stops are in lib/world.ts, and page colours and fonts are CSS variables and next/font imports. See the How to use tab for details.

What's in the download

• The complete Next.js source: app/, components/ (scene and UI), lib/ (story, moods, world layout, shaders, glyphs), configuration and package-lock.json
• scripts/shots.mjs, a Playwright script that captures every chapter
• Documentation/index.html rendered from the README, and START-HERE.txt
• No third-party 3D models, textures or images: every visual is generated in code

Requirements

• Node.js 20.9 or newer and npm
• A WebGL2-capable browser; a dedicated or recent integrated GPU is recommended for the full effect
• Deploys to Vercel or any Node host, or as a static export

Read how we built XENOVA for the design decisions behind the story.