Meine bisher schwierigste Animation für Claude Code

Für dieses Experiment habe ich EDDY, eine fiktive Artist Agentur, in Figma gestaltet und Claude Code das Ganze mit HTML, CSS, JavaScript, GSAP und Smooothy umsetzen lassen.
Das Ziel war nicht nur, das Design nachzubauen, sondern alle Interaktionen sauber zusammenspielen zu lassen. Und das Ergebnis hat mich überrascht.

🔗 Links & Ressourcen

EDDY Template – Figma + Code Projekt: https://www.formburg.com/downloads
Smooothy Slider: https://smooothy.federic.ooo

Infinite Slider trifft animiertes Overlay

Die Idee klingt einfach: ein endloser Slider, der sich von selbst bewegt, sich ziehen lässt und beim Klick auf einen Artist das Bild aus seiner aktuellen Position in ein vollständiges Artist Profil vergrößert. Schließt du das Overlay, wandert das Bild zurück an seinen Platz im Slider und der Autoplay läuft weiter.

In der Praxis ist das eine der kniffligsten Interaktionen überhaupt. Ich habe an etwas Ähnlichem schon für ein Kundenprojekt gearbeitet und weiß noch, wie schwer es war, dass sich alles wirklich flüssig anfühlt. Diesmal wollte ich herausfinden, wie gut Claude Code damit umgeht, vor allem wenn es mit einer bestehenden JavaScript Library arbeiten und mehrere komplexe Interaktionen gleichzeitig kombinieren muss.

Das Design: EDDY, eine fiktive Artist Agentur

Um der Interaktion etwas Kontext zu geben, habe ich in Figma EDDY gestaltet, eine fiktive unabhängige Agentur für DJs und Artists. Die visuelle Richtung ist von analoger Fotografie der 90er inspiriert: leicht unperfekte Bilder kombiniert mit kräftiger roter Typografie.

Als Schrift habe ich Geist verwendet, eine kostenlose Font, die ich schon länger ausprobieren wollte. Mit stark reduziertem Buchstabenabstand (letter-spacing: -0.06em) bekommen die fetten Headlines einen deutlich kompakteren, editorialen Look.

Die Startseite ist bewusst schlicht: viel Weißraum, ein paar Bilder, einige Infos zur Agentur und ein kleiner Preloader, bei dem das Logo Buchstabe für Buchstabe einblendet und dann an seine finale Position im Header wandert.

Ich habe auch ein komplexeres Overlay mit einer Tab Navigation für mehr Artist Details ausprobiert. Für diesen Test war das zu viel, es ist aber im kostenlosen Download enthalten, falls du die Idee weiterentwickeln oder das Projekt als Starter Template für ein Kundenprojekt nutzen willst.

Warum der Slider Übergang so knifflig ist

Statt den Slider von Grund auf zu bauen, habe ich Smooothy verwendet, eine Open Source JavaScript Library, die bereits Beispiele für Infinite Scrolling, Snapping und Parallax mitbringt. Bei solchen Interaktionen ist es sinnvoll, mit etwas zu starten, das sich schon gut anfühlt, und darauf aufzubauen.

Die eigentliche Herausforderung ist der Übergang ins Overlay:

1. Der Slider muss exakt an der Position stoppen, an der du geklickt hast.
2. Das Bild bewegt sich aus seiner Karte in die rechte Bildschirmhälfte, während der Rest der Seite ausblendet.
3. Die Artist Infos erscheinen und das Bild bleibt rechts fixiert, während du durch den Inhalt scrollst.
4. Beim Schließen läuft die ganze Sequenz rückwärts ab.

Technisch ist das eine FLIP Animation: Du berechnest Position und Größe eines Elements vor und nach dem Übergang und animierst zwischen beiden Zuständen. Weil sich der Slider ständig bewegt, muss die Startposition genau im Frame des Klicks ausgelesen werden. Sonst entstehen sichtbare Sprünge.

Konsistente Artist Bilder mit Higgsfield generieren

Für das Overlay brauchte ich zwei zusätzliche Bilder pro Artist: ein Seitenprofil und ein Porträt von vorne. Beide mussten klar dieselbe Person wie im Hauptbild zeigen. Bei neun Artists wäre es sehr zeitaufwendig, alle Bilder manuell zu generieren, herunterzuladen und umzubenennen.

