Ty-HA/animation

/animation — 100 Animationsstile, einsatzbereit

Von Ty — BTHA System (bthasystem.io).

Argument einlesen

Akzeptierte Formen:

• /animation glitch → Stil glitch, Standardtext.
• /animation glitch "Mein Text" → Stil + zu animierender Text (übergib ihn in der Prop text).
• /animation glitch 16:9 oder ... web → Format oder Ziel genauer.
• /animation allein oder /animation liste → zeigt den untenstehenden Katalog, gruppiert nach Familie, und fragt nach einem Stil.

Das erste Wort ist der Slug. Jeder Slug hat seine Karte: references/<slug>.md (im Ordner dieses Skills). Lies immer die Karte, bevor du Code schreibst: Sie enthält die Technik, die exakten Werte und eine Startkomponente für Remotion.

Unbekannter Slug

Wenn der Slug nicht existiert: rate nicht stillschweigend. Biete die 3 nächstliegenden Stile (nach Name, Familie oder beschriebenem Effekt) mit ihrer einzeiligen Beschreibung an und frage, welcher genommen werden soll. Beispiele: «vhs» → glitch, risograph, light-leak; «3d text» → extruded-text, liquid-chrome, kinetic-type; «matrix» → ascii, scramble, code-typing.

Standard-Stack

• Video (Standard): Remotion (React + TypeScript), 1080×1920, 30 fps (TikTok, Reels, Shorts). Standarddauer: 5 s (150 Frames), außer anders gewünscht.
• Web: Wenn der Nutzer eine Animation für eine Website möchte, übertrage die Karte in HTML/CSS/JS (CSS Keyframes, requestAnimationFrame, Canvas oder SVG). Die Logik «Position = Funktion der Zeit» bleibt gleich.
• Andere Formate: 1080×1080 (quadratisch), 1920×1080 (YouTube). Beachte die sicheren Zonen bei 9:16: ~140 px Seitenrand, nichts Wichtiges in den unteren 25 % (TikTok-UI).

Remotion-Regeln, die zu beachten sind:

• Alles hängt von useCurrentFrame() ab: kein gespeicherter Zustand von Frame zu Frame (die Frames werden in beliebiger Reihenfolge und parallel gerendert).
• Zufall nur über random('seed') von remotion, niemals Math.random().
• Medien nur über staticFile(), <Img>, <OffthreadVideo>, <Audio>, damit das Rendern auf das Laden wartet.
• Schriften: @remotion/google-fonts/<Font> für garantiertes Rendern.

Arbeitsablauf

1. Slug identifizieren (oder 3 ähnliche Stile vorschlagen).
2. Lesen von references/<slug>.md.
3. Bei Bedarf klären (nur eine einzige gruppierte Frage, nur wenn Unbekanntes und Wichtiges): Format (Standard 9:16), Dauer, Text, Markenfarben, bestehendes oder neues Remotion-Projekt.
4. Erstellen:
   • Bestehendes Projekt: src/<Style>.tsx hinzufügen und in Root.tsx registrieren mit <Composition id=... durationInFrames fps={30} width={1080} height={1920} />.
   • Neues Projekt: npx create-video@latest (Blank-Vorlage), dann dasselbe.
   • Vom Snippet der Karte ausgehen, an Text/Farben anpassen, die in der Karte angegebenen Abhängigkeiten installieren.
5. Überprüfen: npx remotion still <id> --frame=<n> out.png auf 2–3 Schlüsselframes, Bild ansehen, korrigieren.
6. Rendern: npx remotion render <id> out/<id>.mp4 (--crf=18 für bessere Qualität hinzufügen, --gl=angle wenn das 3D-Rendering schwarz ist).
7. Ausliefern: Dateipfad, Dauer und 2–3 mögliche Variationen aus der Karte.

Mehrere Stile gleichzeitig angefordert (/animation glitch + synthwave): Alle Karten lesen, kombinieren (z. B. Hintergrund synthwave + Titel glitch) in einer einzigen Komponente.

Katalog (100 Stile)

🔤 Bewegungstypografie & Texteffekte

