Motion-Graphics-Prompts: 22 Vorlagen für Claude Opus

Prompts, mit denen Claude animierte Grafiken, Logo-Reveals und Kinetic Typography als Code baut.

Claude Opus 5.522 Prompts · Logo und Marke, Social-Formate, Daten und Charts

22 Prompts

Logo-Reveal mit nachgezeichneten Konturen

LogoIntroSVG

Live-Demo öffnen

Abweichung vom Prompt

back.out(1.6) überschießt rechnerisch nur auf etwa 100,4 Prozent, für die geforderten 96 → 102 → 100 Prozent ist back.out(4.9) gesetzt; MP4 und MOV mit Alpha entstehen erst beim HyperFrames-Render, hier läuft die Komposition im Browser.

Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Eingesetzte Werte (4)

LOGO_SVG_PFAD: assets/kaltenbach-maschinenbau-logo.svg (hier inline eingebettet)
HINTERGRUNDFARBE: #0E1726
FIRMENNAME: Kaltenbach Maschinenbau
BPM: 75

Einstieg für Imagefilme, Webinare und Social-Videos mit dem eigenen Logo.

Animiere unser Logo als Reveal für den Anfang von Videos. Quelle: [LOGO_SVG_PFAD]. Umsetzung als HyperFrames-Komposition mit GSAP, 1920 × 1080, 30 fps, 4 Sekunden, Hintergrund [HINTERGRUNDFARBE].
Ablauf: 0 bis 1,6 s zeichnen sich die Konturen per stroke-dashoffset nach, Ease power2.inOut, die Pfade in Leserichtung mit 0,08 s Versatz (Stagger). 1,6 bis 2,4 s füllen sich die Flächen in den Originalfarben, dabei skaliert das Zeichen mit leichtem Overshoot von 96 über 102 auf 100 Prozent (back.out(1.6)). 2,4 bis 3 s blendet der Schriftzug „[FIRMENNAME]“ ein und gleitet 12 px nach oben, Ease expo.out, 0,1 s nach dem Zeichen (Follow-through). Ab 3 s Endzustand halten.
Kamera: über die gesamten 4 s ein langsamer Push-in von 104 auf 100 Prozent Bildausschnitt (sine.out), damit das Bild auch im Halten nicht einfriert.
Taktung: Falls Musik dazukommt ([BPM] BPM), lege den Beginn der Füllung auf einen Schlag.
Regeln: Pfade, Proportionen und Farben exakt aus der SVG übernehmen, nichts nachzeichnen oder vereinfachen. Keine Glows, kein Partikelregen. Das Logo bleibt innerhalb der Title-Safe-Area (5 Prozent Rand).
Ausgabe: MP4 (H.264) und eine MOV-Datei mit Alphakanal für den Schnitt.

Platzhalter ausfüllen 4

LOGO_SVG_PFADHINTERGRUNDFARBEFIRMENNAMEBPM

Den größten Unterschied macht der langsame Push-in: Ohne ihn wirkt das Logo nach dem Zeichnen wie ein Standbild. Besteht dein Logo nur aus Flächen, lass Claude zuerst eine Outline-Version der SVG erzeugen und prüfe sie gegen das Original.

Aus: Claude Opus 5.5-Prompts

Kurzer Outro-Sting mit Website

OutroBrandingVariablen

Beispielergebnis: Kurzer Outro-Sting mit Website — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Einheitliches Ende für YouTube-Videos, Aufzeichnungen und Ads.

Baue einen Outro-Sting von 2,5 Sekunden als HyperFrames-Komposition, 1920 × 1080, 30 fps. Logo: [LOGO_SVG_PFAD], Akzentfarbe [MARKENFARBE].
Ablauf: 0 bis 0,6 s wischt eine Fläche in der Akzentfarbe diagonal durchs Bild (Wipe, Ease expo.inOut) und gibt dahinter eine weiße Fläche frei; in den schnellsten 0,2 s der Bewegung ein Richtungs-Motion-Blur von 8 px. 0,4 bis 1,2 s erscheint das Logo: kurze Anticipation (zieht sich 0,1 s auf 96 Prozent zusammen), dann auf 101 Prozent mit Overshoot und zurück auf 100 Prozent, dabei eingeblendet. 1,2 bis 1,8 s tippt sich darunter die Adresse „[WEBSITE_URL]“ als Typewriter, 35 ms pro Zeichen; eine dünne Akzentlinie darunter läuft 0,1 s versetzt mit (Follow-through). Rest: Standbild.
Typo-Hierarchie: Logo dominiert, URL höchstens ein Drittel der Logohöhe, normale Laufweite.
Bewegung knapp und sauber, keine Wackler. Speichere Logo, Farbe und URL als Variablen, damit wir weitere Varianten ohne Codeänderung rendern können.
Ausgabe: MP4 und WebM.

Platzhalter ausfüllen 3

LOGO_SVG_PFADMARKENFARBEWEBSITE_URL

Die kleine Anticipation vor dem Logo ist der Trick, der den Sting „gesetzt“ wirken lässt; ohne sie ploppt das Logo nur auf. Halte das Outro unter drei Sekunden, auf Social Media springen viele beim ersten Abspann weg.

Aus: Claude Opus 5.5-Prompts

Ruhiger Markenhintergrund als Loop

LoopMesseCanvas

Beispielergebnis: Ruhiger Markenhintergrund als Loop — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Hintergrund für Messebildschirme, Bühnenleinwände oder Wartebildschirme vor Webinaren.

