UI-Motionsdesign-Animations-Prompt
Ein detaillierter Prompt für Claude Opus 5.5 zur Erstellung eines anspruchsvollen, loopfähigen UI-Motionsdesign-Videos mit HTML/Canvas, das Federphysik und beat-synchronisierte Übergänge nutzt.
Das kreative Ergebnis
Referenz-Prompt
Ein redaktionell bearbeiteter Referenz-Prompt zum Beispiel, den du an dein Thema anpassen kannst. Der Originalbeitrag ist im Quellenbereich verlinkt.
“Ask for eight to twelve UI states, a monochrome or single-accent palette, and a usable track near 120 BPM. Make a 14-second, 1440×1440 loop where one shape becomes a button, loader, player, slider, toggle, tabs, graph, command palette, and toast before returning. Use Japanese interface copy with Noto Sans JP and Geist, on warm gray. Drive the changes with cursor actions and restrained closed-form springs; keep dragged values tied to the pointer. Calculate every frame from seek(t) without timers or carried state. Analyze the music with NumPy, render through Playwright with four subframes, and blend at 60 fps with ffmpeg. Review each beat and match the loop's cursor position and velocity.”
So erstellst du Inhalte mit PagePop
Wähle einen Assistenten, beschreibe deinen Wunsch und erstelle dein Werk mit PagePop. Passe es im Gespräch an und lade es anschließend herunter.
Passenden Assistenten wählen
Entdecke spezialisierte Assistenten für viele Branchen oder finde Inspiration in der umfangreichen Beispielsammlung.
Beschreiben, was du brauchst
Sag deinem Assistenten, ob du Bilder, Videos, PPT-Präsentationen, Dokumente oder Webseiten erstellen möchtest. Ergänze bei Bedarf Referenzbilder oder Materialien.
Modelle wählen und Werk erstellen lassen
PagePop wählt passende Modelle und Tools für dein Ziel und erstellt dein Werk.
Überarbeiten und herunterladen
Passe Inhalt und Darstellung im selben Gespräch weiter an. Lade dein Werk herunter, sobald du zufrieden bist.
Beginne mit deinen eigenen Worten
Nutze dieses echte Beispiel als Ausgangspunkt, ändere es frei und überlasse PagePop den besten Produktionsweg.
Häufige Fragen
Wie passe ich dieses Beispiel für Video an mein Projekt an?
Beginne mit dem Referenz-Prompt für „UI-Motionsdesign-Animations-Prompt“. Ersetze Thema, Stil und Seitenverhältnis und ergänze eigene Referenzbilder oder Materialien. Behalte die gewünschte Struktur, entferne unpassende Anforderungen und passe das Ergebnis weiter an.
Sind das Stöbern und Kopieren von Prompts kostenlos?
Das Stöbern in der Sammlung und das Kopieren von Prompts sind zu 100% kostenlos. Du kannst auch PagePop kostenlos nutzen. Preise und Regeln für Credits findest du auf der Preisseite.
Was ist PagePop und was kann es?
PagePop ist eine dialogbasierte KI-Plattform für kreative Arbeit. Beschreibe in natürlicher Sprache, was du brauchst, um Bilder, Videos, Präsentationen, Dokumente und Webseiten zu erstellen. PagePop wählt passende Modelle und Tools aus, und du kannst die Arbeit im selben Gespräch weiterbearbeiten.
Weitere echte Prompt-Beispiele
Episches Geschichts-Chronologie-Video-Prompt
“Make an epic chronology of Chinese civilization with code-rendered frames assembled through ffmpeg. Let a pentatonic score provide the timing, evolving from bone flute and bronze bells to orchestral instruments and incr…”
Leitfaden für den UI-Motion-Design-Workflow
“Build a 14-second UI motion piece from eight to twelve states such as a button, loading indicator, toggle, chart, and command palette. Choose commercially usable music near 120 BPM and measure its beats with NumPy. Writ…”
WebGPU-Ozeanszene in HTML
“Build an ocean scene that runs in the browser as a single HTML file using WebGPU. Drive the sea surface with FFT waves, add whitecaps, and place it under a realistic sky. Include WASD movement so the viewer can explore…”