Kundprojekt / Art In Kakel
Plattsatt
lager för lager.
Vi byggde webbplatsen för Art In Kakel, plattsättning i Arlöv. Den visar Artins utförda arbeten och det som finns under ytan: en kaklad våtrumsvägg som byggs lager för lager, renderad i Blender.
Besök Art In Kakel- Kund
- Art In Kakel AB
- Vår del
- Design, webbplats och väggen i 3D
- Teknik
- Astro och Blender
- Område
- Arlöv och sydvästra Skåne
- 01Kakel & fog
- 02Fix
- 03Tätskikt
- 04Skiva
- 05Regel
Fem lager, byggda i den ordning de byggs på riktigt.
Hantverket i rummet. Och bakom väggen.
Art In Kakel gör plattsättning i badrum och våtrum, kök, golv och väggar, med snickeri runt omkring, i Arlöv och sydvästra Skåne. Artin gör arbetet själv, och företaget är listat som behörigt hos BKR.
Vi visade nio skisser i tre riktningar. Den mörka, exklusiva riktningen valdes, med väggen under ytan från en av de andra skisserna. Webbplatsen godkändes den 27 september och lanserades på artinkakel.se den 22 oktober.
Det är en enda sida på svenska, med sex avsnitt, ett formulär för förfrågningar och en sida om personuppgifter.
Plattsatt som konst.
Den första rubriken på artinkakel.se.En vägg som byggs medan besökaren tittar.
Avsnittet Under ytan visar det som finns bakom plattorna i ett våtrum. Väggen byggs i samma ordning som på riktigt, från regel och skiva till tätskikt, fix och till sist kakel och fog, medan kameran drar sig bakåt.
Vi byggde väggen i Blender med procedurella material och renderade den i Cycles: 589 bilder i 60 bilder per sekund, knappt tio sekunder. Den första versionen ritades direkt i webbläsaren med three.js. I oktober ersattes den av den renderade filmen, och 60 bilder per sekund valdes framför 30.
Lager 05
Regel
Bild 120 av 589
Bilder och film ur avsnittet Under ytan på artinkakel.se. Lagrens namn och nummer är desamma som på webbplatsen.
Den färdiga väggen vänder sig mot muspekaren.
När väggen är byggd vrider den sig upp till 4,5 grader åt sidan, mot muspekaren. Vinklarna räknas inte ut i webbläsaren. Vi renderade 33 av dem i Blender, från pekaren längst till vänster till längst till höger.
Mellan två vinklar flyttas bildens punkter längs Blenders egen rörelsedata innan bilderna blandas, och resultatet ritas med WebGL. Vridningen följer bara musen. På pekskärmar står väggen still.
Bygget och vridningen håller 60 bilder per sekund, uppmätt med ett eget skript på en skärm som är 2560 pixlar bred.
De 33 vinklarna, en i taget. På artinkakel.se glider de över i varandra.
Varje avsnitt har sin egen botten.
Sidan växlar mellan mörk oliv, benvitt och sten, så att avsnitten känns som rum med olika ljus. Rubrikerna är satta i Cormorant Garamond med kursiv på andra raden, och brödtexten i Manrope.
Varje avsnitt har ett nummer och en egen rubrik, och menyn använder samma nummer.
Öppningen
Plattsatt som konst.
Mörk oliv
Skärmbilder från artinkakel.se i november 2026. Rubrikerna är Art In Kakels egna.
Artins egna bilder.
De tre arbetena på sidan är Artins egna jobb, fotograferade på plats. Bilden i startsidans öppning och de fyra materialbilderna är skapade för webbplatsen och visas aldrig som utförda arbeten.
Sidhuvud och meny i glas.
Sidhuvudet är en fyrkantig glasskiva med länkarna Hantverket, Utvalda arbeten och Tjänster, och till höger Ditt projekt och Meny. Menyn öppnas som en enda glasskiva över sidan, med avsnitten numrerade som på sidan.
Vi provade först att låta glaset bryta ljuset med SVG över hela skärmen. Det blev för långsamt, så menyn är i stället frostad med CSS.
Förstora 
Det som inte syns i bild.
Mycket av arbetet handlar om att väggen ska laddas snabbt på alla skärmar, och om vad som händer när någon skickar en förfrågan.
Väggen
- Tre storlekar
- 1050 / 1920 / 2974 px
- Mobil, dator och stora skärmar får var sin film.
- Tre format
- AV1, HEVC, H.264
- Webbläsaren spelar den minsta filen den klarar. På datorn är filmen 2,5 MB.
- Minskad rörelse
- Stillbild
- Den som har valt minskad rörelse ser en stillbild i stället för filmen.
Besökaren
- Formuläret
- Egen e-post
- Förfrågan skickas genom Art In Kakels egen e-post hos Simply. Ett dolt fält stoppar skräppost.
- Personuppgifter
- Inga kakor
- Ingen statistik och inga kakor. Webbplatsen ligger hos Simply.com på en server i Danmark.
- Typsnitt
- 773 → 69 kB
- Från TTF till WOFF2, med exakt samma utseende på sidan.
Drift
- Flytten till Astro
- 92 skärmar
- Den godkända versionen flyttades till Astro och jämfördes pixel för pixel, i 12 sidvyer och 248 steg med klick och scroll.
- Publicering
- Ett skript
- Bygger sidan, kontrollerar SEO och länkar och byter sedan hela webbplatsen på en gång.
- Automatisk kontroll
- 0 fel
- axe hittar inga fel mot WCAG 2.2 AA, lokalt och på den publicerade sidan.
Projektet i siffror
- 5lager i väggen
- 589renderade bilder i bygget
- 33vinklar för muspekaren
- 60bilder per sekund
Öppningen, väggen och arbetena.
På mobilen har väggen en egen film som är 1050 pixlar bred, och avsnitten kommer i samma ordning som på datorn.
Besök webbplatsen
