remotion-product-demos

Vidéos de Démonstration Produit avec Remotion

Créez des vidéos de démonstration produit de qualité professionnelle, dans le style Apple Keynote, en utilisant Remotion.

Démarrage rapide

Projet : ~/Projects/tails-video/ Template : src/templates/GlassPhoneDemo.tsx

cd ~/Projects/tails-video
npx remotion render src/index.ts GlassPhoneDemo out/demo.mp4 \
  --codec=h264 --crf=18

Contenu personnalisé via --props :

npx remotion render src/index.ts GlassPhoneDemo out/custom.mp4 \
  --props='{"scenes":[{"type":"hero","durationInSeconds":3}],"brand":{"name":"VotreMarque"}}'

Template : GlassPhoneDemo

Schéma (Zod)

{
  scenes: Array<{
    type: 'hero' | 'voice' | 'typing' | 'cards' | 'detail' | 'dropdown' | 'endCard',
    title?: string,
    subtitle?: string,
    text?: string,           // scènes de frappe
    cards?: Array<{ name, category, detail?, emoji? }>,  // scène cartes
    items?: Array<{ name, price? }>,                      // scène détails
    options?: Array<{ label, sublabel?, icon? }>,          // scène menu déroulant
    durationInSeconds: number  // defaut 3
  }>,
  accentColor: string,       // defaut '#3B82F6'
  bgStyle: 'light' | 'warm' | 'cool',
  deviceAngle: number,       // defaut 8 (degrés de rotation Y)
  brand?: { name: string, tagline?: string }
}

Types de scènes

Type	Visuel	Propriétés clés
hero	Téléphone avec « Tap to type » + boutons d'action	—
voice	Icône micro + anneaux d'ondulation continus	—
typing	Texte caractère par caractère avec curseur	text
cards	Liste de cartes décalées (style restaurant)	cards[], title
detail	Filtres sous forme de pills + grille d'articles avec prix	items[], title, subtitle
dropdown	Sélecteur d'option vitreux	options[], text
endCard	Le téléphone s'estompe, la marque apparaît centrée	— (utilise brand global)

Flux de scènes recommandé

Une démo typique suit : hero → voice → typing → résultats → detail → typing → dropdown → endCard

Guide de durée : hero 3s, voice 2s, typing 3s par commande, cards/detail 4s, dropdown 3s, endCard 2s.

Règles de style visuel

Consultez references/apple-aesthetic.md pour le guide de style complet.

Règles principales :

• Arrière-plan : Sphères 3D douces avec dégradés radiaux, reflets spéculaires et ombres portées
• Téléphone : Style iPhone avec dégradé de bordure métallique, Dynamic Island, boutons latéraux, indicateur d'accueil, reflet de verre, ombre de base
• Couleurs : Blancs/gris monochromes + une seule couleur d'accentuation configurable
• Mouvement : Tout via useCurrentFrame() + spring({damping: 200}). Zéro animation CSS.

Motifs d'animation

Consultez references/animation-patterns.md pour les configurations de ressort, les formules de timing et les motifs d'assouplissement.

Motifs principaux :

• Entrée : spring({ frame: sceneFrame, fps, config: { damping: 200 } }) → opacité + translateY
• Décalage : chaque élément retardé de i * 6 images
• Flottement : Math.sin(globalFrame / 45) * 12 pour une dérive douce
• Frappe : Math.floor((sceneFrame - delay) * 0.55) caractères révélés
• Ondulation : Continue via modulo : (frame + ring * offset) % cycleDuration
• Fondu enchaîné : Chevauchement des scènes avec -transitionFrames à 0 pour l'apparition, dur - transitionFrames à dur pour la disparition

Backlog d'amélioration

Statut actuel : bien, mais pas parfait. Lacunes connues :

1. Sphères d'arrière-plan Three.js — les sphères CSS à dégradé radial plafonnent à ~7/10. Un vrai @remotion/three avec éclairage correct = 9/10
2. Images réelles — blocs de couleur de substitution → photos Unsplash/Pexels via le composant <Img>
3. Vitesse de frappe variable — plus rapide sur les mots courants, légères pauses sur les espaces
4. Lueur d'écran — légère lumière ambiante diffusée depuis les bords de l'écran du téléphone
5. Motif constantes d'abord — extraire tous les nombres magiques dans des constantes nommées en haut du fichier (recommandation officielle Remotion)

Création de nouveaux templates

Lors de la création d'un nouveau modèle de démonstration produit :

1. Analysez la vidéo de référence image par image (extrayez à intervalles de 1s)
2. Identifiez les composants visuels : arrière-plan, appareil, contenu, transitions
3. Définissez le schéma Zod avec les types de scènes et les propriétés configurables
4. Construisez les composants de bas en haut : arrière-plan → cadre de l'appareil → scènes → transitions
5. Testez à chaque étape — rendez des images individuelles avant la vidéo complète
6. AQ avec un modèle de vision — extrayez des images, évaluez la qualité, itérez

Suivez strictement les règles Remotion : lisez les fichiers de règles skills/remotion-best-practices/.