monads.ch

Released: 2026
Role: Front end & back end
Client: Monads
Type: Full-stack

Monads is a Swiss consultancy working in SAP and digital transformation — the kind of firm that drops independent specialists into large enterprise projects. Their old site described a much smaller company than the one that existed by then, so the whole thing was rebuilt from the ground up.

The brief

Consulting sites tend to look interchangeable: a stock photo, four service cards, a form. The brief was to make this one feel like the company actually thinks for a living — without slipping into decoration for its own sake.

That put the weight on motion. Every transition had to carry meaning: complex material arriving in an order you can follow, assembling itself as you read. Which is a design idea until someone has to build it, at which point it becomes a scroll-choreography problem with a performance budget attached.

What I built

I built the front end and the WordPress side. Every section is a scroll-driven GSAP timeline pinned to its own ScrollTrigger, so the page reads as one continuous sequence rather than a stack of blocks that happen to fade in.

The content structure is ACF Pro throughout. Sections are composable, so the client can reorder the page or add a service without a developer — and without any of the motion falling apart, because each timeline is built from what is actually in the DOM rather than from hardcoded positions.

3 months
Kickoff to launch: 2
Site of the Day awards: 1
Awwwards honorable mention

Motion

Sections that assemble as you scroll

Blocks shift, stack and unfold as they enter the viewport, each one pinned to its own timeline. Scroll position drives progress directly, so the animation is scrubable in both directions and never plays out of sync with where the reader actually is.

Motion

A statement that writes itself as you scroll

The section holds the viewport for around 4500 pixels of scroll and spends them on one idea: the sentence assembles word by word, then hands over to a second stage where the reasoning behind it arrives with its supporting points. Scroll back and it unwrites — progress is tied to position, not to a timer that has already run.

Interaction

A contact panel that starts as the logo

Instead of a form parked at the bottom of the page, there is a glowing circle holding the mark. Click it and it opens into every channel at once — email, phone, WhatsApp, LinkedIn. One element doing two jobs, and the moment of contact becomes the most alive thing on the page.

Performance

Heavy motion inside a real budget

Animation this dense is usually where a site loses its scores. Transforms and opacity only, work batched into the GSAP ticker rather than scattered listeners, timelines built once and refreshed on resize — so the motion stays smooth without the page paying for it on load.