Communitygithub.com

Zehn Video-Stile (bsnegi008/ten-video-styles)

Erstelle ein code-rendertes Video (Remotion/React + SVG) in einem von zehn Kunststilen – Pixel Art, Clay, Paper Cutout, Low Poly, Voxel, Isometric, Neon, Blueprint, Retro VHS oder Doodle. Verwende dies, wenn der Benutzer nach einem Video, Reel, einer Animation oder Bewegungsgrafik fragt und einen dieser Stile nennt oder fragt: „Welche Stile kannst du machen?“

Was ist ten-video-styles)?

Diese Fähigkeit ermöglicht es KI-Agenten, dasselbe Motiv in zehn völlig unterschiedlichen Kunststilen als code-rendertes Video zu erstellen – kein einfacher Farbwechsel, sondern jedes Motiv erhält eine eigene Geometrie, Textur, Bewegung und Schriftart. Die Fähigkeit ist für Remotion/React + SVG konzipiert und basiert auf der Grundidee, das Motiv einmal als einfache Polygone und Kreise zu zeichnen und dann für jeden Stil ein spezifisches Rezept aus Hintergrund, Motivbehandlung, Bewegung und Schriftart anzuwenden. Der Agent muss nur drei Dinge vom Benutzer erfragen oder ableiten: das Motiv, den gewünschten Stil und das Ausgabeformat (standardmäßig 1080×1920, 30 fps). Jeder Stil wird durch detaillierte technische Anleitungen beschrieben, einschließlich SVG-Filtern, Bewegungsmustern und Farbpaletten, die sicherstellen, dass das Ergebnis eindeutig dem jeweiligen Stil zugeordnet werden kann. Die Fähigkeit enthält außerdem Regeln für das Layout (Motiv in den mittleren 60 %, Freiräume für Reels-UI), bewegte Hintergründe, eindeutige SVG-Filter-IDs und einen Mini-Modus für Vorschaubilder.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/bsnegi008/Claude-10-animation-skill/tree/HEAD/ten-video-styles

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Zehn Video-Stile

Rezepte, um das GLEICHE Motiv in zehn wirklich unterschiedlichen Kunststilen als code-rendertes Video darzustellen. Ein Stil ist keine Farbänderung: Jeder Stil hat seine eigene Geometrie, Textur, Bewegung und Schriftart. Wenn ein Bild aus deiner Szene mit flacher Vektorgrafik verwechselt werden könnte, ist der Stil noch nicht fertig.

Verwendung

  1. Frage (oder leite) drei Dinge ab: das Motiv (z. B. eine Auto-Rikscha), den Stil (einen der 10 unten) und das Format (Standard 1080×1920, 30 fps).
  2. Zeichne das Motiv EINMAL als einfache Polygone + Kreise (Punktlisten, keine Kurven). Jeder Stil unten rendert dieselben Punktdaten neu, sodass das Motiv in allen Stilen wiedererkennbar bleibt.
  3. Baue die Szene mit dem Rezept für den gewählten Stil: Hintergrund, Motivbehandlung, Bewegung, Schriftart.
  4. Rendere 1 Standbild pro Szene und SCHAU es dir an, bevor du komplett renderst. Korrigieren, dann rendern.

Eingabeformel, die der Benutzer eingeben kann: [Motiv] ka video banao, [STIL] style mein + Stimmung + Kamera + Zweck.

Regeln für jeden Stil

  • Das Motiv sitzt in den mittleren 60 % des Bildes; halte Text außerhalb der oberen 220 px und der unteren 380 px (Reels-UI bedeckt diese Bereiche).
  • Der Titel verwendet eine Schriftart, die zum Stil gehört (pro Stil aufgeführt). Lade Schriftarten als lokale Dateien; verlasse dich nicht auf Systemstandards.
  • Der Hintergrund muss sich bewegen (scrollende Straße, Parallaxe, Raster), damit das Motiv das Gefühl vermittelt, unterwegs zu sein, selbst wenn es zentriert bleibt.
  • Gib allen SVG-Filtern eindeutige IDs; mehrere Stile auf einem Bildschirm teilen sich ein Dokument.
  • Schwere SVG-Filter brechen, wenn die Szene verkleinert wird (Vorschaubilder). Biete einen Mini-Modus an, der sie weglässt.

Die 10 Rezepte

