Franks Kaffe
The menu is the whole site. Every drink carries its own price and its own photograph, so you know what you are getting before you reach the counter. Drink, eat, the craft and find us sit as four plain ways in, with no submenus to dig through.
Two of those sections are built in WebGL rather than as ordinary lists. Drinks is a carousel in glass where one wheel notch is one drink, and the card turns over to what is in it when you click. Food is a ring whose cards fuse as they meet and draw out into threads as they part. Both paint their own canvas, which means the paper colour behind them is set in three separate places and has to be kept in step.
The navigation is a pill of glass pinned to the bottom edge. Every section puts its most important thing at the top of the frame, so a bar up there would always have been standing on something.
Built on Next.js 16 and React 19, with three.js driving the two carousels, GSAP for the rest of the motion and Tailwind v4 for the type.
- Next.js 16
- React 19
- three.js
- GSAP
- Tailwind v4
An architecture practice's single page, where the scroll is the drawing and the work turns to face you.
Selected work
- NØROne page, no navigation to speak of. Work, services, history and clients are laid out as a single travel, and the scroll is what moves through it, so nothing is a click away and nothing is buried a level down. Selected work is a carousel standing in three dimensions rather than a row of thumbnails. It is pinned and scrubbed: the ring turns as you scroll, the near card faces you square and the ones on either side fall away, so the pieces read as objects being turned rather than as a gallery being paged. The services list holds its own photograph. Each of the four is a heading, a paragraph and an image that swaps behind them as the list is read, and the whole block stays pinned while it happens so the eye is never asked to travel and change subject at once. History is a vertical timeline with the years set behind the images rather than beside them, and each frame wiped in from its own edge as it arrives. The client quotes stack one at a time instead of sitting in a row, so each is read before the next exists. Plain HTML, CSS and JavaScript. GSAP with ScrollTrigger and SplitText for the choreography, Locomotive Scroll for the scroll itself, and the fonts and libraries vendored so the page owes nothing to a CDN.
- Franks KaffeThe menu is the whole site. Every drink carries its own price and its own photograph, so you know what you are getting before you reach the counter. Drink, eat, the craft and find us sit as four plain ways in, with no submenus to dig through. Two of those sections are built in WebGL rather than as ordinary lists. Drinks is a carousel in glass where one wheel notch is one drink, and the card turns over to what is in it when you click. Food is a ring whose cards fuse as they meet and draw out into threads as they part. Both paint their own canvas, which means the paper colour behind them is set in three separate places and has to be kept in step. The navigation is a pill of glass pinned to the bottom edge. Every section puts its most important thing at the top of the frame, so a bar up there would always have been standing on something. Built on Next.js 16 and React 19, with three.js driving the two carousels, GSAP for the rest of the motion and Tailwind v4 for the type.
- Aster&SmillaFour steps and nothing else. Weekly delivery, seasonal choice, events and care, each explained in a line before you have to click anything. That the stems get swapped when they wilt and the vases get washed is on the page rather than in an email afterwards. The season decides what arrives, and the site says plainly what that means. The names of whatever is flowering run past above five tiles set behind ribbed glass. The tiles open one at a time as the pointer reaches them, and two of the five are film rather than a still. The photographs are taken in real offices rather than a studio, which the site says of itself as well. The hero is built straight from Figma and keeps the frame's own coordinates instead of recomputing them. Two separate CSS units hold horizontal placement apart from type and height, so the artboard lands exactly right at its reference width without growing absurd on an ultrawide screen. Built on Nuxt 4 and Vue 3, with GSAP for the motion and Lenis for the scroll.