Gratis-Download

Make Your Site Feel Alive: Five Web Animations in One File

Ein kostenloses Kit, mit dem du deiner Website Bewegung gibst, ohne sie langsam oder schwer bedienbar zu machen: eine Demo-Seite mit fünf Effekten (geteilte Headline, Scroll-Reveal, magnetischer Button, Sticky-Galerie, hochzählende Zahlen), der Code zu jedem Effekt und pro Effekt ein Claude-Code-Prompt, der ihn in deine eigene Seite einbaut. Mit einem Guide dazu, welcher Effekt wohin passt, warum sich nur transform und opacity bewegen sollten, der LCP-Regel für deinen Hero und wie sich jeder Effekt für Besucher mit reduzierter Bewegung abschaltet. Ohne Bibliotheken. Idee via @mobileeditingclub.

Der Download startet sofort, der Link kommt auch per Mail.

Ohne Newsletter-Haken bekommst du genau eine Mail mit deinem Link, die Adresse wird nach 7 Tagen gelöscht.

Was drin ist
  • alive-site.html Die Demo-Seite: eine Datei, ohne Bibliotheken, Schriften enthalten, läuft offline. Mit ?static siehst du sie mit allen Effekten aus.
  • Split + reveal Eine Headline, deren Wörter nacheinander hochgleiten, und Karten, die einmal einblenden, wenn du zu ihnen scrollst.
  • Magnetic + sticky Ein Button, der sich mit fester Grenze zur Maus neigt, und eine fixierte Galerie, die beim Scrollen seitwärts gleitet.
  • Count-up Zahlen, die einmal hochzählen, wenn sie sichtbar werden, mit dem Endwert im HTML für Suchmaschinen und Screenreader.
  • PROMPTS.md Ein Setup-Prompt, pro Effekt ein Claude-Code-Prompt für deine eigene Seite und ein Prüf-Prompt für Handybreite, reduzierte Bewegung und ohne JavaScript.
  • Guide Welcher Effekt wohin, sieben Regeln für Performance, sechs für Barrierefreiheit und wie jeder Effekt funktioniert, in einfachen Worten.

Ein aktueller Browser, um die Demo-Seite zu öffnen. Um die Effekte in deine eigene Seite einzubauen: den Code deiner Seite und Claude Code (oder du kopierst den Code selbst). Für reines HTML und für Frameworks wie React, Next.js oder Astro (die Prompts lassen Claude Code den Code an deinen Stack anpassen). Kein Konto. Der Guide ist auf Englisch.

Fabian Faraz Farid · Impressum · Datenschutz