1. Pixel Art – „purane video game jaisa"

  • Look: klobige quadratische Pixel, harte dunkle Kontur, helle unifarbene Farben.
  • Vorgehen: Zeichne die Szene normal, dann verpixele die gesamte Gruppe mit einem SVG-Filter: feFlood (2×2 px bei Versatz 5,5) → feComposite (12×12) → feTile → feComposite in=SourceGraphic operator=in → feMorphology dilate radius=5. Das ergibt 12 px große Zellen. Füge zuerst einen 8 px dunklen Strich zum Motiv hinzu.
  • Bewegung: Schritttempo auf 10 fps (floor(frame/3)), Positionen auf das 12 px-Raster schnappen, um genau eine Zelle hüpfen.
  • Extras: blockige Sonne und Wolken aus Rechtecken, kariertes Gras, schwebende Münzen.
  • Schriftart: Press Start 2P, weiß mit hartem Offset-Schatten.

2. Clay – „haath se bana hua"

  • Look: weiche, puffige Formen, Licht von oben links, matte Oberfläche, Kontaktschatten.
  • Vorgehen: Runde jede Form (gleichfarbiger Strich 14 px, runde Ecken). Pro Teil einen Filter anwenden: niederfrequentes feTurbulence + feDisplacementMap (Skala 12, wellige Kanten) → feGaussianBlur (7) als Höhenkarte → feDiffuseLighting multipliziert mit der Farbe + etwas feSpecularLighting → feines Rauschen für Fingerabdrucktextur → feDropShadow.
  • Bewegung: Stop-Motion. Nur jedes 3. Bild aktualisieren, Position pro Schritt um 1–3 px verrauschen, den Turbulenz-Samen (3 Werte) durchlaufen, damit die Kanten „kochen".
  • Palette: Pastellpfirsich, Salbeigrün, Senf. Schriftart: Fredoka Bold.

3. Paper Cutout – „kaagaz ki layers"

  • Look: flache Schichten, gestapelt mit Schatten dazwischen, raue Schnittkanten, Körnung.
  • Vorgehen: Jede Ebene erhält feDisplacementMap (Skala 5) + feDropShadow (dy 9, Unschärfe 5, 38 %). Abschließend ein vollflächiges Rausch-Rechteck im multiply-Mischmodus.
  • Bewegung: 3–4 Hügelebenen scrollen mit unterschiedlichen Geschwindigkeiten (Parallaxe), Wolken hängen an dünnen Fäden und schwingen, das Motiv schaukelt wie eine Puppe um 1–2 Grad.
  • Palette: Bastelpapier: Blaugrün, Senf, Terrakotta, Creme. Schriftart: Alfa Slab One.

4. Low Poly – „kam shapes, clean 3D"

  • Look: alles aus flach schattierten Dreiecken, keine Konturen, keine Farbverläufe.
  • Vorgehen: Trianguliere jedes Polygon als Fächer aus einem leicht verrauschten Mittelpunkt. Schattiere jedes Dreieck anders: ein Term für die Lichtrichtung plus einen kleinen zufälligen Offset. Gib jedem Dreieck einen Strich in seiner eigenen Füllfarbe, um Nähte zu verbergen. Baue den Himmel als verrauschtes Raster aus Dreiecken, gefärbt nach Höhe; Berge = zwei Dreiecke (beleuchtete Seite, dunkle Seite).
  • Bewegung: fließend; Bergschichten scrollen mit Parallaxe, facettierte Sonne dreht sich.
  • Schriftart: Oxanium ExtraBold, Großbuchstaben.

5. Voxel – „chhote cubes ki duniya"

  • Look: das Motiv besteht aus kleinen Würfeln, aus isometrischem Winkel betrachtet.
  • Vorgehen: Beschreibe das Motiv als 3D-Raster aus farbigen Zellen (ca. 14×7×9). Projiziere mit sx=(x-y)*u*0.866, sy=(x+y)*u*0.5-z*u. Zeichne 3 Flächen pro Würfel (oben am hellsten, links mittel, rechts am dunkelsten), überspringe von Nachbarn verdeckte Flächen, sortiere vor dem Zeichnen nach x+y+z.
  • Bewegung: Boden ist ein Schachbrett aus Rautenfliesen, das entlang der Straßenachse scrollt; Würfelbäume scrollen vorbei; das Motiv macht einen kleinen Hüpfer.
  • Schriftart: Bungee mit hartem Blockschatten.