Erzeuge einen ruhigen Hintergrund-Loop aus unseren Markenformen. Technik: Canvas 2D in einer HyperFrames-Komposition, 3840 × 2160, 30 fps, 20 Sekunden, als Schleife ohne sichtbaren Übergang.
Inhalt: 6 bis 8 große, weiche Formen in [MARKENFARBEN] auf einer dunklen Fläche [HINTERGRUNDFARBE], halbtransparent überlagert, verteilt auf drei Parallax-Ebenen: hinten große Formen mit 40 px Unschärfe und 10 px pro Sekunde, Mitte 20 px pro Sekunde, vorne kleinere, schärfere Formen mit höchstens 40 px pro Sekunde. So entsteht Tiefe ohne Kamerabewegung.
Loop-Technik: Jede Form läuft auf einer geschlossenen Bahn aus Sinus und Kosinus mit ganzzahliger Periode über die 20 s, damit Bild 1 und Bild 600 identisch sind. Keine Ease-Kurven mit Stillstand, die Bewegung ist durchgehend gleichmäßig.
Darüber ein feines Grain-Overlay (Rauschen mit 3 Prozent Deckkraft), das sich pro Bild ändert, gegen Banding in den Verläufen.
Kein Text, kein Logo, kein Flackern, keine harten Kanten. Die mittleren 40 Prozent des Bildes bleiben ruhiger und dunkler, damit dort später Text steht.
Ausgabe: MP4 (H.265, hohe Bitrate) und ein Standbild aus Sekunde 0 zur Abnahme.

Platzhalter ausfüllen 2

MARKENFARBENHINTERGRUNDFARBE

Das Grain-Overlay ist unscheinbar, verhindert auf großen Messebildschirmen aber die sichtbaren Stufen in den Verläufen. Lass dir vor dem Rendern bestätigen, dass Anfang und Ende rechnerisch identisch sind.

Aus: Claude Opus 5.5-Prompts

Bauchbinde für Interviewvideos

Lower ThirdInterviewOverlay

Beispielergebnis: Bauchbinde für Interviewvideos — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Name und Funktion von Sprechenden in Recruiting-, Kunden- oder Expertenvideos einblenden.

Erstelle eine Bauchbinde (Lower Third) als transparente Überlagerung, HyperFrames, 1920 × 1080, 30 fps, 6 Sekunden.
Inhalt: Zeile 1 „[PERSON_NAME]“ in 44 px Bold, Zeile 2 „[FUNKTION]“ in 28 px Regular mit 80 Prozent Deckkraft. Klare Typo-Hierarchie, beide linksbündig auf einer Kante.
Position: unten links, 96 px vom linken Rand, 120 px vom unteren Rand, innerhalb der Title-Safe-Area.
Ablauf: 0 bis 0,4 s fährt ein schmaler Balken in [MARKENFARBE] von links ein, Ease expo.out mit 6 px Overshoot. 0,3 bis 0,8 s erscheint Zeile 1 per Mask-Reveal von unten (Text gleitet aus einer unsichtbaren Kante), 0,45 bis 1 s Zeile 2 (Overlap, Ease power3.out). 5,2 bis 6 s läuft alles in umgekehrter Reihenfolge hinaus, schneller als hinein (Ease power2.in, 0,5 s).
Lesbarkeit auf hellem und dunklem Bild: halbtransparente dunkle Fläche hinter dem Text mit 8 px Radius. Name und Funktion als Variablen anlegen, die Fläche passt ihre Breite an den längeren Text an.
Ausgabe: MOV mit Alphakanal und ein PNG des Endzustands.

Platzhalter ausfüllen 3

PERSON_NAMEFUNKTIONMARKENFARBE

Das schnellere Herausfahren mit power2.in ist das Detail, das professionell wirkt; gleiches Tempo rein und raus fühlt sich zäh an. Prüfe die längste Funktionsbezeichnung im Team vorab.

Aus: Claude Opus 5.5-Prompts

Kinetic Typography für ein Reel

ReelTypografie9:16

Beispielergebnis: Kinetic Typography für ein Reel — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Eine Kernaussage als Hochformat-Video für Instagram, TikTok oder LinkedIn.

Baue ein Kinetic-Typography-Video im Hochformat, HyperFrames mit GSAP, 1080 × 1920, 30 fps, 9 Sekunden, stumm oder auf Musik mit [BPM] BPM (ohne Angabe 120 BPM, also ein Schlag alle 0,5 s).
Text (genau so übernehmen): „[KERNAUSSAGE]“. Teile ihn in Wortgruppen von höchstens drei Wörtern. Jeder Wechsel liegt auf einem Schlag, jede Gruppe steht rund zwei Schläge. Die nächste Gruppe verdrängt die vorige aus der Bewegungsrichtung.
Bewegungsvokabular, abwechselnd und nie dieselbe Bewegung dreimal hintereinander: Einflug von unten mit vertikalem Motion Blur (8 px nur während der Bewegung, Ease expo.out), Push-in von 140 auf 100 Prozent Skalierung, Mask-Reveal von links. Das wichtigste Wort landet auf einem betonten Schlag mit Squash and Stretch beim Aufsetzen (2 Bilder scaleY 0,9 und scaleX 1,08, dann zurück).
Typo-Hierarchie: Füllwörter 120 px in Weiß, das wichtigste Wort 200 px Black in [AKZENTFARBE], Hintergrund [HINTERGRUNDFARBE]. Schrift: eine kräftige Grotesk mit enger Laufweite.
Kamera: leichter Dauer-Drift, das ganze Bild wandert über die 9 s 20 px nach links, damit Standphasen nicht tot wirken.
Safe Area: oben 250 px, unten 400 px und seitlich 64 px frei lassen, dort liegen bei Reels die Bedienelemente. Letzte Gruppe 2 s halten.
Ausgabe: MP4, unter 4 MB.

Platzhalter ausfüllen 4

BPMKERNAUSSAGEAKZENTFARBEHINTERGRUNDFARBE

Am meisten bringt die Taktung auf den Schlag: Dieselben Bewegungen wirken auf Musik geschnitten doppelt so sicher. Kürze die Kernaussage auf höchstens 15 Wörter, sonst wird das Tempo zu hoch zum Mitlesen.

Aus: Claude Opus 5.5-Prompts

Frage-Antwort-Clip mit Tippeffekt

FAQSerie4:5

Beispielergebnis: Frage-Antwort-Clip mit Tippeffekt — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Häufige Kundenfragen als kurze Serie für Social Media beantworten.

