triptu/flowbar

Vidéo de Lancement Flowbar

Projet Remotion situé dans flowbar-launch-video/ produisant une vidéo de lancement produit d'environ 28s pour les réseaux sociaux et l'intégration sur le site web.

Commandes Rapides

cd flowbar-launch-video

# Aperçu dans le navigateur
npm run studio            # ouvre http://localhost:3000

# Rendu haute qualité (réseaux sociaux)
npx remotion render FlowbarLaunchVideo out/flowbar-launch-hq.mp4 --codec h264 --crf 18

# Compression pour le web (faststart pour le streaming)
ffmpeg -i out/flowbar-launch-hq.mp4 -c:v libx264 -crf 28 -preset slow -c:a aac -b:a 128k -movflags +faststart out/flowbar-launch-web.mp4 -y

Architecture

flowbar-launch-video/
├── public/                     # Ressources statiques (vidéos, audio)
│   ├── nature-loop.mp4         # Fond ambiant (boucle globale)
│   ├── the-reveal.mp4          # Séquence héro : bureau → Fn → Flowbar apparaît (5,9s)
│   ├── product-tour.mp4        # Enregistrement d'écran continu unique (15,6s)
│   └── audio.mp3               # Musique de fond
├── src/
│   ├── Root.tsx                # Définition de la composition (fps, durée, dimensions)
│   ├── FlowbarLaunchVideo.tsx  # Composition principale — calques bg, audio, scènes, grain
│   ├── theme.ts                # Couleurs (correspond au site web), présélections de ressorts
│   ├── fonts.ts                # Instrument Serif + DM Sans (Google Fonts)
│   ├── scenes/
│   │   ├── ProblemScene.tsx    # ACTE 1 : Deux fiches de douleur textuelles uniquement
│   │   ├── RevealScene.tsx     # ACTE 2 : Séquence héro avec superposition « Meet Flowbar »
│   │   ├── FeatureTourScene.tsx# ACTE 3 : Démo produit continue + étiquettes interchangeables
│   │   └── ClosingScene.tsx    # ACTE 4 : Logo, slogan, URL
│   ├── components/
│   │   ├── AmbientBackground.tsx  # Boucle nature + superposition dégradée + FilmGrain
│   │   └── AnimatedText.tsx       # WordReveal, MaskReveal, ScaleReveal
│   └── transitions/
│       └── scaleBlur.tsx       # Transition personnalisée : échelle+flou (pas de fondu !)
└── out/                        # Sorties rendues

Structure et Timing de la Vidéo

La durée est calculée dans Root.tsx : (5 + 6 + 16 + 5) * 30fps - 45 (transitions) - 60 (coupe) = 855 images ≈ 28,5s

Acte	Scène	Durée	Contenu
1	ProblemScene	5s	Deux cartes textuelles sur fond nature. Dévoilements mot par mot.
2	RevealScene	6s	the-reveal.mp4 + « Meet Flowbar. » en bas + slogan
3	FeatureTourScene	16s	product-tour.mp4 continu + 5 étiquettes en haut
4	ClosingScene	5s	Logo + marque verbale + description + URL

Les transitions entre les actes utilisent scaleBlur() avec springTiming({ damping: 18, stiffness: 120 }).

Système de Conception

Couleurs (de theme.ts, correspond à flowbar.tushar.ai)

• Fond : #0c0f0d
• Texte : #ede9df
• Atténué : #9a9488
• Accent : #c99b6d / #ddb88a

Présélections de Ressorts (de theme.ts)

• SPRINGS.smooth — { damping: 200 } — dévoilements de texte, entrées subtiles
• SPRINGS.snappy — { damping: 20, stiffness: 200 } — éléments d'interface
• SPRINGS.heavy — { damping: 15, stiffness: 80, mass: 2 } — moments héro, logo
• SPRINGS.bouncy — { damping: 12 } — accents ludiques

Composants de Texte (de AnimatedText.tsx)

• WordReveal — dévoilement mot par mot avec masque clip-path. À utiliser pour les lignes percutantes.
• MaskReveal — dévoilement d'une seule ligne avec clip-path. À utiliser pour les étiquettes, les descriptions.
• ScaleReveal — mise à l'échelle + flou vers netteté. À utiliser pour le texte héro (« Meet Flowbar. »).

Calques (du bas vers le haut)

1. Couleur unie THEME.bg
2. AmbientBackground — nature-loop.mp4 + superposition dégradée (propriété darken : 0-1)
3. Contenu de la scène (TransitionSeries)
4. FilmGrain — opacité 0,035, se déplace par image

