Case study · Marketing site & motion design
Axoltek
Depth, on scroll.
A site for a technology consultancy operating in Mexico, where the scroll itself carries the argument: a pre-rendered 3D sequence is scrubbed frame by frame as you move down the page, six service layers assembling one slab at a time. It is a deliberately different design language from the rest of this portfolio — and it stays fast on a phone.
Visit the live siteEngineering
- Canvas frame scrubbing
- Scroll-linked pinning
- Real-time WebGL (React Three Fiber)
- Per-device asset tiers
- Reduced-motion & Save-Data fallbacks
- Three locales with auto-detection
The problem
A consultancy selling infrastructure, cybersecurity, AI and digital-government work has to look like it can build things. A conventional brochure page — hero, three columns, testimonial — argues the opposite. The brief was to make the medium itself the evidence, without shipping a site that only works on a fast laptop.
What it does
It presents a full service portfolio as six strategic layers — infrastructure and connectivity, cloud and digital identity, cybersecurity and compliance, AI and automation, digital government, and smart spaces — alongside sector pages for public and private organisations, and a lead-capture flow that feeds a real backend.
The scroll effect
Scroll progress drives an image sequence painted onto a canvas: every frame is a keyframe, so seeking is instant and frame-accurate in every browser. The obvious approach — scrubbing a video element's playback position — looks flawless in one browser and stutters everywhere else, because seeking to a non-keyframe forces a full decode. Captions and headings stay in the DOM over the canvas, so the effect never costs you selectable, translatable, screen-reader-readable text.
Where real 3D earns its place
Pre-rendered frames handle the cinematic sequences. Live WebGL is reserved for the things that must respond to you: an ambient particle field reacting to cursor and scroll velocity, and the six-layer stack upgrading to a real, orbitable 3D scene on capable desktops. A canvas that only ever replays pixels stays a canvas — not a scene graph.
Fast on a phone, or it doesn't ship
This is where sites like this usually fail. Each device tier gets its own sequence — a portrait mobile render at a fraction of the frames and payload, never the desktop set. The poster frame paints immediately and the rest streams in behind it, so the section is readable before it is complete. Slow connections and Save-Data get a static image and no sequence fetch at all.
Motion you can turn off
A system-level reduced-motion preference removes the pinning and the scrubbing entirely and serves the poster instead. Scroll-jacked pinning is a genuine vestibular trigger, so this is not a toggle buried in a settings panel — it is honoured before the first frame is requested.
Three languages, one set of assets
Spanish, English and Traditional Chinese, detected from the browser and remembered once chosen, with the language resolved on the server so the first paint is never the wrong one. No text is baked into the imagery, so a single media layer serves all three locales — and the overlay boxes are sized for the length variance between them.