Hier kommt Higgsfield ins Spiel, der Sponsor dieses Videos. Higgsfield gibt dir Zugriff auf viele bekannte AI Bild und Video Modelle an einem Ort, und mit der MCP Integration kannst du sie direkt in Claude Code nutzen. Das Setup dauert nur ein paar Klicks:

1. Logge dich auf higgsfield.ai ein und klicke in der Navigation auf MCP.
2. Wähle Claude aus und klicke auf Connect.
3. Setze die Installation auf der Claude Connectors Seite fort und autorisiere den Zugriff auf deinen Higgsfield Account.

Danach kann Claude Bilder direkt im Chat generieren. In meinem Prompt habe ich beschrieben, wie die Bilder aussehen sollen, wo sie gespeichert werden und wie sie anhand des Artist Slugs ins Overlay eingebunden werden.

Eine Hover Interaktion für die Genre Liste

Unten auf der Seite gibt es eine Liste mit Musikgenres, in denen die Artists nach Kategorien gruppiert sind. Fährst du mit der Maus über einen Namen, erscheint links ein leicht gedrehtes Bild des Artists. Das Bild folgt der Maus und wechselt mit einem maskierten Slide Effekt, wenn du zwischen Namen wechselst.

Ein wichtiges Detail: Der Hover Bereich ist etwas größer als der sichtbare Text. So verschwindet das Bild nicht sofort, wenn du dich minimal von einem Namen wegbewegst. Das verhindert ständiges Flackern.

So habe ich das Projekt für Claude vorbereitet

Das Setup ist dasselbe wie in meinen vorherigen Videos:

• Figma Layouts als Bilder exportiert, inklusive einer Version mit sichtbarem 12 Spalten Grid, damit Claude Ausrichtung und Proportionen versteht.
• Eine CSV Datei mit neun fiktiven Artists inklusive Name, Genres, Bio, Standort und kommenden Shows. Claude befüllt damit automatisch den Slider, die Genre Sektion und alle Overlays.
• Die AI Anleitungsdatei im Markdown Format aus dem Smooothy GitHub Repository, direkt im Projektordner abgelegt.

Der Stack besteht aus HTML, CSS und Vanilla JavaScript mit GSAP für die Animationen. Außerdem habe ich wieder DialKit eingebunden, um Animationswerte direkt im Browser feinzujustieren. Da ich nur die Desktop Version gestaltet habe, musste Claude Tablet und Mobile selbst lösen. Eine Checkliste am Ende des Prompts fordert Claude auf, das Ergebnis mit dem Figma Design abzugleichen.

Das Ergebnis

Der Build hat etwa 48 Minuten gedauert, mit Claude Opus 5.5 auf High.

Der Preloader funktioniert genau wie geplant: Das Logo blendet Buchstabe für Buchstabe ein und wandert an die richtige Position im Header. Nur eine kurze Pause wirkte überflüssig. Im Vergleich mit dem Figma Overlay ist das Layout sehr nah dran, nur bei einem Textblock stimmte die Zeilenhöhe nicht ganz.

Der Slider läuft im Autoplay, wird beim Hover sanft langsamer und lässt sich ziehen. Zwei Bugs gab es: Nach dem Loslassen sprangen die Parallax Bilder zurück in ihre Ausgangsposition, und der Slider reichte links nicht bis zum Bildschirmrand.

Der Teil, auf den ich am meisten gespannt war, hat am besten funktioniert. Das Bild vergrößert sich aus der angeklickten Karte ohne Flackern oder Sprünge, selbst wenn der Artist nur teilweise am Bildschirmrand sichtbar ist.

In der Genre Sektion bleiben die Bildübergänge auch bei schnellen Mausbewegungen flüssig. Ich würde das Bild trotzdem ausblenden, wenn du die Liste seitlich verlässt, und es der vertikalen Mausposition folgen lassen. Technisch hat Claude hier einfach mein Figma Design umgesetzt.

Codequalität und mobile Version

Der Code sieht sauber aus: echte button Elemente für die Artists, semantische Sektionen und Barrierefreiheit für die Overlays. Im CSS gibt es Variablen für Farben, Typografie und Abstände sowie responsive Werte mit clamp().

Auf Mobile funktionieren der Slider und der Overlay Übergang gut. Das Bildgrid braucht einen einheitlichen Abstand von 12px, und ich würde den Artist Namen größer machen und direkt unter dem Hauptbild platzieren. Claude hat die Artist Namen in der Genre Sektion sogar klickbar gemacht und die Schließanimation ohne Slider Bild als Ziel gelöst, ohne dass ich danach gefragt hatte.