latitudeconsulting.ai
- Released
- 2026
- Role
- Front end & back end
- Client
- Latitude Consulting
- Type
- Full-stack
Latitude Consulting takes companies through AI adoption — from the first exploration workshop to a scaled programme. Their offer is a process, not a product, which is the hardest thing to put on a website: it is a sequence, and a sequence is exactly what a static page flattens.
The brief
Consultancies sell judgement, so their sites tend to drown in abstract nouns. The brief here leaned the other way — show the method, stage by stage, and let the client work stand as evidence.
That produced a site with three parallel stage pages, a case library, and a home page that has to hold attention long enough to reach any of it. Every one of those surfaces needed motion that supports reading rather than delaying it, and a content model that keeps the three stages consistent without maintaining them three times.
What I built
I built the front end and the back end. Stages, cases, industries and services are typed content, so a stage page composes itself from the same fields as its siblings and a new case is one entry, not a new template.
The motion is GSAP with ScrollTrigger throughout, tied to scroll position rather than to timers: the approach diagram builds as you descend it, the value cards stack, and the progress line at the top of each stage page fills to show how far through the argument the reader is. On the case archive, the hover state pulls the client quote onto the card, so scanning the library gives you the substance without a single click.
- 3
- Stage pages on one model
- 13
- Cases in the archive
A particle field that resolves into the page
The loader gathers a ring of particles while the page assembles, then the hero settles behind it. It runs once per session, so a returning visitor is not made to watch the intro again.
The method builds as you descend it
On each stage page the approach diagram assembles piece by piece while the progress line at the top fills. Two signals at once: what the step contains, and how far through the argument you are. Both are driven by scroll position, so nothing plays ahead of the reader.
Hover a case, get the quote
The case archive holds thirteen entries. Hovering one lifts the client quote onto the card, so a visitor scanning the library collects the substance without opening anything — and the ones worth opening announce themselves.
Value cards that stack
On the about page the values land on top of each other rather than running down the page, which keeps a long list to one screen.
A team roster that never stops moving
The team section runs as two infinite rows drifting in opposite directions, independent of scroll position. It keeps a long roster to one band of the page and gives the section a pulse even when the visitor is standing still.
