Video explicativo en Remotion, construido con snapcn

Un video explicativo narrado en Remotion: la locución marca el ritmo, los subtítulos se incrustan, y cada latido en pantalla es una escena de snapcn. Las escenas de snapcn se instalan con la CLI de shadcn y quedan en tu proyecto como código que posees.

Por qué snapcn, no diapositivas escritas a mano. Un video narrado hecho desde cero termina siendo puntos clave que aparecen sobre un degradado. snapcn le da a cada latido un contenido real: afirmaciones que cortan fuerte, un estado que cambia, un número que escala, un producto en un dispositivo.

La regla de snapcn

Cada latido es un componente snapcn a menos que ninguno encaje. Catálogo con duraciones: https://snapcn.dev/llms-components.txt?ref=skill-explainer; cualquier página como markdown, p.ej. https://snapcn.dev/docs/captions/word-captions.md?ref=skill-explainer.
Nunca inventes un nombre de componente. Solo nombres de esa lista se instalan.
Configura cada prop de texto. Las escenas vienen con texto de muestra que permanece en tu video si no lo cambias.

Para el catálogo completo, instala también la habilidad general: npx skills add snapcndev/snapcn --skill snapcn.

Flujo de trabajo

1. Guión primero

Escribe la locución antes de cualquier código, una oración por latido. 150 palabras son aproximadamente un minuto.

Latido	Lo que dice	Escena snapcn	Fotogramas
Gancho	El problema, en palabras del espectador	`punch-lines`, `type-morph`	144 / 94
Cómo funciona	2–3 pasos o estados	`status-cycle`, `word-flip`, `card-rail`	198 / 180 / 108
Muéstralo	El producto haciendo lo suyo	`laptop-frame`, `phone-frame`, `screen-recording`	240 / 240 / 139
Prueba	Un número real	`count-grid`	47
Cierre	El nombre	`wordmark-cut`, `block-wordmark`	66 / 150

2. Locución y tiempos de palabras

Graba o genera la locución. Ponla en public/voiceover.mp3.
Obtén tiempos a nivel de palabra como { text, startMs, endMs }[], el formato de @remotion/captions, desde Whisper (@remotion/install-whisper-cpp) o tu proveedor de TTS.
La locución establece la duración. Estira la secuencia de cada latido para que coincida con su oración, nunca más corto que la duración natural de la escena (la columna de Fotogramas).

3. Subtítulos

word-captions: subtítulos incrustados que pasan página por la transcripción; pasa captions. Estilos mediante preset; usa aspect="9:16" para vertical.
karaoke-captions: una línea que se llena palabra por palabra, para una cita enfatizada.
Los subtítulos se sitúan encima de cada escena; son transparentes sobre la escena detrás.

4. Construcción

npx shadcn@latest add @snapcn/punch-lines @snapcn/status-cycle @snapcn/count-grid @snapcn/wordmark-cut @snapcn/word-captions

Un video explicativo de ~15s: problema → cómo funciona → prueba → nombre, narrado, con subtítulos. Tipifica y se renderiza tal como está escrito con public/voiceover.mp3 y cuatro capturas de pantalla presentes:

import { AbsoluteFill, Audio, Series, staticFile } from "remotion";
import { CountGrid } from "@/components/snap-cn/count-grid";
import { PunchLines } from "@/components/snap-cn/punch-lines";
import { StatusCycle } from "@/components/snap-cn/status-cycle";
import { WordCaptions } from "@/components/snap-cn/word-captions";
import { WordmarkCut } from "@/components/snap-cn/wordmark-cut";

// Tiempos a nivel de palabra desde Whisper (o @remotion/captions): { text, startMs, endMs }[].
const captions = [
  { text: "Cerrar", startMs: 0, endMs: 400 },
  { text: "los", startMs: 400, endMs: 550 },
  { text: "libros", startMs: 550, endMs: 1000 },
  { text: "tarda", startMs: 1000, endMs: 1350 },
  { text: "una", startMs: 1350, endMs: 1450 },
  { text: "semana.", startMs: 1450, endMs: 2100 },
];

// Capturas de pantalla reales del producto en public/. Las escenas usan imágenes de muestra de snapcn sin ellas.
const shots = ["shot-1.jpg", "shot-2.jpg", "shot-3.jpg", "shot-4.jpg"].map((f) => staticFile(f));

// Video explicativo de ~15s: problema → cómo funciona → resultado → nombre, narrado, subtítulos incrustados.
export const Explainer: React.FC = () => (
  <AbsoluteFill>
    <Series>
      <Series.Sequence durationInFrames={144}>
        <PunchLines script="Cerrar los libros / tarda una semana. | Acme / lo hace en una noche." />
      </Series.Sequence>
      <Series.Sequence durationInFrames={198}>
        <StatusCycle
          prefix="Cada factura se"
          statuses={["importa", "compara", "concilia"]}
          chips={["Stripe", "QuickBooks", "Xero"]}
        />
      </Series.Sequence>
      <Series.Sequence durationInFrames={60}>
        <CountGrid from="5" to="500" noun="equipos" cards={shots} />
      </Series.Sequence>
      <Series.Sequence durationInFrames={66}>
        <WordmarkCut word="acme." />
      </Series.Sequence>
    </Series>
    <WordCaptions captions={captions} />
    <Audio src={staticFile("voiceover.mp3")} />
  </AbsoluteFill>
);

Regístralo con durationInFrames={468}, fps={30}, width={1280}, height={720}. Para un video explicativo real, deriva la duración de cada secuencia de los tiempos de su oración y establece el total a partir de la duración de la locución.

5. Verificar y renderizar

npx remotion still Explainer out/beat.png --frame=250
npx remotion render Explainer out/explainer.mp4 --codec=h264 --crf=18

Cada escena está en pantalla mientras se dice su oración. Mira con sonido una vez.
Los subtítulos nunca cubren el título propio de la escena; si lo hacen, mueve el texto de la escena o usa una página de subtítulos más corta (maxWords).
Cada cadena en pantalla proviene del guión, y no queda ningún texto de muestra de un valor predeterminado.

Reglas

Dilo, luego muéstralo. La escena muestra lo que la voz acaba de afirmar, nunca texto diferente para leer al mismo tiempo.
Una idea por latido, aproximadamente 5–8 segundos cada uno.
Incrusta los subtítulos. La mayoría de las visualizaciones comienzan sin sonido.
Solo números reales. Nunca inventes una métrica para el latido de prueba.

snapcn Pro

Pro añade latidos explicativos como orbit-flow (cómo funciona en tres paradas etiquetadas), proof-line, hex-tally y metric-morph (números que impactan), y read-through, además de las plantillas y el MCP de snapcn, que planifica los latidos desde tu guión: claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY. Los componentes Pro se instalan como los gratuitos una vez que components.json envía tu clave (https://snapcn.dev/account?ref=skill-explainer). Planes: https://snapcn.dev/docs/pricing?ref=skill-explainer

¿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-explainer#free

snapcndev/snapcn

¿Qué es snapcn?

Preguntar en tu IA favorita

Documentación