Erstelle einen Frage-Antwort-Clip, HyperFrames, 1080 × 1350 (4:5), 30 fps, 10 Sekunden.
0 bis 3 s: Eine Eingabezeile im Stil einer Suchleiste tippt die Frage „[KUNDENFRAGE]“ als Typewriter mit unregelmäßigem Tipptempo (40 bis 90 ms pro Zeichen, kurze Pause nach Kommas) und blinkendem Cursor (530 ms an und aus, harte Schritte statt Überblendung).
3 bis 3,5 s: Die Suchleiste gleitet nach oben und wird auf 80 Prozent kleiner, Ease power3.inOut (Ease-in-out, weil der Weg sichtbar beginnt und endet).
3,5 bis 8 s: Die Antwort „[KURZANTWORT]“ baut sich Zeile für Zeile auf, jede Zeile per Stagger-Reveal 0,35 s versetzt, von 0 auf 100 Prozent Deckkraft und 16 px Versatz, Ease expo.out.
8 bis 10 s: Logo klein unten rechts, Endzustand halten.
Typo-Hierarchie: Frage 44 px Medium, Antwort 56 px Bold, eine Schrift in zwei Schnitten.
Safe Area: 80 px Rand ringsum, unten 200 px frei für Bildunterschriften der Plattform.
Design: helle Fläche, dunkler Text, eine Akzentfarbe [MARKENFARBE] nur für Cursor und Logo. Keine Fantasie-Oberfläche einer echten Suchmaschine, keine fremden Logos.
Ausgabe: MP4 und Posterbild im Endzustand.

Platzhalter ausfüllen 3

KUNDENFRAGEKURZANTWORTMARKENFARBE

Das unregelmäßige Tipptempo ist der Unterschied zwischen „echt getippt“ und „Animation“, gleichmäßige 50 ms wirken sofort maschinell. Halte die Antwort unter 30 Wörtern.

Aus: Claude Opus 5.5-Prompts

LinkedIn-Karussell als Kurzvideo

LinkedInKarussell1:1

Beispielergebnis: LinkedIn-Karussell als Kurzvideo — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Ein vorhandenes Karussell ohne neue Gestaltung als Video ausspielen.

Wandle unser LinkedIn-Karussell in ein quadratisches Video um. Folien als Bilder: [ORDNER_MIT_FOLIEN]. HyperFrames, 1080 × 1080, 30 fps, pro Folie 3,5 s, stumm oder auf Musik mit [BPM] BPM.
Übergänge: Swipe wie beim Wischen auf dem Handy. Die Folie schiebt sich nach links aus dem Bild, die nächste folgt direkt dahinter, 0,5 s, Ease power3.inOut, in der Mitte der Bewegung ein horizontaler Motion Blur von 6 px. Die neue Folie kommt mit 2 Prozent Overshoot an und setzt sich (Follow-through). Bei Musik liegt jeder Wechsel auf einem Schlag, die Standzeit rundest du auf ganze Takte.
Unten eine dünne Fortschrittsleiste in [MARKENFARBE], die über die gesamte Länge linear wächst.
Folien unverändert lassen, nicht beschneiden und nicht neu setzen. Auf der letzten Folie 2,5 s länger stehen bleiben, dazu ein langsamer Push-in von 100 auf 103 Prozent.
Prüfe vorher, ob alle Bilder dasselbe Seitenverhältnis haben, und nenne Abweichungen, bevor du renderst.
Ausgabe: MP4 unter 8 MB.

Platzhalter ausfüllen 3

ORDNER_MIT_FOLIENBPMMARKENFARBE

Der kurze Motion Blur im Swipe ist das Detail, das den Übergang wie eine echte Wischgeste wirken lässt. Ab sechs Folien solltest du die Standzeit auf 3 Sekunden senken.

Aus: Claude Opus 5.5-Prompts

Tipp-Serie als Vorlage mit Variablen

SerieVorlage9:16

Beispielergebnis: Tipp-Serie als Vorlage mit Variablen — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Eine wöchentliche Serie im immer gleichen Rahmen, nur der Inhalt wechselt.

Baue eine wiederverwendbare Vorlage für unsere wöchentliche Serie „[SERIENNAME]“. HyperFrames, 1080 × 1920, 30 fps, 8 Sekunden.
Variablen: Folgennummer, Titel des Tipps, bis zu drei Stichpunkte, Akzentfarbe. Standardwerte: Folge 1, „Titel“, drei Platzhalter-Stichpunkte, [MARKENFARBE].
Ablauf: 0 bis 1 s Folgennummer groß in der Bildmitte (Pop mit back.out(1.7)), dann wandert sie in 0,6 s klein in die Ecke oben links (Ease power3.inOut, Größe und Position gleichzeitig). 1 bis 3 s Titel als Split-Text-Animation, Wort für Wort 60 ms versetzt von unten. 3 bis 7 s Stichpunkte nacheinander, jeweils mit Häkchen-Icon, das sich per stroke-dashoffset in 0,4 s zeichnet und mit einem kleinen Overshoot (Skalierung 115 auf 100 Prozent) einrastet. 7 bis 8 s Hinweis „Folge [NAECHSTE_FOLGE] nächste Woche“.
Typo-Hierarchie in drei Stufen: Nummer, Titel, Stichpunkte, mit festen Größen aus Variablen.
Der Rahmen (Fläche, Nummer, Schrift) bleibt bei jeder Folge gleich. Lange Titel werden automatisch kleiner gesetzt, bis sie in zwei Zeilen passen. Alles liegt in der Safe Area: oben 250 px, unten 400 px, seitlich 64 px.
Rendere zum Test Folge 1 und eine Folge mit einem 70 Zeichen langen Titel.

Platzhalter ausfüllen 3

SERIENNAMEMARKENFARBENAECHSTE_FOLGE

Die gleiche Bewegung der Folgennummer in jeder Folge wird zum Wiedererkennungszeichen der Serie, wichtiger als jede Farbe. Teste die Vorlage immer mit dem längsten realistischen Titel.

Aus: Claude Opus 5.5-Prompts

Umsatzkurve über acht Quartale

ChartKennzahlenSVG

Beispielergebnis: Umsatzkurve über acht Quartale — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Entwicklung einer Kennzahl für Präsentation, Geschäftsbericht oder LinkedIn zeigen.

