deenukhan/animationsstile

Was macht animationsstile?

Ein Remotion-Projekt mit 39 handgefertigten Animationsstilen. Jeder Stil zeichnet eine feste Geschichte neu, sodass sie nebeneinander verglichen und als Vorlagen wiederverwendet werden können: Ein Wasserkocher kommt herein, kippt, gießt Chai in einen Kulhad (Tontasse), die Tasse füllt sich, der Wasserkocher verlässt die Szene, Dampf steigt auf. 150 Frames, 30 fps, 1080×1350 (4:5), stumm. Mit --scale=2 gerendert ergibt sich 2160×2700.

Alles wird in Code gezeichnet: SVG mit Filtern oder eine <canvas>, die jeden Frame bemalt. Es wird kein Bildmodell, Videomodell oder Stockmaterial verwendet, daher ist die Ausgabe originell und wiederholbar.

Das Projekt befindet sich im Ordner dieser Fähigkeit (dem Ordner, der diese Datei enthält, im Folgenden <skill> genannt). Führen Sie Befehle von dort aus.

0. Erstmalig in einer Sitzung

1. cd <skill> und prüfen, ob node_modules/ existiert. Falls nicht, npm install ausführen (dauert etwa eine Minute, benötigt Node 18+).
2. npm run list gibt alle 39 Stile mit Nummer, Slug und einer einzeiligen Beschreibung aus.
3. Der erste Render-Vorgang lädt einmalig einen kopflosen Chrome herunter (ca. 100 MB). Dafür wird eine Internetverbindung benötigt.

Die übliche Anfrage: „Erstelle ein 5-Sekunden-Video von im -Stil“

Dies ist die Hauptaufgabe (und die Aufforderung in dem Beitrag, der die Leute hierher führt). Führen Sie sie vollständig durch, ohne für Rückfragen anzuhalten, es sei denn, die Idee ist unklar:

1. Arbeitsordner: Verwenden Sie animation-films/ im aktuellen Arbeitsordner des Benutzers. Wenn er nicht existiert, erstellen Sie ihn von diesem Ordner aus mit node <skill>/scripts/new-project.mjs animation-films, dann cd animation-films && npm install (nach dem ersten Mal schnell). Wenn er existiert (eine Folgefrage), verwenden Sie ihn unverändert weiter.
2. Stil auswählen aus der Anfrage (Abschnitt 1). Kein Stil benannt? Schlagen Sie drei passende zur Idee vor und fragen Sie.
3. Geschichte planen anhand der sechs Takte (Abschnitt 3) in einer kurzen Tabelle. Zeigen Sie sie in einer Nachricht an und fahren Sie fort; warten Sie nicht, es sei denn, etwas ist mehrdeutig.
4. Zuerst Formen: Fügen Sie die Objekte des Benutzers (den Akteur, den Behälter, was fließt, was aufsteigt) in src/films/<idee>-shapes.ts als SVG-Pfade in denselben Koordinaten wie P in story.ts ein, mit der Takttabelle als Kommentar am Anfang. Jede Stilversion dieser Idee importiert aus dieser einen Datei.
5. Erstellen Sie src/films/<idee>-<stil>.tsx aus der Komponente des Stils (Abschnitt 3), verwenden Sie die Formdatei und registrieren Sie es in src/films/index.ts mit der ID <idee>-<stil>.
6. Prüfen: npm run render -- <idee>-<stil> --frames und alle sechs Frames ansehen (Abschnitt 5). Korrigieren und wiederholen.
7. Ausliefern: npm run render -- <idee>-<stil> --final und dem Benutzer den vollständigen Pfad von out/<idee>-<stil>.mp4 geben. Erwähnen Sie, dass er nach einem anderen Stil fragen kann („Jetzt mach es als Pixelkunst“).

Folge-Umskizzierung („Jetzt mach es als Pixelkunst“, „Probier Aquarell“, „Gleiches in Holzschnitt“): Bleiben Sie im selben Ordner animation-films/, behalten Sie dieselbe Idee, Takttabelle und Formdatei bei und erstellen Sie eine neue src/films/<idee>-<neuer-stil>.tsx aus der Komponente des neuen Stils. Registrieren Sie sie neben der früheren Version (überschreiben Sie sie nie), prüfen Sie die Frames, rendern Sie das Finale und geben Sie den neuen Pfad an. Wenn der Benutzer einen Stil lose benennt („8-Bit“, „alter Film“, „Kreide“), ordnen Sie ihn mit Abschnitt 1 zu. Die 3D-aussehenden Stile (57, 58, 59, 62, 80) bauen Objekte als 3D-Netze auf, daher erfordert das Austauschen neuer Objekte dort mehr Arbeit: Verwandeln Sie die Formen mit den Helfern in src/styles/3d/mesh.ts in einfache Dreh- oder Box-Netze.

