About this template
A motion studio shown as a run of concentric arches in orange, bone, cyan and black, each with a fixed station on the spline and a colour taken from a fixed sequence. Continuous floor bands bend with the tunnel and lead the eye to the vanishing point.
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 Four things people warn you about scroll animation on phones. Three are not true here.
A closer look
What the interaction does
A scroll-driven arch tunnel rendered as real geometry in WebGL by Three.js, with GSAP ScrollTrigger mapping the journey to the page. Three.js r128 and GSAP 3.12.5 are pinned and loaded from a CDN.
Who it suits
- A motion or interaction studio that has to demonstrate motion in the first three seconds.
- Teams who want the capability-plus-process shape: four disciplines, then the argument for each.
- Anyone who needs an enquiry path inside the template rather than a link out to one.
Where it is the wrong choice
- A practice that shows finished work as images — there is no gallery and no image slot here.
- Visitors without WebGL, who get the copy and none of the tunnel.
- Sites that cannot depend on a CDN for their primary visual.
What is in the file
- Four sections: the opening, the journey, the disciplines and contact.
- Four capability blocks and a three-field contact form.
- A skip link, an in-page navigation bar and a footer.
Responsive, motion and accessibility behaviour
Among the most carefully guarded scenes of the ten read for this pass: reduced motion is checked in six places, the device pixel ratio is read and capped, five resize handlers run, and seven breakpoints adapt the layout.
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.
Related templates
Motion Design holds 2 templates in the catalogue, so the rest of the row below is the closest match by shared tags.
