Skip to content

About this template

A directory you walk through rather than scroll past. The hero is a real 3D corridor of lit gates that the page moves you down as you scroll, revealing a tool at each stop. Lacquer red on near-black, built on Three.js with GSAP driving the camera.

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.

A closer look

What the interaction does

A lit path through a WebGL scene rendered with Three.js, walked by scroll through GSAP ScrollTrigger, ending at a filterable directory hub. Fourteen inline SVG marks carry the signage rather than images.

Who it suits

  • A guided directory — the path exists to narrow a choice, not to decorate one.
  • Anyone who wants the browse experience and the list in one document.
  • A catalogue that visitors arrive at without knowing what they want.

Where it is the wrong choice

  • A marketing site: there is no service list, no process section and no contact form.
  • Visitors with no WebGL, for whom the path does not render.
  • Anyone who needs each directory entry to have a URL of its own.

What is in the file

  • Two sections: the guided path and the directory hub.
  • A search field and a saved-items control.
  • Fourteen inline SVG marks and no raster images.

Responsive, motion and accessibility behaviour

The device pixel ratio is read and capped, four breakpoints adapt the layout, and reduced motion is checked once — fewer guards than the sectioned templates carry, which is worth knowing if the audience is motion-sensitive.

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.