Pixelstraßen-Kurzfilm

Pixel-Kurzfilm (Remotion + three.js + Pixel-Sprites)

Nahtlose 3D-Welt, Pixel-Art-Menschen. Alles (Menschen, Gebäude, Texturen, Musik, Soundeffekte) wird durch Code gezeichnet oder synthetisiert, sodass das Ergebnis originell ist und keine Assets oder Lizenzen benötigt. Die Vorlage ist ein vollständiger, funktionsfähiger Starter; diese Datei ist alles, was Sie brauchen.

Start

Neues Projekt (kopiert template/, installiert, erstellt Musik und Sounds, Typprüfung):

~/.claude/skills/pixel-film/bin/new-film.sh <ordner>
cd <ordner> && npm run studio      # Kompositionen: Film (ein 36 s Starter) und CharSheet (jede Person und Pose)

Innerhalb eines bestehenden Remotion-Projekts stattdessen: kopieren Sie template/src/film/, template/src/components/ui.tsx, template/src/theme.ts, template/scripts/ und template/public/fonts/, und fügen Sie die Abhängigkeiten aus template/package.json hinzu (three, @remotion/three, @react-three/fiber, @types/three, @remotion/bundler, @remotion/renderer; jedes Remotion-Paket auf einer exakten Version).

Vor dem Bauen, vereinbaren Sie

Fragen Sie nur, was die Arbeit ändert; wählen Sie andernfalls und sagen Sie, was Sie gewählt haben.

• Format. 16:9 (1920×1080) eignet sich für eine Straße, Kamerafahrten, YouTube und den Facebook-Feed. 9:16 (1080×1920) eignet sich für Reels/TikTok/Shorts, aber der Rahmen ist schmal (etwa die Hälfte des horizontalen Sichtfelds), daher müssen Weitwinkelaufnahmen und Über-die-Schulter-Aufnahmen überdacht werden. Fragen Sie, wenn unklar: es ändert jede Einstellung.
• Geschichte und Länge. Schreiben Sie es als Tabelle von Szenen mit Startzeiten auf 2 s-Takten (60 Bilder bei 30 fps): was passiert, wer sagt was, die Tageszeit, die Kamera. 45–80 s eignen sich für eine Werbung oder einen Kurzfilm.
• Sprache. Titel und Untertitel in der Sprache des Publikums.
• Was gezeigt werden soll (für ein Produkt oder eine App): ein klarer Moment für die Funktion, platziert auf dem Drop der Musik, unter Verwendung des echten Produkts (siehe "Eine echte App zeigen").

Bausteine (template/src)