Enseignements Clés et Pièges

Conception du Mouvement

• Pas de fondus. Utilisez la transition scaleBlur ou des entrées basées sur des ressorts. Les fondus ressemblent à PowerPoint.
• Les ressorts ont besoin de physique réelle. { damping: 200 } est très fortement amorti (pas de ressort visible). Utilisez les présélections.
• Texte : les dévoilements par masque sont meilleurs que fondu+glissé. clipPath: inset() avec translateY est 10 fois mieux que opacité+translate.
• Les sorties doivent être rapides. Entrée avec physique de ressort (12-18 images), sortie avec linéaire rapide (5-8 images).
• Dernière étiquette d'une série : ignorez le fondu de sortie. Passez le drapeau isLast pour maintenir l'étiquette finale jusqu'à la fin de la scène.

Gestion des Vidéos

• Utilisez objectFit: "contain" (pas « cover ») pour afficher l'enregistrement complet, y compris la barre de menu. Remplissez le fond avec THEME.bg.
• pauseWhenBuffering n'est pas disponible dans cette version de Remotion — ne l'utilisez pas.
• La durée de la scène doit être >= durée de la vidéo, sinon la vidéo est coupée. Vérifiez avec ffprobe -v error -show_entries format=duration -of csv=p=0 file.mp4.
• Lorsque la vidéo est plus courte que la scène, la dernière image se fige — c'est le comportement souhaité.

Fond

• La boucle nature s'exécute GLOBALEMENT derrière toutes les scènes (dans FlowbarLaunchVideo.tsx, pas par scène).
• Les scènes sont transparentes — elles se superposent par-dessus.
• La scène de clôture ajoute son propre calque d'assombrissement rgba(12,15,13,0.7) pour repousser le fond pour la lisibilité du texte.
• La scène de problème ajoute rgba(12,15,13,0.35) d'assombrissement.

Audio

• Fichier : public/audio.mp3. Référencé via staticFile("audio.mp3").
• Volume : fondu d'entrée sur 1s (0→0,5), fondu de sortie sur les 2 dernières secondes (0,5→0).
• Générez avec Gemini ou Suno. Invite : électronique minimal chaleureux, pads analogiques doux, 88bpm, ~35-40s, pas de voix.

Rendu

• HQ : --crf 18 → ~14 Mo (réseaux sociaux)
• Web : ré-encodez avec ffmpeg -crf 28 -preset slow -movflags +faststart → ~3 Mo (intégration site web, streaming instantané)
• Rendez toujours d'abord en HQ, puis compressez — ne rendez pas deux fois.

Comment Ajouter une Nouvelle Scène

1. Créez src/scenes/NouvelleScene.tsx — exportez un composant React utilisant AbsoluteFill
2. Gardez le fond transparent (le fond nature global s'affiche en dessous)
3. Ajoutez une superposition d'assombrissement si le texte a besoin de lisibilité : <AbsoluteFill style={{ backgroundColor: "rgba(12,15,13,0.X)" }} />
4. Utilisez WordReveal/MaskReveal/ScaleReveal pour le texte, SPRINGS.* pour les animations
5. Ajoutez à FlowbarLaunchVideo.tsx comme une TransitionSeries.Sequence avec la transition scaleBlur()
6. Mettez à jour le calcul de durée à la fois dans FlowbarLaunchVideo.tsx et Root.tsx

Comment Réenregistrer un Clip

1. Utilisez Screen Studio avec : marge minimale, zoom automatique 120 %, curseur lisse, mode sombre, 1920x1080 30ips
2. Enregistrez uniquement la fenêtre de Flowbar (pas le fond du bureau — nous avons la boucle nature)
3. Exportez au format MP4 haute qualité, placez dans public/
4. Vérifiez la durée : ffprobe -v error -show_entries format=duration -of csv=p=0 public/clip.mp4
5. Mettez à jour le durationInFrames de la scène correspondante pour qu'il corresponde (arrondissez à la seconde supérieure × ips)
6. Mettez à jour le calcul de durée dans Root.tsx

Comment Modifier les Étiquettes de la Visite Guidée

Modifiez le tableau LABELS dans FeatureTourScene.tsx :

const LABELS = [
  { text: "Write in markdown. Your files stay yours.", startSec: 0 },
  { text: "Todos from every note. One place to check them off.", startSec: 3.5 },
  // ...
];

startSec est relatif au début de la scène de visite guidée (pas à la vidéo entière). Synchronisez-les avec ce qui se passe dans product-tour.mp4.