Court métrage rue pixel

Court-métrage pixel (Remotion + three.js + sprites pixel)

Monde 3D fluide, personnages pixel-art. Tout (personnages, bâtiments, textures, musique, effets sonores) est dessiné ou synthétisé par du code, donc le résultat est original et ne nécessite ni actifs ni licences. Le modèle est un starter complet et fonctionnel ; ce fichier est tout ce dont vous avez besoin.

Démarrage

Nouveau projet (copie template/, installe, génère la musique et les sons, vérifie les types) :

~/.claude/skills/pixel-film/bin/new-film.sh <dossier>
cd <dossier> && npm run studio      # compositions : Film (un starter de 36 s) et CharSheet (chaque personne et pose)

Dans un projet Remotion existant à la place : copiez template/src/film/, template/src/components/ui.tsx, template/src/theme.ts, template/scripts/ et template/public/fonts/, et ajoutez les dépendances de template/package.json (three, @remotion/three, @react-three/fiber, @types/three, @remotion/bundler, @remotion/renderer ; chaque package Remotion sur une version exacte).

Avant de construire, convenez de

Ne demandez que ce qui modifie le travail ; sinon, choisissez et dites ce que vous avez choisi.

• Format. 16:9 (1920×1080) convient à une rue, des plans tracking, YouTube et le fil Facebook. 9:16 (1080×1920) convient aux Reels/TikTok/Shorts mais le cadre est étroit (environ la moitié du champ de vision horizontal), donc les plans larges et les plans par-dessus l'épaule doivent être repensés. Demandez si ce n'est pas clair : cela change chaque plan.
• Histoire et durée. Écrivez-la comme un tableau de scènes avec des heures de début sur des barres de 2 s (60 images à 30 fps) : ce qui se passe, qui dit quoi, l'heure de la journée, la caméra. 45–80 s convient à une publicité ou un court métrage.
• Langue. Cartes de titre et sous-titres dans la langue du public.
• Ce qu'il faut montrer (pour un produit ou une application) : un moment clair pour la fonctionnalité, placé sur le drop de la musique, en utilisant le produit réel (voir « Montrer une vraie application »).

Éléments de construction (template/src)

