Video de Lanzamiento
Crea un video de lanzamiento premium, de alta energía de 15 a 60 segundos que detenga el desplazamiento y convierta. Construye el arco clásico: hook → tease → reveal → montaje de características → tarjeta final con CTA, cortado al ritmo de la música y exportado para cada aspecto de plataforma.
Cuándo usarlo
- Lanzamientos de productos, anuncios de características, avances, reels promocionales (15–60s).
- Videos "Sizzle" principales para una página de destino.
- Revelaciones sincronizadas al ritmo donde el momento de la marca cae en el drop.
El arco
| Beat | Trabajo | Porción típica (de 30s) |
|---|---|---|
| Hook (0–3s) | Un fotograma/movimiento impactante que detenga el scroll | 0–3s |
| Tease | Insinuar el producto; construir curiosidad, sincronizado al beat | 3–9s |
| Reveal | El producto/logo impacta en el drop musical | 9–13s |
| Montaje de características | 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 hook más largo).
Dos reglas no negociables
- El diseño de sonido guía la imagen. Primero fija la pista, marca los beats y el drop, luego corta los visuales según esas marcas. Nunca musicalices un corte terminado: la revelación cae en el drop, no cerca.
- Calidad sobre cantidad. Algunas tomas impecables superan a muchas mediocres. Elimina cualquier toma que no sea premium.
Revelación sincronizada al ritmo en el drop
Encuentra el código de tiempo exacto del drop en el audio, luego sincroniza la revelación para que la marca se muestre completa en ese fotograma, con un micro-sobreimpulso para causar impacto.
import gsap from "gsap";
const DROP = 9.0; // segundos, medidos desde la pista
const tl = gsap.timeline({ paused: true });
// el tease aumenta la tensión hasta el drop
tl.to(".tease", { opacity: 1, scale: 1.05, duration: DROP, ease: "power1.in" })
// el reveal SNAPS 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); // golpe blanco
audio.addEventListener("play", () => tl.play());
Corta en transitorios, no en una cuadrícula fija: los cortes más duros van en los golpes de bombo/caja; aumenta la velocidad (remapeo de tiempo) hacia el drop, luego corta abruptamente al final.
Montaje cinético de características
Un beneficio por toma, ~0.6–1.0s cada una, cortes duros en el beat. Cada toma = una palabra clave en negrita + un único visual 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 } }
// impulsa las tomas según las marcas de beat 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 consistente 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 + eslogan + CTA estáticos 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 beat más fuerte restante, luego un botón/URL nítido.
Exportación multi-aspecto
Compón con una zona segura central para que un master se recorte limpiamente en todos los aspectos.
| Aspecto | Uso | Resolución | Zona segura |
|---|---|---|---|
| 16:9 | YouTube, héroe de página de destino, 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 altura; evita el 12% superior / 18% inferior (UI) |
| 1:1 | Publicaciones en feed | 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 master 16:9, luego reencuadra (no solo añadas bandas negras) a 9:16 y 1:1 desde el mismo proyecto.
Lista de verificación de salida
- Pista fijada primero; la revelación cae exactamente en el drop.
- El hook se gana los primeros 3 segundos.
- Montaje: un beneficio por toma, cortes duros en los beats, lenguaje de movimiento consistente.
- La tarjeta final se sostiene ≥2s con un CTA claro.
- Exportaciones 16:9 + 9:16 + 1:1, contenido clave en la zona segura central.
- Solo tomas premium — nada mediocre sobrevive al corte.
Entregar y verificar (fotogramas renderizados → MP4)
Helper empaquetado (
scripts/): organiza 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/renderiza en Remotion, trátalo como el nivel pesado: registra un <Composition> (+ schema zod + defaultProps), impulsa cada valor con useCurrentFrame() — sin líneas de tiempo de GSAP / callbacks de eventos de audio / Date.now() / Math.random() en tiempo de renderizado (hornea los códigos de tiempo de beat y drop en los props). Entregable = el out/*.mp4 renderizado por aspecto (más el proyecto).
Bucle de verificación — renderizar fotogramas → inspeccionar → codificar. Muestrea el arco, con los props enviados (titular/eslogan/CTA reales), no solo defaultProps.
# Fotogramas exactos en hook → reveal → tarjeta final
npx remotion still Launch out/f-hook.png --frame=24 --props=props/launch.json # hook gana primeros 3s
npx remotion still Launch out/f-reveal.png --frame=270 --props=props/launch.json # logo SNAPS en el fotograma del drop
npx remotion still Launch out/f-end.png --frame=899 --props=props/launch.json # tarjeta final: logo+eslogan+CTA, limpio
# inspeccionar cada uno: fidelidad (producto/logo, eslogan, texto del 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 del 9:16, fuente faltante, fotograma de flash atascado)
Multi-aspecto — verifica el master en CADA aspecto antes de codificarlos todos. Un error de reencuadre (héroe fuera de la zona segura) se repite en cada aspecto; atrápalo una vez.
for ar in 16x9 9x16 1x1; do # revisar reveal + tarjeta final por aspecto
npx remotion still Launch "out/reveal-${ar}.png" --frame=270 \
--props=props/launch.json --props-merge="{\"aspect\":\"${ar}\"}"
done
# fotogramas limpios en todos los aspectos? → luego codificar 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 # demo para README
Antes de terminar:
npx remotion stillse renderiza limpiamente en hook / reveal / tarjeta final — sin errores, sin fuentes/activos faltantes.- Texto de logo/eslogan/CTA exacto, colores de marca correctos; revelación en el fotograma del drop; contenido clave dentro de la zona segura central, fuera del tercio inferior 9:16.
- Solo impulsado por fotogramas — sin temporización de GSAP/callback de audio,
Date.now()oMath.random()(beats/drop horneados en props). - Los props enviados se renderizan correctamente (no solo
defaultProps); la tarjeta final se sostiene ≥2s con un CTA. - Master 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 toma por toma completa con códigos de tiempo para un video de 30s (escalable a 15–60s), sincronización de revelación con el beat, recetas de tomas para montaje cinético, el flujo de trabajo donde el diseño de sonido guía la imagen y mapas detallados de áreas seguras multi-aspecto para 16:9 / 9:16 / 1:1.