Happy Lamb
Ingen webbplats. Happy Lamb skulle uppdatera sin och behövde det som ska ligga på den: film av lokalen och maten till uppdateringen, korta klipp av enskilda rätter, och fotografier av hela menyn, varje styckdetalj och varje sak på buffén, tagna i restaurangen i dess eget ljus. De råa räkorna på is, det marmorerade lammet och nötköttet rullat på tallriken, spetten som hålls över grytan, buffén under väggmålningen, kranarna och maskoten. Nära där maten är poängen, brett där rummet är det.
Menykonceptet är en enda mörk sida som bär båda språken utan att bli dubbelt så lång: varje styckdetalj namngiven på svenska och engelska, en rad om varför den finns där, djuret tecknat med styckningen markerad, och en bit av själva köttet. De två bufféerna skiljs av en linje, och priserna läses en gång, överst i varje.
Och med materialet kom råden: vad som ska användas var, vad som hör hemma på sajten och vad som hör hemma på bordet och i flödet, och hur det hålls ihop när det lämnat våra händer.
- Foto
- Film
- Menydesign
- Innehållsrådgivning
En stressterapeuts enda sida, där sajten själv sänker tempot: en sfär som andas, påståenden som hålls kvar i scrollen, ett porträtt som rider in under en båge.
Utvalt arbete
- AndrummetEn sida, i hennes egen röst. Den öppnar på ett fält av sfärer med ett ansikte bland dem, som andas; det vänder sig efter pekaren, och ett tryck skickar en ring av färg ut genom varenda sfär, och den färgen är sidans resten av besöket. Landningen lämnar över genom en slutare av lameller som stängs i markfärgen hos det som ligger under. Metoderna är tre påståenden, vart och ett kvarhållet i scrollen en skärm i taget och inläst bokstav för bokstav, över en satinmark med en andningslinje karvad i sig: ett spår, inte ett streck, med en upplyst kant i sessionens färg. En böjd svepning bär terapeutens porträtt uppåt under sin båge in i nästa avsnitt, där läsningen sluter sig kring hennes kontur rad för rad och namnet och uppmaningen sitter vid hennes axel. Bokningen är ett formulär med ett enda riktigt val, på plats eller över skärm, gjort med en knapp som är en mjuk kropp: ett strålmarscherat gelé på WebGPU som trycks ihop när man håller och vickar till när det landar, med en vanlig knapp i samma försänkning där det inte finns någon GPU. Skicka dyker bara upp när det finns något att skicka. Sidan slutar på en ordbild karvad i marken som svarar på handen. Ljuset vandrar runt bokstäverna, de lyfter och viker undan under pekaren, de kan tryckas in, och den andas när den lämnas ifred. Nuxt 4 och Vue, GSAP med ScrollTrigger och SplitText för koreografin, Lenis för scrollen, TypeGPU för knappen. Varje paus och fastnålning är mätt mot skärmen den visas på; på en telefon är samma sida en spalt som håller kvar där den ska och släpper där den inte ska.
- 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.
- Happy LambIngen webbplats. Happy Lamb skulle uppdatera sin och behövde det som ska ligga på den: film av lokalen och maten till uppdateringen, korta klipp av enskilda rätter, och fotografier av hela menyn, varje styckdetalj och varje sak på buffén, tagna i restaurangen i dess eget ljus. De råa räkorna på is, det marmorerade lammet och nötköttet rullat på tallriken, spetten som hålls över grytan, buffén under väggmålningen, kranarna och maskoten. Nära där maten är poängen, brett där rummet är det. Menykonceptet är en enda mörk sida som bär båda språken utan att bli dubbelt så lång: varje styckdetalj namngiven på svenska och engelska, en rad om varför den finns där, djuret tecknat med styckningen markerad, och en bit av själva köttet. De två bufféerna skiljs av en linje, och priserna läses en gång, överst i varje. Och med materialet kom råden: vad som ska användas var, vad som hör hemma på sajten och vad som hör hemma på bordet och i flödet, och hur det hålls ihop när det lämnat våra händer.
- YozaelEn sida för en charterdisk, och den rör sig innan den hunnit läsas. Ordbilden är satt för stor för rutan och glider långsamt ut mot vänsterkanten, stannar där, och tonar tillbaka till sin start. En tecknad svala svävar över den och låter sig inte fångas: ju närmare pekaren kommer, desto hårdare trycks den åt andra hållet, med en liten vridning på vägen, och den glider tillbaka på plats så fort den lämnas ifred. Arbetssättet är ett utspritt kluster snarare än en rad: tre numrerade kort, vart och ett med sin egen färgade prick, satta runt ett fotografi av ett jetplan på en regnvåt platta, placerade efter designfilens egna mått. Under det står de sex flygplansklasserna i ett rutnät från turboprop till ultralång räckvidd, var och en med passagerare och räckvidd under namnet, och var och en öppnar en egen sida med kabinen, de siffror som är typiska för klassen och de sträckor den flyger utan mellanlandning. Tjänsterna är fyra kort som staplas. Blocket nålas fast medan du scrollar och varje kort stiger underifrån upp på högen, och varje kort som redan ligger där backar ett steg och krymper en aning, så att de fyra läses som en kortlek som delas ut snarare än en lista som passeras. Varje knapp är en pill med en pil i en bubbla som byter sida när man håller över den, så hela sajten har en enda gest för att ta sig någonstans. Menyn är en hel skärm i den mörkaste av kortens färger, med fyra länkar i skärmens höjd som kommer in en efter en. Sidan slutar på en ordbild satt över hela bredden, med en jetrendering lagd över dess nedre halva och den mörka panelen uppdragen bakom. Förfrågningsformuläret frågar efter resan och inget annat: varifrån, vart, när och hur många. Next.js 16 och React 19, GSAP med ScrollTrigger för stapeln och intoningarna, Lenis för scrollen, Tailwind v4 för typografin. Exporterad som statiska filer, så hela sajten serveras utan någon server bakom.
- Taxi Stockholm, påskEn påskreklam för Taxi Stockholm. Uppdraget rymdes i två ord, avslappnat och mobilfilmat, så det var så den filmades: hela filmen handhållen, utan gimbal, utan rigg, utan stöd av något slag, och handens lilla ostadighet behållen med flit. Det en mobil inte kan är resten, så under den handen satt en fullformatskamera som spelade in i F-Log2, vilket är det som ger gradingen dess spann och bilderna deras djup medan rörelsen fortfarande säger att någon bara filmade det här. Påskharen jobbar sig genom stan: vid dörren till Taxi Stockholms kontor, med påsar in i en bil tillsammans med föraren, längs snön, in i en reception och en konditoridisk, och tillbaka till taxin. Fotograferat vid sidan om, så att kampanjen hade stillbilder som matchade filmen. Reklamfilmen visas här bara i utdrag, inte som hel spot.
- Taxi Stockholm, KvalitetsveckanEn informationsdokumentär om Kvalitetsveckan, Taxi Stockholms kvalitetsvecka. Filmens poäng är veckans poäng: vad som får Taxi Stockholm att sticka ut, varför fokuset på kvalitet och kvalitetssäkring är värt så mycket för varumärket, och varför de som jobbar där är stolta över det. Så filmen är byggd på dem. Personalen intervjuas framför kameran och kontrollerna filmas när de sker i garaget: dekalen som sätts på, bilen som synas vid dörren, instrumentpanelen, västen, pappren vid rutan. Uppdraget var att det skulle se filmiskt ut, så det filmades med anamorfisk optik: det breda formatet, det grunda skärpedjupet och ljusreflexerna som följer med, gradat så att det hänger ihop från intervjustolen till garagegolvet. Vi fick inte visa hela filmen, så det som finns här är ett antal utdrag.