Animiere ein Liniendiagramm als SVG in einer HyperFrames-Komposition, 1920 × 1080, 30 fps, 8 Sekunden.
Daten (exakt so, nichts runden oder ergänzen): [QUARTALSWERTE]. Achsentitel „[KENNZAHL] in [EINHEIT]“.
Ablauf: 0 bis 1 s Achsen und Gitterlinien blenden dezent ein, Gitter mit 0,05 s Stagger von unten nach oben. 1 bis 5 s zeichnet sich die Linie von links nach rechts (stroke-dashoffset, Ease power1.inOut für fast gleichmäßiges Tempo), ein Punkt läuft an der Spitze mit, und der aktuelle Wert zählt im Label darüber als Count-up mit. 5 bis 6 s wird der höchste Wert mit einem Ring markiert, der mit Overshoot aufspringt (back.out(2)), gleichzeitig ein leichter Kamera-Push-in von 100 auf 106 Prozent Richtung Höchstwert (power2.inOut). Ab 6 s Endzustand halten.
Kein Overshoot auf der Linie selbst, Datenpunkte dürfen nie über ihren Wert hinausschießen.
Typo-Hierarchie: Wert-Label 48 px Bold, Achsenwerte 20 px, Achsentitel 24 px. Y-Achse beginnt bei 0. Zahlen im deutschen Format mit Tausenderpunkt, tabular-nums. Linie in Markenfarbe, Gitter in 10 Prozent Grau.
Prüfe im Endbild, ob Linienpunkte und Achsenwerte zusammenpassen, bevor du renderst.

Platzhalter ausfüllen 3

QUARTALSWERTEKENNZAHLEINHEIT

Der Push-in auf den Höchstwert lenkt den Blick ohne Pfeil und ohne Text. Die Y-Achse bei 0 beginnen zu lassen verhindert, dass kleine Schwankungen wie ein Einbruch aussehen.

Aus: Claude Opus 5.5-Prompts

Kostenaufteilung als Donut-Diagramm

ChartBudget1:1

Beispielergebnis: Kostenaufteilung als Donut-Diagramm — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Budget- oder Umsatzanteile in Präsentationen und Reports verständlich machen.

Erstelle ein animiertes Donut-Diagramm als SVG, HyperFrames, 1080 × 1080, 30 fps, 7 Sekunden.
Daten (Prozent, Summe 100): [KATEGORIEN_UND_ANTEILE]. Titel über dem Diagramm: „[DIAGRAMMTITEL]“.
Ablauf: Der Ring dreht sich beim Start einmal 20 Grad ins Bild (Ease power3.out). Die Segmente wachsen nacheinander im Uhrzeigersinn ab 12 Uhr, jedes in 0,6 s mit Ease power2.out, ohne Overshoot, damit kein Segment kurz größer wirkt als sein Wert. Sobald ein Segment steht, erscheint außen sein Label mit Prozentwert: Die Verbindungslinie zeichnet sich zuerst, das Label folgt 0,1 s später mit kleinem Pop (Follow-through). Zum Schluss zählt in der Mitte die Gesamtsumme „[GESAMTBETRAG]“ als Count-up hoch.
Typo-Hierarchie: Summe in der Mitte 96 px Bold, Labels 28 px, Titel 40 px.
Farben: größtes Segment in Markenfarbe, die übrigen in abgestuften Grautönen, damit der Fokus klar bleibt. Labels dürfen sich nicht überlappen, bei kleinen Segmenten Linien länger ziehen.
Ausgabe: MP4 und PNG des Endzustands.

Platzhalter ausfüllen 3

KATEGORIEN_UND_ANTEILEDIAGRAMMTITELGESAMTBETRAG

Overshoot gehört an Labels und Icons, nie an Datenwerte; das ist die eine Regel, die ein Chart seriös hält. Ab sechs Kategorien wird ein Donut unleserlich, fasse kleine Posten zu „Sonstiges“ zusammen.

Aus: Claude Opus 5.5-Prompts

Standorte auf einer Karte
KarteStandorteImagefilm
Live-Demo öffnen
Abweichung vom Prompt
Es lag keine Karten-SVG vor, daher ein vereinfachter Deutschland-Umriss aus rund 80 Grenzpunkten in Plattkarte (abstandstreue Zylinderprojektion, Standardbreitenkreis 51° N), mit der auch die Standorte umgerechnet sind; MP4 entsteht erst beim HyperFrames-Render.
Ergebnis mit Claude Opus 5.5, unverändert übernommen.
Eingesetzte Werte (4)
KARTEN_SVG_PFAD
karten/deutschland-umriss.svg (hier als vereinfachter Inline-Umriss)
STANDORTE_MIT_KOORDINATEN
Stuttgart (Hauptsitz) 48,78/9,18 · Karlsruhe 49,01/8,40 · Heilbronn 49,14/9,22 · Pforzheim 48,89/8,70 · Reutlingen 48,49/9,21 · Ulm 48,40/9,99 · Mannheim 49,49/8,47 · Freiburg 47,99/7,85 · München 48,14/11,58 · Frankfurt am Main 50,11/8,68 · Nürnberg 49,45/11,08
MARKENFARBE
#0B7285
ANZAHL
11
Filialen, Kunden oder Servicegebiete im Imagefilm oder Pitch zeigen.
```
Animiere eine Standortkarte, HyperFrames mit SVG, 1920 × 1080, 30 fps, 10 Sekunden.
Karte: Nutze den Umriss aus [KARTEN_SVG_PFAD] unverändert. Standorte mit Koordinaten: [STANDORTE_MIT_KOORDINATEN]. Rechne die Koordinaten mit derselben Projektion wie die Karte um und nenne mir die Projektion.
Ablauf: 0 bis 1,5 s blendet die Karte in hellem Grau ein, in der Totale. 1,5 bis 6 s fährt die Kamera per Push-in auf die Region mit den meisten Standorten (Skalierung 1 auf 1,5, Ease power3.inOut, 1,2 s); die Standorte erscheinen nacheinander als Punkte in [MARKENFARBE] mit Pop (back.out(2)) und einem Puls-Ring, der auf das 2,5-Fache wächst und dabei ausblendet (0,8 s), jeweils mit Ortsnamen. Die Beschriftungen liegen auf einer eigenen Ebene und bleiben beim Zoom gleich groß. 6 bis 8 s Pull-out zurück in die Totale, dünne Bögen zeichnen sich vom Hauptsitz zu den Standorten (stroke-dashoffset, 0,1 s Stagger). 8 bis 10 s Zeile „[ANZAHL] Standorte in Deutschland“.
Keine erfundenen Orte, keine Grenzen nachzeichnen.
Prüfe per Snapshot, ob jeder Punkt an der richtigen Stelle liegt.
```
Platzhalter ausfüllen 4
KARTEN_SVG_PFADSTANDORTE_MIT_KOORDINATENMARKENFARBEANZAHL
Der Push-in auf die dichteste Region löst das Problem überlappender Punkte, ohne dass du Orte weglassen musst. Nimm einen Kartenumriss aus einer freien Quelle mit bekannter Projektion.
Aus: Claude Opus 5.5-Prompts

