Jede Animation, jeder Effekt, jede Komponente — eine eigene Sektion mit Überschrift. Von einfachem CSS-Hover bis zu scroll-getriebenen Expert-Patterns und Canvas. Eine Datei, null Libraries.
Display-Serif (Playfair) + klarer Sans (Lato) + Monospace (JetBrains). Drei Stimmen, ein Charakter — die Basis jedes guten Designs.
-webkit-text-stroke macht Buchstaben zu Konturen — sofort editorial und grafisch.
Ein Verlauf, durch background-clip:text in die Schrift maskiert und endlos animiert.
Worte steigen beim Laden zeitversetzt ein (animation-delay). Rhythmus statt Sprung.
Text wird Zeichen für Zeichen getippt, mit blinkendem Cursor — JS-getrieben.
Buchstabenabstand öffnet sich beim Hover — atmet auf. Fahr drüber.
Unterstrich wächst von links via transform:scaleX — sauberer Link-Hover.
Hintergrund füllt sich beim Hover von unten hoch (transform:translateY).
Ein Glanzstreifen fährt beim Hover über den Button.
Der Rahmen zeichnet sich per stroke-dashoffset beim Hover.
Die Brand-Palette als Karten, Hover-Lift. Farbe als System, nicht Zufall.
#0E2244#E94B5D#1AA591#FDF8F0#F5A623Geblurte, animierte Farbblobs erzeugen lebendige Atmosphäre statt flacher Fläche.
Ein SVG-Rauschfilter im overlay-Blend macht digitale Flächen analog und teuer.
Ein einzelner radial-gradient, gekachelt — technischer Blueprint-Look.
Endlos-Laufband mit weichen Maskenrändern (mask-image).
RGB-Split per Pseudo-Elementen beim Hover — Cyber-Ästhetik. Fahr drüber.
Text entschlüsselt sich aus zufälligem Rauschen, sobald sichtbar.
Der Button wird vom Cursor angezogen — spielerisch, physisch.
Material-Welle vom Klickpunkt aus. Klick auf den Button.
Karte kippt in 3D zum Cursor (perspective + rotateX/Y).
Ein Lichtkegel folgt dem Cursor über die Karte (CSS-Variablen via JS).
3D-Flip um die Y-Achse beim Hover — Vorder- & Rückseite.
Rahmen + farbiger Schein erwärmen sich beim Hover.
Asymmetrisches Raster aus unterschiedlich großen Kacheln — moderner Layout-Klassiker.
Eine Fläche wächst per clip-path:circle() beim Hover heraus.
Rotierender, geblurter Conic-Gradient — Nordlicht-Atmosphäre.
Umlaufender Conic-Gradient hinter maskierter Innenfläche. Pures CSS.
Blöcke faden gestaffelt ein, sobald sie ins Bild scrollen (IntersectionObserver).
Ebenen bewegen sich beim Scrollen unterschiedlich schnell — erzeugt Tiefe. Scroll langsam.
Der Verlaufsbalken ganz oben am Fenster zeigt deinen Lesefortschritt — live aktiv.
↑ Schau nach ganz oben — der dreifarbige Balken wächst, während du scrollst.
Zahlen zählen von 0 hoch, sobald die Sektion sichtbar wird. Echte Bootcamp-Zahlen.
Sanft aufklappende Panels mit animiertem max-height und rotierendem Plus.
Klarheit ist der Skill, nicht Syntax. Du beschreibst, die KI baut.
Nein. Du brauchst eine klare Vorstellung davon, was entstehen soll.
86 Tage, 6 Module, 26 Live-Sessions — 06.05. bis 30.07.2026.
Karten kleben fest, die nächste schiebt sich darüber. Scroll durch die drei.
Die Sektion pinnt sich fest und übersetzt vertikales Scrollen in horizontale Fahrt.
Links pinnt ein Visual, rechts laufen die Schritte — das Visual reagiert auf den aktiven Schritt.
Die Geschichte beginnt mit Reibung.
Die Farbe kippt, das Visual reagiert auf diesen Schritt.
Der eine Akzent-Moment.
Ein Pfad zeichnet sich an deiner Scroll-Position, der Punkt läuft live mit.
Eine organische Form morpht endlos zwischen Zuständen (SMIL-Animation im SVG).
Canvas-Partikel, die sich verbinden und auf deinen Cursor reagieren. Fahr über die Fläche.
Punkt + nachlaufender Ring im mix-blend:difference ersetzen den System-Cursor (Desktop).
Beweg die Maus — der Punkt klebt am Cursor, der Ring zieht mit Verzögerung nach.
Aktiver Tab bekommt einen animiert gleitenden Unterstrich. Klick die Tabs.
Reiner CSS-Tooltip mit weichem Ein-/Ausgleiten. Hover über das markierte Wort.
Vibe Coding heißt: Klarheit schlägt Syntax.
CSS-Variablen weich überblendet — dieselbe Komponente, beliebige Paletten. Klick den Button.
Farben sind Variablen, keine Konstanten.
SVG-Kreis, der sich per stroke-dashoffset auf einen Prozentwert füllt, sobald sichtbar.
Vergleichs-Slider zum Ziehen oder Hovern (clip-path:inset).
Platzhalter mit laufendem Glanz — der „Lädt…"-Zustand moderner Apps.