Vídeo de Lanzamiento — Presentación de Producto Liquid Glass
Produce vídeos cinematográficos de lanzamiento de producto usando la estética Liquid Glass: vacío oscuro, paneles flotantes 3D, efectos de partículas, animaciones con muelle y un ritmo seguro.
Habilidades Compuestas
| Habilidad | Rol |
|---|---|
/remotion-best-practices | Estructura de composición, spring(), <Sequence>, pipeline de renderizado |
/content-creation | Generación de activos con IA (Imagen 4.0, Veo 3.1) |
/arcan-glass | Tokens de marca BroomVA (AI Blue, paleta oscura) |
/google-veo | Prompts para generación de B-roll cinematográfico |
/blog-post | Pipeline de distribución (publicar en X, LinkedIn, Instagram) |
La Estética Liquid Glass
Principios Visuales Clave
- Fondo oscuro vacío — Negro puro (#000000) o casi negro (#0A0A0A). Sin degradados en la base. El contenido flota en la oscuridad.
- Paneles en perspectiva 3D — Capturas de pantalla y renders de interfaz inclinados a 8-15° con
perspective(1200px). Nunca planos. Siempre flotando. - Material de vidrio — Los paneles tienen bordes esmerilados, reflejo sutil, esquinas redondeadas con resplandor y bordes semitransparentes.
- Campo de partículas — Pequeñas partículas flotantes (2-4px, baja opacidad, deriva lenta) llenan el vacío. Crea profundidad y vida.
- Movimiento con muelle — Todas las entradas/salidas usan
spring()de Remotion. Nunca transiciones CSS. Nunca lineales. Orgánico, seguro. - Ritmo seguro — Mínimo 3-5 segundos por escena. Sin cortes rápidos. Deja que cada visual respire.
- Tipografía mínima — Sans-serif (Inter, SF Pro o del sistema), blanco sobre negro, centrado. Máximo 8 palabras por tarjeta de título.
Paleta de Colores
| Token | Valor | Uso |
|---|---|---|
void | #000000 | Fondo |
panel-bg | rgba(20, 20, 25, 0.85) | Relleno del panel de vidrio |
panel-border | rgba(255, 255, 255, 0.08) | Borde del vidrio |
panel-glow | rgba(59, 130, 246, 0.15) | Resplandor del borde (AI Blue) |
text-primary | #FFFFFF | Texto del título |
text-secondary | rgba(255, 255, 255, 0.6) | Subtítulo, URL |
accent | #3B82F6 | Resaltados AI Blue |
success | #22C55E | Marcas de verificación, estados positivos |
particle | rgba(255, 255, 255, 0.15) | Partículas de fondo |
CSS del Panel 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',
};
Configuración del Muelle
import { spring, useCurrentFrame, useVideoConfig } from 'remotion';
// Entrada estándar
const entrance = spring({
frame,
fps,
config: { damping: 15, stiffness: 80, mass: 0.8 },
});
// Deriva sutil (para paneles flotantes)
const drift = spring({
frame: frame - delay,
fps,
config: { damping: 200, stiffness: 10, mass: 2 },
durationInFrames: 120,
});
Tipos de Escena
1. Tarjeta de Título
Duración: 3-4 segundos Contenido: Nombre del producto o eslogan, centrado, blanco sobre negro Animación: Fundido de entrada con escala de muelle sutil (0.95 → 1.0) Ejemplo: "Construye tus ideas con Gemini"
2. Escena de Prompt / Entrada
Duración: 4-6 segundos
Contenido: Entrada de chat o prompt de terminal, panel 3D inclinado
Animación: El panel entra desde abajo con muelle, efecto de máquina de escribir en el texto
Técnica: <Img> de captura de pantalla con transformación CSS 3D, máquina de escribir mediante división de cadena basada en fotogramas
3. Escena de Panel Dividido
Duración: 4-5 segundos
Contenido: Dos paneles de interfaz lado a lado (ej., prompt + salida de código)
Animación: Los paneles entran con muelle desde lados opuestos, partículas entre ellos
Técnica: Dos componentes <Img> con transformaciones rotateY opuestas
4. Escena de Demostración de Producto
Duración: 5-8 segundos
Contenido: Interfaz completa del producto como panel de vidrio flotante
Animación: Rotación de deriva lenta (oscilación sutil de rotateY), zoom cinematográfico
**Técnica: oconscaleyrotateY` animados
5. Escena de Zoom al Detalle
Duración: 3-4 segundos
Contenido: Zoom a un elemento o característica específica de la interfaz
Animación: Escala con muelle desde la vista completa al detalle recortado
Técnica: scale + translate animados en la imagen del panel
6. Tarjeta de CTA / Marca
Duración: 3-4 segundos Contenido: Logotipo + URL o comando de instalación Animación: Fundido de entrada, pausa, fundido de salida Técnica: Texto centrado, icono de marca, resplandor sutil
7. Fotograma Cinematográfico con IA (Imagen 4.0)
Duración: 3-5 segundos
Contenido: Render principal o arte conceptual generado por IA dentro de un GlassPanel
Animación: Entrada con muelle, rotación de deriva lenta, zoom sutil
Técnica: Generar con Imagen 4.0, colocar en public/, usar <Img src={staticFile('render.png')} /> dentro de GlassPanel con transformación 3D
Cuándo usarlo: Conceptos abstractos, diagramas arquitectónicos, visuales de ambiente — cualquier cosa que se beneficie de imágenes generadas por IA en lugar de capturas de pantalla
<GlassPanel rotateY={-10} rotateX={6} delay={5}>
<Img src={staticFile('imagen-hero-render.png')} style={{ width: '100%' }} />
</GlassPanel>
8. B-Roll de Vídeo con IA (Veo 3.1)
Duración: 4-8 segundos
Contenido: Clip de vídeo cinematográfico generado por IA como transición o atmósfera
Animación: Se reproduce detrás o dentro de un GlassPanel, con posible texto superpuesto
Técnica: Generar con Veo 3.1, preprocesar con ffmpeg -movflags +faststart, usar <OffthreadVideo> en Remotion
// B-roll cinematográfico a sangre (entre escenas)
<OffthreadVideo
src={staticFile('veo-broll-corridor.mp4')}
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
/>
// B-roll dentro de un panel de vidrio
<GlassPanel rotateY={-5} rotateX={3}>
<OffthreadVideo
src={staticFile('veo-product-demo.mp4')}
style={{ width: '100%', borderRadius: 12 }}
/>
</GlassPanel>
Patrón de prompt para B-roll con Veo 3.1:
[Movimiento de cámara], [Sujeto/entorno], [Acción/movimiento], [Iluminación + ambiente].
Fondo oscuro, resplandor [color de acento]. Cinematográfico, profesional. [Relación de aspecto].
Cuándo usarlo: Transiciones entre grupos de escenas, introducciones/cierres atmosféricos, demostraciones de producto cinematográficas donde el movimiento añade valor sobre una captura de pantalla estática.
Preprocesamiento (requerido para <OffthreadVideo> + parseMedia()):
ffmpeg -i veo-clip.mp4 -c:v libx264 -crf 18 -movflags +faststart -r 30 processed.mp4
Patrón de Composición Híbrida
Los vídeos más pulidos combinan los tres tipos de activos:
Tarjeta de Título (texto)
→ Fotograma Imagen en GlassPanel (arte conceptual)
→ Transición B-roll Veo (cinematográfica 4s)
→ Captura de pantalla en GlassPanel (demo de producto)
→ Datos animados con Remotion (nodos de pipeline, árboles de archivos)
→ B-roll Veo de cierre (atmósfera)
→ Tarjeta CTA (texto)
Regla: Remotion controla el tiempo, las transiciones y el texto. Los activos de IA proporcionan riqueza visual. Nunca dejes que la IA controle el ritmo — ese es el trabajo de Remotion.
Pipeline de Producción
1. STORYBOARD → Definir escenas con tipos (1-8), duraciones y contenido
2. ACTIVOS → Generar/capturar todos los activos visuales
a. Capturas de pantalla — interfaz de producto mediante agent-browser o captura manual
b. Imagen 4.0 — renders principales, arte conceptual, visuales abstractos
→ ai.models.generateImages({ model: 'imagen-4.0-fast-generate-001', prompt: '...' })
→ Guardar en el directorio public/
c. Veo 3.1 — clips de B-roll cinematográfico (4-8s cada uno)
→ ai.models.generateVideos({ model: 'veo-3.1-fast-generate-preview', prompt: '...' })
→ Preprocesar: ffmpeg -i clip.mp4 -c:v libx264 -movflags +faststart -r 30 processed.mp4
→ Guardar en el directorio public/
3. COMPONER → Construir composición de Remotion
- <Sequence> con premountFor para precarga
- <Img> + staticFile() para imágenes (nunca <img>)
- <OffthreadVideo> + staticFile() para clips Veo (nunca <video>)
- GlassPanel + spring() para transformaciones 3D y entradas
- ParticleField como capa de fondo
- Componente Subtitle para superposiciones de texto
4. RENDERIZAR → npx remotion render src/Root.tsx CompositionId out/video.mp4
5. POST-PROCESAR → Añadir audio si es independiente
- ffmpeg -i video.mp4 -i audio.mp3 -c:v copy -c:a aac final.mp4
6. REVISAR → /creative-review puntúa la salida contra el brief de estilo (objetivo: ≥75)
7. DISTRIBUIR → Publicar en plataformas mediante el pipeline de publicación /blog-post
Estructura del Proyecto Remotion
launch-video/
├── src/
│ ├── Root.tsx # registerRoot
│ ├── Composition.tsx # Composición principal con escenas <Sequence>
│ ├── scenes/
│ │ ├── TitleCard.tsx # Escena tipo 1
│ │ ├── PromptScene.tsx # Escena tipo 2
│ │ ├── SplitPanel.tsx # Escena tipo 3
│ │ ├── ProductDemo.tsx # Escena tipo 4
│ │ ├── DetailZoom.tsx # Escena tipo 5
│ │ └── CTACard.tsx # Escena tipo 6
│ ├── components/
│ │ ├── GlassPanel.tsx # Panel de perspectiva 3D con material de vidrio
│ │ ├── ParticleField.tsx # Sistema de partículas de fondo
│ │ ├── TypewriterText.tsx # Animación de máquina de escribir basada en fotogramas
│ │ └── SpringFade.tsx # Envoltorio reutilizable de fundido con muelle
│ └── styles/
│ └── tokens.ts # Tokens de color/espaciado Liquid Glass
├── public/ # Activos staticFile() (capturas de pantalla, renders)
├── package.json
└── remotion.config.ts
Componente de Campo de Partículas (Referencia)
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>
);
};
Componente GlassPanel (Referencia)
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>
);
Lista de Verificación de Calidad
- El fondo es negro puro o casi negro (sin degradados)
- Todos los paneles usan transformación de perspectiva 3D (nunca capturas de pantalla planas)
- Animaciones con muelle en todas las entradas (sin transiciones CSS)
- Campo de partículas presente en el fondo
- Cada escena mantiene un mínimo de 3-5 segundos (sin cortes rápidos)
- Tipografía: sans-serif, blanco, centrado, ≤8 palabras por tarjeta de título
- Material de vidrio: resplandor del borde, sombra, esquinas redondeadas, semitransparente
- Audio presente (electrónica ambiental o narración)
- Duración total 20-45 segundos
-
-movflags +faststarten el render final