Vertriebstrichter mit Umwandlungsraten

FunnelVertriebPitch

Beispielergebnis: Vertriebstrichter mit Umwandlungsraten — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Funnel-Zahlen im Vertriebsmeeting oder Investorenpitch erklären.

Erstelle einen animierten Vertriebstrichter, HyperFrames, 1920 × 1080, 30 fps, 9 Sekunden.
Stufen mit Werten (exakt übernehmen): [STUFEN_UND_WERTE].
Ablauf: Die Stufen bauen sich von oben nach unten auf, jede als waagerechter Balken, dessen Breite proportional zum Wert ist, zentriert. Jeder Balken wächst per scaleX von der Mitte nach außen in 0,7 s (Ease expo.out, ohne Overshoot), der Wert zählt dabei als Count-up hoch. Zwischen zwei Stufen erscheint rechts daneben die Umwandlungsrate in Prozent mit einer Nachkommastelle, die du aus den Werten berechnest, 0,15 s nach dem Balken (Follow-through).
Zum Schluss Push-in der Kamera auf die Stufe mit der niedrigsten Umwandlungsrate (Skalierung 1,15, power2.inOut), sie färbt sich in [AKZENTFARBE], alle anderen gehen auf 40 Prozent Deckkraft. Darunter die Zeile „Größter Verlust: [STUFENNAME]“.
Typo-Hierarchie: Werte 40 px Bold mit tabular-nums, Stufennamen 24 px, Raten 28 px in Akzentfarbe.
Nenne mir die berechneten Raten im Chat, damit ich sie prüfen kann.

Platzhalter ausfüllen 3

STUFEN_UND_WERTEAKZENTFARBESTUFENNAME

Das Abdunkeln aller anderen Stufen auf 40 Prozent erzählt die Pointe deutlicher als jede Beschriftung. Vergleiche die Raten aus dem Chat mit deinem CRM, bevor das Video rausgeht.

Aus: Claude Opus 5.5-Prompts

Zeitleiste zur Firmengeschichte

ZeitleisteJubiläumEmployer Branding

Beispielergebnis: Zeitleiste zur Firmengeschichte — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Jubiläum, Über-uns-Seite oder Employer-Branding-Video mit Meilensteinen.

Baue eine horizontale Zeitleiste als Kamerafahrt, HyperFrames, 1920 × 1080, 30 fps, 15 Sekunden.
Meilensteine (Jahr und Text, exakt übernehmen): [MEILENSTEINE].
Die Zeitleiste ist breiter als das Bild. Eine virtuelle Kamera fährt seitlich (Truck) von links nach rechts und hält an jedem Meilenstein 0,8 s; zwischen den Halten Ease power2.inOut, damit sie weich anfährt und bremst. Bei langen Wegen ein leichter horizontaler Motion Blur.
Parallax-Ebenen für Tiefe: ein feines Hintergrundraster läuft mit halber Geschwindigkeit, die Linie mit voller, die Jahreszahlen mit 1,2-facher.
An jedem Halt wächst ein senkrechter Strich aus der Linie (mit 4 px Overshoot), die Jahreszahl erscheint groß per Mask-Reveal, der Text darunter in höchstens zwei Zeilen 0,15 s später.
Am Ende Pull-out (Zoom heraus, Ease expo.inOut, 1,5 s), bis die ganze Leiste sichtbar ist, darüber erscheint „[JUBILAEUMSZEILE]“.
Typo-Hierarchie: Jahreszahlen 96 px in Markenfarbe, Text 28 px. Linie dunkel. Bilder optional aus [BILDORDNER], dann klein oberhalb des Strichs, nicht verfremdet.
Ausgabe: MP4.

Platzhalter ausfüllen 3

MEILENSTEINEJUBILAEUMSZEILEBILDORDNER

Die Parallax-Ebenen machen aus einer flachen Seitwärtsbewegung eine Kamerafahrt mit Tiefe, und sie kosten nur zwei Zeilen Code. Plane höchstens acht Meilensteine.

Aus: Claude Opus 5.5-Prompts

Produkt in 3D mit Feature-Hinweisen

3DThree.jsProdukt

Beispielergebnis: Produkt in 3D mit Feature-Hinweisen — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Produktvideo für Shop, Messe oder Launch ohne Fotostudio.

Erstelle ein Produktvideo mit Three.js in einer HyperFrames-Komposition, 1920 × 1080, 30 fps, 12 Sekunden.
3D-Modell: [GLB_PFAD]. Material und Farben aus der Datei übernehmen.
Kamera: PerspectiveCamera mit 30 Grad Sichtfeld, das wirkt wie ein leichtes Teleobjektiv und verzerrt das Produkt kaum. Leicht erhöhter Blickwinkel, etwa 15 Grad von oben.
Licht: Dreipunkt-Licht mit weichem Key Light von links oben (45 Grad), schwachem Fill Light von rechts und einem Rim Light von hinten für eine helle Kante. Dazu eine neutrale Umgebung für Reflexionen (RoomEnvironment), Tone Mapping ACES, weicher Kontaktschatten am Boden. Hintergrund: Studio-Verlauf.
Ablauf: Das Produkt dreht sich in 12 s um 360 Grad (Orbit). Bei 2, 5 und 8 s bremst die Drehung mit Ease-in-out ab, die Kamera fährt per Dolly 15 Prozent näher an das Detail (Position ändern, nicht das Sichtfeld), eine dünne Linie zeichnet sich zum Detail, und daneben erscheint der Hinweis aus [FEATURE_LISTE]. Danach Dolly zurück und weiterdrehen. Bei 11 s erscheint „[PRODUKTNAME]“ unten mittig.
Die Drehung muss deterministisch an der Timeline hängen, kein requestAnimationFrame mit Echtzeit, damit jedes gerenderte Bild gleich aussieht.
Ausgabe: MP4 und drei Standbilder bei 2, 5 und 8 s.

