Polyflow Agency Website
A scroll-driven corridor through the third dimension.
The Brief
Built as the studio's founding demonstration: if we can't prove the concept on ourselves, we have no business selling it to anyone else. Polyflow needed a website that worked as proof, not description. Most studios describe what they do. Polyflow had to demonstrate it, in real time, inside the browser. The site itself had to be the portfolio piece. A spatial experience that loads fast, holds 60 FPS on mobile, and states the studio's positioning without a single stock photo or template component.
The constraint was deliberate. Build the most technically ambitious agency website possible, keep total page weight under 2MB, and hold buttery performance on a mid-range iPhone.
The Concept
The site is built as a scroll-driven corridor. The visitor's scroll drives a camera moving through 3D space along the Z-axis, passing through four narrative states. Each state is a glass-morphism content panel floating in the spatial environment.
The metaphor mirrors the studio's positioning. You do not read this website, you move through it. The scroll is the vehicle. The content reveals itself spatially.
Technical Architecture
The experience is built from three rendering layers, composited into one seamless frame:
- The spatial layer. The scene the visitor moves through. The holographic sphere, the wireframe blueprint objects, and the particle fields suspended in depth.
- The text layer. Content placed in 3D space and aligned to the camera path, so type stays razor-sharp at any point in the corridor.
- The interface layer. The glass-lens panels and interactive elements, positioned over the scene with scroll handled cleanly between them.
The scroll itself drives a weighted camera. Rather than snapping to position, the camera eases through the corridor, giving every movement the momentum of travelling through a physical space. The hard part is not building the layers. It is making all three agree on depth and timing, frame after frame, without a seam the visitor can find.
The Holographic Sphere
The central element is a custom-shaded sphere. Its surface is hand-written for this project, not pulled from a material library, with animated light drifting across it in a slow, continuous pass. The effect reads as holographic, engineered, and alive.
This is the line between a spatial website and a templated one. A library material gives every brand the same surface. Bespoke shading gives one brand a surface no competitor can reproduce.
Blueprint Objects
Eight wireframe objects float along the corridor, each built from fields of individual particles rather than solid geometry. They range from a Fibonacci sphere and a cubic lattice to a torus knot and an animated hyper-tesseract that morphs between four-dimensional projection states.
Particle density adapts to the device, scaling down on mobile so the corridor holds its frame rate on a phone as confidently as on a laptop. Every object is drawn efficiently enough to keep thousands of particles within a tight render budget.
The Finishing Layer
A post-processing layer gives the corridor its cinematic register. A soft bloom lifts the holographic sphere and the brightest particles. A trace of film grain adds analog texture. A whisper of chromatic aberration sharpens the sense of depth.
On mobile, the heaviest effects step aside and the rest are tuned down, keeping the GPU budget well within reach of a phone. The visitor keeps the atmosphere. The device keeps its frame rate.
Performance Results
- 60 FPS sustained on an iPhone running iOS Safari and on a MacBook Air.
- Total page weight under 1.8MB, lighter than most flat, image-heavy websites.
- Stable memory across the full corridor, with no leaks and no growth on repeated navigation.
- No frame drops under load, on desktop or mobile, from the first scroll to the last.
[ Read the Technical Backstage ]