Rörelse som hantverk

Rörelse som känns dyr.

Sex tekniker, en fil, noll beroenden. Allt du ser här är skrivet i CSS och JavaScript — ingen spellista, inget bibliotek, ingen bild. Sidan väger mindre än ett foto och ritar varje bildruta själv.

Skrolla

En fil · 32 kB Skickas som · 9 kB Beroenden · inga Bilder · noll

01 — Hållningen

Rörelse ska förklara ett tillstånd, aldrig uppträda.

Fjädring slår varaktighet. En kurva kan man känna, en millisekund kan man inte.

Disciplin är att låta bli. En premiumkänsla är oftast en animation färre.

02 — Teknikbanken

Sex grepp som bär sidan.

Varje kort är sin egen demonstration. Hovra för att se mekaniken — det du ser är koden som körs, inte en video av den.

Ord som lyfts på plats, ett i taget.

01 · Ordmask

Stagger i mask

Varje ord i egen mask, 55 ms mellanrum. Bara på rubriker, aldrig på brödtext.

max 6 px

02 · Magnet

Knappen som lutar sig fram

Pekaren drar knappen högst sex pixlar. Bara för mus, aldrig för finger.

03 · Strålkastare

Ljus som följer handen

En gradient på fem procents styrka som följer pekaren. Billigt, och det känns dyrt.

36~~Sajter byggda~~

04 · Sifferrulle

Räkna upp en gång

Siffran räknas upp när den syns, och ställs tillbaka till exakt rätt text.

rotate 6°

05 · Lutning

Ytan följer blicken

rotateX och rotateY efter pekaren, med en reflex som glider över ytan.

Före

Efter

06 · Torkning

En mask som öppnar sig

clip-path från hundra till noll procent. Ingen bild byts ut, bara ytan öppnas.

01 — 06 Skrolla →

03 — Var smaken kommer ifrån

Sex ställen att peka på när AI:n ska göra något snyggt.

04 — Kvittot

Sajter byggda

Tekniker i banken

Fil, inga beroenden

Bilder att ladda

05 — Nästa

Ge mig en referens, få tillbaka en sajt.

Se en riktig sajt Till toppen