Platzhalter ausfüllen 3

GLB_PFADFEATURE_LISTEPRODUKTNAME

Das Rim Light von hinten trennt das Produkt vom Hintergrund und macht mehr aus als jedes Material. Ein GLB unter 20 MB rendert deutlich schneller; verkleinere große Modelle vorher mit einem Tool wie gltf-transform.

Aus: Claude Opus 5.5-Prompts

Software-Demo mit Cursor

DemoSaaSCursor

Beispielergebnis: Software-Demo mit Cursor — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Eine Funktion der eigenen Software für Website oder Sales-Deck vorführen.

Baue eine Software-Demo als HyperFrames-Komposition, 1920 × 1080, 30 fps, 14 Sekunden.
Oberfläche: Bilde eine vereinfachte Version unserer Anwendung [PRODUKTNAME] in HTML und CSS nach, nach dem Screenshot [SCREENSHOT_PFAD]. Nur Formen, Farben und Beschriftungen übernehmen, die für den Ablauf nötig sind.
Ablauf: Ein großer Mauszeiger bewegt sich auf geschwungenen Bézier-Bahnen (Ease power2.inOut, bei langen Wegen leichter Motion Blur) und führt diese Schritte aus: [ABLAUF_IN_SCHRITTEN]. Vor jedem Klick bremst der Zeiger kurz ab (Anticipation), beim Klick staucht er sich auf 90 Prozent (Squash) und federt zurück, an der Klickstelle wächst ein kleiner Ring und blendet aus.
Kamera: Bei jedem Schritt Push-in auf den aktiven Bereich (Faktor 1,4, Ease power3.inOut, 0,8 s), danach Pull-out. Die Oberfläche reagiert 0,1 s nach dem Klick (Follow-through), nie gleichzeitig.
Rechts oben bei jedem Schritt ein Callout mit Schrittnummer, das per Mask-Reveal erscheint.
Keine echten Kundendaten, Platzhalternamen verwenden.
Ausgabe: MP4 und WebM für die Website.

Platzhalter ausfüllen 3

PRODUKTNAMESCREENSHOT_PFADABLAUF_IN_SCHRITTEN

Die 0,1 s Verzögerung zwischen Klick und Reaktion der Oberfläche lässt die Demo echt wirken. Beschreibe jeden Schritt mit genau einer Aktion, zum Beispiel „Klick auf Exportieren“, dann stimmt das Timing.

Aus: Claude Opus 5.5-Prompts

Launch-Teaser mit Enthüllung

LaunchTeaser4:5

Beispielergebnis: Launch-Teaser mit Enthüllung — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Neugier vor einem Produktstart wecken, Video für Newsletter und Social Media.

Erstelle einen Launch-Teaser, HyperFrames, 1080 × 1350, 30 fps, 10 Sekunden, auf Musik mit [BPM] BPM oder stumm.
Produktbild freigestellt: [PRODUKT_PNG_PFAD].
Ablauf: 0 bis 3 s nur die Silhouette des Produkts als dunkle Form vor fast schwarzem Hintergrund, ein schmaler Lichtstreifen (Specular Sweep) wandert über die Kante. Über die gesamten 10 s ein langsamer Push-in von 100 auf 108 Prozent. 3 bis 6 s öffnet sich eine kreisförmige Maske von der Mitte nach außen (Iris-Reveal per clip-path, Ease expo.inOut) und zeigt das Produkt in Farbe; bei Musik liegt der Beginn auf dem stärksten Schlag. 6 bis 8 s erscheint „[TEASER_ZEILE]“ per Split-Text, Wort für Wort. 8 bis 10 s das Datum „[LAUNCH_DATUM]“ in großen Ziffern, die als Ziffern-Walze (Slot-Machine) auf ihren Wert rollen und mit leichtem Overshoot einrasten, dazu ein kleines Logo.
Typo-Hierarchie: Datum 180 px Black, Teaser-Zeile 48 px, Logo klein.
Safe Area: wichtige Inhalte mindestens 80 px vom Rand, unten 200 px frei.
Das Produktbild bleibt unverändert, kein Nachschärfen, keine zusätzlichen Spiegelungen.
Ausgabe: MP4 unter 6 MB und ein Standbild aus Sekunde 2 als Vorschaubild.

Platzhalter ausfüllen 4

BPMPRODUKT_PNG_PFADTEASER_ZEILELAUNCH_DATUM

Die Ziffern-Walze beim Datum ist der Moment, den Leute sich merken. Ein Standbild aus der Silhouettenphase als Vorschaubild macht neugieriger als das fertige Produkt.

Aus: Claude Opus 5.5-Prompts

Onboarding: Ablauf des ersten Arbeitstags

OnboardingHRIntranet

Beispielergebnis: Onboarding: Ablauf des ersten Arbeitstags — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Neue Mitarbeitende vor dem Start im Intranet oder per E-Mail informieren.

Erstelle ein Onboarding-Video „Dein erster Tag bei [FIRMENNAME]“, HyperFrames, 1920 × 1080, 30 fps, 20 Sekunden.
Inhalt: Tagesablauf mit Uhrzeiten (exakt übernehmen): [TAGESABLAUF].
Gestaltung: Links eine senkrechte Uhrzeitleiste, rechts zu jedem Punkt eine Karte mit einfachem Icon aus geometrischen Formen (Tasse, Laptop, Schlüssel, Teller) und einem Satz.
Bewegung: Die Kamera fährt die Uhrzeitleiste von oben nach unten ab (vertikaler Truck, Ease power2.inOut zwischen den Stationen). Die Karten gleiten 40 px von rechts herein (Ease expo.out), das Icon folgt 0,1 s später mit kleinem Pop (Overlap). Jedes Icon hat eine kurze Nebenbewegung, etwa Dampf über der Tasse oder ein Schlüssel, der sich dreht. Die aktuelle Uhrzeit leuchtet in [MARKENFARBE], die vorherigen werden grau.
Typo-Hierarchie: Uhrzeit 40 px Bold, Satz 28 px.
Am Ende: „Bei Fragen meldest du dich bei [ANSPRECHPARTNER]“.
Ton: freundlich, Du-Form. Keine Personenfotos, keine erfundenen Zitate.
Zusätzlich eine Fassung 1080 × 1920 für das Handy, Karten untereinander, mit Safe Area oben 250 px und unten 400 px.

