¿Qué hace snapcn?

Componentes de copiar y pegar para videos en Remotion. Los componentes se instalan mediante shadcn y se ubican en components/snap-cn/ — tú eres dueño del código.

Instalación

Requisitos previos: un proyecto Remotion (npx create-video@latest).

# Añadir cualquier componente (registro shadcn con espacio de nombres)
shadcn add @snapcn/text-reveal

# El componente se ubica en components/snap-cn/text-reveal.tsx

@snapcn/<nombre> es la forma canónica con espacio de nombres. No necesita una entrada registries — el espacio de nombres está en el directorio del registro shadcn. La URL del registro simple https://snapcn.dev/r/<nombre>.json también funciona.

Las dependencias se instalan automáticamente

Muchos componentes traen otros mediante registryDependencies — shadcn los instala de forma transitiva. Por ejemplo, shadcn add @snapcn/search-typing también instala @snapcn/snap-cn-ui, @snapcn/input y @snapcn/caret.

@snapcn/snap-cn-ui es la librería central compartida (hook timeline-fold, contexto de tema, matemáticas de color). La mayoría de las primitivas de UI dependen de ella. Rara vez se instala directamente.

Dos niveles

snapcn tiene dos tipos de componentes — tienen APIs diferentes:

Nivel de animación (snapcn) — animaciones de texto, transiciones, fondos, simulaciones de bloques de UI, tarjetas de marca/redes sociales, composiciones completas. Basados en fotogramas. Props compartidos: speed (multiplicador de tiempo), y para texto: fontSize, color, fontWeight.
Primitivas de UI (snap-cn-ui) — primitivas al estilo shadcn basadas en la línea de tiempo. Hoy se envían dos: input y caret. Props basados en estado (state, style, size, theme) — el estado abierto/escritura es una función pura de la línea de tiempo. Sin prop speed. Construidas sobre @snapcn/snap-cn-ui.

Categorías de componentes

Elige según lo que estés construyendo. El catálogo está dividido en un archivo por componente en references/components/. Empieza en references/components/index.md — una tabla de enrutamiento agrupada por estas categorías con una señal de Usar para / Evitar para por componente. Examínala, selecciona candidatos y luego abre solo los archivos references/components/<nombre>.md que necesites (props completos, ejemplo, todas las notas de uso / no uso). No leas todos los archivos.

Categoría	Nivel	Componentes
Texto y Títulos	`snapcn`	`text-reveal`, `type-morph`, `text-swell`, `text-highlight`, `text-swap`, `text-build`, `text-rewrite`, `text-select`, `word-flip`, `punch-lines`, `word-gather`, `word-wheel`
Subtítulos	`snapcn`	`word-captions`, `karaoke-captions`
Entrada de Chat IA	`snapcn`	`prompt-send`, `search-typing`, `prompt-zoom`, `answer-stream`, `answer-highlight`, `agent-steps`
Pantallas y Dispositivos	`snapcn`	`phone-frame`, `laptop-frame`, `terminal-simulator`, `screen-recording`, `cursor-track`
Logos	`snapcn`	`logo-assemble`, `logo-flicker`, `logo-collapse`, `logo-drift`, `block-wordmark`, `wordmark-cut`
Escenas	`snapcn`	`announce-title`, `hero-launch`, `orbit-gallery`, `moodboard-reveal`, `status-cycle`, `count-grid`, `roster-grant`, `orb-swarm`, `reel-collage`, `card-rail`
Prueba Social	`snapcn`	`follower-rush`, `channel-thread`
Efectos	`snapcn`	`pulsing-border`
Primitivas de UI	`snap-cn-ui`	`input`, `caret` (+ `snap-cn-ui`, la librería central compartida)

