Que fait Vidéo de Lancement — Vitrine Produit Liquid Glass ?
Produisez des vidéos de lancement produit cinématographiques avec l'esthétique Liquid Glass : vide sombre, panneaux 3D flottants, effets de particules, animations ressort et rythme confiant.
Compétences Composées
| Compétence | Rôle |
|---|---|
/remotion-best-practices | Structure de composition, spring(), <Sequence>, pipeline de rendu |
/content-creation | Génération d'assets IA (Imagen 4.0, Veo 3.1) |
/arcan-glass | Jetons de marque BroomVA (AI Blue, palette sombre) |
/google-veo | Prompts de génération B-roll cinématographique |
/blog-post | Pipeline de distribution (publier sur X, LinkedIn, Instagram) |
L'Esthétique Liquid Glass
Principes Visuels Fondamentaux
- Arrière-plan vide sombre — Noir pur (#000000) ou presque noir (#0A0A0A). Pas de dégradés sur le fond. Le contenu flotte dans l'obscurité.
- Panneaux en perspective 3D — Captures d'écran et rendus UI inclinés de 8 à 15° avec
perspective(1200px). Jamais à plat. Toujours flottants. - Matériau verre — Les panneaux ont des bords givrés, des reflets subtils, des coins arrondis avec lueur, des bordures semi-transparentes.
- Champ de particules — Petites particules flottantes (2-4px, faible opacité, dérive lente) remplissent le vide. Crée profondeur et vie.
- Mouvement ressort — Toutes les entrées/sorties utilisent
spring()de Remotion. Jamais de transitions CSS. Jamais linéaire. Organique, confiant. - Rythme confiant — 3 à 5 secondes par scène minimum. Pas de coupes rapides. Laissez chaque plan respirer.
- Typographie minimale — Sans-serif (Inter, SF Pro, ou système), blanc sur noir, centré. Maximum 8 mots par carte titre.
Palette de Couleurs
| Jeton | Valeur | Utilisation |
|---|---|---|
void | #000000 | Arrière-plan |
panel-bg | rgba(20, 20, 25, 0.85) | Remplissage panneau verre |
panel-border | rgba(255, 255, 255, 0.08) | Bord verre |
panel-glow | rgba(59, 130, 246, 0.15) | Lueur de bord (AI Blue) |
text-primary | #FFFFFF | Texte du titre |
text-secondary | rgba(255, 255, 255, 0.6) | Sous-titre, URL |
accent | #3B82F6 | Surbrillances AI Blue |
success | #22C55E | Coches, états positifs |
particle | rgba(255, 255, 255, 0.15) | Particules d'arrière-plan |
CSS Panneau 3D (Remotion)
const panelStyle: React.CSSProperties = {
perspective: '1200px',
transform: `rotateY(-8deg) rotateX(5deg)`,
borderRadius: 16,
border: '1px solid rgba(255, 255, 255, 0.08)',
boxShadow: `
0 25px 50px rgba(0, 0, 0, 0.6),
0 0 30px rgba(59, 130, 246, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.05)
`,
background: 'rgba(20, 20, 25, 0.85)',
backdropFilter: 'blur(20px)',
overflow: 'hidden',
};
Configuration de Spring
import { spring, useCurrentFrame, useVideoConfig } from 'remotion';
// Entrée standard
const entrance = spring({
frame,
fps,
config: { damping: 15, stiffness: 80, mass: 0.8 },
});
// Dérive subtile (pour panneaux flottants)
const drift = spring({
frame: frame - delay,
fps,
config: { damping: 200, stiffness: 10, mass: 2 },
durationInFrames: 120,
});
Types de Scènes
1. Carte Titre
Durée : 3-4 secondes Contenu : Nom du produit ou slogan, centré, blanc sur noir Animation : Fondu avec léger ressort d'échelle (0.95 → 1.0) Exemple : "Réalisez vos idées avec Gemini"
2. Scène de Saisie / Invite
Durée : 4-6 secondes
Contenu : Entrée de chat ou invite de terminal, panneau 3D incliné
Animation : Le panneau surgit du bas, effet de machine à écrire pour le texte
Technique : <Img> de capture d'écran avec transformation CSS 3D, machine à écrire via découpage de chaîne basé sur les images
3. Scène à Panneaux Divisés
Durée : 4-5 secondes
Contenu : Deux panneaux UI côte à côte (ex. : invite + sortie de code)
Animation : Les panneaux surgissent des côtés opposés, particules entre eux
Technique : Deux composants <Img> avec transformations rotateY opposées
4. Scène de Démo Produit
Durée : 5-8 secondes
Contenu : UI complète du produit en tant que panneau de verre flottant
Animation : Rotation lente de dérive (oscillation subtile de rotateY), zoom cinématographique
Technique : <Img> ou <OffthreadVideo> avec scale et rotateY animés
5. Scène de Zoom Détail
Durée : 3-4 secondes
Contenu : Zoom sur un élément ou une fonctionnalité UI spécifique
Animation : Ressort d'échelle de la vue complète au détail recadré
Technique : scale + translate animés sur l'image du panneau
6. Carte CTA / Marque
Durée : 3-4 secondes Contenu : Logo + URL ou commande d'installation Animation : Fondu, maintien, fondu Technique : Texte centré, icône de marque, lueur subtile
7. Image Cinématographique IA (Imagen 4.0)
Durée : 3-5 secondes
Contenu : Rendu héroïque généré par IA ou concept art dans un GlassPanel
Animation : Entrée ressort, rotation de dérive lente, zoom subtil
Technique : Générer via Imagen 4.0, placer dans public/, utiliser <Img src={staticFile('render.png')} /> dans GlassPanel avec transformation 3D
Quand l'utiliser : Concepts abstraits, diagrammes architecturaux, visuels d'ambiance — tout ce qui bénéficie d'images générées par IA plutôt que de captures d'écran
<GlassPanel rotateY={-10} rotateX={6} delay={5}>
<Img src={staticFile('imagen-hero-render.png')} style={{ width: '100%' }} />
</GlassPanel>
8. Séquence B-Roll Vidéo IA (Veo 3.1)
Durée : 4-8 secondes
Contenu : Clip vidéo cinématographique généré par IA comme transition ou atmosphère
Animation : Joue derrière ou dans un GlassPanel, avec texte superposé optionnel
Technique : Générer via Veo 3.1, prétraiter avec ffmpeg -movflags +faststart, utiliser <OffthreadVideo> dans Remotion
// B-roll cinématographique pleine page (entre les scènes)
<OffthreadVideo
src={staticFile('veo-broll-corridor.mp4')}
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
/>
// B-roll dans un panneau de verre
<GlassPanel rotateY={-5} rotateX={3}>
<OffthreadVideo
src={staticFile('veo-product-demo.mp4')}
style={{ width: '100%', borderRadius: 12 }}
/>
</GlassPanel>
Motif de prompt Veo 3.1 pour B-roll :
[Mouvement de caméra], [Sujet/environnement], [Action/mouvement], [Éclairage + ambiance].
Arrière-plan sombre, lueur [couleur d'accent]. Cinématographique, professionnel. [Ratio d'aspect].
Quand l'utiliser : Transitions entre groupes de scènes, intros/outros atmosphériques, démos produit cinématographiques où le mouvement ajoute de la valeur par rapport à une capture d'écran statique.
Prétraitement (obligatoire pour <OffthreadVideo> + parseMedia()) :
ffmpeg -i veo-clip.mp4 -c:v libx264 -crf 18 -movflags +faststart -r 30 processed.mp4
Motif de Composition Hybride
Les vidéos les plus soignées combinent les trois types d'assets :
Carte Titre (texte)
→ Image Imagen dans GlassPanel (concept art)
→ Transition B-roll Veo (4s cinématographique)
→ Capture d'écran dans GlassPanel (démo produit)
→ Données animées Remotion (nœuds de pipeline, arborescences)
→ Outro B-roll Veo (atmosphère)
→ Carte CTA (texte)
Règle : Remotion contrôle le timing, les transitions et le texte. Les assets IA fournissent la richesse visuelle. Ne laissez jamais l'IA contrôler le rythme — c'est le travail de Remotion.
Pipeline de Production
1. STORYBOARD → Définir les scènes avec types (1-8), durées et contenu
2. ASSETS → Générer/capturer tous les assets visuels
a. Captures d'écran — UI produit via agent-browser ou capture manuelle
b. Imagen 4.0 — rendus héroïques, concept art, visuels abstraits
→ ai.models.generateImages({ model: 'imagen-4.0-fast-generate-001', prompt: '...' })
→ Sauvegarder dans le répertoire public/
c. Veo 3.1 — clips B-roll cinématographiques (4-8s chacun)
→ ai.models.generateVideos({ model: 'veo-3.1-fast-generate-preview', prompt: '...' })
→ Prétraitement : ffmpeg -i clip.mp4 -c:v libx264 -movflags +faststart -r 30 processed.mp4
→ Sauvegarder dans le répertoire public/
3. COMPOSER → Construire la composition Remotion
- <Sequence> avec premountFor pour le préchargement
- <Img> + staticFile() pour les images (jamais <img>)
- <OffthreadVideo> + staticFile() pour les clips Veo (jamais <video>)
- GlassPanel + spring() pour les transformations 3D et les entrées
- ParticleField comme couche d'arrière-plan
- Composant Subtitle pour les superpositions de texte
4. RENDU → npx remotion render src/Root.tsx CompositionId out/video.mp4
5. POST-TRAITEMENT → Ajouter l'audio si séparé
- ffmpeg -i video.mp4 -i audio.mp3 -c:v copy -c:a aac final.mp4
6. RÉVISION → /creative-review note la sortie par rapport au brief de style (cible : ≥75)
7. DISTRIBUER → Pousser vers les plateformes via le pipeline de publication /blog-post
Structure du Projet Remotion
launch-video/
├── src/
│ ├── Root.tsx # registerRoot
│ ├── Composition.tsx # Composition principale avec scènes <Sequence>
│ ├── scenes/
│ │ ├── TitleCard.tsx # Type de scène 1
│ │ ├── PromptScene.tsx # Type de scène 2
│ │ ├── SplitPanel.tsx # Type de scène 3
│ │ ├── ProductDemo.tsx # Type de scène 4
│ │ ├── DetailZoom.tsx # Type de scène 5
│ │ └── CTACard.tsx # Type de scène 6
│ ├── components/
│ │ ├── GlassPanel.tsx # Panneau en perspective 3D avec matériau verre
│ │ ├── ParticleField.tsx # Système de particules d'arrière-plan
│ │ ├── TypewriterText.tsx # Animation de machine à écrire basée sur les images
│ │ └── SpringFade.tsx # Wrapper de fondu ressort réutilisable
│ └── styles/
│ └── tokens.ts # Jetons de couleur/espacement Liquid Glass
├── public/ # Assets staticFile() (captures d'écran, rendus)
├── package.json
└── remotion.config.ts
Composant Champ de Particules (Référence)
const ParticleField: React.FC<{ count?: number }> = ({ count = 40 }) => {
const frame = useCurrentFrame();
const particles = useMemo(() =>
Array.from({ length: count }, (_, i) => ({
x: (i * 37 + 13) % 100,
y: (i * 53 + 7) % 100,
size: 2 + (i % 3),
speed: 0.1 + (i % 5) * 0.05,
opacity: 0.05 + (i % 4) * 0.04,
})), [count]);
return (
<AbsoluteFill>
{particles.map((p, i) => (
<div key={i} style={{
position: 'absolute',
left: `${p.x}%`,
top: `${(p.y + frame * p.speed) % 110}%`,
width: p.size,
height: p.size,
borderRadius: '50%',
background: `rgba(255, 255, 255, ${p.opacity})`,
}} />
))}
</AbsoluteFill>
);
};
Composant GlassPanel (Référence)
const GlassPanel: React.FC<{
children: React.ReactNode;
rotateY?: number;
rotateX?: number;
scale?: number;
}> = ({ children, rotateY = -8, rotateX = 5, scale = 1 }) => (
<div style={{
transform: `perspective(1200px) rotateY(${rotateY}deg) rotateX(${rotateX}deg) scale(${scale})`,
borderRadius: 16,
border: '1px solid rgba(255, 255, 255, 0.08)',
boxShadow: '0 25px 50px rgba(0,0,0,0.6), 0 0 30px rgba(59,130,246,0.1), inset 0 1px 0 rgba(255,255,255,0.05)',
background: 'rgba(20, 20, 25, 0.85)',
overflow: 'hidden',
transition: 'none',
}}>
{children}
</div>
);
Liste de Contrôle Qualité
- L'arrière-plan est noir pur ou presque noir (pas de dégradés)
- Tous les panneaux utilisent une transformation de perspective 3D (jamais de captures d'écran plates)
- Animations ressort sur toutes les entrées (pas de transitions CSS)
- Champ de particules présent en arrière-plan
- Chaque scène dure 3 à 5 secondes minimum (pas de coupes rapides)
- Typographie : sans-serif, blanc, centré, ≤8 mots par carte titre
- Matériau verre : lueur de bord, ombre, coins arrondis, semi-transparent
- Audio présent (ambient électronique ou narration)
- Durée totale 20-45 secondes
-
-movflags +faststartsur le rendu final