¿Qué hace snapcn?

Componentes de copiar y pegar para videos Remotion. Los componentes se instalan a través de shadcn y se ubican en components/snap-cn/ — el código es tuyo.

Instalación

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

# Añade 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 a través de registryDependencies — shadcn los instala de forma transitiva. Por ejemplo, shadcn add @snapcn/search-typing también añade @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 los Primitivos 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.
Primitivos UI (snap-cn-ui) — primitivos al estilo shadcn basados en línea de tiempo. Hoy se envían dos: input y caret. Props basados en estado (state, style, size, theme) — el estado abierto/escribiendo es una función pura de la línea de tiempo. Sin prop speed. Construidos 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 bajo references/components/. Comienza 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. Escanéala, elige candidatos, 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`, `text-swell`, `text-highlight`, `text-swap`, `text-build`, `word-flip`
Subtítulos	`snapcn`	`word-captions`, `karaoke-captions`
Entrada de Chat IA	`snapcn`	`search-typing`, `prompt-zoom`, `answer-stream`
Pantallas y Dispositivos	`snapcn`	`phone-frame`, `laptop-frame`, `terminal-simulator`
Logos	`snapcn`	`logo-assemble`, `logo-flicker`, `block-wordmark`
Escenas	`snapcn`	`announce-title`, `hero-launch`, `orbit-gallery`, `moodboard-reveal`, `status-cycle`
Prueba Social	`snapcn`	`follower-rush`
Efectos	`snapcn`	`pulsing-border`
Primitivos UI	`snap-cn-ui`	`input`, `caret` (+ `snap-cn-ui`, la librería central compartida)

Ese es el registro completo — 27 elementos. No hay shaders, ni componentes de transición independientes, ni componentes de gráficos o tarjetas sociales, y ningún primitivo 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 un primitivo.

Nivel de animación (`snapcn`)

Interfaz Props con nombre por componente (ej. TextRevealProps).
speed?: number — multiplicador de tiempo global (por defecto 1), aplicado como fotograma * 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.

Primitivos UI (`snap-cn-ui`)

Basados en estado, no basados 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 primitivos de capa modal (dialog, alert-dialog, drawer) con un elemento desencadenante — ver 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="Ship it in React" />
</Sequence>

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

Lienzo y temporización

Lienzo estándar: 1280×720 @ 30fps. Los componentes están diseñados para ello.
Ajusta cada Sequence a la duración natural del componente — la columna Length en components/index.md (y Natural length en cada archivo). Subestimar recorta la animación; sobreestimar deja aire muerto.
Coincidencia de tono: cada entrada del catálogo lleva una etiqueta vibe (tech/premium/data/clean/ playful/social) — elige componentes cuyo vibe encaje con la marca.
Paleta y fuentes: mantente dentro de los tokens de la biblioteca (references/design.md → tokens) para que tus propios elementos no choquen.

Diseño por defecto — evita el slop de IA

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

Sin letter-spacing decorativo en texto de cuerpo/encabezado que añadas.
Sin valores por defecto de text-transform: uppercase / TODO MAYÚSCULAS — prefiere mayúscula inicial (Launch, no LAUNCH).
Sin rellenos degradados de texto ni lavados degradados decorativos — degradados solo como fondos intencionales.
Sin brillo / sombras paralelas coloreadas ni radios de desenfoque grandes (blur > ~24px, dispersión, múltiples capas) — 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 baraja de colores de block-wordmark, el brillo de announce-title, el propio pulsing-border, y los contornos gruesos de los presets de subtítulos son legítimos. Las reglas rigen tus adiciones, no la biblioteca.

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

Trampas (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 — función escalón translateY, nunca spring/ease en 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/ — se cargan mediante staticFile('cursor.svg'), no imports.
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 de renderizar) viven en sus propias habilidades, no en esta: npx skills add remotion-dev/skills.

Composición de un video

No acumules componentes — compón una historia. Cuando te pidan construir un video completo ("haz un demo de producto", "video de changelog", "intro para mi landing"):

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

Referencia

references/anatomy.md — composición de un video completo: estrategia (plantilla/componer/nuevo), los compases de demo de producto y el estándar de calidad bueno vs slop.
references/archetypes/index.md — enrutador a recetas de construcción por arquetipo (demo de producto insignia + changelog, anuncio de funcionalidad, 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 compás→espacio.
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 por defecto de diseño anti-slop (hacer/evitar) + 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 correcciones.

snapcndev/snapcn

¿Qué es snapcn?

Preguntar en tu IA favorita

Documentación