Venture Background
LO2S approached SNP & DashDigital with the ambition to construct an internet site that didn’t simply current their companies however embodied their fast-paced, movement-driven ethos. They wished customers to really feel the power of their work as they navigated the positioning. 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 underneath the hood.
Applied sciences and Instruments
We constructed the positioning on a reasonably customary 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 best while you don’t want heavy mannequin assist (GLTF/OBJ/FBX).
This was our first time implementing OGL in manufacturing. The LO2S web site didn’t want advanced 3D property, 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 initiatives. This setup made it easy for customers to dive immediately into the work whereas maintaining the touchdown visually impactful.
Twin Work Views
The Work web page affords two methods to discover:
- A listing view for fast navigation.
- A dynamic card structure, the place initiatives 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 carried out an infinite gallery utilizing transform3d and vanilla JS as an alternative of WebGL. This stored the construct mild, whereas nonetheless supporting background blur. Blur typically raises efficiency crimson 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 emblem really feel aligned to the model essence. On hover, characters shift and mix, creating a way of connection harking back to mild patterns at dwell occasions.
Technical Refinement
Our first textual content distortion checks appeared jagged. We solved this with a customized aastep perform for programmatic antialiasing. It analyses texture gradients and smooths pixel transitions, guaranteeing the typography scales cleanly and appears sharp even underneath distortion.
Visible & Interactive Components
Among the smaller however crucial items that formed the expertise:
- Web page transitions tied to the emblem 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 property to an S3 bucket mechanically.
- Video optimisation: We offered the shopper with bash ffmpeg scripts to batch-optimise video information, balancing high quality with load velocity.
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 pictures slowed the pipeline and sometimes failed.
- Sharp auto-generated a number of picture sizes, lots of which had been pointless.
After the undertaking, we examined imgproxy and located it higher suited to our wants:
- Works seamlessly with CDNs and caching.
- Isolates processing from the primary app.
- Allows 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.
