triptu/flowbar

Video de Lanzamiento de Flowbar

Proyecto Remotion en flowbar-launch-video/ que produce un video de lanzamiento de producto de ~28s para redes sociales y embebido en el sitio web.

Comandos Rápidos

cd flowbar-launch-video

# Vista previa en el navegador
npm run studio            # abre http://localhost:3000

# Renderizar en alta calidad (social)
npx remotion render FlowbarLaunchVideo out/flowbar-launch-hq.mp4 --codec h264 --crf 18

# Comprimir para web (faststart para 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

Arquitectura

flowbar-launch-video/
├── public/                     # Recursos estáticos (videos, audio)
│   ├── nature-loop.mp4         # Fondo ambiental (se repite globalmente)
│   ├── the-reveal.mp4          # Toma principal: escritorio → Fn → aparece Flowbar (5.9s)
│   ├── product-tour.mp4        # Grabación de pantalla continua única (15.6s)
│   └── audio.mp3               # Música de fondo
├── src/
│   ├── Root.tsx                # Definición de composición (fps, duración, dimensiones)
│   ├── FlowbarLaunchVideo.tsx  # Composición principal — capas de fondo, audio, escenas, granulado
│   ├── theme.ts                # Colores (coincide con el sitio web), presets de resortes
│   ├── fonts.ts                # Instrument Serif + DM Sans (Google Fonts)
│   ├── scenes/
│   │   ├── ProblemScene.tsx    # ACTO 1: Dos tarjetas de texto de dolor
│   │   ├── RevealScene.tsx     # ACTO 2: Toma principal con superposición "Conoce Flowbar"
│   │   ├── FeatureTourScene.tsx# ACTO 3: Demo de producto continua + etiquetas intercambiables
│   │   └── ClosingScene.tsx    # ACTO 4: Logo, eslogan, URL
│   ├── components/
│   │   ├── AmbientBackground.tsx  # Bucle natural + superposición degradada + FilmGrain
│   │   └── AnimatedText.tsx       # WordReveal, MaskReveal, ScaleReveal
│   └── transitions/
│       └── scaleBlur.tsx       # Transición personalizada: escala+desenfoque (¡no fundido!)
└── out/                        # Salidas renderizadas

Estructura y Temporización del Video

La duración se calcula en Root.tsx: (5 + 6 + 16 + 5) * 30fps - 45 (transiciones) - 60 (recorte) = 855 fotogramas ≈ 28.5s

Acto	Escena	Duración	Contenido
1	ProblemScene	5s	Dos tarjetas de texto sobre fondo natural. Revelaciones palabra por palabra.
2	RevealScene	6s	the-reveal.mp4 + "Conoce Flowbar." abajo + eslogan
3	FeatureTourScene	16s	product-tour.mp4 continuo + 5 etiquetas arriba
4	ClosingScene	5s	Logo + marca + descripción + URL

Transiciones entre actos usan scaleBlur() con springTiming({ damping: 18, stiffness: 120 }).

Sistema de Diseño

Colores (de theme.ts, coincide con flowbar.tushar.ai)

• Fondo: #0c0f0d
• Texto: #ede9df
• Apagado: #9a9488
• Acento: #c99b6d / #ddb88a

Presets de Resortes (de theme.ts)

• SPRINGS.smooth — { damping: 200 } — revelaciones de texto, entradas sutiles
• SPRINGS.snappy — { damping: 20, stiffness: 200 } — elementos de UI
• SPRINGS.heavy — { damping: 15, stiffness: 80, mass: 2 } — momentos heroicos, logo
• SPRINGS.bouncy — { damping: 12 } — acentos juguetones

Componentes de Texto (de AnimatedText.tsx)

• WordReveal — escalonamiento palabra por palabra con máscara clip-path. Úsalo para líneas impactantes.
• MaskReveal — revelación de una sola línea con clip-path. Úsalo para etiquetas, descripciones.
• ScaleReveal — escala + desenfoque a nitidez. Úsalo para texto heroico ("Conoce Flowbar.").

Capas (de abajo arriba)

1. Color sólido THEME.bg
2. AmbientBackground — nature-loop.mp4 + superposición degradada (propiedad darken: 0-1)
3. Contenido de la escena (TransitionSeries)
4. FilmGrain — opacidad 0.035, se desplaza por fotograma

