Claude Motion Vorlagen: 24 Motion-Stile

Die Spezifikation hinter jedem Stil

Paper Editorial

Ideal für: Essays, Erklärvideos, Meinungsbeiträge. Warmes Papier, eine Serifen-Überschrift und ein rostroter Akzent. Ruhig, wie eine Magazinreportage.

Layout: Breiter linker Rand, Überschrift oben links, eine dünne Linie über den Abschnittsbeschriftungen. Balken sind flache Blöcke.

Bewegung: Langsames Aufsteigen um 28 px mit Einblenden, 0,8 s, power2.out. Es bewegt sich immer nur ein Element. Kein Nachfedern.

Blueprint

Ideal für: Architektur, Systeme, technische Walkthroughs. Tiefblaues Raster mit cyanfarbenen Linien. Alles wird als Umriss gezeichnet und wird wie von einem Plotter aufgezogen.

Layout: Feines 60-px-Raster im Hintergrund. Boxen und Balken sind Umrisse, nie Füllungen. Beschriftungen sind klein, in Großbuchstaben und Mono.

Bewegung: Wischeffekte von links nach rechts (clip-path), 0,9 s, power1.inOut. Beschriftungen folgen ihrer Form. Nichts blendet ein oder federt nach.

Kinetic Poster

Ideal für: Launches, Promos, Social-Cuts. Schwarze Bühne, schmale Schrift in Plakatgröße und eine grelle Akzentfarbe. Wörter schlagen hart und schnell ein.

Layout: Schmale Überschriften in Großbuchstaben füllen das Bild mit engem Zeilenabstand. Eine Idee pro Szene.

Bewegung: Harte Schnitte: Elemente springen aus 118 % Skalierung in 0,32 s ein, expo.out, im Abstand von 0,07 s. Nichts driftet.

Quiet Keynote

Ideal für: Produktgeschichten, Investor-Updates. Eine helle Bühne, viel Raum und ruhige Zahlen auf weißen Karten. Eine Zahl bestimmt jedes Bild.

Layout: Zentriert. Weiße Karten mit weichem Schatten. Höchstens zwölf Wörter pro Szene.

Bewegung: Sanfte Skalierung von 92 % auf 100 % mit Einblenden, 0,7 s, power3.out. Zahlen zählen über 1,2 s hoch.

Chalk Lesson

Ideal für: Unterricht, Tutorials, Kursmodule. Eine grüne Tafel mit handgeschriebenen Überschriften und gelber Hervorhebung. Die Schritte werden nacheinander geschrieben.

Layout: Handgeschriebene Überschriften, nummerierte Schritte links untereinander. Der Schlüsselbegriff wird gelb unterstrichen.

Bewegung: Wischeffekte von links nach rechts wie beim Schreiben, 0,7 s, power1.out, mit 0,22 s Pause zwischen den Zeilen.

Ledger

Ideal für: Berichte, Kennzahlen-Reviews, Finanzen. Weiße Seite, Zahlen in Mono und ein einziges Grün für Wachstum. So aufgebaut, dass Diagramme lesbar bleiben.

Layout: Eine dünne Linie unter jeder Überschrift. Zahlen in Mono. Keine Verläufe, keine Schatten, kein 3D.

Bewegung: Schnelles Aufsteigen um 16 px, 0,45 s, power2.out, im Abstand von 0,08 s. Balken wachsen von der Basislinie; Beschriftungen folgen.

Terminal

Ideal für: Dev-Tools, Changelogs, CLI-Demos. Ein anthrazitfarbenes Terminalfenster in Mono mit grünem Prompt. Zeilen werden schrittweise ausgegeben, wie echte Ausgabe.

Layout: Alles steht in einem Fenster mit Titelleiste. Überschriften beginnen mit einem Prompt. Der Akzent markiert die geänderte Zeile.

Bewegung: Gestufte Wischeffekte, die wie Tippen wirken: 16 Schritte über 0,6 s, 0,2 s zwischen den Zeilen. Keine Easing-Kurven.

Sunrise

Ideal für: Marken-Reels, Ankündigungen, Event-Opener. Ein Farbverlauf von Koralle zu Violett mit runder weißer Schrift. Freundlich und hell, mit federndem Auftritt.

Layout: Verlauf auf einem randlosen Child-Element. Beschriftungen sind Pills. Balken und Schritte sind durchscheinend weiß mit großen Radien.

