01
THE_MACHINE
SWISS → Y2K
Jeder Pixel hier ist ein Token
Hintergrund, Text, Rahmen, Akzent, Radius, Fonts und Motion kommen alle aus dem interpolierten Variablenset. Nichts in diesem Panel hat eine hartkodierte Farbe.
#token
SO IST ES GEBAUT [+]
/* 1. import every dialect as raw text, parse the custom properties */ const vars = raw.match(/--d-[\w-]+\s*:\s*[^;]+;/g) /* 2. per variable: pick an interpolation strategy */ color -> parse to rgba, lerp each channel (incl. alpha) length -> parse number + unit, rem normalized to px, lerp discrete-> fonts & easings snap at t = 0.5 /* 3. write the result as CSS custom properties on the stage */ .stage { --m-bg: <mixed>; --m-accent: <mixed>; ... } /* the preview only ever reads var(--m-*), so the whole morph is one style-object update per slider tick */
02
MORPH_RULES
FARBEN // LERP IN RGB
Hex- und rgba-Werte werden in Kanäle zerlegt und linear interpoliert, inklusive Alpha. Auf halbem Weg zwischen Swiss-Rot und Y2K-Lavendel liegt eine echte Farbe, die du sehen kannst.
LÄNGEN // LERP MIT EINHEITEN
Radien und Dauern interpolieren numerisch. Eine brutalistische 0px-Ecke wächst weich zu einer 24px-Candy-Pille. Rem-Werte werden vorher auf px normalisiert.
FONTS & EASINGS // SNAP BEI 50%
Eine halbe Schriftart kann man nicht zeigen. Diskrete Werte springen am Mittelpunkt um, genau in dem Moment fühlt es sich an, als würde sich der Morph aufs Ziel festlegen.