• kinetic-type — Kinetic Type (Headline): Eindrucksvoller Text, synchron zur Stimme, ruckartige Zooms, Wort für Wort
• split-flap — Split-Flap Display: Bahnhofstafel: Die Buchstaben drehen sich, bevor sie fixieren
• glitch — Glitch & VHS Retro: Verzerrungen, Scanlinien, analoges Rauschen, chromatische Aberration
• hud — HUD & Terminal Sci-Fi: Futuristische Monospace-Oberfläche, schnelle Zähler, Visierlinien
• ascii — ASCII-Art-Animation: Bild aus Zeichen, die sich in Echtzeit ändern
• scramble — Scramble / Text Reveal: Zufällige Buchstaben wie bei Entschlüsselung, bevor das richtige Wort erscheint
• stacking — Kinetic Stacking: Wörter, die in rasendem Tempo übereinander gestapelt werden
• typewriter — Typewriter: Schreibmaschine, Buchstabe für Buchstabe, blinkender Cursor
• karaoke — Karaoke Captions: TikTok-Untertitel, das gesprochene Wort leuchtet auf
• handwriting — Handwriting / Signature: Text, der von Hand gezeichnet wird (SVG-Pfad)
• text-path — Text on Path: Text, der einer Kurve, einem Kreis, einer Spirale folgt
• variable-font — Variable Font Morph: Buchstaben werden dicker, dehnen sich, atmen
• highlighter — Highlighter Sweep: Textmarker oder Unterstreichung, die unter einem Wort erscheint
• rotating-words — Rotating Words: Ein Wort, das sich in einem festen Satz im Kreis ändert
• mask-reveal — Mask Reveal: Text, der durch eine Form oder ein Bild enthüllt wird

🎨 Organische, fließende & abstrakte Bewegungen

• liquid-morph — Liquid Morphing: Formen, die ineinander übergehen
• particles — Particles System: Tausende Punkte, die Wind und Schwerkraft ausgesetzt sind
• neon — Neon Glow / Cyberpunk: Leuchtende Linien mit Halo und Nachläufern
• topographic — Wave & Topographic: Höhenlinien oder mathematische Wellen in Schleife
• aurora — Aurora & Mesh Gradient: Verschwommene Farbverläufe, die sich wie Polarlichter bewegen
• metaballs — Blobs & Metaballs: Runde Formen, die viskos verschmelzen
• bioluminescence — Bioluminescence: Sanftes Leuchten, wie in der Tiefsee
• flow-field — Flow Field (Perlin Noise): Tausende Linien, die einem Strömungsfeld folgen
• ink-water — Fluid / Ink in Water: Tinte, die sich im Wasser ausbreitet
• fractal-zoom — Fractal Zoom: Unendlicher Zoom in ein Fraktal
• voronoi — Voronoi Cells: Organische Zellen, die sich teilen und bewegen
• reaction-diffusion — Reaction-Diffusion: Lebendige Muster wie Zebrahaut oder Koralle
• smoke-fire — Smoke & Fire Shader: Rauch oder Flammen in Echtzeit generiert
• grain-gradient — Grain & Noise Gradient: Körniger Farbverlauf wie bei modernen Postern

🧊 3D-Stile, Reliefs & Materialien

• clay-3d — Clay 3D (Knete): Knetobjekte mit Physik und Sprüngen
• glassmorphism — Glassmorphism: Mattglas-Paneele, die den Hintergrund unscharf machen
• wireframe — Isometric & Wireframe 3D: Isometrische Perspektive oder Drahtgitterstrukturen
• neumorphism — Neumorphism: Formen, die durch Schattenspiel in den Hintergrund eingebettet sind
• low-poly — Low Poly: Facetten-3D, das Licht einfängt
• skeuomorphism — Skeuomorphism: Echte Knöpfe, Schalter, Leder- oder Metalltexturen
• liquid-chrome — Abstract Chrome / Liquid Metal: Quecksilber oder reflektierendes Flüssigmetall
• product-spin — 3D Product Spin: 3D-Objekt, das sich um sich selbst dreht (Packshot)
• extruded-text — 3D Extruded Text: Volumetrischer Text mit Licht und Schatten
• card-flip — Card Flip 3D: Karten, die sich perspektivisch umdrehen
• cube-transition — Cube / Box Transition: Übergang durch Drehung eines Würfels
• globe — 3D Globe: Drehender Globus mit leuchtenden Punkten
• galaxy — Galaxy Particles 3D: Galaxie aus Partikeln in der Tiefe
• holo-foil — Holographic Foil: Regenbogen-Schillern wie bei Hologramm-Karten
• voxel — Voxel Art: 3D in kleinen Würfeln wie bei Minecraft

📐 Künstlerische, grafische & historische Ästhetiken

