Slik er KizzyKicks
bygget opp

KizzyKicks er ikke bygget som en vanlig nettbutikk med rutenett og kort. Det er bygget som én sammenhengende verden – et hav. Du starter ved overflaten på forsiden, og jo dypere inn i kjøpsreisen du går, jo lenger ned i vannet synker du. Produkter er utstillingsobjekter i dette rommet, ikke varer i en liste.

Regelen som styrer alle avgjørelser: verden skal aldri brytes. Ingen harde sideskift, ingen bokser som popper inn, ingen sterke farger som river deg ut av dybden.

Alt er samlet i én backend: katalog, reservasjoner og henvendelser ligger i Lovable Cloud, mens frontend eier hele opplevelsen.

Paletten er definert i OKLCH: dyp havblå bakgrunn som mørkner nedover (fra ca. oklch(0.32 0.1 235) til oklch(0.12 0.07 252)), med hvitt og en klar aqua som eneste aksent. Ingen mettede farger utover det – alt annet er lys, tåke og kontrast.

Typografien er tett og teknisk: store versaler med negativ bokstavavstand til overskrifter, små versaler med bred sperring til etiketter, og vanlig tekst holdt lav i kontrast så den ligger «i vannet» framfor oppå det.

WorldStage ligger i rot-layouten og er fast posisjonert bak alt innhold. Fordi den bor i roten, blir havet aldri montert på nytt når du navigerer – det er samme scene hele veien.

Inni ligger WorldCanvas med:

• Kamerakorridor – kameraet flyr fra z ≈ 5.2 til z ≈ −46, styrt direkte av scrollprogresjonen, med lett sideveis drift og musparallakse.
• Tåkelag – billboardede planer med en prosedyregenerert myk sky-tekstur som driver sakte.
• Boblefelt – tre lag med punkter i ulik størrelse og fart. De reagerer på scroll: rask scrolling gir boblene et kort løft.
• Lysstråler og caustics – additive planer som simulerer sollys ned gjennom overflaten og bølgemønster på toppen av scenen.
• Lysrigg – kaldt ambient- og hemisfærelys, ett retningsbestemt nøkkellys som følger musa, og et blått rimlys som følger kameraet.

src/components/world/depth.ts mapper hver rute til en dybde mellom 0 (overflaten) og 1 (dypet). Verdien glir mykt mot målet, så en navigasjon føles som et dykk framfor et sideskift.

Dybden styrer tåketetthet og -farge, lysstyrke, hvor tydelige lysstrålene er, boblestørrelse og -fart, og hvor lavt kameraet ligger. Én verdi, mange konsekvenser – det er derfor helheten henger sammen.

Exhibit rendrer et produkt uten kort, uten ramme og uten hover-gråtoner: bare bildet, en spotlight ovenfra, en myk plattform under, og navn og pris tett på objektet. Markøren bytter til en egen etikett som viser pris og tilgjengelige størrelser når du er over.

Produktsiden har både 3D-visning og foto, reservasjon (én variant kan bare reserveres én gang) og «spør om paret»-dialog.

I bakgrunnen passerer det objekter mens du scroller. Noen er ekte sneaker-modeller (to Draco-komprimerte GLB-er som veksler), og resten var til nå nøytrale bokser.

Hvorfor de var der:

• Fartsfølelse. Uten objekter nær kameraet finnes det ingen referanse for bevegelse – scrollen føles død. Boksene gir parallakse.
• Dybde. De fyller mellomrommet mellom kameraet og tåken, så rommet leses som stort.
• Pris. En boks er ren geometri – ingen teksturer, ingen nedlasting. Sju sko-modeller til hadde kostet flere megabyte og ødelagt 60 FPS på mobil.

De er altså der av tekniske grunner, men de sa ingenting om merkevaren. Derfor er de nå byttet til svevende skoesker med eget lokk og en aqua etikett på siden – samme lave kostnad, men de leses umiddelbart som sneakers i et lager på vei opp fra dypet.

Andre alternativer som er vurdert:

• Hangtags og prislapper som vugger i strømmen.
• Skoposer i tynt, halvtransparent stoff.
• Flate sneaker-siluetter som billboards langt bak i tåken.
• Fraktkasser med KizzyKicks-stempel.

Alle disse kan byttes inn i PassingObjects i WorldCanvas.tsx uten å røre resten av scenen.

• Kvalitetsdeteksjon ved oppstart velger skygger, miljøkart og antall partikler etter maskinvaren.
• Canvaset lastes lazy og bak en feilgrense – uten WebGL får du en ren CSS-gradient som ser riktig ut.
• 3D-modeller er Draco-komprimert, teksturer er WebP.
• Alt av animasjon skjer i én render-loop uten React-state, så det ikke utløses re-render per frame.
• prefers-reduced-motion respekteres: kamera og parallakse stilles av.