Mission Background
LO2S approached SNP & DashDigital with the ambition to construct an internet site that didn’t simply current their providers however embodied their fast-paced, movement-driven ethos. They needed customers to really feel the power of their work as they navigated the location. For us, this meant leaning into full-screen video, fluid transitions, and interactive movement as core constructing blocks. The problem wasn’t simply visible polish, it was ensuring these components stayed performant and seamless beneath the hood.
Applied sciences and Instruments
We constructed the location on a reasonably normal stack — Subsequent.js (Web page Router), GSAP, Strapi, AWS, CloudFront, with one key addition: OGL.
Why OGL?
- It’s light-weight in comparison with three.js.
- It offers most rendering management.
- It’s ideally suited whenever you don’t want heavy mannequin help (GLTF/OBJ/FBX).
This was our first time implementing OGL in manufacturing. The LO2S web site didn’t want complicated 3D belongings, so OGL was a pure selection for performant, interactive visuals with out additional overhead.
Key Options
Immersive Touchdown Expertise
A full-screen video serves because the entry level, with a four-grid hover navigation exposing featured tasks. This setup made it easy for customers to dive immediately into the work whereas preserving the touchdown visually impactful.
Twin Work Views
The Work web page presents two methods to discover:
- A record view for fast navigation.
- A dynamic card structure, the place tasks animate ahead and off-screen. It creates a shopping rhythm that feels nearer to a cinematic sequence than a typical index web page.
Infinite 3D Gallery with Blur
We applied an infinite gallery utilizing transform3d and vanilla JS as a substitute of WebGL. This saved the construct mild, whereas nonetheless supporting background blur. Blur usually raises efficiency purple flags, however cautious optimisation retains the impact secure throughout gadgets.
Interactive Brand Shader
We constructed a customized shader (impressed by Studio 27b) to make the brand really feel aligned to the model essence. On hover, characters shift and mix, creating a way of connection paying homage to mild patterns at dwell occasions.
Technical Refinement
Our first textual content distortion assessments seemed jagged. We solved this with a customized aastep perform for programmatic antialiasing. It analyses texture gradients and smooths pixel transitions, making certain the typography scales cleanly and appears sharp even beneath distortion.
Visible & Interactive Components
Among the smaller however vital items that formed the expertise:
- Web page transitions tied to the brand for continuity.
- Distortion shader utilized to textual content for responsive movement.
- Dynamic content material modules that adapt layouts in actual time.
- Animated preloader to set the tone from first load.
Structure and Construction
Quick content material supply was a non-negotiable requirement. We tackled it in two methods:
- CDN Supply: Media is served by way of AWS CloudFront, with Strapi configured to push belongings to an S3 bucket routinely.
- Video optimisation: We offered the shopper with bash ffmpeg scripts to batch-optimise video information, balancing high quality with load pace.
Reflection & Learnings
Each construct is a chance to refine our course of and construct technique. For LO2S, we initially relied on Strapi’s Sharp integration for picture cropping, which raised two ache factors:
- Importing uncooked 4K photos slowed the pipeline and sometimes failed.
- Sharp auto-generated a number of picture sizes, lots of which had been pointless.
After the mission, we examined imgproxy and located it higher suited to our wants:
- Works seamlessly with CDNs and caching.
- Isolates processing from the principle app.
- Permits you to configure picture codecs per use case.
- Delivered 620+ requests/sec with ~12.8ms latency in benchmarks.
For us, that’s the route ahead, a cleaner, quicker, and extra dependable picture workflow.