6. Isometric – „upar se tirchha view"

  • Look: ein sauberer Miniatur-Stadtblock auf einer schwebenden Platte, glatte Boxen (keine Würfel), Pastellfarben, weicher Schatten unter der Platte.
  • Vorgehen: Gleiche Projektion wie Voxel, aber mit großen glatten Boxen: Gebäude mit Fensterrastern auf beiden sichtbaren Flächen, eine Straße, Bäume, ein Kiosk, eine Laterne. Das Motiv besteht aus 8–10 Boxen und fährt die Straße entlang.
  • Bewegung: Gebäude steigen mit Überschwingen aus dem Boden, gestaffelt; die gesamte Platte schwebt langsam auf und ab.
  • Schriftart: Oxanium, dunkler Text auf hellem Hintergrund.

7. Neon – „raat wali cyberpunk vibe"

  • Look: dunkle Nacht, leuchtende Umrisszeichnung, Synthwave-Rasterboden.
  • Vorgehen: Motiv = nur Striche (4–5 px) mit der Füllung auf Hintergrundfarbe gesetzt, damit sich Teile trotzdem gegenseitig verstecken. Glühfilter = Überblendung einer breiten Unschärfe (14), einer engen Unschärfe (4) und der scharfen Quelle. Boden = Linien, die von einem Fluchtpunkt aus nach außen fächern + horizontale Linien im Abstand p*p, die auf die Kamera zurollen.
  • Bewegung: Schildartiges Flackern in den ersten 8 Bildern, streifende Lichtlinien, funkelnde Sterne, gestreifte Sonne am Horizont.
  • Palette: Cyan, Magenta, Gelb auf fast schwarzem Violett. Schriftart: Tilt Neon mit gestapelten Magenta-Textschatten.

8. Blueprint – „engineer ka drawing"

  • Look: blaues Blatt, feines + grobes Raster, dünne weiße technische Strichzeichnung.
  • Vorgehen: Motiv = weiße 3 px Striche, Füllung = Blattfarbe. Zeichne Linien mit pathLength=1 + animiertem strokeDasharray, gestaffelt pro Teil. Füge dann Maßlinien mit Pfeilspitzen und mm-Werten hinzu, strichpunktierte Mittellinien an den Rädern, Führungslinien mit Beschriftungen und einen Rahmen.
  • Bewegung: Zuerst Aufziehen (0,5 s), Maße erstrecken sich von ihrer Mitte aus, dann drehen sich langsam nur die Räder. Nichts hüpft.
  • Schriftart: Share Tech Mono, Großbuchstaben.

9. Retro VHS – „nabbe ke dashak ki tape"

  • Look: 90er-Jahre Heimvideo: Farbsäume, weiches Bild, Scanlines, Bandrauschen.
  • Vorgehen: Ein Filter für die gesamte Szene: Rotkanal um +9 px versetzt, Grün+Blau um −7 px versetzt, screen-Mischung, horizontale Unschärfe (2,6; 0,6), Sättigung 1,25. Darüber: Scanline-Muster, bildweises Rauschen, ein Tracking-Band, das nach unten wandert, während sein Inhalt seitlich verschoben ist, ein eingerissener Streifen am unteren Rand, Vignette und „PLAY" + laufender Zähler als Einblendung.
  • Bewegung: 2 px horizontales Zittern mit gelegentlichem größeren Sprung.
  • Palette: Sonnenuntergangs-Lila, Pink, Orange. Schriftart: VT323 mit roten/cyan Schatten.

10. Doodle – „copy ke peeche wala sketch"

  • Look: Kugelschreiber auf linierter Notizbuchseite mit rotem Randstrich.
  • Vorgehen: Nur Striche, Füllung = Papierfarbe, Schraffurmuster für Schattierung. Ein feTurbulence + feDisplacementMap (Skala 11) über alle Stiftlinien, und ändere den Samen alle 4 Bilder, damit die Linien „kochen".
  • Bewegung: Linien zeichnen schnell auf, spiralförmige Sonne dreht sich in Schritten, Sterne wackeln, Geschwindigkeitslinien hinter dem Motiv, ein handgeschriebenes Wort wie „vroom!".
  • Schriftart: Caveat Bold.

Stile nebeneinander zeigen

Wenn das Video Stile vergleicht, behalte EIN Element in jeder Szene identisch (z. B. ein Eingabefeld, in dem sich nur der Stilname ändert) und verwende harte Schnitte im Takt des Voiceovers. Das macht sichtbar, dass „nur ein Wort geändert" wurde.

Vor der Auslieferung

  • Jede Szene besteht den Test: „Würde jemand diesen Stil ohne den Titel erkennen?"
  • Das Motiv hat in jedem Stil dieselbe Form und Größe.
  • Titel und Bildunterschrift sind auf einem Telefon lesbar, innerhalb des sicheren Bereichs.
  • Standbilder für jede Szene überprüft vor dem vollständigen Render.

Verwandte Skills