Franks Kaffe
Menyn är hela sidan. Varje dryck står med sitt eget pris och sin egen bild, så du vet vad du får innan du står vid disken. Dricka, äta, hantverket och hitta hit ligger som fyra raka ingångar, utan undermenyer att leta i.
Två av sektionerna är byggda i WebGL istället för som vanliga listor. Drickan är en karusell i glas där ett hjulklick är en dryck, och kortet vänder sig till innehållet när du klickar. Ätan är en ring där korten smälter ihop när de möts och dras ut i trådar när de skiljs åt. Båda ritar sin egen canvas, vilket betyder att pappersfärgen bakom dem sätts på tre ställen och måste hållas i takt.
Navigeringen är en pill i glas fäst i underkanten. Varje sektion lägger sitt viktigaste överst i bilden, så en rad där uppe hade alltid stått i vägen för något.
Byggd i Next.js 16 och React 19, med three.js för de två karusellerna, GSAP för resten av rörelsen och Tailwind v4 för typografin.
- Next.js 16
- React 19
- three.js
- GSAP
- Tailwind v4
En arkitektbyrås enda sida, där scrollen är ritningen och arbetet vänder sig mot dig.
Utvalt arbete
- NØREn sida, knappt någon navigering. Arbeten, tjänster, historik och kunder ligger utlagda som en enda resa, och scrollen är det som rör sig genom den, så ingenting ligger ett klick bort och ingenting är begravt en nivå ner. Utvalda arbeten är en karusell som står i tre dimensioner istället för en rad miniatyrer. Den är fastnålad och scrubbad: ringen vrider sig medan du scrollar, det närmaste kortet vänder sig rakt mot dig och de på var sida faller undan, så att projekten läses som föremål som vänds och inte som ett galleri som bläddras. Tjänstelistan bär sin egen bild. Var och en av de fyra är en rubrik, ett stycke och en bild som byts bakom dem medan listan läses, och hela blocket står kvar fastnålat under tiden, så att ögat aldrig ombeds att både förflytta sig och byta ämne på samma gång. Historiken är en lodrät tidslinje med årtalen satta bakom bilderna istället för bredvid, och varje ram torkas in från sin egen kant när den kommer fram. Kundcitaten staplas ett i taget istället för att stå på rad, så att vart och ett hinner läsas innan nästa finns. Ren HTML, CSS och JavaScript. GSAP med ScrollTrigger och SplitText för koreografin, Locomotive Scroll för själva scrollen, och typsnitt och bibliotek ligger i projektet så att sidan inte är beroende av något CDN.
- Franks KaffeMenyn är hela sidan. Varje dryck står med sitt eget pris och sin egen bild, så du vet vad du får innan du står vid disken. Dricka, äta, hantverket och hitta hit ligger som fyra raka ingångar, utan undermenyer att leta i. Två av sektionerna är byggda i WebGL istället för som vanliga listor. Drickan är en karusell i glas där ett hjulklick är en dryck, och kortet vänder sig till innehållet när du klickar. Ätan är en ring där korten smälter ihop när de möts och dras ut i trådar när de skiljs åt. Båda ritar sin egen canvas, vilket betyder att pappersfärgen bakom dem sätts på tre ställen och måste hållas i takt. Navigeringen är en pill i glas fäst i underkanten. Varje sektion lägger sitt viktigaste överst i bilden, så en rad där uppe hade alltid stått i vägen för något. Byggd i Next.js 16 och React 19, med three.js för de två karusellerna, GSAP för resten av rörelsen och Tailwind v4 för typografin.
- Aster&SmillaFyra steg och inget mer. Veckoleverans, säsongsval, event och skötsel, vart och ett förklarat på en rad innan du behöver klicka dig vidare. Att blommorna byts när de vissnar och att vaserna diskas står på sidan, inte i ett mejl efteråt. Säsongen bestämmer vad som kommer, och sidan säger rakt ut vad det betyder. Namnen på det som blommar just nu rullar förbi över fem brickor bakom räfflat glas. Brickorna öppnar sig en i taget när muspekaren når dem, och två av de fem är film istället för stillbild. Bilderna är tagna på riktiga kontor och inte i studio, vilket sidan också skriver ut på sig själv. Hero:n är byggd direkt från Figma och behåller ramens egna koordinater istället för att räknas om. Två separata CSS-enheter håller isär vågrät placering från typografi och höjd, så artboarden ligger exakt rätt på sin referensbredd utan att växa sig orimlig på en ultrabred skärm. Byggd i Nuxt 4 och Vue 3, med GSAP för rörelsen och Lenis för scrollen.