Platzhalter ausfüllen 4

FIRMENNAMETAGESABLAUFMARKENFARBEANSPRECHPARTNER

Die kleinen Nebenbewegungen der Icons machen das Video freundlich, ohne Menschen zu zeigen. Schick es zwei Tage vor dem Start, dann hat die neue Person Zeit, Fragen vorher zu klären.

Aus: Claude Opus 5.5-Prompts

Prozess in Piktogrammen erklären

ProzessInternPiktogramme

Beispielergebnis: Prozess in Piktogrammen erklären — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Interne Abläufe wie Unfallmeldung, Urlaubsantrag oder Reisekosten verständlich machen.

Erkläre den Ablauf „[PROZESSNAME]“ in einer Animation aus Piktogrammen, HyperFrames mit SVG, 1920 × 1080, 30 fps, 16 Sekunden, stumm.
Schritte (exakt übernehmen): [SCHRITTE].
Jeder Schritt bekommt ein eigenes, einfaches Piktogramm im Stil von Sicherheitszeichen (klare Linien, 4 px Strichstärke, abgerundete Enden). Die Piktogramme zeichnen sich nacheinander per Linienanimation (stroke-dashoffset, 0,8 s, Ease power2.inOut), darunter Schrittnummer und Text in großer, gut lesbarer Schrift (mindestens 44 px).
Verbindungspfeile wachsen erst, wenn der vorherige Schritt fertig ist; die Pfeilspitze erscheint mit kleinem Overshoot am Ende des Strichs.
Kamera: Bei mehr als vier Schritten fährt das Bild seitlich mit (Truck, Ease-in-out), der aktive Schritt steht immer im mittleren Drittel. Am Ende Pull-out, bis alle Schritte nebeneinander stehen, darunter „[WEITERE_INFOS]“.
Ruhige Taktung: jeder Schritt bekommt gleich viel Zeit, keine schnellen Schnitte.
Kontrast WCAG AA. Keine Untertitel nötig, der Text steht im Bild.

Platzhalter ausfüllen 3

PROZESSNAMESCHRITTEWEITERE_INFOS

Die gleichmäßige Taktung pro Schritt hilft beim Merken mehr als jeder Effekt. Lass den Ablauf vor dem Rendern von der zuständigen Fachabteilung freigeben.

Aus: Claude Opus 5.5-Prompts

Rundgang durch den Standort als Grundriss
Employer BrandingStandortIsometrie
Live-Demo öffnen
Abweichung vom Prompt
Ohne echte Skizze ist die Anordnung der Bereiche angenommen; das Beispiel läuft als HyperFrames-HTML im Browser statt als gerendertes Video.
Ergebnis mit Claude Opus 5.5, unverändert übernommen.
Eingesetzte Werte (3)
BEREICHE_MIT_KURZTEXT
Empfang: Hier meldest du dich an und bekommst deinen Besucherausweis; Büro & Konstruktion: Vertrieb, Einkauf und unsere Konstrukteure sitzen Tür an Tür; Kantine: Frühstück ab 7 Uhr, mittags zwei warme Gerichte; Montagehalle: Hier entstehen unsere Fräsmaschinen, von der Baugruppe bis zur Abnahme; Lager & Versand: Ersatzteile in 24 Stunden, verladen an vier Rampen
SKIZZE_PFAD
skizzen/werk-hessental-grundriss.jpg
MARKENFARBE
#1B5FA8 (Kaltenbach-Blau)
Bewerbende und neue Kolleginnen mit Büro, Werk oder Lager vertraut machen.
```
Erstelle einen Rundgang durch unseren Standort als isometrischen Grundriss, HyperFrames mit SVG, 1920 × 1080, 30 fps, 18 Sekunden.
Bereiche in der Reihenfolge des Rundgangs: [BEREICHE_MIT_KURZTEXT]. Grobe Anordnung laut Skizze: [SKIZZE_PFAD].
Ablauf: Der Grundriss baut sich in 2 s aus flachen Blöcken auf, die mit 0,05 s Versatz von unten hochwachsen und beim Landen kurz nachfedern (Squash and Stretch, back.out(1.4)).
Kamera: orthografische Isometrie ohne Perspektive. Die Kamera schwenkt und zoomt von Bereich zu Bereich (Pan plus Zoom auf 1,6, Ease power2.inOut, 1 s pro Weg). Der aktive Bereich hebt sich um 12 px an und färbt sich in [MARKENFARBE], daneben erscheint ein Schild mit Name und einem Satz; das Schild liegt auf einer eigenen Ebene und bewegt sich etwas schneller als der Grundriss (Parallax). Eine gestrichelte Linie zeichnet den gegangenen Weg nach.
Am Ende Pull-out in die Totale mit allen Bereichen beschriftet.
Stil: ruhige Flächen, zwei Grautöne plus Markenfarbe, weiche Schatten nach rechts unten, keine Menschenfiguren, keine Möbel außer einfachen Tischen, wo nötig.
```
Platzhalter ausfüllen 3
BEREICHE_MIT_KURZTEXTSKIZZE_PFADMARKENFARBE
Das Nachfedern der Blöcke beim Aufbau gibt dem Grundriss Gewicht; ohne es wirkt er wie ein Diagramm. Eine Handskizze reicht, Claude liest die Anordnung aus dem Foto.
Aus: Claude Opus 5.5-Prompts

Animierter Hero-Hintergrund für die Website

WebsiteCanvasHero

Beispielergebnis: Animierter Hero-Hintergrund für die Website — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Bewegung im Kopfbereich der Website, ohne ein schweres Video einzubinden.