Fichier	Ce que c'est	Personnaliser
film/people.ts	Personnages pixel, 64×112, dessinés avec des formes canvas puis transformés en pixel art (couleurs alignées sur une palette, cel shading sur le côté opposé à la lumière, lignes plus sombres entre les parties, contour). Vues : face, côté (cycle de marche walk0–3), dos. Poses : idle blink talk happy wave think worried phone pay, sideIdle sideTalk, back backPhone, sitPhone sitHappy. Casting exemple : owner kid uncle woman grandma man.	PEOPLE : peau, cheveux et hairStyle (chignon, court, queue de cheval, chauve, casquette), couleurs haut/bas/chaussures, topDots, dress, apron, sleeveless, glasses, mustache, belly, kid, iris. Vérifiez-les dans CharSheet. Nouveaux vêtements, accessoires ou cheveux dans drawPerson, face, hairFront.
film/Street3D.tsx	Le décor. Une boutique au milieu : intérieur (étagères de produits, comptoir, ampoule, congélateur, tabouret), devanture (large ouverture au-dessus du comptoir, grille métallique et lanières en option, enseigne, planches de comptoir, auvent). Voisins (une boutique à vitrine vitrée, une boutique fermée avec un auvent rayé, des maisons), deuxièmes étages avec balcons et fenêtres jalousie allumés la nuit, trottoir, route, poteaux avec lampes et fils affaissés en option, un arbre, des plantes, une table et des chaises. Éclairage par time (0 matin, 1 midi, 2 heure dorée, 3 crépuscule, 4 nuit ; les fractions se mélangent) avec ombres, ciel, étoiles, brouillard et lueurs de lampes. Les gens sont des panneaux lumineux qui projettent des ombres. items en option (produits sur le comptoir), cat, fx.beam / fx.scanX (un téléphone scannant le comptoir).	SET en haut : mots et couleurs de l'enseigne, couleurs des murs, planches de comptoir, grille, lanières, produits (public/products/<nom>.png), noms et couleurs des voisins, étages supérieurs, fils. Coordonnées : devanture du magasin à z = 1.2 (ouverture x −2..2, y 1..2.3, dessus du comptoir y = 1.0), quelqu'un derrière le comptoir à [0, 0, 0.25], un client devant à [0.7, 0.12, 1.95] ; dessus du trottoir y = 0.12 de z 1.2 à 3.6, route au-delà ; bâtiments le long de x de −19 à 19. Pour un autre type de lieu (café, bureau, marché), modifiez les pièces du magasin dans le JSX : ce sont des boîtes, des plans et des textures canvas simples.
film/kit.tsx	camMove (images clés de caméra avec easing + dérive de prise en main), who (une personne sur un chemin : marche en vue de côté face à la direction, sinon la pose prévue ; les inactifs clignent), headAt (point d'écran au-dessus d'une tête), Line (sous-titres avec couleurs du locuteur), Card (grande légende ou carte temporelle), Sfx, steps (pas), PhoneIn (un téléphone avec des écrans d'application), Dim, Fade, num.	SPEAKER_COLORS ; HEAD pour la hauteur de tête des enfants.
film/Look.tsx	FilmLook : rayons de soleil du côté du soleil, étalonnage couleur selon l'heure de la journée, vignettage, grain, barres de letterbox.	Placez-le sur chaque scène 3D avec le même time.
film/overlay.tsx, film/pixel.ts	Icônes pixel au-dessus des têtes (bulb sweat heart question coin wifiOff clock zzz) et FoundBox (une boîte autour d'un objet trouvé avec un compteur de %).	Les icônes sont de petites grilles de lettres dans pixel.ts.
components/ui.tsx	Phone : un cadre de téléphone affichant des captures d'écran 1080×1920, avec des images clés de zoom (cams), des tapotements et des balayages.	—
film/Film.tsx	Le starter : grue du matin avec le titre et une marche tracking ; une conversation à deux à l'heure dorée ; nuit, tout le monde salue, recul et montée, carte de fin.	Remplacez par l'histoire.
scripts/make-music.mjs + music-plan.json	Une piste originale entraînante (120 BPM, C–G–Am–F ; marimba, nappes, basse, un lead accrocheur, des montées, un coup final) disposée selon le plan, plus des sons cinématiques (whoosh, pop, tap, tick, beep, chaching, chime, shutter, scan, detect, check, sparkle, impact, printer, stamp, page, womp).	Le plan, en secondes : sections (intro / main / break / end), plages lead et up, hits (drops), final (4 s avant la fin).
scripts/make-sfx.mjs	Sons 8 bits dans public/audio/8bit/ (talk, coin, idea, cash, step, jump, select, done, scan, detect, womp, pop, tap, whoosh) et une piste chiptune en option.	—
scripts/capture-screens.mjs	Écrans réels d'une application web en captures d'écran de téléphone (voir ci-dessous).	scripts/shots.json
scripts/stills.mjs, scripts/audio-check.mjs	Vérifiez les images et la musique avant un long rendu.	—

Grammaire de caméra (ce qui donne l'impression d'un film)

• Ouvrir avec une grue : haut et large au-dessus de la rue, descendant au niveau de la rue ([-5, 7.5, 21] → [-1.5, 2.6, 13.5], fov 34).
• Tracking : suivre une personne qui marche depuis le côté de la route : caméra x = leur x + 0.9, z ≈ 7.4, y ≈ 1.35, en la regardant, fov 30.
• Plan à deux devant la boutique depuis le côté du client, pas derrière lui (caméra x ≈ −0.9 quand le client se tient à x 0.7), ou le sprite du client cache l'autre personne.
• Gros plan : un lent push-in (fov 24–28) avec la caméra au-dessus de la hauteur du comptoir (y ≈ 2.1 regardant y ≈ 1.36), pour que les objets sur le comptoir ne couvrent pas le visage.
• Par-dessus l'épaule depuis l'intérieur, derrière quelqu'un en pose backPhone : lui bas dans le cadre, le comptoir et le client dehors en vue.
• Une ligne de personnes : camion latéralement le long de celle-ci.
• Fin : tout le monde salue près de la caméra, puis recul et montée au-dessus de toute la rue ([0, 1.6, 7.6] → [0, 10.5, 27], regardant vers [0, 3.6, 0]), avec la carte de fin par-dessus, puis fondu au noir.
• Cartes temporelles (MATIN, MIDI, HEURE DORÉE, NUIT…) en haut lorsque la lumière change ; sous-titres en bas pour les dialogues (ils se lisent mieux que des bulles de parole à la taille du film).
• Commencez les scènes sur des barres (multiples de 60 images) et définissez le plan musical pour que le drop tombe sur le moment clé et le coup final sur la carte de fin.

Montrer une vraie application

Montrez le produit réel, pas une maquette. Pour une application web (ou la version web d'une application mobile) : remplissez-la de données fictives, puis node scripts/capture-screens.mjs scripts/shots.json (nécessite npm i -D playwright && npx playwright install chromium). Il prend des captures d'écran téléphone 1080×1920 dans public/shots/. Donnez "camera" à un JPEG et la caméra de l'application voit cette image, donc les fonctionnalités de scan ou de reconnaissance fonctionnent vraiment ; dessinez cette scène avec des produits fictifs (SVG → JPEG avec sharp ou un canvas) plutôt que de vraies marques. Mettez les écrans sur PhoneIn / Phone avec des tapotements synchronisés sur les sons tap/select. Tout nombre affiché dans le film (un prix, un % de correspondance) doit être ce que l'application a réellement produit.

Vérifier, puis rendre

1. npm run stills -- 100 400 900 … → out/stills/*.jpeg en demi-taille. Regardez les images de chaque scène : personnes se cachant mutuellement, visages couverts, texte sur les enseignes, nuit qui ressemble à un jour, sous-titres sur des zones chargées. Corrigez avant de rendre ; un rendu complet est lent.
2. node scripts/audio-check.mjs : en dessous de 250 Hz sous ~65 % et 250–2000 Hz à 30 % ou plus, sinon la musique sonne comme rien sur les haut-parleurs de téléphone et d'ordinateur portable.
3. npm run render (--gl=swangle : WebGL sur le CPU). Avec des ombres en 1080p, attendez quelques secondes par image (80 s de film ≈ 2 h sur un petit serveur) ; exécutez-le en arrière-plan. Ou l'utilisateur rend depuis le studio dans un navigateur avec un GPU.

Pièges

• Le portrait est étroit : une personne à 1 m de l'axe de la caméra à 2 m de distance est hors cadre. En 9:16, séparez les sujets verticalement (caméra haute, la personne proche bas dans le cadre).
• Les sprites bloquent la caméra : une personne entre la caméra et le sujet remplit le cadre (ce sont de grands plans plats). Déplacez la caméra, pas seulement la personne.
• La musique avec des basses lourdes semble silencieuse sur les petits haut-parleurs : donnez des harmoniques aux basses, gardez les accords et la mélodie dans les médiums, et ne filtrez pas trop les aigus.
• Nuit trop lumineuse : gardez la lumière ambiante et du ciel basses et laissez les lampes, l'enseigne et les fenêtres allumées éclairer la scène (les préréglages le font).
• Textures : enveloppez les chargements asynchrones dans delayRender / continueRender, et ne demandez jamais un fichier qui n'existe pas (le rendu se bloque).
• Déterminisme : pas de Math.random dans les images ou l'audio généré (aléatoire ensemencé, ou random(seed) de Remotion), pour que les nouveaux rendus correspondent.
• Polices livrées dans public/fonts (Poppins, Caveat, Press Start 2P ; SIL Open Font License), donc le rendu n'a pas besoin d'Internet.
• Le ffmpeg propre à Remotion (node_modules/@remotion/compositor-*/ffmpeg) a peu de filtres : décoder en PCM WAV pour analyse, encoder MP3 avec libmp3lame, capturer des images avec -ss.

Règles

• Personnages, lieux et produits originaux uniquement : pas de vraies marques, logos ou personnes, et pas de recréation d'un jeu, film ou émission existant spécifique (ses personnages, son art ou son apparence), même renommé.
• Les affirmations dans une publicité doivent être vraies pour le produit. Signalez tout ce que l'utilisateur doit confirmer avant de publier (par exemple « gratuit sur l'App Store » seulement une fois qu'il est public).