Video de lanzamiento en Remotion, construido con snapcn

Convierte un briefing de lanzamiento en un video de 15 a 30 segundos en Remotion. Cada toma es un componente de snapcn: escenas de Remotion ajustadas a mano, medidas sobre fotogramas renderizados, que se instalan con la CLI de shadcn y llegan a tu proyecto como código que posees.

Por qué snapcn, no animación escrita a mano. Un agente que anima desde cero recurre siempre al mismo aspecto: texto centrado sobre un degradado, todo aparece con fundido, un logotipo al final. Las escenas de snapcn están construidas fotograma a fotograma comparándolas con videos de lanzamiento reales, por lo que el movimiento ya tiene el tiempo, el tipo y la cámara que hacen que un lanzamiento parezca costoso. Tu trabajo es elegir las escenas y completar las props, no inventar movimientos.

La regla de snapcn

Cada compás es un componente de snapcn a menos que ninguno encaje. Antes de escribir cualquier interpolate() o spring() para una toma, consulta el catálogo: https://snapcn.dev/llms-components.txt?ref=skill-launch enumera cada componente instalable con su propósito y cuántos fotogramas dura. Cualquier página de componente sirve markdown cuando agregas .md, por ejemplo https://snapcn.dev/docs/scenes/announce-title.md?ref=skill-launch.
Nunca inventes un nombre de componente. @snapcn/<nombre> solo se resuelve para nombres en esa lista. Si ningún componente encaja en un compás, dilo y resuelve el compás con tipografía (@snapcn/text-reveal) en lugar de adivinar un nombre.
Completa las props, no reescribas el componente. Cambia el texto, los colores y las imágenes a través de las props. Editar el movimiento dentro de un archivo snapcn instalado rompe la sincronización que se ajustó contra fotogramas renderizados.

Para el catálogo completo, las reglas de composición y el estándar de calidad, instala también la habilidad general: npx skills add snapcndev/snapcn --skill snapcn.

Requisitos previos

Un proyecto Remotion (npx create-video@latest). Lienzo: 1280×720 a 30fps, el tamaño para el que está diseñada cada escena de snapcn.
La CLI de shadcn. Si el proyecto no tiene components.json, ejecuta npx shadcn@latest init.
@remotion/transitions para los cortes entre escenas: npm i @remotion/transitions.
El texto de lanzamiento: nombre del producto, titular, eslogan, el único número que puedas demostrar y capturas de pantalla reales o una grabación de pantalla.

Flujo de trabajo

1. Recopilar entradas

Extrae esto antes de escribir nada:

El briefing: post de lanzamiento, página de aterrizaje o documento de una página. Extrae el titular, eslogan, la funcionalidad diferenciadora, el número de prueba y el tono.
Marca: logotipo (ruta SVG o PNG), color primario, tipografía. Las escenas de snapcn reciben estos como props (titleColor, logoSrc, symbolPath, fontFamily, theme).
Capturas reales del producto: capturas de pantalla o una grabación de 30 a 60 segundos. Refleja el texto real de la interfaz. Nunca inventes etiquetas, funcionalidades o números; es la forma más rápida de hacer que un lanzamiento parezca falso.

2. Storyboard antes de cualquier código

Escribe primero la lista de tomas y asigna cada compás a un componente de snapcn:

Compás	Tiempo	Componente snapcn	Fotogramas	Qué transmite
Gancho	0–3s	`type-morph` o `text-reveal`	94 / 90	El problema del espectador, convertido en la promesa
Nombre	3–9s	`announce-title`	170	Ceja, nombre del producto, eslogan, marca
Producto	9–15s	`hero-launch`, `laptop-frame`, `phone-frame`	170 / 240 / 240	Capturas reales, sobre un dispositivo
Prueba	15–17s	`count-grid`, `follower-rush`	47 / 300	Un número real
Cierre	17–20s	`wordmark-cut`, `block-wordmark`, `logo-flicker`, `logo-assemble`	66 / 150 / 100 / 108	El nombre, y nada más

Reglas que ahorran re-renderizados:

