Showcase Polish

Cet atom décrit le système de polish visuel. Il est invoqué par l'atom compose — vous ne devriez pas avoir besoin de l'invoquer directement. Chargez-le quand vous avez besoin de comprendre à quoi ressemblent les presets et comment fonctionnent les couches cinématiques.

Ce que vous contrôlez

Vous contrôlez la sortie visuelle en choisissant un preset et en passant des props. Tout le reste est automatique — les composants Remotion gèrent toutes les couches cinématiques en interne en fonction du preset et de la palette.

Presets

Chaque preset configure le chrome de fenêtre, l'espacement, le style de fond et la sélection de palette.

Preset	Apparence	Idéal pour
`factory`	Fond noir chaud avec lueur radiale ambrée, points feux tricolores, rayon 12px, marges généreuses. Chaleur cinématique riche.	Contenu Factory officiel
`factory-hero`	Identique à `factory` + fond dégradé. Impact cinématique maximal.	Pages d'accueil Factory, réseaux sociaux
`hero`	Fond dégradé cool, grandes marges, ombre proéminente.	Marketing non-Factory, tiers
`macos`	Fond sombre épuré, feux tricolores, ombre subtile. Professionnel mais discret.	Démos générales, héros README
`presentation`	Fond noir, marges généreuses. Conçu pour bien s'afficher sur les diapositives.	Présentations, decks de diapositives
`minimal`	Pas de barre de fenêtre, rayon minuscule, marges serrées. Cadre à peine visible.	Intégrations docs, clips inline

Ce que chaque preset inclut automatiquement

Presets Factory / factory-hero (palette chaude) :

Vignette de fond radial chaud avec des bulles de lueur ambrée qui s'intensifient au cours de la vidéo
Ombre portée teintée de chaud avec un halo de lueur accentuée faible
Superposition de correction de couleur teintée de chaud (teinte ambrée)
Particules flottantes en Factory Orange

Tous les autres presets (palette cool Catppuccin) :

Fond solide ou dégradé aux tons cool
Ombre portée neutre
Superposition subtile de correction de couleur cool
Particules flottantes en bleu accentué

Tous les presets incluent : particules flottantes, superposition de texture de bruit, correction de couleur, transition floue titre→contenu (configurable via transitionStyle), entrée de fenêtre animée, entrée de panneau décalée (côte à côte), et superpositions codeAnnotations optionnelles avec syntaxe en surbrillance lors de la séquence de contenu principal.

Palettes visuelles

La palette est auto-sélectionnée selon le preset. Factory/factory-hero utilisent la palette chaude ; tous les autres utilisent la cool.

Factory (chaud)

Token	Hex	Rôle
bg	`#0a0804`	Noir chaud quasi-pur
surface	`#18120e`	Fond contenu terminal
accent	`#EE6018`	Factory Orange
text	`#f0e8e0`	Blanc chaud
muted	`#948781`	Texte désaccentué

Catppuccin (cool)

Token	Hex	Rôle
bg	`#0d1117`	Dark cool
surface	`#181818`	Fond contenu
accent	`#89b4fa`	Accentuation bleue
text	`#cdd6f4`	Blanc cool
muted	`#6c7086`	Texte désaccentué

Styles de transition

transitionStyle sélectionne la présentation en fondu croisé. Le schéma se trouve dans compose/SKILL.md ; appariement au niveau preset :

Preset	Recommandé (défaut en premier)	À éviter
`factory`, `factory-hero`	`motion-blur`, `light-leak`, `whip-pan`, `flash`	`glitch-lite` (entre en conflit avec le ton chaud)
`hero`, `presentation`	`motion-blur`, `whip-pan`, `flash`	`light-leak` (le balayage chaud entre en conflit avec la palette cool)
`macos`, `minimal`	`motion-blur`	`glitch-lite`, `light-leak` (trop de personnalité pour des cadres utilitaires)

codeAnnotations est indépendant du preset — la palette et la pile de polices sont auto-dérivées. Consultez compose/SKILL.md pour le schéma et les règles de création.

Notes opérationnelles

Temps de rendu : ~1-3 minutes pour une vidéo de 30-60s à 1920x1080. Réglez les timeouts des workers à 5 minutes.

Modes de défaillance courants :

Désaccord clipDuration : la vidéo a des images blanches à la fin ou se tronque tôt. Le script render-showcase.sh auto-détecte la durée via ffprobe — préférez l'utiliser plutôt que npx remotion render manuel.
Clips manquants dans public/ : le rendu échoue avec "Could not read file." Le script de rendu gère la mise en scène automatiquement.
Dépendances npm manquantes : exécutez cd ${REMOTION_DIR} && npm install si le rendu échoue à la première utilisation.

Débogage de la mise en page : Utilisez npx remotion still Showcase --props='...' --frame=30 --scale=0.5 /tmp/check.png pour rendre une seule image et l'inspecter visuellement avant de vous engager dans un rendu complet.

Nettoyage : Le script render-showcase.sh supprime les clips mis en scène de public/ après le rendu. Si vous exécutez npx remotion render directement, nettoyez public/ manuellement.

Rendu

Utilisez le script de rendu depuis compose — consultez compose/SKILL.md Étape 3 pour l'utilisation complète :

RENDER=${DROID_PLUGIN_ROOT}/scripts/render-showcase.sh

$RENDER --props /tmp/props.json --output /tmp/showcase.mp4 /tmp/clip.mp4

Avancé : GlitchTitle

Un composant de carte de titre glitch stylisé existe dans src/components/GlitchTitle.tsx pour des intros à l'esthétique hacker/edgy (effet de décroissance de pixels avec des blocs dispersés s'assemblant en texte). Ceci N'EST PAS connecté à la composition Showcase par défaut. L'utiliser nécessite d'écrire une composition Remotion personnalisée. Poursuivez seulement si cela a été explicitement demandé — le TitleCard standard couvre tous les cas d'usage normaux.

Prérequis

Node.js (>= 18)
Chrome / Chromium (Remotion utilise Chrome sans interface)
ffmpeg et ffprobe (Remotion les utilise en coulisse)

cd ${DROID_PLUGIN_ROOT}/remotion && npm install