✦ Animation Showcase 2025

Bewegung ist
die Seele des Designs

Eine Erkundung von Scroll-Animationen, Partikeleffekten, interaktiven Elementen und realistischer Physik – alles in reinem CSS & JS.

Entdecken →
Scroll
Scroll Animations ✦ Particle Systems ✦ Magnetic Buttons ✦ 3D Tilt Cards ✦ Fluid Morphing ✦ Counter Animations ✦ Typing Effects ✦ CSS Physics ✦ Scroll Animations ✦ Particle Systems ✦ Magnetic Buttons ✦ 3D Tilt Cards ✦ Fluid Morphing ✦ Counter Animations ✦ Typing Effects ✦ CSS Physics ✦
01 — Karten & Hover

Interaktive Karten
mit Spotlight-Effekt

Bewege die Maus über die Karten – ein Lichtpunkt folgt dem Cursor und beleuchtet die Oberfläche realistisch.

⬡
Scroll-Trigger Animationen
Elemente erscheinen präzise im Sichtfeld – mit gestaffelten Übergängen und individuellen Verzögerungen.
◈
Partikel-Canvas
Tausende Punkte, verbunden durch ein dynamisches Netz – reagiert auf Mausbewegungen in Echtzeit.
◎
CSS Physik
Realistische Schwerkraft, Trägheit und Federdynamik – nur mit CSS-Variablen und JS-Timern umgesetzt.
⟡
Magnetische Elemente
Buttons und Icons ziehen den Cursor an sich – ein subtiles Feedback-Erlebnis mit echtem Woah-Faktor.
02 — Horizontal Scroll

Slide durch
die Features

Scrolle normal nach unten – die Karten gleiten horizontal vorbei.

01
Intersection Observer
Die moderne Web-API erkennt präzise, wann ein Element sichtbar wird – ohne teure Scroll-Event-Listener. Performant und batterieschonend.
02
CSS Custom Properties
Variablen wie --mx und --my übertragen Mauspositionen in Echtzeit an CSS – kein DOM-Zugriff nötig.
03
Canvas 2D API
Das Partikel-System im Hintergrund läuft auf einem Hardware-beschleunigten Canvas – 60 FPS, tausende Punkte, volle Reaktivität.
04
FLIP Animationen
First, Last, Invert, Play – eine Technik, die Layout-Änderungen in performante, geglättete Animationen auf der Composite-Layer-Ebene verwandelt.
05
requestAnimationFrame
Alle zeitkritischen Animationen synchronisieren sich mit dem Browser-Repaint-Zyklus – kein Ruckeln, kein Tearing, reines Butter-Feeling.
03 — Zähler-Animation

Zahlen, die
zum Leben erwachen

0 Partikel gleichzeitig
0 Konstante Bildrate
0 Pure CSS & JS
0 Keine Abhängigkeiten
04 — Interaktive Elemente

Klick mich. Berühr mich.

Die Kugel reagiert auf Klicks mit Welleneffekten, ändert ihre Farbe und sendet Impulse in die Umgebung.

← Klicken zum Aktivieren →

05 — Typewriter Effekt

Worte entstehen
vor deinen Augen

06 — 3D Tilt Cards

Perspektive, die
dich verfolgt

Bewege die Maus über die Karten und erlebe echte 3D-Transformation in reinem CSS-Perspektivraum.

Architektur
Räumliche Tiefe
Natur
Aurora Borealis
Energie
Flüssiges Gold
Kosmos
Schwarzes Loch
07 — Timeline

Eine Geschichte
in Bewegung

2021
CSS Scroll Snap
Die Grundlage moderner Scroll-Erlebnisse. Browser steuern sich zu definierten Haltepunkten – flüssig, nativ, ohne JS.
2022
View Transitions API
Nahtlose Übergänge zwischen Seitenansichten direkt im Browser – das Ende der Fade-Hack-Ära beginnt.
2023
Scroll-Driven Animations
Animationen, die direkt an die Scroll-Position gekoppelt sind – kein JS, nur CSS. Ein Meilenstein für Performance.
2025
Heute: Diese Seite
Alles kombiniert – Partikel, Scroll, 3D, Physik, Typewriter, magnetische Elemente. Rein in HTML, CSS und JS.
08 — Skill Bars

Animierte
Fortschrittsbalken

CSS Animations & Transitions0%
Canvas 2D / WebGL0%
Scroll Performance0%
Interaktionsdesign0%
Physik-Simulationen0%