1. Stil auswählen

Fragen Sie den Benutzer, welchen Stil er möchte, falls er es nicht gesagt hat. Wenn er unsicher ist, zeigen Sie npm run list gruppiert nach Familie und die Galerie in README.md (jeder Stil hat eine bewegte Vorschau in media/thumbs/ und ein 720×900 MP4 in media/videos/). Ordnen Sie locker zu: „Japanischer Druck“ → 33 Ukiyo-e, „Kreide“ → 02 Kreidetafel, „8-Bit“ oder „Retro-Spiel“ → 64 Pixelkunst-RPG, „Ton“ → 62 Claymation, „Lego-ähnlich“ → 58 Baustein-Spielzeug (nennen Sie es nie Lego auf dem Bildschirm), „alter Film“ → 70 Stummfilm oder 71 Wochenschau, „Sci-Fi-Bildschirm“ → 84 Hologramm-HUD.

Familie	Stile (Nummer, Slug)
Auf einer Tafel gezeichnet	01 whiteboard · 02 chalkboard · 05 notepad-doodle · 06 blueprint
Handgezeichnet und gemalt	08 hand-drawn · 09 urban-sketch · 10 crayon-book · 11 watercolour · 13 one-line · 16 cel-line-boil
Cartoon	17 flat-vector · 21 cel-anime-80s · 22 stick-figure
Papier und Puppen	23 cut-out · 24 red-papercut · 25 paper-pop-up · 27 shadow-puppet
Druck und Handwerk	28 woodcut · 29 engraving · 31 silkscreen-poster · 33 ukiyo-e · 34 art-deco · 35 stained-glass
Grafik und Erklärer	39 memphis-diorama · 51 sticker-explainer · 52 math-diagram
3D-Look	57 low-poly-island · 58 brick-toy · 59 glass-product · 62 claymation · 80 lidar-survey
Filmepochen	70 silent-film · 71 newsreel
Bildschirme und Wissenschaft	64 pixel-art-rpg · 81 microscope · 84 hologram-hud · 85 circuit-board
Abstrakt	87 liquid-motion · 89 generative-abstract

src/catalog.ts ist die einzige Liste: Nummer, Kompositions-ID (33-ukiyo-e), Name, Familie, Look, die auf dem Bildschirm angezeigten Wörter eines Stils und die Datei, in der sein Code lebt.

2. Einen integrierten Stil so anzeigen, wie er ist

npm run render -- 33            # 720x900 Vorschau  -> out/33-ukiyo-e_preview.mp4  (Sekunden bis eine Minute)
npm run render -- 33 --final    # 2160x2700 Master -> out/33-ukiyo-e.mp4          (crf 16)
npm run render -- 33 --frames   # 6 Prüfframes   -> out/33-ukiyo-e_frames/ (+ ein Kontaktbogen, wenn ffmpeg installiert ist)
npm run render -- 33 --still 75 # ein PNG von Frame 75

Ein Stil kann nach Nummer, ID, Slug oder einem Teil seines Namens benannt werden (ukiyo, pixel, stained). Die fertigen 720×900 Videos sind bereits in media/videos/, und die vollständigen 2160×2700 Master befinden sich auf der GitHub-Releaseseite. Um einen Stil nur zu zeigen, müssen Sie also überhaupt nicht rendern.

3. Mit der Geschichte oder dem Objekt des Benutzers neu erzählen

Die Geschichte ist in src/story.ts festgelegt. Behalten Sie ihr Timing bei und ändern Sie, was gezeichnet wird. Das ist es, was einen neuen Film von Anfang an richtig aussehen lässt: Jeder Stil weiß bereits, wie diese Takte in Szene gesetzt werden.

Die Takte (Frames bei 30 fps, verschieben Sie sie niemals für einen 5-Sekunden-Film):

Frames	Takt	Wert von storyAt(f)
0–24	der Akteur tritt von rechts ein	kx, ky
24–42	er macht sich bereit (kippt)	tilt (0 → −38°)
42–96	die Hauptaktion (der Guss)	streaming, stream (ein SVG-Pfad von der tip in die Tasse)
44–100	das Ergebnis wächst (die Tasse füllt sich)	level 0 → 1, surface (die Chai-Ellipse)
96–126	es endet und verlässt die Szene	tilt zurück auf 0, kx gleitet hinaus
104–150	die Nachwirkung (Dampf steigt auf)	steam[0..2] 0 → 1, gezeichnet mit steamPath(i, p, t0)