Ese es todo el registro gratuito — 47 elementos (la lista en vivo siempre está en https://snapcn.dev/llms.txt?ref=skill-snapcn; 50 más son Pro, ver más abajo). No hay shaders, ni componentes de transición independientes, ni componentes de gráficos o tarjetas sociales, ni primitivas shadcn más allá de input y caret. Si una escena necesita uno, constrúyelo (references/anatomy.md §1) — no ejecutes un shadcn add para un nombre que no esté en esta tabla. references/components/index.md mapea los nombres antiguos que ya no se instalan.

Patrones de componentes

Las convenciones difieren según el nivel — no asumas props del nivel de animación en una primitiva.

Nivel de animación (`snapcn`)

Interfaz Props con nombre por componente (ej. TextRevealProps).
speed?: number — multiplicador de tiempo global (por defecto 1), aplicado como frame * speed.
Componentes de texto: fontSize, color, fontWeight.
Las transiciones entre escenas no están en este registro — usa las propias de Remotion @remotion/transitions (slide, wipe, fade, flip) dentro de un <TransitionSeries>.
className?: string en la raíz.

Primitivas de UI (`snap-cn-ui`)

Basadas en estado, no en speed: state (ej. "open" / "closed"), style, variant, size, theme?: Partial<SnapCnTheme>.
El estado abierto/cerrado/activo es una función pura de la línea de tiempo (presets con keyframes).
Compón primitivas de capa modal (dialog, alert-dialog, drawer) con un elemento desencadenante — consulta el ejemplo de cada componente.

API de animación

import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";

const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });
const scale = spring({ fps, frame, config: { damping: 12, mass: 1, stiffness: 100 } });

// Aleatoriedad determinista (NUNCA Math.random())
import { random } from "@remotion/random";
const jitter = random(`seed-${frame}`);

Estructura de composición

import { Sequence, Series } from "remotion";

<Sequence from={30} durationInFrames={60}>
  <TextReveal text="Envíalo en React" />
</Sequence>

<Series>
  <Series.Sequence durationInFrames={60}><SceneA /></Series.Sequence>
  <Series.Sequence durationInFrames={60}><SceneB /></Series.Sequence>
</Series>

Lienzo y temporización

Estándar de lienzo: 1280×720 @ 30fps. Los componentes están diseñados para ello.
Presupuesta cada Sequence alrededor de la duración natural del componente — la columna Length en components/index.md (y la Duración natural de cada archivo). Sub-presupuestar recorta la animación; sobre-presupuestar deja tiempo muerto.
Coincidencia de tono: cada entrada del catálogo lleva una etiqueta vibe (tech/premium/data/clean/playful/social) — elige componentes cuyo vibe se ajuste a la marca.
Paleta y fuentes: mantente dentro de los tokens de la librería (references/design.md → tokens) para que tus propios elementos no entren en conflicto.

Valores predeterminados de diseño — evita la basura de IA

Cuando escribas tu propio texto, decoración de escena o tarjetas (no los componentes preconstruidos), mantén la moderación:

Sin letter-spacing decorativo en textos de cuerpo/encabezado que añadas.
Sin text-transform: uppercase / MAYÚSCULAS por defecto — prefiere mayúscula inicial (Lanzamiento, no LANZAMIENTO).
Sin rellenos de texto degradados ni lavados degradados decorativos — los degradados solo como fondos intencionales.
Sin brillo / sombras paralelas de color ni radios de desenfoque grandes (blur > ~24px, expansión, multicapa) — solo elevación sutil de 1px.

Excepción: nunca elimines estos de componentes cuya esencia sea el efecto — la palabra degradada de word-flip, la paleta de colores de block-wordmark, el brillo de announce-title, el propio pulsing-border, y los contornos pesados de los presets de subtítulos son legítimos. Las reglas rigen tus adiciones, no la librería.

Ejemplos completos de hacer/no hacer: references/design.md. Para calidad de movimiento (temporización, anticipación, puesta en escena, easing), consulta references/motion-principles.md.

Peculiaridades (específicas de snapcn)

No se envían componentes de transición — un cambio de escena es <TransitionSeries.Transition> de @remotion/transitions, no un componente snapcn. text-swap intercambia una línea, no una escena.
El desplazamiento del terminal es instantáneo — translateY de función escalón, nunca spring/ease el desplazamiento.
overflow: hidden en diseños divididos — evita roturas de contenido durante animaciones de ancho.
El parpadeo del cursor es determinista — Math.floor(frame / 15) % 2 === 0, no intervalos.
Los archivos estáticos van en public/ — cárgalos mediante staticFile('cursor.svg'), no con importaciones.
Las tarjetas sociales se renderizan sin conexión — avatarUrl="" / coverUrl="" recurren a degradados; sin fetch.

