Hopp til innhold
← KolofonDesignelementwght · 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.

Display-fonten er Bricolage Grotesque, en variabel font med akser for vekt (200–800) og bredde (75–100 %). I stedet for å laste ni filer laster vi én, og animerer mellom alle mellomtrinnene.

Tittelen deles opp i enkeltbokstaver. En lett pekerlytter regner ut avstanden til hver bokstav og setter vekten som en CSS-variabel. Overgangen gjøres av CSS, ikke JavaScript, så den er glatt selv på trege maskiner.

Når du scroller forbi heroen, overtar en scroll-drevet CSS-animasjon: bokstavene strekkes fra 75 % til 100 % bredde og løses opp i uskarphet.

.kinetic > span {
  font-weight: var(--w, 800);
  transition: font-weight .5s var(--ease-out-expo);
}

I koden: components/fx/FxRuntime.tsx · app/globals.css

Neste bit

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 · Teknologi05

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.

⌘KESC