P in story.ts enthält die SVG-Pfade für die Tasse (kulhadBody, kulhadOutline, rim) und den Wasserkocher (kettleBody, kettleLid, kettleSpout, kettleHandle, kettleBand sowie KNOB). Der Wasserkocher wird um seinen eigenen Ursprung gezeichnet und mit translate(kx, ky) rotate(tilt) platziert.

Ordnen Sie die Geschichte des Benutzers zunächst denselben sechs Takten zu, in einer kurzen Tabelle, und zeigen Sie sie ihm. Beispiele:

Idee des Benutzers	Akteur (Wasserkocher)	Aktion (Guss)	Ergebnis (Füllung)	Nachwirkung (Dampf)
Kaffee in eine Tasse	Kaffeekanne	Kaffeestrom	Tasse füllt sich	Dampf
Eine Pflanze gießen	Gießkanne	Wassertropfen	Erde verdunkelt sich, ein Spross wächst mit level	zwei Blätter öffnen sich
Geld sparen	eine Hand mit einer Münze	Münze fällt	Sparschwein füllt sich (level → Münzstapel)	Glitzer
Farbe in eine Dose	Farbdose	dicke Farbe	Dose füllt sich	ein Tropfen setzt sich ab
Daten-Upload (abstrakt oder Info-Stile)	eine Wolke	Pakete reisen entlang stream	ein Balken oder eine Anzeige füllt sich mit level	ein Häkchen steigt auf

Dann bauen Sie es:

1. Arbeiten Sie in einem separaten Projekt, damit die installierte Fähigkeit sauber bleibt: standardmäßig animation-films/ im aktuellen Ordner des Benutzers (siehe „Die übliche Anfrage“ oben), erstellt mit node <skill>/scripts/new-project.mjs <ordner> und dann npm install darin. Bauen Sie die Filme des Benutzers niemals innerhalb von <skill> selbst.
2. Kopieren Sie die Komponente des gewählten Stils aus seiner Datei (siehe src/catalog.ts) in src/films/<filmname>.tsx, zusammen mit den Hilfsfunktionen, die sie importiert. Bearbeiten Sie niemals die 39 Originale direkt: Sie sind die Referenz.
3. Ersetzen Sie die Formen, nicht das Timing: Tauschen Sie die Wasserkocher- und Tassenpfade gegen die Objekte des Benutzers aus (behalten Sie ungefähr dieselbe Größe und Position: Tasse zentriert bei x 540, Rand bei y ≈ 800; Akteur in Ruhe etwa bei (796, 324) mit seiner „Tülle“ am lokalen Punkt (−251, −62)), färben Sie die Flüssigkeit neu, ändern Sie, was aufsteigt. Behalten Sie die eigenen Materialien, die Palettenlogik, Filter, Textur und den Bewegungscharakter des Stils bei (schrittweise auf Zweiern oder Dreiern für handgemachte Medien, fließend für digitale, Flimmern für Film).
4. Wenn der Stil Wörter anzeigt (im text-Feld des Katalogs aufgeführt: 51, 52, 64, 70, 71, 84 und 85 zeigen Wörter an), schreiben Sie sie für die neue Geschichte um: kurz, einfaches Englisch, nur über die Geschichte.
5. Registrieren Sie den Film in src/films/index.ts und rendern Sie ihn (Abschnitt 4).

Eine längere oder andere Geschichte (mehr Takte, zwei Akteure, eine Kamerafahrt): Schreiben Sie eine neue Geschichtsdatei neben story.ts (z. B. src/films/meine-geschichte.ts) mit einer eigenen storyAt(f), die jeden vom Zeichnen benötigten Wert zurückgibt, listen Sie die neuen Takte in einer Tabelle oben auf, setzen Sie durationInFrames im Film und befolgen Sie die Regel „Die Geschichtsdatei besitzt das gesamte Timing, die Stildatei besitzt das gesamte Aussehen“. Quantisieren Sie Frames (Math.floor(f / 2) * 2) nur dort, wo der Stil handgemacht aussehen soll.

Regeln für den Code: nur deterministisch (kein Math.random(), kein Date; verwenden Sie gesäte Funktionen des Frames oder Index), eindeutige Filter- und clipPath-IDs, Schriftarten nur über @remotion/google-fonts/<Font> mit loadFont() auf Modulebene und nichts, was über package.json hinaus installiert ist.

4. Rendern

