HELIOS – Immersive 3D Solar System Landing Page Template (Next.js, React Three Fiber)

HELIOS is an immersive 3D landing page template built with Next.js 16, React Three Fiber and three.js. The whole page is one scroll-driven WebGL journey: the visitor starts on an overview of the solar system, then scrolls to fly from the Sun past every planet out to Neptune, and finishes on a pull-back from beyond the planets. Big headlines, live stats and a chapter rail sit over the scene in a clean, editorial layout.

Try the live demo or watch the video tour at the top of this page. Use it as a space, science or education site, an astronomy event or product launch, or as a starting point for any brand story told in chapters.

The scroll story: 11 chapters

1. Overview – the glowing Sun, every orbit and the asteroid belt, with the "The Solar System" headline.
2. The Sun – a churning granulated surface and a soft corona fill the screen.
3. Mercury to Neptune – one chapter per planet (Mercury, Venus, Earth with its Moon, Mars, Jupiter, Saturn, Uranus, Neptune). The camera flies to a three-quarter-lit portrait of each body, framed off-centre so the copy has room, with diameter, day, year and moon figures.
4. Beyond – the camera pulls back to see the whole system from far out, with a button that flies the visitor back to the Sun.

Scrolling is smoothed with Lenis and snaps to the nearest chapter when the visitor stops, so a planet is always framed. The chapter rail and a "back to the Sun" button jump between chapters with a long, eased flight.

Shaders and effects

• Everything is procedural GLSL. Sun granulation with limb darkening and a billboarded corona, Earth with oceans, clouds and city lights on the night side, gas-giant bands with storms, Mars with a polar cap, Saturn's rings with the planet's shadow cast across them, and atmosphere shells on the lit limb. No textures or models are downloaded.
• Starfield, Milky Way band, asteroid belt and drifting dust as GPU point clouds from a seeded generator, so the sky is the same on every load and dust gives parallax while flying.
• Camera rig on a centripetal Catmull-Rom path with one stop per chapter, eased legs that linger on each body, damping and a subtle pointer parallax. The orbit of the planet in focus brightens as the camera settles.
• Post-processing: bloom, ACES filmic tone mapping, film grain, vignette, and chromatic aberration that grows with scroll velocity.
• Interface: a loader that holds at 99% until every shader has compiled (so the first scroll never hitches), scramble-text reveals, a chapter rail, and live distance from the Sun and sunlight travel time readouts interpolated while flying.

Performance, motion and responsive layout

• The 3D scene is loaded on the client only, after the page shell, and all shaders are compiled up front.
• React only re-renders when the chapter changes; scroll position, velocity and pointer live in a mutable store read every frame, so scrolling never re-renders the tree.
• Device pixel ratio is capped at 1.75, and the canvas uses no MSAA at the WebGL level (anti-aliasing happens in the effect composer).
• On portrait screens the camera stops are rebuilt: each planet is framed higher and further away so the copy fits underneath. The layout is tuned for desktop, portrait tablet and 390 px phones.
• With prefers-reduced-motion the interface reveal animations (stats, taglines, scroll hint) are switched off; the camera only travels when the visitor scrolls.
• The layout is artistic, not to scale; the figures in the stats panels are real.

Tech stack

• Next.js 16 (App Router) and React 19, TypeScript
• React Three Fiber 9 and three.js 0.187
• @react-three/postprocessing 3 and postprocessing 6
• Lenis 1.3 smooth scrolling
• Space Grotesk and JetBrains Mono through next/font

Make it yours

• Copy and data – every body's name, kicker, tagline and stats are in one file (lib/bodies.ts); the intro and outro text is in the overlay component.
• Colours – each body has a three-colour palette plus atmosphere colour in the same file; the page colours (background, text, accent) are CSS variables at the top of app/globals.css.
• Fonts – swap the two next/font imports in the root layout.
• Chapters – add, remove or reorder bodies and the camera path, chapter rail and scroll length follow automatically.
• Effects – bloom, grain, vignette and aberration strength are a few props in one component.

What's in the download

• The complete Next.js source (app, components, lib with the shaders, journey store and body data)
• scripts/ with the screenshot capture script used for visual checks
• Documentation/index.html (rendered from the README) and START-HERE.txt
• No third-party 3D models, textures or images; the noise function in the shaders is the MIT-licensed Ashima simplex noise, credited in the source

Requirements

• Node.js 20.9 or newer and npm
• A browser with WebGL 2 (all current desktop and mobile browsers)
• Deploys as a normal Next.js app (for example on Vercel) or as a static export

All copy is sample content for a fictional brand. See how we built HELIOS for the design decisions behind the journey.