About this template
A cinematic one-shot geometric tunnel: a ceiling and a mirrored floor of coloured panels converge on a single vanishing point, and the scroll drives a camera forward through them without a cut. Every cell is fixed to its place in the corridor, so scrolling back retraces the exact path you came down.
Delivered as single-file html (three.js + gsap from cdn). Every Formynex template is sold one to one, so pricing, licensing and any customisation are agreed directly with us before handover.
Part of 3D website templates.
Discussed in What a website template does not include: the work that is still yours after you buy and Do animations hurt your SEO? The mechanisms, and what to check.
A closer look
What the interaction does
A tunnel of real geometry, rendered per frame by Three.js in a WebGL context and driven by scroll through GSAP ScrollTrigger. All three libraries come from a CDN, pinned — Three.js r128, GSAP 3.12.5.
Who it suits
- A technology studio that needs an atmosphere and a service list in one document.
- Teams who want the four-capability, four-step-process shape rather than a long-form narrative.
- Anyone who will keep the motion but rewrite every word — the copy blocks are separate from the scene.
Where it is the wrong choice
- Visitors on machines with no WebGL. The scene needs a graphics context; the copy survives, the tunnel does not.
- A business that needs the page to work with external scripts blocked, since the geometry, the scroll engine and the timeline all arrive from a CDN.
- Sites that need more than one worked example — there is a capability list here, not a case-study system.
What is in the file
- Five sections: systems, solutions, process, about and contact.
- Four capability blocks, a four-step process, and a three-field contact form.
- A skip link, an in-page navigation bar and a footer with grouped links.
Responsive, motion and accessibility behaviour
Reduced motion is checked in three places, the device pixel ratio is read and capped so the scene does not render at full density on a high-DPI phone, and five resize handlers keep the scene and the layout in step across three breakpoints.
Everything above was read out of this template’s own source file, and the counts are counted rather than estimated. Open the live demo to check any of it yourself.
