Nocturne — Dark Studio Narrative
Formynex StudioAgency
- Agency
- Dark Mode
- Scrollytelling
3D website templates that run in the browser
19 templates from the Formynex catalogue build depth rather than illustrate it. 17 of them project real geometry as you scroll, drawn live by your visitor’s graphics hardware — not a video, not a parallax stack of flat images.
Each one has a public demo you can open and scroll on your own device before you decide. That matters more here than anywhere else on the site: real-time 3D is the one thing a still preview cannot honestly represent.
What “3D” means here
Three different techniques ship under the same label, and they are not interchangeable. Counted from the catalogue.
- Real-time WebGL
- 17
- Pre-rendered sequence
- 1
- CSS depth
- 1
Geometry projected every frame by Three.js, loaded from a CDN by the template itself. The camera answers the scroll position, so going back retraces the path exactly.
Nocturne — Dark Studio Narrative scroll-scrubs a pre-rendered 3D sequence on a 2D canvas, so the camera path is fixed rather than live.
Nebula — Creative Agency builds its depth from CSS 3D transforms rather than rendered geometry.
What you receive
18 arrive as one HTML file
No build step, no package install, no framework. Markup, styles and the scene code sit in a single document you can edit and upload anywhere that serves static files.
Libraries come from a CDN
The 3D work is done by Three.js, which the file fetches itself at a pinned version. 11 of these templates also use GSAP for their scroll timelines. Nothing is bundled, so there is nothing to rebuild when you change the copy.
One is a full code project
Nebula — Creative Agency ships as a React + Vite project, which needs npm and a build step. Each template’s own page states its format exactly.
Where these get used
Technology · 6 templates
Corridors, vortices and circuit geometry that make an abstract product feel like somewhere you can walk through. The commonest use: a platform with nothing photogenic to show.
AI & Technology · 4 templates
Chambers and tunnels built to suggest depth of capability rather than illustrate a feature. Written for AI products, where the screenshot is a text box and the story has to come from somewhere else.
Agency · 3 templates
Studio narratives where the work is the argument and the motion carries the reader through it in one scroll.
Real Estate · 2 templates
Buildings you approach rather than photograph — a tower or an avenue assembled in the browser, so the visitor arrives at the property instead of scrolling past a gallery of it.
Single templates also cover architecture (Quarry — Modular Canal City), cybersecurity (Meridian — Secure Corridor), motion design (Cadence — Arch Motion Tunnel) and visual design (Pigment — Colour-Block City). The category names the copy that ships in the demo, and copy is the easiest thing to change — so read them as examples rather than limits.
All 19 3D templates
In the catalogue’s running order. Every card opens a live demo.
- Details
- Details
Formynex AI Solutions
Formynex StudioAI & Technology- AI & Technology
- AI
- 3D
- Details
District — Walkable AI Street
Formynex StudioTechnology- Technology
- AI
- 3D
- Details
Cadence — Arch Motion Tunnel
Formynex StudioMotion Design- Motion Design
- 3D
- Scroll Animation
- Details
Formynex Commercial Real Estate
Formynex StudioReal Estate- Real Estate
- 3D
- Scroll Animation
- Details
Pathway — Guided AI Directory
Formynex StudioTechnology- Technology
- AI
- 3D
- Details
Tool Vortex — Orbital Directory
Formynex StudioTechnology- Technology
- AI
- 3D
- Details
Quarry — Modular Canal City
Formynex StudioArchitecture- Architecture
- 3D
- Scroll Animation
- Details
Tool Vortex — Daylight Orbit
Formynex StudioTechnology- Technology
- AI
- 3D
- Details
Meridian — Secure Corridor
Formynex StudioCybersecurity- Cybersecurity
- 3D
- Scroll Animation
- Details
Vermeil — Optical Stripe Tunnel
Formynex StudioAgency- Agency
- 3D
- Scroll Animation
- Details
Formynex Digital Infrastructure
Formynex StudioTechnology- Technology
- 3D
- Scroll Animation
- Details
Infinite Discovery Chamber
Formynex StudioAI & Technology- AI & Technology
- AI
- 3D
- Details
Nebula — Creative Agency
Formynex StudioAgency- Agency
- React
- Glassmorphism
- Details
Tool Vortex — First Cut
Formynex StudioTechnology- Technology
- AI
- 3D
- Details
Boulevard — Metropolitan Avenue
Formynex StudioReal Estate- Real Estate
- 3D
- Scroll Animation
- Details
Signal Facade — Compact
Formynex StudioAI & Technology- AI & Technology
- 3D
- Scroll Animation
- Details
Pigment — Colour-Block City
Formynex StudioVisual Design- Visual Design
- 3D
- Scroll Animation
- Details
Signal Facade
Formynex StudioAI & Technology- AI & Technology
- 3D
- Scroll Animation
Motion, accessibility and performance
All 19 respond to the operating system’s reduce motion setting: decorative animation and smooth scrolling stand down for visitors who ask for them. The scroll-driven scene is the template itself, so it stays — what stops is the movement layered around it.
Real-time 3D asks more of a device than a static page does, and how much more depends on the scene. We publish no benchmark figures because we have not measured these templates in the field, and a number we cannot stand behind is worth less to you than the demo — open the one you like on the hardware your visitors actually use. What animation actually costs a page separates the part that affects ranking from the part that affects indexing, which is the one worth checking first.
Before you buy
- What makes these templates 3D?
- Depth that is produced rather than drawn. Of the 19 here, 17 render their geometry in the browser as you scroll, using Three.js loaded from a CDN; one scroll-scrubs a pre-rendered 3D sequence on a 2D canvas, so the camera path is fixed rather than live; one builds its depth from CSS 3D transforms rather than rendered geometry. Every one of them is listed on this page with the technique it uses, so you can tell before you open it.
- Do I need to know Three.js to use one?
- No. 18 of the 19 are a single HTML file with no build step — you open it in an editor, change the text, colours and images, and upload it. The 3D library is fetched from a CDN by the file itself. The remaining one is a React project, which does need a build step and someone comfortable with npm.
- Will they run on a phone?
- Every demo on this page is public and unlocked, so the honest answer is to open the one you like on the device your visitors actually use and scroll it. Real-time 3D asks more of a phone than a static page does, and how much more depends on the scene, so a single yes or no would be worth less than thirty seconds of testing.
- What happens if a visitor’s browser cannot run WebGL?
- One template — District — Walkable AI Street — detects this and switches to a 2D canvas version of the same scene. The others assume WebGL, which every current desktop and mobile browser supports, but older hardware and locked-down corporate machines can still refuse it. If that audience matters to you, say so before you license and we will tell you plainly what a given template does.
- Do they respect “reduce motion” accessibility settings?
- Yes — all 19 respond to the prefers-reduced-motion setting, standing down decorative animation and smooth scrolling for visitors who ask for it. The scroll-driven scene itself is what the template is, so it does not disappear; what stops is the movement layered around it.
- What does one cost?
- Each template is sold one to one rather than through a checkout, so pricing, licensing and any customisation are agreed with us directly. Open a template’s page and use the contact link there, and tell us which one you mean.
Looking wider? Browse the full Formynex catalogue, where these 19 sit alongside every other template.