Las reglas generales de Remotion (sin Math.random(), sin setInterval, animar transform no top/left, cargar fuentes antes del renderizado) están en las habilidades propias de Remotion, no en esta: npx skills add remotion-dev/skills.

Componer un video

No te limites a colocar componentes — compón una historia. Cuando se te pida construir un video completo ("hacer una demo de producto", "video de changelog", "intro para mi landing"):

Decide la estrategia — plantilla lista vs componer desde componentes vs construir un nuevo componente. Consulta references/anatomy.md §1.
Sigue los tiempos — una demo de producto es Gancho → Posicionamiento → Revelación del producto → Características → Prueba → CTA (los dos últimos opcionales). Consulta references/anatomy.md §2.
Usa la receta — references/archetypes/index.md dirige a construcciones por arquetipo: contrato de contenido (inferir → preguntar → marcador de posición), variantes de duración, espacios de ritmo→componente, y un esqueleto de <TransitionSeries> trabajado.
Elige el componente de cada ritmo de references/components/index.md; empareja la etiqueta vibe con la marca y presupuesta cada <Sequence durationInFrames> alrededor de su duración natural.
Revisa el estándar de calidad — un acento, tipo cinético en mayúscula inicial, contenido real, sin halos de brillo, sin enumeración de lista de características, sin lavado degradado decorativo detrás del tipo. Consulta references/anatomy.md §3.

Flujos de trabajo

Para un video completo, instala la habilidad de flujo de trabajo para el trabajo. Cada uno compone estos componentes ritmo por ritmo con una composición que verifica tipos y renderiza:

npx skills add snapcndev/snapcn --skill remotion-launch-video: películas de lanzamiento, anuncios, promociones de Product Hunt / X.
npx skills add snapcndev/snapcn --skill remotion-product-demo: tutoriales a partir de una grabación de pantalla real, demos de CLI y aplicaciones de IA.
npx skills add snapcndev/snapcn --skill remotion-motion-graphics: tipo cinético, cortinillas de logo, estadísticas y aperturas cortas.
npx skills add snapcndev/snapcn --skill remotion-kinetic-typography: texto animado y tarjetas de título.
npx skills add snapcndev/snapcn --skill remotion-logo-animation: revelaciones de logo, cortinillas de introducción y cierre.
npx skills add snapcndev/snapcn --skill remotion-explainer-video: explicaciones narradas con subtítulos incrustados.

snapcn Pro

50 componentes más (version-drop, library-flight, read-through, focus-pull, tap-through, checkout-push, comment-storm, tally-rise y más), las plantillas y el MCP de snapcn, que permite a tu agente buscar en el registro y leer las props reales de cada componente. Los componentes Pro se instalan como los gratuitos una vez que components.json envía la clave (tres líneas en https://snapcn.dev/account?ref=skill-snapcn); el MCP es claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=TU_CLAVE. Planes: https://snapcn.dev/docs/pricing?ref=skill-snapcn

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

Referencia

references/anatomy.md — componer un video completo: estrategia (plantilla/componer/nuevo), los tiempos de la demo de producto y el estándar de calidad bueno vs basura.
references/archetypes/index.md — enrutador a recetas de construcción por arquetipo (demo de producto insignia + changelog, anuncio de característica, showcase de OSS, demo de herramienta CLI, reel de testimonios, resumen del año, revelación de precios, bumper de logo): contrato de contenido, variantes de duración, mapa de ritmo→slot.
references/components/index.md — tabla de enrutamiento (todos los componentes, agrupados por categoría, con Usar para / Evitar para). Abre references/components/<nombre>.md para las props completas, ejemplo y notas de uso / no uso de un componente.
references/design.md — valores predeterminados de diseño anti-basura (hacer/no hacer) + tokens de diseño (paleta, fuentes, lienzo).
references/motion-principles.md — principios de diseño de movimiento adaptados a snapcn + Remotion.
references/anti-patterns.md — errores comunes de generación y sus soluciones.

snapcndev/snapcn

¿Qué es snapcn?

Preguntar en tu IA favorita

Documentación