Bewegung: Federnde Pops ab 86 % Skalierung, 0,55 s, back.out(1.6), im Abstand von 0,09 s. Der Hintergrund bewegt sich nie.

Glass

Ideal für: Produktgeschichten, Premium-Launches. Eine helle Bühne mit weichen Farben in der Luft und mattweißen Panels. Ruhig, hochwertig, mit viel Platz.

Layout: Zwei unscharfe Farbflächen im Hintergrund. Panels sind durchscheinend weiß mit hellem Rand und tiefem, weichem Schatten.

Bewegung: Langsames, weiches Skalieren ab 92 % mit Einblenden, 0,8 s, power3.out. Die Panels erscheinen nacheinander, nie gleichzeitig.

Midnight

Ideal für: Entwicklerprodukte, Roadmaps, Changelogs. Fast schwarze Fläche, haarfeine Rahmen, enge Typografie und ein einziges lavendelfarbenes Leuchten. Präzise und ruhig.

Layout: Ein weiches Leuchten hinter dem Inhalt. Jedes Panel hat einen haarfeinen Rahmen von 2 px. Die Überschriften sind eng gesetzt und nicht groß.

Bewegung: Kurze Aufwärtsbewegungen von 14 px, 0,5 s, power3.out, dicht gestaffelt im Abstand von 0,07 s. Schnell und exakt, ohne Überschwingen.

Pixel

Ideal für: Tech-Erklärvideos, verspielte Datengeschichten. Warmes Creme mit Blöcken von Orange bis Gelb und eckigen Kanten. Alles erscheint in Stufen, als würden Pixel aufleuchten.

Layout: Durchgehend eckige Kanten. Balken bestehen aus gestapelten warmen Blöcken. Unter jeder Überschrift sitzt eine Reihe kleiner Quadrate.

Bewegung: Gestufte Wipes in 8 Schritten über 0,5 s, im Abstand von 0,14 s. Nirgends weiches Easing: Elemente schalten sich einfach ein.

Aubergine

Ideal für: Team-Updates, interne Kommunikation, Onboarding. Tiefes Violett mit warmem Gelb und Panels als Chatblasen. Freundlich und im Gesprächston, wie eine Nachricht von einer Kollegin oder einem Kollegen.

Layout: Die Schritte sind Chatblasen mit einer eckigen Ecke. Labels sind Pills. Halte die Sätze kurz und wie gesprochen.

Bewegung: Blasen poppen ab 86 % mit leichtem Überschwingen auf, 0,5 s, back.out(1.4), im Abstand von 0,16 s, wie eintreffende Nachrichten.

Graph Paper

Ideal für: Technische Dokumentation, Engineering-Updates, Benchmarks. Ein helles technisches Raster, Monospace-Schrift und ein einziges Grün für das Ergebnis, auf das es ankommt. Wirkt wie ein sorgfältig geführtes Laborbuch.

Layout: Feines 48-px-Raster im Hintergrund. Weiße Panels mit 2 px Rahmen. Überschriften sind zurückhaltend; die Daten stehen im Mittelpunkt.

Bewegung: Wipes von links nach rechts, 0,55 s, power2.out, im Abstand von 0,1 s. Linien werden gezeichnet, nicht eingeblendet.

Pastel Shapes

Ideal für: Workshops, Creative Briefs, Community-Beiträge. Cremefarbenes Papier, verspielte Pastell-Geometrie und gemischte runde und eckige Formen. Gemeinschaftlich und leicht aus dem Raster.

Layout: Jeder Balken und jeder Schritt bekommt der Reihe nach den nächsten Pastellton. Die Ecken wechseln zwischen rund und eckig.

Bewegung: Federnde Pops ab 86 %, 0,5 s, back.out(1.8), im Abstand von 0,1 s. Die Formen wirken wie von Hand platziert.

Signal

Ideal für: Ankündigungen, Incident-Reviews, klare Statements. Tiefes Schwarz mit einem schneidenden roten Band und kräftiger weißer Schrift. Dringlich und nicht zu überlesen.

Layout: Ein diagonales rotes Band zieht sich über den Hintergrund. Überschriften sind sehr eng gesetzt. Pro Szene ein rotes Element, nicht mehr.

Bewegung: Harte Schnitte ab 118 % Skalierung in 0,3 s, expo.out, im Abstand von 0,06 s. Jede Szene startet auf den Beat.

Harbor

Ideal für: Finanzen, Preisgestaltung, Business-Reviews. Tiefblaue Schrift auf hellen Flächen mit einem selbstbewussten Indigo. Vertrauenswürdig und aufgeräumt, mit einem weichen Verlauf am oberen Rand.

