The site you are reading
A studio site engineered against a performance budget, with cinematic motion that degrades to nothing when it should.
- Client
- JoFunction
- Disciplines
- Product design, Front-end engineering, Motion, SEO
- Technology
- Next.js, TypeScript, Tailwind CSS
- Homepage — hero chapter
- Division chapters at full width
- Mobile — redesigned, not scaled down
- Homepage — hero chapter
- Division chapters at full width
- Mobile — redesigned, not scaled down
Overview
The JoFunction site had to explain a company that does eight different things without turning into a list, and do it without the weight that usually comes with that kind of storytelling.
The challenge
Eight divisions, ten products and eleven service lines is a structure problem before it is a design problem. Presented as cards, it reads as a directory. Presented as a story, it risks becoming a scroll nobody finishes.
Strategy
Give each division real screen space and a distinct visual idea, so the page reads as a sequence of chapters rather than a repeating template. Then hold the whole thing to a strict motion budget so the narrative never costs the reader performance.
Design
Oversized editorial typography carries the hierarchy. Function Orange appears roughly once per screen, always on the thing you are meant to interact with. One paper inversion and one full-bleed orange chapter break the darkness at deliberate points.
Engineering
The App Router serves every page server-rendered. Reveal animations run on IntersectionObserver with CSS transitions — no library. GSAP ScrollTrigger is loaded only for the pinned sequences. The WebGL scene is dynamically imported, initialises on intersection, pauses when off-screen, and never loads at all under reduced motion.
Outcome
A site that carries the full brand story, works with a keyboard, reads correctly to a screen reader, and drops every non-essential animation the moment the operating system asks it to.
Technology
- Next.js
- TypeScript
- Tailwind CSS
- GSAP ScrollTrigger
- Three.js
- Firebase