Schreibe einen animierten Hintergrund für den Hero-Bereich unserer Website als einzelne HTML-Datei mit Canvas 2D und reinem JavaScript, ohne Bibliotheken.
Motiv: ein feines Raster aus Punkten, das sich wie eine sanfte Welle hebt und senkt (zwei überlagerte Sinuswellen mit unterschiedlicher Periode, damit sich das Muster nicht sichtbar wiederholt). Punkte in [MARKENFARBE] mit 30 bis 60 Prozent Deckkraft auf [HINTERGRUNDFARBE], weiter hinten liegende Punkte kleiner und blasser (Tiefenstaffelung).
Interaktion: Der Mauszeiger drückt die Welle in seiner Nähe ein (Radius 160 px). Die Punkte folgen über eine Federsimulation (Steifigkeit und Dämpfung einstellbar), damit die Delle beim Verlassen nachschwingt.
Anforderungen: maximal 1.500 Punkte, Bewegung über Delta-Zeit, damit sie auf 60 und 120 Hz gleich schnell läuft, auf Retina-Displays scharf (devicePixelRatio), bei Größenänderung neu berechnen, Animation pausiert per IntersectionObserver, wenn der Bereich nicht sichtbar ist. Bei prefers-reduced-motion nur ein ruhiges Standbild, auf Touch-Geräten ohne Mausreaktion.
Die Datei soll ein Container-Element füllen, damit wir sie in [CMS_ODER_FRAMEWORK] einbauen können. Erkläre am Ende in drei Sätzen, wie wir sie einbinden.

Platzhalter ausfüllen 3

MARKENFARBEHINTERGRUNDFARBECMS_ODER_FRAMEWORK

Die Federsimulation mit Nachschwingen macht den Unterschied zwischen „reagiert“ und „lebt“. Miss nach dem Einbau mit Lighthouse, ob die Animation die Ladezeit verschlechtert.

Aus: Claude Opus 5.5-Prompts

Animierte Icons für Leistungsseiten

IconsSVGWebsite

Beispielergebnis: Animierte Icons für Leistungsseiten — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Leistungen oder Produktvorteile auf der Website mit kleinen Animationen auflockern.

Gestalte sechs animierte Icons als Inline-SVG für unsere Leistungsseite, ein Icon pro Leistung: [LEISTUNGEN].
Stil: Linien-Icons, 48 × 48 px Raster, 2 px Strich, abgerundete Enden, Farbe über currentColor steuerbar.
Animation beim Erscheinen: Sobald das Raster in den Sichtbereich kommt (IntersectionObserver, Schwelle 0,3), zeichnen sich die Icons als Stagger-Reveal nacheinander nach, 100 ms Versatz, je 800 ms per stroke-dashoffset mit Easing cubic-bezier(.16,1,.3,1).
Mikro-Interaktion bei Hover und bei :focus-visible auf der umgebenden Karte: eine kleine, zum Motiv passende Bewegung mit Feder-Charakter (Overshoot per linear()-Easing oder cubic-bezier(.34,1.56,.64,1), 400 ms), etwa ein Zahnrad, das sich um 30 Grad dreht und leicht zurückpendelt, oder ein Umschlag, der sich öffnet. Die Karte selbst hebt sich um 2 px (Hover-Lift). Nur transform, opacity und stroke-dashoffset animieren, nur CSS plus der eine IntersectionObserver.
Bei prefers-reduced-motion keine Bewegung, Icons sofort vollständig zeigen.
Liefere eine HTML-Datei mit allen sechs Icons in einem Raster als Vorschau und dem Code jedes Icons einzeln zum Kopieren.

Platzhalter ausfüllen 1

LEISTUNGEN

Gleiche Hover-Reaktion bei Tastaturfokus vergessen die meisten, dabei kostet sie nur einen Selektor. Nenne pro Leistung ein konkretes Bild, sonst landen alle Icons bei Zahnrad, Glühbirne und Rakete.

Aus: Claude Opus 5.5-Prompts

Animierte Titelfolie für Vorträge

PräsentationKeynoteTitelfolie

Beispielergebnis: Animierte Titelfolie für Vorträge — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Eröffnung für Keynotes, Kundentermine oder Konferenzvorträge als Video oder Browser-Folie.

Baue eine animierte Titelfolie für einen Vortrag, HyperFrames, 1920 × 1080, 30 fps, 6 Sekunden, danach Standbild.
Inhalt: Titel „[VORTRAGSTITEL]“, Untertitel „[UNTERTITEL]“, Name und Datum klein unten links: „[REFERENT_UND_DATUM]“.
Ablauf: 0 bis 1,5 s laufen drei dünne Linien in [MARKENFARBE] von links ins Bild, 0,12 s versetzt (Stagger, Ease expo.out), und bilden einen Rahmen um den Titelbereich. 1 bis 2,5 s erscheint der Titel Zeile für Zeile per Mask-Reveal von unten, jede Zeile 0,15 s nach der vorigen (Overlap). 2,5 bis 3,5 s Untertitel per Überblendung mit 12 px Weg. 3,5 bis 4 s Name und Datum. Über die gesamten 6 s ein kaum sichtbarer Push-in von 100 auf 102 Prozent, danach bewegt sich nichts mehr.
Typo-Hierarchie: Titel 96 px Bold mit enger Laufweite, Untertitel 40 px Regular, Name und Datum 22 px. Alles innerhalb der Title-Safe-Area (5 Prozent Rand), weil Beamer oft beschneiden.
Verboten: Kursiv-Akzente im Titel, nummerierte Etiketten wie „01“, Neon-Glows.
Ausgabe: MP4 zum Einbetten in PowerPoint oder Keynote und zusätzlich die HTML-Datei, die im Browser im Vollbild läuft.

Platzhalter ausfüllen 4

VORTRAGSTITELUNTERTITELREFERENT_UND_DATUMMARKENFARBE

Der Overlap von 0,15 s zwischen den Titelzeilen lässt sie wie aus einem Guss erscheinen; gleichzeitig wirkt es hektisch, nacheinander zäh. In PowerPoint das Video auf „Automatisch starten“ stellen.

Aus: Claude Opus 5.5-Prompts