16 oppføringer

Kolofon

En kolofon er stedet i en bok der trykkeriet forteller hvilken skrift, hvilket papir og hvilken presse som er brukt. Her er nettstedets versjon: alt det er laget av, fra shaderen i heroen til cachen bak hver side.

Designelementer

Kolofon · Designelement01

WebGL · GLSL

Flytende shader i heroen

Bakgrunnen på forsiden er ikke et bilde eller en video. Det er et lite program som kjører på grafikkortet ditt, 60 ganger i sekundet.

Kolofon · Designelement02

wght · wdth

Kinetisk variabel typografi

Overskriftene puster. Hver bokstav får sin egen vekt etter hvor nær pekeren er, og bredden strekkes ut når du scroller.

Kolofon · Designelement03

SVG-filter

Liquid glass

Navigasjonsdocken bryter lyset bak seg, ikke bare gjør det uskarpt. Glasset har tykkelse, kant og et speilende høylys.

Kolofon · Designelement04

animation-timeline

Scroll-drevne animasjoner

Lesefremdriften, kort som glir inn og stabler som krymper styres av scrollposisjonen, i ren CSS uten én linje JavaScript.

Kolofon · Designelement05

CSS grid · @property

Bento-grid med levende kanter

Innleggene ligger i et asymmetrisk rutenett der hvert kort har sin egen størrelse, sin egen generative farge og en kant som roterer.

Kolofon · Designelement06

Pointer events

Egen markør og magnetiske knapper

Markøren er en sirkel i blandingsmodus «difference» som vokser over lenker. Knappene trekkes mot pekeren som magneter.

Kolofon · Designelement07

Tastatur først

Kommandopalett ⌘K

Trykk ⌘K, Ctrl+K eller / hvor som helst for å hoppe til et innlegg, en side, en kategori eller en kolofon-artikkel.

Kolofon · Designelement08

OKLCH

Fem temaer, én fargetone

Mørk, lys, rosa, blå og gul. Hele siden skifter karakter, men det er bare to tall som endres: fargetonene.

Kolofon · Designelement09

Tekstur

Korn, aurora og glitch

Flatene er aldri helt flate. Et animert lag med filmkorn ligger over alt, og bak heroen gløder to fargeskyer.

Teknologi

Kolofon · Teknologi01

React 19.3

View Transitions mellom sider

Når du klikker et kort, flyr bildet og tittelen over til artikkelen i stedet for å forsvinne og dukke opp igjen.

Kolofon · Teknologi02

React Server Components

Next.js 16 med App Router

Siden er en Next.js-app der nesten alt rendres på serveren. Bare effektene sendes som JavaScript til nettleseren.

Kolofon · Teknologi03

cms.kunstigflyt.no

Headless WordPress og WPGraphQL

Redaktørene skriver i WordPress som før. Det er bare ikke WordPress som viser frem det de skriver.

Kolofon · Teknologi04

revalidate: 300

ISR og on-demand revalidering

Sidene er statiske og lynraske, men oppdateres i det øyeblikket noen trykker «Oppdater» i WordPress.

Biblioteker

Kolofon · Bibliotek01

next/font/local

Bricolage, Instrument Serif og Geist

Tre skrifter, tre roller: en elastisk grotesk som roper, en kursiv serif som hvisker, og Geist som gjør jobben.

Kolofon · Bibliotek02

@theme · OKLCH

Tailwind CSS v4

Utility-klasser for layout, egne CSS-lag for alt som er for vilt for utility-klasser.

Kolofon · Bibliotek03

lenis

Lenis myk scrolling

Scrollingen har vekt. Den akselererer og bremser i stedet for å hakke seg nedover i trinn.