Datei	Was es ist	Anpassen
film/people.ts	Pixel-Menschen, 64×112, gezeichnet mit Canvas-Formen und dann in Pixel-Kunst umgewandelt (Farben an eine Palette angepasst, Cel-Shading auf der dem Licht abgewandten Seite, dunklere Linien zwischen Körperteilen, Umriss). Ansichten: vorne, Seite (Gehzyklus walk0–3), hinten. Posen: idle blink talk happy wave think worried phone pay, sideIdle sideTalk, back backPhone, sitPhone sitHappy. Beispiel-Cast: owner kid uncle woman grandma man.	PEOPLE: Haut, Haare und hairStyle (Dutt, kurz, Pferdeschwanz, Glatze, Mütze), Oberteil/Unterteil/Schuhe Farben, topDots, dress, apron, sleeveless, glasses, mustache, belly, kid, iris. Überprüfen Sie sie im CharSheet. Neue Kleidung, Requisiten oder Haare gehen in drawPerson, face, hairFront ein.
film/Street3D.tsx	Das Set. Ein Laden in der Mitte: Innenraum (Regale mit Waren, Theke, Glühbirne, Kühltruhe, Hocker), Vorderseite (breite Öffnung über der Theke, optionales Drahtgitter und Hängevorhänge, Schild, Thekenplatten, Markise). Nachbarn (ein Laden mit Glasfront, ein Laden mit Rollladen und gestreifter Markise, Häuser), zweite Stockwerke mit Balkonen und Jalousiefenstern, nachts beleuchtet, Bürgersteig, Straße, Pfosten mit Lampen und optionalen durchhängenden Drähten, ein Baum, Pflanzen, ein Tisch und Stühle. Beleuchtung nach time (0 Morgen, 1 Mittag, 2 goldene Stunde, 3 Abenddämmerung, 4 Nacht; Brüche überblenden) mit Schatten, Himmel, Sternen, Nebel und Lampenglühen. Menschen sind beleuchtete Werbetafeln, die Schatten werfen. Optionale items (Produkte auf der Theke), cat, fx.beam / fx.scanX (ein Telefon, das die Theke scannt).	SET oben: Schildwörter und -farben, Wandfarben, Thekenplatten, Gitter, Hängevorhänge, Produkte (public/products/<name>.png), Nachbarnamen und -farben, obere Stockwerke, Drähte. Koordinaten: Ladenfront bei z = 1,2 (Öffnung x −2..2, y 1..2,3, Thekenoberkante y = 1,0), jemand hinter der Theke bei [0, 0, 0,25], ein Kunde vorne bei [0,7, 0,12, 1,95]; Bürgersteigoberkante y = 0,12 von z 1,2 bis 3,6, Straße dahinter; Gebäude entlang x von −19 bis 19. Für eine andere Art von Ort (Café, Büro, Markt) ändern Sie die Teile des Ladens im JSX: es sind einfache Boxen, Ebenen und Canvas-Texturen.
film/kit.tsx	camMove (easing Kamera-Keyframes + Verwackeln von Hand), who (eine Person auf einem Pfad: geht in Seitenansicht in die Richtung, in die sie geht, ansonsten die geplante Pose; im Leerlauf blinzelt es), headAt (Bildschirmpunkt über einem Kopf), Line (Untertitel mit Sprecherfarben), Card (große Bildunterschrift oder Zeitkarte), Sfx, steps (Schritte), PhoneIn (ein Telefon mit App-Bildschirmen), Dim, Fade, num.	SPEAKER_COLORS; HEAD für die Kopfhöhe von Kindern.
film/Look.tsx	FilmLook: Sonnenstrahlen von der Sonnenseite, eine Farbkorrektur nach Tageszeit, Vignette, Körnung, Letterbox-Balken.	Legen Sie es über jede 3D-Szene mit derselben time.
film/overlay.tsx, film/pixel.ts	Pixel-Symbole über Köpfen (bulb sweat heart question coin wifiOff clock zzz) und FoundBox (eine Box um einen gefundenen Gegenstand mit einem Zähl%-Label).	Symbole sind kleine Buchstabenraster in pixel.ts.
components/ui.tsx	Phone: ein Telefonrahmen, der 1080×1920 Screenshots zeigt, mit Zoom-Keyframes (cams), Taps und Wipes.	—
film/Film.tsx	Der Starter: Morgen-Kranfahrt mit Titel und einer verfolgenden Gehszene; eine Goldene-Stunde-Zweier-Einstellung Gespräch; Nacht, alle winken, Rückwärtsfahrt und hoch, Endkarte.	Ersetzen Sie durch die Geschichte.
scripts/make-music.mjs + music-plan.json	Ein origineller, fröhlicher Track (120 BPM, C–G–Am–F; Marimba, Pads, Bass, eine Lead-Hook, Risers, ein finaler Hit) angelegt nach dem Plan, plus filmische Sounds (Whoosh, Pop, Tap, Tick, Beep, Chaching, Chime, Shutter, Scan, Detect, Check, Sparkle, Impact, Printer, Stamp, Page, Womp).	Der Plan, in Sekunden: sections (Intro / Main / Break / End), lead und up Bereiche, hits (Drops), final (4 s vor dem Ende).
scripts/make-sfx.mjs	8-Bit-Sounds in public/audio/8bit/ (talk, coin, idea, cash, step, jump, select, done, scan, detect, womp, pop, tap, whoosh) und ein optionaler Chiptune-Track.	—
scripts/capture-screens.mjs	Echte Bildschirme einer Web-App als Telefon-Screenshots (siehe unten).	scripts/shots.json
scripts/stills.mjs, scripts/audio-check.mjs	Überprüfen Sie Frames und Musik vor einem langen Rendervorgang.	—

Kameragrammatik (was es wie einen Film fühlen lässt)

• Eröffnen Sie mit einer Kranfahrt: hoch und weit über der Straße, herunterkommend auf Straßenniveau ([-5, 7,5, 21] → [-1,5, 2,6, 13,5], fov 34).
• Verfolgen: folgen Sie einer gehenden Person von der Straßenseite aus: Kamera x = ihr x + 0,9, z ≈ 7,4, y ≈ 1,35, schauen Sie sie an, fov 30.
• Zweier-Einstellung an der Ladenfront von der Kundenseite, nicht von hinten (Kamera x ≈ −0,9, wenn der Kunde bei x 0,7 steht), sonst verdeckt der Sprite des Kunden die andere Person.
• Nahaufnahme: ein langsamer Push-In (fov 24–28) mit der Kamera über Thekenhöhe (y ≈ 2,1 schaut auf y ≈ 1,36), damit Dinge auf der Theke das Gesicht nicht verdecken.
• Über die Schulter von innen, hinter jemandem in der backPhone-Pose: sie tief im Bild, die Theke und der Kunde draußen im Blick.
• Eine Reihe von Personen: seitlich entlangfahren.
• Ende: alle winken nah an der Kamera, dann zurück und hoch über die ganze Straße ([0, 1,6, 7,6] → [0, 10,5, 27], schauen hoch zu [0, 3,6, 0]), mit der Endkarte oben, dann ausblenden auf Schwarz.
• Zeitkarten (MORGEN, MITTAG, GOLDENE STUNDE, NACHT…) oben, wenn das Licht wechselt; Untertitel unten für Dialoge (sie lesen sich besser als Sprechblasen in Filmgröße).
• Starten Sie Szenen auf Taktlinien (Vielfache von 60 Bildern) und stellen Sie den Musikplan so ein, dass der Drop auf den Schlüsselmoment und der finale Hit auf die Endkarte fällt.

