Video de lanzamiento
Crea un video de lanzamiento de alta calidad y alta energía de 15–60s que detenga el desplazamiento y convierta. Construye el arco clásico: gancho → provocación → revelación → montaje de funciones → CTA en la tarjeta final — cortado al ritmo — y exporta para cada formato de plataforma.
Cuándo usarlo
- Lanzamientos de productos, anuncios de funciones, avances, videos de hype (15–60s).
- Videos "sizzle" de héroe para una página de aterrizaje.
- Revelaciones sincronizadas al ritmo donde el momento de la marca coincide con el drop.
El arco
| Beat | Trabajo | Porcentaje típico (de 30s) |
|---|---|---|
| Gancho (0–3s) | Un fotograma/movimiento impactante que detiene el desplazamiento | 0–3s |
| Provocación | Insinúa el producto; genera curiosidad, sincronizada al ritmo | 3–9s |
| Revelación | El producto/logo aparece con el drop musical | 9–13s |
| Montaje de funciones | Rápido, cinético, un beneficio por toma | 13–25s |
| Tarjeta final | Logo + eslogan + CTA, sostenido limpio | 25–30s |
Escala las mismas proporciones para 15s (más ajustado) o 60s (montaje más largo, nunca un gancho más largo).
Dos reglas no negociables
- El diseño de sonido guía la imagen. Bloquea la pista primero, marca los ritmos y el drop, luego corta los visuales a esas marcas. Nunca musicalices un corte terminado — la revelación cae en el drop, no cerca.
- Calidad sobre cantidad. Pocas tomas impecables superan a muchas mediocres. Elimina cualquier toma que no sea de primera calidad.
Revelación sincronizada al ritmo en el drop
Encuentra el timecode exacto del drop en el audio, luego temporiza la revelación para que la marca se muestre completa en ese fotograma, con un microdesbordamiento para causar impacto.
import gsap from "gsap";
const DROP = 9.0; // segundos, medidos desde la pista
const tl = gsap.timeline({ paused: true });
// la provocación genera tensión hasta el drop
tl.to(".tease", { opacity: 1, scale: 1.05, duration: DROP, ease: "power1.in" })
// la revelación aparece EXACTAMENTE en el fotograma del drop
.set(".logo", { opacity: 1 }, DROP)
.fromTo(".logo", { scale: 1.18 }, { scale: 1.0, duration: .18, ease: "power3.out" }, DROP)
.fromTo(".flash", { opacity: .9 }, { opacity: 0, duration: .25 }, DROP); // destello blanco
audio.addEventListener("play", () => tl.play());
Corta en transitorios, no en una cuadrícula fija: los cortes más difíciles van en los golpes de bombo/caja; acelera el ritmo (time-remap) hacia el drop, luego corta en seco desde ahí.
Montaje cinético de funciones
Un beneficio por toma, ~0.6–1.0s cada una, cortes duros en el ritmo. Cada toma = una palabra clave en negrita + una única imagen de apoyo.
.feature { opacity:0; }
.feature.in .kw { animation: pop .35s cubic-bezier(.22,1,.36,1) forwards; }
.feature.in .word { display:inline-block; }
@keyframes pop { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:none } }
// dirige las tomas desde las marcas de ritmo medidas desde la pista
const beats = [13.0, 13.8, 14.6, 15.4, 16.2]; // segundos
beats.forEach((t, i) => scheduleAt(t, () => showFeature(i)));
Mantén un lenguaje de movimiento coherente en todo el montaje (misma curva de entrada, misma salida) para que la velocidad se lea como confianza, no como caos.
Tarjeta final
Mantén el logo + el eslogan + el CTA quietos y limpios durante ≥2s. Sin movimiento ocupado que compita con el CTA; deja que la marca se asiente. Coloca el momento de la marca en el ritmo más fuerte que quede, luego un botón/URL nítido.
Exportación de múltiples formatos
Compón con una zona central segura para que un maestro se recorte limpiamente a todos los formatos.
| Formato | Uso | Resolución | Zona segura |
|---|---|---|---|
| 16:9 | YouTube, héroe de página de aterrizaje, X | 1920×1080 | mantén el contenido clave dentro del 90% central |
| 9:16 | Reels, TikTok, Shorts, Stories | 1080×1920 | texto dentro del 80% central de la altura; evita el 12% superior / 18% inferior (UI) |
| 1:1 | Publicaciones en feeds | 1080×1080 | cuadrado central del fotograma 16:9 |
Diseña el héroe/logo/CTA dentro del cuadrado central 1:1 para que sobreviva a cualquier recorte. Renderiza el maestro 16:9, luego reencuadra (no solo carta de ajuste) 9:16 y 1:1 desde el mismo proyecto.
Lista de verificación de salida
- Pista bloqueada primero; la revelación cae exactamente en el drop.
- El gancho se gana los primeros 3 segundos.
- Montaje: un beneficio por toma, cortes duros en los ritmos, lenguaje de movimiento coherente.
- Tarjeta final se mantiene ≥2s con un CTA claro.
- Exportaciones 16:9 + 9:16 + 1:1, contenido clave en la zona central segura.
- Solo tomas premium — nada mediocre sobrevive al corte.
Entrega y verifica (fotogramas renderizados → MP4)
Ayudante empaquetado (
scripts/): coloca tus fotogramas conscripts/contact-sheet.sh sheet.png f-hook.png f-mid.png f-end.png, luego verifica la codificación conscripts/probe-mp4.sh out.mp4 [WxH] [fps]. Consultascripts/README.md.
Si el video de lanzamiento se construye/representa en Remotion, trátalo como el nivel pesado: registra un <Composition> (+ esquema zod + defaultProps), impulsa cada valor con useCurrentFrame() — sin líneas de tiempo de GSAP / devoluciones de llamada de eventos de audio / Date.now() / Math.random() en el momento del renderizado (incorpora los timecodes de ritmo y drop en las props). Entregable = el out/*.mp4 renderizado por formato (más el proyecto).
Bucle de verificación — renderiza fotogramas → inspecciona → codifica. Muestra el arco, con las props enviadas (título real/eslogan/CTA), no solo las defaultProps.
# Fotogramas exactos a través de gancho → revelación → tarjeta final
npx remotion still Launch out/f-hook.png --frame=24 --props=props/launch.json # gancho se gana los primeros 3s
npx remotion still Launch out/f-reveal.png --frame=270 --props=props/launch.json # logo APARECE en el fotograma del drop
npx remotion still Launch out/f-end.png --frame=899 --props=props/launch.json # tarjeta final: logo+eslogan+CTA, sostenido limpio
# inspeccionar cada uno: fidelidad (producto/logo, eslogan, texto CTA exacto, colores de marca correctos, revelación en el fotograma del drop)
# Y artefactos (desbordamiento de texto, fuera del lienzo, CTA en el tercio inferior 9:16, fuente faltante, fotograma de destello atascado)
Formatos múltiples — verifica el maestro en CADA formato antes de codificarlos todos. Un error de reencuadre (héroe empujado fuera de la zona segura) se repite en cada formato; atrápalo una vez.
for ar in 16x9 9x16 1x1; do # verificar revelación + tarjeta final por formato
npx remotion still Launch "out/reveal-${ar}.png" --frame=270 \
--props=props/launch.json --props-merge="{\"aspect\":\"${ar}\"}"
done
# ¿fotogramas limpios en todos los formatos? → luego codifica cada uno:
for ar in 16x9 9x16 1x1; do
npx remotion render Launch "out/launch-${ar}.mp4" --props=props/launch.json --props-merge="{\"aspect\":\"${ar}\"}"
done
npx remotion render Launch out/demo.gif --codec=gif --props=props/launch.json # demostración README
Antes de terminar:
npx remotion stillse renderiza limpiamente en gancho / revelación / tarjeta final — sin errores, sin fuentes/activos faltantes.- Texto del logo/eslogan/CTA exacto, colores de marca correctos; la revelación cae en el fotograma del drop; contenido clave dentro de la zona central segura, libre del tercio inferior 9:16.
- Solo impulsado por fotogramas — sin temporización de GSAP/devolución de llamada de audio,
Date.now()oMath.random()(ritmos/drop incorporados en las props). - Las props enviadas se renderizan correctamente (no solo las
defaultProps); la tarjeta final se mantiene ≥2s con un CTA. - Maestro verificado en 16:9 + 9:16 + 1:1 antes de codificar; los MP4 se reproducen; (opcional) GIF para el README.
Archivos de referencia
references/launch-structure.md— una plantilla completa toma por toma con timecodes para un video de 30s (escalable a 15–60s), temporización de revelación sincronizada al ritmo, recetas de tomas de montaje cinético, el flujo de trabajo de diseño de sonido que guía la imagen y mapas detallados de zonas seguras de múltiples formatos para 16:9 / 9:16 / 1:1.