Lecciones Clave y Detalles Técnicos

Diseño de Movimiento

• Sin fundidos. Usa la transición scaleBlur o entradas basadas en resortes. Los fundidos parecen PowerPoint.
• Los resortes necesitan física real. { damping: 200 } está críticamente sobreamortiguado (sin resorte visible). Usa los presets.
• Texto: revelaciones con máscara > fundido+deslizamiento. clipPath: inset() con translateY se ve 10 veces mejor que opacidad+translate.
• Las salidas deben ser rápidas. Entra con física de resorte (12-18 fotogramas), sal con lineal rápido (5-8 fotogramas).
• Última etiqueta en una serie: omite el fundido de salida. Pasa el flag isLast para mantener la etiqueta final hasta el final de la escena.

Manejo de Video

• Usa objectFit: "contain" (no "cover") para mostrar la grabación completa incluida la barra de menú. Rellena el fondo con THEME.bg.
• pauseWhenBuffering no está disponible en esta versión de Remotion — no lo uses.
• La duración de la escena debe ser >= duración del video, de lo contrario el video se corta. Verifica con ffprobe -v error -show_entries format=duration -of csv=p=0 file.mp4.
• Cuando el video es más corto que la escena, el último fotograma se congela — este comportamiento es deseado.

Fondo

• El bucle natural se ejecuta GLOBALMENTE detrás de todas las escenas (en FlowbarLaunchVideo.tsx, no por escena).
• Las escenas son transparentes — se superponen encima.
• La escena de cierre agrega su propia capa de oscurecimiento rgba(12,15,13,0.7) para empujar el fondo hacia atrás y mejorar la legibilidad del texto.
• La escena de problema agrega rgba(12,15,13,0.35) de oscurecimiento.

Audio

• Archivo: public/audio.mp3. Referenciado mediante staticFile("audio.mp3").
• Volumen: fundido de entrada en 1s (0→0.5), fundido de salida en los últimos 2s (0.5→0).
• Genera con Gemini o Suno. Prompt: minimalista electrónico cálido, pads analógicos suaves, 88bpm, ~35-40s, sin voces.

Renderizado

• Alta calidad: --crf 18 → ~14MB (redes sociales)
• Web: recodificar con ffmpeg -crf 28 -preset slow -movflags +faststart → ~3MB (embed en sitio web, streaming instantáneo)
• Siempre renderiza en alta calidad primero, luego comprime — no renderices dos veces.

Cómo Agregar una Nueva Escena

1. Crea src/scenes/NewScene.tsx — exporta un componente React usando AbsoluteFill
2. Mantén el fondo transparente (el fondo natural global se muestra a través)
3. Agrega superposición de oscurecimiento si el texto necesita legibilidad: <AbsoluteFill style={{ backgroundColor: "rgba(12,15,13,0.X)" }} />
4. Usa WordReveal/MaskReveal/ScaleReveal para el texto, SPRINGS.* para animaciones
5. Agrega a FlowbarLaunchVideo.tsx como un TransitionSeries.Sequence con la transición scaleBlur()
6. Actualiza el cálculo de duración tanto en FlowbarLaunchVideo.tsx como en Root.tsx

Cómo Regrabar un Clip

1. Usa Screen Studio con: relleno mínimo, auto-zoom 120%, cursor suave, modo oscuro, 1920x1080 30fps
2. Graba solo la ventana de Flowbar (no el fondo del escritorio — tenemos el bucle natural)
3. Exporta como MP4 de alta calidad, colócalo en public/
4. Verifica la duración: ffprobe -v error -show_entries format=duration -of csv=p=0 public/clip.mp4
5. Actualiza el durationInFrames de la escena correspondiente para que coincida (redondea al segundo más cercano × fps)
6. Actualiza el cálculo de duración en Root.tsx

Cómo Cambiar las Etiquetas del Tour de Funcionalidades

Edita el array LABELS en FeatureTourScene.tsx:

const LABELS = [
  { text: "Escribe en markdown. Tus archivos siguen siendo tuyos.", startSec: 0 },
  { text: "Tareas de cada nota. Un solo lugar para marcarlas.", startSec: 3.5 },
  // ...
];

startSec es relativo al inicio de la escena del tour de funcionalidades (no al video completo). Sincronízalos con lo que sucede en product-tour.mp4.