Project Background
LO2S approached SNP & DashDigital with the ambition to build a website that didn’t just present their services but embodied their fast-paced, movement-driven ethos. They wanted users to feel the energy of their work as they navigated the site. For us, this meant leaning into full-screen video, fluid transitions, and interactive motion as core building blocks. The challenge wasn’t just visual polish, it was making sure these elements stayed performant and seamless under the hood.
Technologies and Tools
We built the site on a fairly standard stack — Next.js (Page Router), GSAP, Strapi, AWS, CloudFront, with one key addition: OGL.
Why OGL?
- It’s lightweight compared to three.js.
- It gives maximum rendering control.
- It’s ideal when you don’t need heavy model support (GLTF/OBJ/FBX).
This was our first time implementing OGL in production. The LO2S site didn’t need complex 3D assets, so OGL was a natural choice for performant, interactive visuals without extra overhead.
Key Features
Immersive Landing Experience
A full-screen video serves as the entry point, with a four-grid hover navigation exposing featured projects. This setup made it simple for users to dive directly into the work while keeping the landing visually impactful.
Dual Work Views
The Work page offers two ways to explore:
- A list view for quick navigation.
- A dynamic card layout, where projects animate forward and off-screen. It creates a browsing rhythm that feels closer to a cinematic sequence than a typical index page.
Infinite 3D Gallery with Blur
We implemented an infinite gallery using transform3d and vanilla JS instead of WebGL. This kept the build light, while still supporting background blur. Blur often raises performance red flags, but careful optimisation keeps the effect stable across devices.
Interactive Logo Shader
We built a custom shader (inspired by Studio 27b) to make the logo feel aligned to the brand essence. On hover, characters shift and blend, creating a sense of connection reminiscent of light patterns at live events.
Technical Refinement
Our first text distortion tests looked jagged. We solved this with a custom aastep function for programmatic antialiasing. It analyses texture gradients and smooths pixel transitions, ensuring the typography scales cleanly and looks sharp even under distortion.
Visual & Interactive Elements
Some of the smaller but critical pieces that shaped the experience:
- Page transitions tied to the logo for continuity.
- Distortion shader applied to text for responsive motion.
- Dynamic content modules that adapt layouts in real time.
- Animated preloader to set the tone from first load.
Architecture and Structure
Fast content delivery was a non-negotiable requirement. We tackled it in two ways:
- CDN Delivery: Media is served via AWS CloudFront, with Strapi configured to push assets to an S3 bucket automatically.
- Video optimisation: We provided the client with bash ffmpeg scripts to batch-optimise video files, balancing quality with load speed.
Reflection & Learnings
Every build is an opportunity to refine our process and build strategy. For LO2S, we initially relied on Strapi’s Sharp integration for image cropping, which raised two pain points:
- Uploading raw 4K images slowed the pipeline and occasionally failed.
- Sharp auto-generated multiple image sizes, many of which were unnecessary.
After the project, we tested imgproxy and found it better suited to our needs:
- Works seamlessly with CDNs and caching.
- Isolates processing from the main app.
- Lets you configure image formats per use case.
- Delivered 620+ requests/sec with ~12.8ms latency in benchmarks.
For us, that’s the direction forward, a cleaner, faster, and more reliable image workflow.
