Eine Animation mit Opus 5.5: Bewegung beschreiben, HTML öffnen, Tempo ändern

Spiel erst einmal mit den Umlaufbahnen

Schieb den Regler oben nach rechts. Die Punkte werden schneller. Klick auf Pause, und das gewählte Bild bleibt stehen. Die ganze Szene steckt in einer HTML-Datei, die du herunterladen, ohne Internet öffnen und verändern kannst. Andere Farbe, größere Umlaufbahn, etwas ruhigeres Tempo. Für etwas Eigenes brauchst du nicht gleich eine komplette Website.

Diese Demo haben wir redaktionell erstellt; sie dokumentiert keine Sitzung mit Opus 5.5. Sie dient uns als Ausgangspunkt für eine ähnliche Übung. Statt Umlaufbahnen animieren wir diesmal das Sortieren von Dokumenten. Darum geht es im Prompt weiter unten. Eine Kopie des Cookies solltest du also nicht erwarten.

Was soll in diesen sechs Sekunden passieren?

Stell dir drei Blätter vor, die in eine Schachtel fallen. Kurz darauf erscheinen eine geordnete Liste und der Schriftzug „Fertig“. So eine Szene kann eine Dokumentenautomatisierung erklären, bevor jemand die Beschreibung liest. Man sieht, was hineingeht und was herauskommt.

Schreiben wir diese Momente der Reihe nach auf. Für den Anfang reichen sechs Sekunden, zwei Farben und eine feste Kamera. Dann fällt leichter auf, wenn ein Blatt zu früh verschwindet oder die Liste erscheint, bevor wir die Schachtel richtig gesehen haben. Schatten und Drehungen können warten.

Den Code kannst du Claude Opus 5.5 überlassen, wenn dein Werkzeug Zugang dazu bietet. Wir bitten um eine Animation mit SVG und CSS: Grafik und Bewegung stehen dabei im Code der Seite. Wir öffnen sie im Browser. Einen fertigen Film liefert dieser Auftrag nicht.

Eine Datei, direkt eine Vorschau

Warum eine einzelne HTML-Datei? Damit du von der Modellantwort zur Animation kommst, ohne ein Projekt und Bibliotheken zu installieren. Leg auch fest, was Menschen sehen, die in ihrem System reduzierte Bewegung eingestellt haben. In unserer Übung ist das die fertige Dokumentenliste.

Füge die folgende Beschreibung ein. Notiere neben der gespeicherten Datei, welches Modell du verwendet hast. Liefert die Antwort nur Code, bitte zusätzlich um eine Anleitung zum Speichern und Öffnen. Die erste Version braucht vielleicht eine Korrektur. Geh zuerst deinen Ablauf durch: Erscheinen Blätter, Schachtel und Liste in der richtigen Reihenfolge?

Erstelle eine einzelne Datei index.html mit eingebettetem SVG und CSS.
Szene: Drei Blätter fallen in eine Schachtel. Danach erscheinen eine Liste mit drei Einträgen und der Schriftzug „Fertig“.
Dauer: 6 Sekunden. Cremefarbener Hintergrund, dunkle Formen, ein orangefarbener Akzent.
Füge die Schaltflächen Erneut abspielen und Anhalten hinzu. Verwende keine externen Bibliotheken.
Zeige bei prefers-reduced-motion die statische Endszene.
Sorge für ein Layout bei 360 px Breite. Erkläre, wo sich Text und Animationsdauer ändern lassen.

„Eine halbe Sekunde länger“ ist schon konkret

„Mach es eindrucksvoller“ lässt dem Modell viel Raum zum Raten. Fliegen die Blätter zu schnell vorbei, sag lieber: „Lass sie eine halbe Sekunde länger über der Schachtel stehen.“ Erscheint der Schriftzug zu früh, benenne seinen Einsatz. Dann weißt du, was du in der nächsten Version vergleichen musst.

Speichere vor einer optischen Änderung eine Kopie. Es wäre schade um den guten Rhythmus, wenn mit der neuen Farbpalette die Bewegung durcheinandergerät. Funktioniert die Szene wie gewünscht, bitte darum, Farben, Abstände und Zeiten an einer Stelle im Code zu sammeln. Für die nächste Farbe änderst du dann nur einen Wert.

Jetzt aufs Handy und Bewegung ausschalten

Sieh dir Texte und Schaltflächen auf dem Handy an und bediene die Steuerung auch per Tastatur. Aktiviere danach im System die Einstellung für reduzierte Bewegung. Die Seite sollte ein sinnvolles Standbild zeigen. MDN beschreibt, wie prefers-reduced-motion diese Einstellung abfragt. Eine leere Schachtel würde wenig über geordnete Dokumente erzählen, deshalb haben wir die fertige Liste gewählt.

Geht ohne Animation eine wichtige Information verloren, ergänze eine normale Beschriftung. Für die Einbettung auf einer Website hast du bereits bearbeitbares HTML. Für soziale Medien, die MP4 verlangen, brauchst du noch eine Aufnahme oder einen Export in dieses Format.