Loading...
Webbplatser, handgjorda.
Scrolla
01
Typografi
Flytande typskala, teckensnittsmått och matematiken bakom varje rubrik.
Webbplatser, handgjorda.
Satoshi Variable·300 – 900·-0.02em
Typskala
type-display
Webbplatser, handgjorda.
type-heading
Webbplatser, handgjorda.
type-label
Webbplatser, handgjorda.
Flytande typskala
clamp(3rem, 8vw, 8.75rem)
Viewportbredd1280px
Beräknad teckenstorlek
102.4px=6.40rem
3rem8.75rem
Förhandsgranskning vid 1280px
Webbplatser, handgjorda.
Den här sidan, just nu
Herorubriken: 102.4px @ 1280px
02
Rörelse
Handkoreograferade easing-kurvor. Inga standardvärden.
000,25× hastighet
power2.in0→30
linear30→80
power3.out80→99
power4.out99→100
Total längd1.67s×4 segment
Easing-kurvor
power2.in
0.45slinear
0.45spower3.out
0.4spower4.out
0.25s +0.12s“Varje animation är handkoreograferad. Inga standardvärden.”
03
Interaktion
Markör-systemet: magnetisk närhet, kontextmorfning och realtidsrespons.
view
start
link
default
Lerp-markörNärhetszon
Bildrutor per sekund
60Markörlägen
Default12px dot
HoverDot × 2.5
LinkRing (no label)
ViewRing + VIEW
StartRing + START
Systemkonstanter
LERP_FACTOR0.15
DOT_SIZE12px
RING_SIZE50px
MAGNETIC_RADIUS120px
CURSOR_STRENGTH0.35
VELOCITY_THRESHOLD6px/f
04
Prestanda
Livemått från den här sidan, just nu. Inte skärmdumpar — riktiga siffror.
Largest Contentful Paint
--
Bra < 2.5sCumulative Layout Shift
0.0000
Bra < 0.1Överföringsstorlek
--
0 resurserLighthouse-uppskattning--
Live — den här sidan, just nu
Core Web Vitals-trösklar
LCP
< 2.5s> 4s
CLS
< 0.1> 0.25
Vad dessa innebär
LCPTid tills det största elementet renderas
CLSVisuell stabilitet — hur mycket layouten skiftar
ÖverföringTotalt antal byte skickade över nätverket
Den här sidan, just nu, får 95+.
05
Kod
Den faktiska källkoden. Varje rad medveten.
1// Site dark background — oklch(0.05 0.012 200)
2const BG = "#050b0d";
3
4// Canvas resolution cap — lower res + CSS upscale
5// = natural diffusion blur at 60fps
6const MAX_RES = 512;
7
8// Warm-to-cool palette from PRD #81:
9// Warm amber: oklch(0.65 0.12 65)
10// Brand teal: oklch(0.55 0.15 185)
11// Deep indigo: oklch(0.25 0.08 265)
gradient-mesh.tsx230 raderTypeScript · Canvas 2D
Denna hero innehåller 1 010 rader TypeScript. Varje rad medveten.
0TypeScript-filer
Hero-filstruktur
▸ gradient-mesh.tsx230 lines · Canvas 2D
hero-section.tsx280 lines · Orchestrator
Teknikstack
React Three FiberThree.jsGSAPScrollTriggerSplitTextTypeScript
Inga biblioteksstandarder. Ingen copy-paste. Varje animation handkoreograferad.
Hantverket
Den här sajten är vår första fallstudie.
Så här fungerar den.
01/05
Vad vi gör
01
Lansera din verksamhet online
Webbdesign & Utveckling
Skräddarsydda webbplatser byggda från grunden. Inga mallar, inga sidbyggare. Varje webbplats anpassad efter ditt varumärke och optimerad för konverteringar.
Utforska tjänster
Vad vi gör
01 / 05
I siffror
95+
Lighthouse-poäng
60
Bilder per sekund
99,9%
Driftsäkerhetsgaranti
24h
Svarstid