DEV3 Technologies · own product
Our own Next.js template: an eight-chapter WebGL journey from orbit to an alien valley, built entirely from GLSL noise and instanced primitives, with day-to-night light moods, animated creatures and an interactive finale.
XENOVA hero — a glowing ringed alien world hangs under two suns beside the field-guide title and planet stats.
Game, film and creative launches want a website that feels like a world, not a brochure. Most 3D landing pages solve that with a single hero model and heavy downloads, and they stop at the hero. We wanted a whole story: a camera that travels from space to the ground, scenes that change light from morning to night, creatures that move and respond, and copy that stays readable, all without shipping a gigabyte of assets, without React re-rendering on every scroll tick, and with a calm version for visitors who ask for reduced motion.
We built XENOVA on Next.js 16 with React 19, React Three Fiber 9, three.js and Lenis, as a template DEV3 sells and as a reference for our own immersive projects.
useSyncExternalStore.XENOVA ships as a complete Next.js template: eight chapters, a HUD, field notes, a procedural glyph alphabet with a decode effect and an interactive signal finale, with copy and stats for every chapter in one file.
The repository passes tsc --noEmit and ESLint, builds as a normal Next.js app or a static export, and includes a Playwright script that captures every chapter at desktop, tablet and phone sizes; the marketing screenshots and video tour were produced from it. A public live demo runs as a static export on dev3.tech.
XENOVA is available on the DEV3 marketplace.
No environment variables, API keys, database or external services are needed.
Download the ZIP from your DEV3 account and unzip it.
Open a terminal in the unzipped folder and install the dependencies:
npm install
Start the development server:
npm run dev
The dev script uses port 3200; open that port on your machine in a browser and scroll through the eight chapters. Change the -p 3200 flag in package.json if the port is taken.
Optional checks: npm run typecheck and npm run lint.
npm run build
npm run start
npm run build produces a standard Next.js production build that npm run start serves.
Push the folder to a Git repository and import it in Vercel. The defaults (framework Next.js, build command npm run build) work as is; there are no environment variables to set.
The template can be exported to plain HTML, CSS and JavaScript for any static host (Netlify, Cloudflare Pages, S3, an Nginx folder). next.config.ts switches to static export when DEMO_EXPORT_BASE is set to the sub-path the site will live under:
DEMO_EXPORT_BASE=/xenova npx next build
The site is written to out/; upload that folder so it is served at the same sub-path. The included build:demo script is the one used for the DEV3 live demo. It also sets NEXT_PUBLIC_DEMO_DOWNLOAD_URL, which shows a small "Get this template" badge, so leave that variable unset for your own site.
Download the new version from Account → Downloads on dev3.tech and compare it with your copy. Keep your changes in lib/lore.ts, lib/mood.ts and app/globals.css so they are easy to carry over.
| File | What it controls |
|---|---|
lib/lore.ts |
All chapter copy: kicker, title, tagline, four stats, field note, accent colour and HUD values (local time and air) |
lib/mood.ts |
The light mood of each chapter: sky, fog, both suns, ambient, night, stars, aurora and wave |
lib/world.ts |
The valley layout, the scatter of plants, pods and towers, and the camera SHOTS for each chapter |
components/scene/ |
The 3D scene: space, sky and terrain, flora, habitat, the stone ring and the creatures |
components/ui/ |
Loader, HUD, chapter rail and panels, field notes, glyph effects, the signal form and cursor |
app/globals.css |
Page colours, spacing and type styles |
app/layout.tsx |
Fonts, page title and description |
Open lib/lore.ts. The CHAPTERS array has one entry per chapter, in order. Change the title, kicker, tagline, stats (label and value pairs) and fact (the field note) to your own text. All names and figures in the demo are fiction, so replace them before you go live.
Each chapter fills one screen of scroll and has a matching camera shot in lib/world.ts and a light mood in lib/mood.ts. If you remove or add a chapter, keep those three lists the same length and in the same order.
app/globals.css: --bg, --fg, --dim, --faint, --accent and --lume (the glow green).accent field of each chapter in lib/lore.ts tints the kicker, rail and HUD for that chapter.lib/mood.ts sets the sky zenith and horizon, fog colour and density, the two suns (elevation, azimuth and intensity), ambient light and the night, star, aurora and wave levels. The scene blends between rows as the visitor scrolls.components/scene/Experience.tsx.The three typefaces (Unbounded for display, Instrument Serif for body, JetBrains Mono for the HUD) are loaded with next/font/google in app/layout.tsx. Swap the imports for other Google fonts, or use next/font/local with your own files, and keep the --font-display, --font-serif and --font-mono variable names.
Each entry of SHOTS in lib/world.ts is a camera position and a look-at point. Move them to reframe a chapter; the camera follows a smooth curve through them. PORTRAIT_LOOK overrides the look-at point on portrait phones.
The template draws everything procedurally, so there are no model or texture files to replace. To restyle the world, adjust the shapes, counts and colours in the scene components and the GLSL in lib/shaders*.ts. To show your own model (a ship, a character, a logo), load a GLB with three.js's GLTFLoader (or R3F's useLoader) in a new component and add it inside the scene in Experience.tsx, placed near the camera shot of the chapter it belongs to. Keep models compressed and light so phones stay smooth.
The last chapter's form (components/ui/Signal.tsx) shows the message in glyphs and a canned reply; it sends nothing anywhere. To collect sign-ups, call your own newsletter or form endpoint in its submit handler.
Visitors can tap to make the creatures flash, and use the arrow keys or Page Up / Page Down to move between chapters. Reduced-motion visitors get instant chapter jumps and calmer animation automatically; keep that behaviour if you add new effects by checking journey.reduced.
DEV3 Technologies · own product · Healthcare – dental clinics (Next.js template)
Our own Next.js template for dental clinics: a twelve-chapter scroll story where every tooth, gum and bone block is a signed-distance field meshed in the browser, with treatment animations, live opening hours and a booking dialog.
DEV3 Technologies · own product · Luxury retail (website template)
Our own Next.js template for a fictional watch maison: an eight-chapter scroll story around one real-time watch built entirely in code, with live local time, an exploded view, a beating calibre, glowing lume and a metal and dial configurator.
DEV3 Technologies · own product · Food & beverage (web template)
Our own Next.js and React Three Fiber template for a fictional energy drink: a procedural can, a shader-driven liquid wipe between flavours, cursor-following lightning and eight scroll chapters, with no 3D model or image downloads.