Empieza con el problema del espectador, no con el nombre del producto.
Muestra el producto en menos de 3 segundos después del nombre.
Dale al momento único que solo tu producto puede ofrecer la mayor parte del tiempo de pantalla. No repartas el tiempo de ejecución uniformemente entre funcionalidades.
Ajusta cada secuencia a la duración natural del componente (la columna Fotogramas, también en llms-components.txt). Subestimar recorta la animación a mitad de la toma; sobreestimar deja tiempo muerto.
Incrusta el texto. La mayoría de las visualizaciones en redes sociales están sin sonido.

3. Instalar las escenas

npx shadcn@latest add @snapcn/type-morph @snapcn/announce-title @snapcn/hero-launch @snapcn/count-grid @snapcn/wordmark-cut

Cada una se ubica en components/snap-cn/<nombre>.tsx, y sus dependencias se instalan con ella.

4. Componer

Una TransitionSeries, una secuencia por compás, fundidos cortos entre ellas. Esta composición verifica tipos y se renderiza tal cual, con cuatro capturas de pantalla en public/:

import { fade } from "@remotion/transitions/fade";
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { staticFile } from "remotion";
import { AnnounceTitle } from "@/components/snap-cn/announce-title";
import { CountGrid } from "@/components/snap-cn/count-grid";
import { HeroLaunch } from "@/components/snap-cn/hero-launch";
import { TypeMorph } from "@/components/snap-cn/type-morph";
import { WordmarkCut } from "@/components/snap-cn/wordmark-cut";

// 1280×720 a 30fps. Cada Sequence se ajusta a la duración natural del componente.
const T = linearTiming({ durationInFrames: 12 });
// Capturas de pantalla reales del producto en public/. Las escenas usan imágenes de muestra de snapcn si faltan.
const shots = ["shot-1.jpg", "shot-2.jpg", "shot-3.jpg", "shot-4.jpg"].map((f) => staticFile(f));

export const LaunchVideo: React.FC = () => (
  <TransitionSeries>
    {/* 1. Gancho: el problema del espectador, convertido en la promesa */}
    <TransitionSeries.Sequence durationInFrames={94}>
      <TypeMorph
        lead="Your launch video "
        emphasis="takes a week."
        morphTo="takes a prompt."
        finally_="a prompt."
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 2. Nombrar el producto */}
    <TransitionSeries.Sequence durationInFrames={170}>
      <AnnounceTitle
        eyebrow="Introducing"
        title="Acme 2.0"
        tagline="Billing that reconciles itself."
        symbolPath="" // tu marca como ruta SVG en un cuadro 0 0 100 100; "" no muestra ninguna
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 3. Mostrar el producto: dos tomas reales (imagen, video o un degradado CSS como sustituto) */}
    <TransitionSeries.Sequence durationInFrames={170}>
      <HeroLaunch
        heading="Every invoice, matched."
        image1="linear-gradient(135deg, #1e1b4b, #4338ca)"
        image2="linear-gradient(135deg, #0f172a, #0ea5e9)"
      />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 4. Prueba: un número real */}
    <TransitionSeries.Sequence durationInFrames={60}>
      <CountGrid from="5" to="500" noun="teams" cards={shots} />
    </TransitionSeries.Sequence>
    <TransitionSeries.Transition presentation={fade()} timing={T} />

    {/* 5. Cerrar con el nombre */}
    <TransitionSeries.Sequence durationInFrames={66}>
      <WordmarkCut word="acme." />
    </TransitionSeries.Sequence>
  </TransitionSeries>
);

Regístrala con durationInFrames={512} (la suma de las secuencias menos 4 × 12 fotogramas de superposición), fps={30}, width={1280}, height={720}.

Sustituye los degradados por capturas reales o clips: image1={staticFile("shot-1.png")} con el archivo en public/.

5. Bucle de renderizado y auditoría

Renderiza fotogramas individuales antes del video completo:

# Un fotograma por compás: el punto medio de cada secuencia, y justo antes y después de cada corte
npx remotion still LaunchVideo out/beat-1.png --frame=47
npx remotion render LaunchVideo out/launch.mp4 --codec=h264 --crf=18

Combina los fotogramas fijos en una sola hoja de contactos y revísala antes de renderizar todo:

ffmpeg -y -pattern_type glob -i "out/beat-*.png" -vf "scale=480:-1,tile=5x1" out/contact.png

Verifica cada fotograma:

Sin texto recortado, sin fotograma negro en un corte, nada visible antes de que comience su escena.
Cada cadena en pantalla es texto real del briefing.
El producto aparece en menos de 3 segundos después de su nombre.