Eine echte App zeigen

Zeigen Sie das echte Produkt, kein Mock-up. Für eine Web-App (oder den Web-Build einer mobilen App): füllen Sie es mit erfundenen Daten, dann node scripts/capture-screens.mjs scripts/shots.json (benötigt npm i -D playwright && npx playwright install chromium). Es schießt 1080×1920 Telefonbildschirme in public/shots/. Geben Sie "camera" ein JPEG und die Kamera der App sieht dieses Bild, sodass Scan- oder Erkennungsfunktionen wirklich laufen; zeichnen Sie diese Szene mit erfundenen Produkten (SVG → JPEG mit sharp oder einer Canvas) anstatt mit echten Marken. Platzieren Sie die Bildschirme auf PhoneIn / Phone mit Taps, die auf tap/select-Sounds getaktet sind. Jede im Film gezeigte Zahl (ein Preis, ein %-Match) sollte das sein, was die App tatsächlich produziert hat.

Überprüfen, dann rendern

1. npm run stills -- 100 400 900 … → out/stills/*.jpeg in halber Größe. Betrachten Sie Frames aus jeder Szene: Menschen verstecken sich gegenseitig, Gesichter bedeckt, Text über Schildern, eine Nacht, die wie Tag aussieht, Untertitel über belebten Bereichen. Beheben Sie es vor dem Rendern; ein vollständiger Render ist langsam.
2. node scripts/audio-check.mjs: unter 250 Hz unter ~65 % und 250–2000 Hz bei 30 % oder mehr, sonst klingt die Musik auf Telefon- und Laptop-Lautsprechern wie nichts.
3. npm run render (--gl=swangle: WebGL auf der CPU). Mit Schatten bei 1080p rechnen Sie mit Sekunden pro Frame (80 s Film ≈ 2 h auf einem kleinen Server); führen Sie es im Hintergrund aus. Oder der Benutzer rendert aus dem Studio in einem Browser mit einer GPU.

Fallstricke

• Porträt ist schmal: eine Person 1 m neben der Kameraachse bei 2 m Entfernung ist außerhalb des Rahmens. In 9:16 trennen Sie Motive vertikal (Kamera hoch, die nahe Person tief im Rahmen).
• Sprites blockieren die Kamera: eine Person zwischen Kamera und Motiv füllt den Rahmen (es sind große flache Ebenen). Bewegen Sie die Kamera, nicht nur die Person.
• Basslastige Musik klingt wie Stille auf kleinen Lautsprechern: geben Sie dem Bass Obertöne, halten Sie Akkorde und Melodie in den Mitten, und tiefpassfiltern Sie nicht stark.
• Nacht zu hell: halten Sie Umgebungs- und Himmelslicht niedrig und lassen Sie Lampen, das Schild und beleuchtete Fenster die Szene beleuchten (die Voreinstellungen tun das).
• Texturen: packen Sie asynchrone Ladevorgänge in delayRender / continueRender, und fordern Sie niemals eine Datei an, die nicht existiert (der Render hängt).
• Determinismus: kein Math.random in Bildern oder generiertem Audio (gesäter Zufall oder Remotions random(seed)), damit erneute Renderings übereinstimmen.
• Schriftarten werden in public/fonts ausgeliefert (Poppins, Caveat, Press Start 2P; SIL Open Font License), daher benötigt das Rendern kein Internet.
• Remotions eigenes ffmpeg (node_modules/@remotion/compositor-*/ffmpeg) hat wenige Filter: dekodieren Sie zu PCM WAV für Analysen, codieren Sie MP3 mit libmp3lame, greifen Sie Frames mit -ss.

Regeln

• Nur originale Charaktere, Orte und Produkte: keine echten Marken, Logos oder Personen, und keine Nachbildung eines bestimmten bestehenden Spiels, Films oder einer Sendung (deren Charaktere, Kunst oder Look), selbst umbenannt.
• Behauptungen in einer Werbung müssen für das Produkt wahr sein. Weisen Sie auf alles hin, was der Benutzer vor dem Posten bestätigen muss (z. B. "kostenlos im App Store" erst, wenn es öffentlich ist).