Bedarf	Befehl
Schneller Blick	npm run render -- <film-oder-stil> (720×900, crf 23)
Finale	npm run render -- <film-oder-stil> --final (2160×2700, crf 16)
Ein Film aus src/films	npm run render -- <film-id> --final (gleiche Flags funktionieren: --frames, --still 75)
Live-Bearbeitung	npm run studio öffnet Remotion Studio im Browser

Die 3D-aussehenden Stile (57, 58, 59, 62, 80) malen eine softwaregerenderte Szene auf eine Leinwand mit 1,5× (1,25× für 80) von 1080 Breite und dehnen sie dann auf 2160, sodass sie etwas weicher und langsamer sind als die anderen. Für ein schärferes Finale erhöhen Sie das zweite Argument von glView(...) in src/catalog.ts (2 = natives 4K, etwa doppelt so langsam).

5. Ausgabe überprüfen, bevor Sie sie übergeben

Führen Sie npm run render -- <id> --frames aus und sehen Sie sich jeden Frame an (lesen Sie die PNGs). Korrigieren und erneut rendern. Erlauben Sie zwei oder drei Durchläufe.

• Lesbare Geschichte: Bei Frame 50 gießt etwas deutlich, bei 75 füllt sich der Behälter sichtbar, bei 149 ist die Nachwirkung sichtbar.
• Nichts abgeschnitten an den Framekanten; der Akteur tritt vollständig ein und vollständig aus.
• Schichtung: Die Flüssigkeit bleibt im Behälter, der Strom geht hinein (nicht vor den nahen Rand), der Dampf beginnt an der Oberfläche.
• Der Stil ist an einem Frame erkennbar: Jemand, der den Stil kennt, sollte ihn anhand eines Standbilds benennen können. Zwei Stile sollten niemals wie eine Farbvariante voneinander aussehen.
• Kontrast: Die Flüssigkeit und der Strom sind gegen den Hintergrund sichtbar, nichts matschig.
• Bewegungscharakter: schrittweise, wo das Medium handgemacht ist, fließend, wo es digital ist; kein Flimmern, das Sie nicht beabsichtigt haben.
• Text: nur die Wörter, die Sie beabsichtigt haben, richtig geschrieben, innerhalb des Rahmens.
• Inhaltsregeln (unten) alle bestanden. Sehen Sie sich schließlich das Vorschau-MP4 einmal vollständig an und rendern Sie dann das Finale.

6. Inhaltsregeln (immer)

• Keine echten Marken, Logos, Produkte, Personen, Kanalnamen oder Fernsehsender und keine markenrechtlich geschützten Namen auf dem Bildschirm. „Baustein-Spielzeug“ ist ein generischer Spielzeugbaustein, niemals eine benannte Marke.
• Keine echten Karten, Orte oder Staatsgrenzen und keine Flaggen oder politischen Symbole oder Slogans. Eine Landschaft, falls vorhanden, ist erfunden ohne erkennbare Geografie.
• Kein Kopieren eines bestimmten Films, einer Show, eines Titelsequenz, eines Spiels, einer Figur oder der Silhouette oder Sprites einer bekannten Figur. Ein Stil oder Genre ist in Ordnung; ein bestimmtes bestehendes Werk nicht.
• Keine erfundenen Fakten: keine gefälschten Statistiken, Preise, Daten, Zitate oder Quellen. Ein Datenstil zeichnet die eigenen Werte der Geschichte (wie den Füllstand) und nichts anderes.
• Text nur, wenn der Stil typografisch, rundfunkartig oder eine Spiel-UI ist, und dann kurzes Englisch über die Geschichte selbst.
• Bleiben Sie originell: die Geschichte des Benutzers, Ihre eigenen Zeichnungen, der Stil als Technik.

Dateien

Pfad	Was
src/story.ts	Die Geschichte: Größe, Timing, Takte, die Objektpfade, storyAt(f) und steamPath()
src/kit.tsx	Geteilte Helfer: Stage (eine SVG-Bühne), Paper (Papierkörnung), Rough (wackelige Verschiebung), region
src/catalog.ts	Die 39 Stile: Nummer, ID, Name, Familie, Aussehen, Bildschirmwörter, Datei, Komponente
src/styles/<familie>/	Der Zeichencode, gruppiert nach Technik
src/films/	Die eigenen Filme des Benutzers
src/Root.tsx, src/index.ts	Registriert jeden Stil und Film als eine Remotion-Komposition
scripts/render.mjs	npm run list / npm run render
scripts/new-project.mjs	npm run new -- <ordner> kopiert den Code in ein neues Projekt
media/videos/, media/thumbs/	Ein 720×900 MP4 und ein animiertes WebP von jedem Stil