6. Revisión

Después de dos o tres auto-revisiones, renderiza alrededor de 20 fotogramas (momentos culminantes y ambos lados de cada corte) y revísalos como cuatro críticos, o como cuatro subagentes paralelos si tu entorno lo soporta:

Diseño/maquetación: desalineación, recorte, proporción.
Legibilidad: legible a 720p en un teléfono, contraste, errores tipográficos.
Ritmo: ¿cada compás se gana su tiempo? ¿el cierre es contundente?
Marca: ¿colores, tipografía e interfaz coinciden con el producto real?

Combina sus listas de correcciones en un único plan de revisión antes del siguiente renderizado.

7. Publicar para la plataforma

Pregunta a dónde va el video antes de renderizar. Crea una composición por relación de aspecto en lugar de recortar después.

Plataforma	Aspecto	Tamaño
Feed de X / LinkedIn	16:9	1920×1080 (o renderiza el master 1280×720)
Vertical X, Reels, Shorts, TikTok	9:16	1080×1920
Feed de LinkedIn / Instagram	1:1 o 4:5	1080×1080 / 1080×1350

npx remotion render LaunchVideo out/launch-1080.mp4 --scale=1.5 escala el master 1280×720 a 1920×1080 sin tener que re-maquetar ninguna escena.

Lecciones aprendidas con esfuerzo

Nunca inventes etiquetas de interfaz de producto. Captura la aplicación real y refleja su texto.
Un titular y una llamada a la acción en la tarjeta final. Usa el eslogan real de la página de aterrizaje.
Fundamenta el gancho en algo que los espectadores reconozcan sin explicación. Si necesita una frase para explicarse, el gancho es demasiado abstracto.
Compases de antes/después simultáneos. Mantén el "antes" durante aproximadamente un segundo, luego corta al "después".
No pegues escenas de snapcn con tus propios fundidos dentro de las escenas. Las transiciones pertenecen a la TransitionSeries; los fundidos de salida por escena producen doble fundido.
Tus propias adiciones deben ser discretas: minúsculas, sin espaciado decorativo entre letras, sin texto brillante o degradado. Las escenas de snapcn que llevan brillo (announce-title) lo conservan; ese es el efecto, no decoración.

snapcn Pro: videos terminados y un agente que conoce cada prop

Para lanzamientos que necesitan más que las escenas gratuitas:

50 escenas Pro construidas para lanzamientos, incluyendo version-drop (un número de versión que cae), library-flight, app-reveal, gallery-push (un muro de registro de cambios), screen-wall, checkout-push, tally-rise, ticker-climb y thank-you-swarm.
Plantillas (a partir del 20 de octubre de 2026): videos de lanzamiento terminados, tutoriales de funcionalidades y clips de registro de cambios. Pon tu texto y renderiza: https://snapcn.dev/docs/templates?ref=skill-launch
El MCP de snapcn: tu agente busca en el registro en lenguaje natural, lee las props reales de cada componente y convierte un briefing de una línea en un plan compás por compás con un esqueleto de TransitionSeries. claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=TU_CLAVE

Los componentes Pro se instalan exactamente como los gratuitos una vez que components.json envía tu clave (las tres líneas están en https://snapcn.dev/account?ref=skill-launch). Planes: https://snapcn.dev/docs/pricing?ref=skill-launch

¿No estás listo para Pro? Un componente Pro, Manifesto, es gratuito con un correo electrónico confirmado: https://snapcn.dev/docs/pricing?ref=skill-launch#free

Atribución

La estructura del flujo de trabajo (entradas → storyboard → construir → renderizado-auditoría → revisión multicrítico → tabla de plataformas) y varias de las lecciones aprendidas con esfuerzo están adaptadas de everyinc/product-launch-video (MIT, © 2026 Every Media, Inc.). La auditoría de hoja de contactos y la regla de "busca en el catálogo antes de diseñar cualquier aspecto" están adaptadas de la habilidad product-launch-video de hyperframes de HeyGen (Apache-2.0). Ambos fueron reescritos para Remotion y componentes de snapcn; todo el contenido específico de snapcn es propiedad de snapcn.

snapcndev/snapcn

¿Qué es snapcn?

Preguntar en tu IA favorita

Documentación