• swiss — Swiss Design: Asymmetrische Raster, große Serifenlose, geometrische Übergänge
• risograph — Risograph & Halftone: Körniger Retro-Druck, versetzte Ebenen, 12 fps
• paper-cutout — Paper Cut-out: Ausgeschnittenes Papier mit Schatten, Stop-Motion
• neobrutalism — Neobrutalism: Dicke schwarze Konturen, harte Schatten, grelle Farben
• bauhaus — Bauhaus: Kreis, Quadrat, Dreieck, Primärfarben
• memphis — Memphis Style: Zickzack, Konfetti, Karos, Pastellfarben der 80er
• synthwave — Synthwave / Vaporwave: Unendliches Neon-Raster in Richtung Sonnenuntergang
• pixel-art — Pixel Art / 8-Bit: Retro-Gaming ohne Glättung
• comic — Comic Book / Cel Shading: Comic, schwarze Konturen, Pop-Art-Raster
• blueprint — Blueprint: Architektenplan, der auf blauem Hintergrund gezeichnet wird
• frutiger-aero — Frutiger Aero: Blasen, blau-grünes Glas, 2000er Jahre
• corporate-memphis — Corporate Memphis: Flache Figuren mit langgestreckten Gliedmaßen
• psychedelic — Psychedelic Retro: 70er Jahre, Wellen, gesättigte Farben
• line-boil — Line Boil: Zitternde Konturen wie bei einem Zeichentrickfilm
• y2k — Y2K / Chrome Bubble: 2000er Jahre, Chrom, Sterne, Blasen
• manga-speed-lines — Manga Speed Lines: Geschwindigkeitslinien und Manga-Lautmalerei
• watercolor — Watercolor: Aquarellflecken, die sich ausbreiten
• chalkboard — Chalkboard / Sketch: Kreide- oder Bleistiftzeichnung, die erscheint
• art-deco — Art Deco: Geometrische goldene Linien der 20er Jahre
• duotone — Duotone: Bild in zwei kontrastreichen Farben

📊 Dashboards, Daten & UI-Oberflächen

• data-story — Data Storytelling: Balken steigen, Kurven werden gezeichnet
• bento — Bento Grid: Asymmetrisches Kästchengitter, das sich bewegt
• odometer — Count-up / Odometer: Zähler, die bis zum Wert hochlaufen
• micro-interactions — Micro-interactions UI: Schaltflächen, Symbole, die sich verwandeln, Ripple
• marquee — Infinite Scroll / Marquee: Endlos laufende Bänder
• parallax — Parallax Scrolling: Ebenen mit unterschiedlichen Geschwindigkeiten
• skeleton — Skeleton Loading: Pulsierende Formen vor dem Inhalt
• bar-race — Bar Chart Race: Balkenranking, das sich im Laufe der Zeit überholt
• progress-rings — Progress Rings: Apple-Watch-artige Ringe, die sich füllen
• map-route — Map Route Tracing: Route, die auf einer Karte gezeichnet wird (Laufen!)
• timeline — Timeline: Voranschreitende Zeitleiste
• chat — Chat / iMessage Simulation: Sprechblasen, die erscheinen
• notifications — Notification Stack: Benachrichtigungen, die fallen und sich stapeln
• phone-scroll — Phone Mockup Scroll: App-Bildschirm, der in einem Telefon scrollt
• code-typing — Code Typing / IDE: Code, der in einem Editor geschrieben wird
• cursor-demo — Cursor Demo: Cursor, der klickt und durch eine Oberfläche navigiert
• before-after — Before / After Slider: Vorher-Nachher-Vergleich mit Schieberegler

🎬 Übergänge & Kamerabewegungen

• whip-pan — Whip Pan: Extrem schneller Schwenk mit Bewegungsunschärfe
• zoom-punch — Zoom Punch: Brutaler Zoom auf den Höhepunkt
• camera-shake — Camera Shake: Erschütterung durch Aufprall
• shape-wipe — Shape Wipe: Übergang durch eine Form, die über den Bildschirm wischt
• iris — Iris / Circle Reveal: Öffnung oder Schließung im Kreis
• ink-transition — Ink / Paint Transition: Tintenfleck, der den Bildschirm überflutet
• light-leak — Light Leak & Lens Flare: Lichtlecks wie bei Film
• ken-burns — Ken Burns: Langsamer Zoom auf ein Foto
• split-screen — Split Screen: Geteilter Bildschirm, der sich öffnet
• speed-ramp — Speed Ramp: Zeitlupe, gefolgt von Beschleunigung
• page-curl — Page Curl: Umblätternde Seite
• match-cut — Match Cut / Morph Cut: Perfekter Anschluss zwischen zwei Formen

🧸 Figuren & lustige Effekte

• lip-sync — Lip-Sync Avatar: Avatar, dessen Mund der Stimme folgt
• puppet-rig — Puppet Rig: Gelenkige Figur (Arme, Kopf, Blinzeln)
• confetti — Confetti / Emoji Rain: Regen aus Konfetti oder Emojis
• sticker-pop — Sticker Pop: Sticker, die mit einem Sprung erscheinen
• squash-stretch — Squash & Stretch: Elastisches Objekt wie im Cartoon
• morph-icons — Morphing Icons: Ein Icon, das sich in ein anderes verwandelt
• fireworks — Firework / Burst: Explosion aus festlichen Partikeln