Layout: Ein schräges Farbband am oberen Rand. Weiße Panels mit weichem Schatten. Zahlen sind groß und dunkelblau.

Bewegung: Gleichmäßige Aufwärtsbewegungen von 22 px, 0,6 s, power2.out, im Abstand von 0,1 s. Ruhig und berechenbar, nichts Verspieltes.

Newsprint

Ideal für: Ankündigungen, öffentliche Berichte, Geschichten. Gebrochen weißes Papier, schwarze Serifenüberschriften und eine rote Linie. Wirkt wie eine Titelseite.

Layout: Eine dicke schwarze Linie über jeder Überschrift und eine dünne darunter. Überall eckige Kanten.

Bewegung: Schnelles Einrasten aus leicht zu großer Darstellung, 0.45s, als würde eine Seite hingeklatscht. Kein Nachfedern.

Botanical

Ideal für: Wohlbefinden, Nachhaltigkeit, Bildung. Cremefarbenes Papier, Salbeigrün und eine Serifenschrift, die sich Zeit lässt. Ruhig, mit Aquarellbildern.

Layout: Breite Ränder und abgerundete Felder. Über jedem Label sitzt eine kleine blattgrüne Linie.

Bewegung: Langsames Aufsteigen um 20px mit langem Einblenden, 0.9s, im Abstand von 0.16s. Nichts kommt schnell an.

Neon Night

Ideal für: Events, Musik, Gaming, Nightlife. Mitternachtsblau mit magentafarbenem Licht. Laute Überschriften, leuchtende Kanten, gemacht für dunkle Räume.

Layout: Felder haben einen dünnen leuchtenden Rand. Der hervorgehobene Balken und die Zahl leuchten magenta.

Bewegung: Poppt von 86% auf, mit leichtem Überschwingen, 0.5s, im Abstand von 0.09s. Lebhaft, ohne zu wackeln.

Clay

Ideal für: Onboarding, Produkttouren, freundliche Erklärvideos. Warmes Beige mit Terrakotta und weichen runden Formen. Freundlich, ohne kindisch zu wirken.

Layout: Sehr runde Panels mit weichem Schatten darunter. Nummern-Badges sind Kreise.

Bewegung: Weiche Pop-ups mit leichtem Überschwingen, 0,6 s, im Abstand von 0,12 s, als würde etwas abgestellt.

Riso Print

Am besten für: Zines, Kultur, Design-Reviews. Warmweißes Papier, bedruckt in Blau und Neonpink. Große, schmale Überschriften, bewusst ein wenig rau.

Layout: Schmale Überschriften in Großbuchstaben, blau mit pinken Akzenten. Labels sind pinke Blöcke.

Bewegung: Harte, schnelle Einrastbewegung ab 118 %, 0,4 s. Elemente landen wie Stempel.

Boardroom

Am besten für: Strategie, Beratung, Vorstandsunterlagen. Weiß, Marineblau und ein Royalblau. Überschriften mit der Antwort zuerst und aufgeräumte Panels, so wie ein Berater eine Seite aufbaut.

Layout: Eine blaue Linie links von jeder Überschrift. Panels sind flach und haben einen haarfeinen Rand.

Bewegung: Kurze Aufwärtsbewegungen von 16 px, 0,5 s, im Abstand von 0,08 s. Zügig und gleichmäßig, nie dekorativ.

Ink Brush

Am besten für: Essays, Philosophie, Markengeschichten. Reispapier, schwarze Tusche und ein kleines rotes Siegel. Viel Leerraum, ganz bewusst.

Layout: Der Text steht in den linken zwei Dritteln, mit Luft drumherum. Das Label ist ein kleines rotes quadratisches Siegel.

Bewegung: Langsame Wischeffekte von links, 1 s, im Abstand von 0,2 s, als würde ein Pinsel darüberziehen.

Sticker

Am besten für: Kinder, Unterricht, Social Posts, unterhaltsame Updates. Sonnengelb, dicke schwarze Konturen und leuchtendes Pink. Jedes Panel sieht aus wie ein Sticker.

Layout: Weiße Panels mit dicker schwarzer Kontur und hartem, versetztem Schatten, wie Sticker auf einem Notizbuch.

Bewegung: Federnde Pop-ups mit deutlichem Überschwingen, 0,45 s, im Abstand von 0,1 s. Bewusst verspielt.