O que snapcn faz?

Componentes copie-e-cole para vídeos Remotion. Os componentes são instalados via shadcn e ficam em components/snap-cn/ — você é dono do código.

Instalação

Pré-requisitos: um projeto Remotion (npx create-video@latest).

# Adicione qualquer componente (registro shadcn com namespace)
shadcn add @snapcn/text-reveal

# O componente vai para components/snap-cn/text-reveal.tsx

@snapcn/<nome> é a forma canônica com namespace. Não precisa de entrada registries — o namespace está no diretório de registro do shadcn. A URL de registro simples https://snapcn.dev/r/<nome>.json também funciona.

Dependências são instaladas automaticamente

Muitos componentes puxam outros via registryDependencies — o shadcn os instala transitivamente. Por exemplo, shadcn add @snapcn/search-typing também puxa @snapcn/snap-cn-ui, @snapcn/input e @snapcn/caret.

`@snapcn/snap-cn-ui é a biblioteca principal compartilhada (hook timeline-fold, contexto de tema, matemática de cores). A maioria dos Primitivos de UI depende dela. Raramente você a instala diretamente.

Dois níveis

O snapcn tem dois tipos de componentes — eles têm APIs diferentes:

Nível de Animação (snapcn) — animações de texto, transições, fundos, simulações de blocos de UI, cartões de marca/sociais, composições completas. Baseados em frames. Propriedades compartilhadas: speed (multiplicador de tempo) e, para texto: fontSize, color, fontWeight.
Primitivos de UI (snap-cn-ui) — primitivos estilo shadcn orientados à linha do tempo. Dois disponíveis hoje: input e caret. Props baseadas em estado (state, style, size, theme) — o estado aberto/digitando é uma função pura da linha do tempo. Sem prop speed. Construídos sobre @snapcn/snap-cn-ui.

Categorias de componentes

Escolha pelo que você está construindo. O catálogo é dividido em um arquivo por componente em references/components/. Comece em references/components/index.md — uma tabela de roteamento agrupada por estas categorias com um sinal de Use para / Evite para por componente. Varra-a, escolha candidatos, depois abra apenas os arquivos references/components/<nome>.md que precisar (props completas, exemplo, todas as notas de uso / não uso). Não leia todos os arquivos.

Categoria	Nível	Componentes
Texto e 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`
Legendas	`snapcn`	`word-captions`, `karaoke-captions`
Entrada de Chat de IA	`snapcn`	`prompt-send`, `search-typing`, `prompt-zoom`, `answer-stream`, `answer-highlight`, `agent-steps`
Telas e 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`
Cenas	`snapcn`	`announce-title`, `hero-launch`, `orbit-gallery`, `moodboard-reveal`, `status-cycle`, `count-grid`, `roster-grant`, `orb-swarm`, `reel-collage`, `card-rail`
Prova Social	`snapcn`	`follower-rush`, `channel-thread`
Efeitos	`snapcn`	`pulsing-border`
Primitivos de UI	`snap-cn-ui`	`input`, `caret` (+ `snap-cn-ui`, a biblioteca principal compartilhada)

Esse é o registro gratuito completo — 47 itens (a lista atualizada é sempre https://snapcn.dev/llms.txt?ref=skill-snapcn; mais 50 são Pro, veja abaixo). Não há shaders, componentes de transição standalone, componentes de gráfico ou cartão social, e nenhum primitivo shadcn além de input e caret. Se uma cena precisar de um, construa-o (references/anatomy.md §1) — não execute shadcn add para um nome que não esteja nesta tabela. references/components/index.md mapeia os nomes antigos que não instalam mais.

Padrões de componentes

As convenções diferem por nível — não assuma props do nível de animação em um primitivo.

Nível de Animação (`snapcn`)

Interface Props nomeada por componente (ex.: TextRevealProps).
speed?: number — multiplicador global de tempo (padrão 1), aplicado como frame * speed.
Componentes de texto: fontSize, color, fontWeight.
Transições de cena para cena não estão neste registro — use as próprias @remotion/transitions (slide, wipe, fade, flip) dentro de <TransitionSeries>.
className?: string no elemento raiz.

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

Baseados em estado, não baseados em speed: state (ex.: "open" / "closed"), style, variant, size, theme?: Partial<SnapCnTheme>.
O estado aberto/fechado/ativo é uma função pura da linha do tempo (presets com keyframes).
Componha primitivos de camada modal (dialog, alert-dialog, drawer) com um elemento de gatilho — veja o exemplo de cada componente.

API de Animação

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 } });

// Aleatoriedade determinística (NUNCA Math.random())
import { random } from "@remotion/random";
const jitter = random(`seed-${frame}`);

Estrutura de composição

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>

Canvas e temporização

Canvas padrão: 1280×720 @ 30fps. Os componentes são projetados para ele.
Orce cada Sequence em torno da duração natural do componente — a coluna Duração em components/index.md (e a Duração natural em cada arquivo). Orçar abaixo corta a animação; orçar acima deixa ar morto.
Combinação de tom: cada entrada do catálogo carrega uma tag vibe (tech/premium/data/clean/playful/social) — escolha componentes cuja vibe combine com a marca.
Paleta e fontes: mantenha-se dentro dos tokens da biblioteca (references/design.md → tokens) para que seus próprios elementos não entrem em conflito.

Defaults de design — evite o "slop" de IA

Quando você escrever seu próprio texto, enfeites de cena ou cartões (não os componentes prontos), mantenha-se contido:

Nada de letter-spacing decorativo em texto de corpo/título que você adicionar.
Nada de text-transform: uppercase / CAIXA ALTA como padrão — prefira letra inicial maiúscula (Lançamento, não LANÇAMENTO).
Nada de preenchimentos gradientes em texto ou lavagens gradientes decorativas — gradientes apenas como fundos intencionais.
Nada de brilho / sombras projetadas coloridas ou grandes raios de desfoque (blur > ~24px, espalhamento, múltiplas camadas) — apenas elevação sutil de 1px.

Exceção: nunca remova esses estilos de componentes cuja essência é o efeito — o gradiente de word-flip, a paleta de cores de block-wordmark, o brilho de announce-title, o próprio pulsing-border, e os contornos pesados dos presets de legenda são todos legítimos. As regras governam suas adições, não a biblioteca.

Exemplos completos de uso/evitação: references/design.md. Para qualidade de movimento (temporização, antecipação, encenação, easing), veja references/motion-principles.md.

Pegadinhas (específicas do snapcn)

Nenhum componente de transição é fornecido — uma mudança de cena é <TransitionSeries.Transition> de @remotion/transitions, não um componente snapcn. text-swap troca uma linha, não uma cena.
A rolagem do terminal é instantânea — translateY em função degrau, nunca spring/ease na rolagem.
overflow: hidden em layouts divididos — evita quebra de conteúdo durante animações de largura.
O piscar do cursor é determinístico — Math.floor(frame / 15) % 2 === 0, não intervalos.
Arquivos estáticos vão em public/ — carregue via staticFile('cursor.svg'), não imports.
Cartões sociais renderizam offline — avatarUrl="" / coverUrl="" usam gradientes como fallback; nenhum fetch.

Regras gerais do Remotion (sem Math.random(), sem setInterval, anime transform não top/left, carregue fontes antes de renderizar) estão nas próprias skills do Remotion, não nesta: npx skills add remotion-dev/skills.

Compondo um vídeo

Não despeje componentes — componha uma história. Quando lhe pedirem para construir um vídeo completo ("faça uma demo de produto", "vídeo de changelog", "introdução para minha landing"):

Decida a estratégia — template pronto vs. compor a partir de componentes vs. construir um novo componente. Veja references/anatomy.md §1.
Siga os beats — uma demo de produto é: Gancho → Posicionamento → Revelação do produto → Funcionalidades → Prova → CTA (os dois últimos opcionais). Veja references/anatomy.md §2.
Use a receita — references/archetypes/index.md roteia para construções por arquétipo: contrato de conteúdo (inferir → perguntar → placeholder), variantes de duração, slots beat→componente e um esqueleto de <TransitionSeries> trabalhado.
Escolha o componente de cada beat em references/components/index.md; combine a tag vibe com a marca e orce cada <Sequence durationInFrames> em torno de sua duração natural.
Verifique o padrão de qualidade — um acento, tipo cinético em letra inicial maiúscula, conteúdo real, sem halos de brilho, sem enumeração de lista de funcionalidades, sem lavagem gradiente decorativa atrás do tipo. Veja references/anatomy.md §3.

Workflows

Para um vídeo completo, instale a skill de workflow para o trabalho. Cada uma compõe esses componentes beat por beat com uma composição que passa na verificação de tipos e renderiza:

npx skills add snapcndev/snapcn --skill remotion-launch-video: filmes de lançamento, anúncios, promos Product Hunt / X.
npx skills add snapcndev/snapcn --skill remotion-product-demo: walkthroughs a partir de uma gravação de tela real, demos de CLI e apps de IA.
npx skills add snapcndev/snapcn --skill remotion-motion-graphics: tipo cinético, vinhetas de logo, estatísticas e aberturas curtas.
npx skills add snapcndev/snapcn --skill remotion-kinetic-typography: texto animado e cartões de título.
npx skills add snapcndev/snapcn --skill remotion-logo-animation: revelações de logo, vinhetas de introdução e encerramento.
npx skills add snapcndev/snapcn --skill remotion-explainer-video: explicadores narrados com legendas incorporadas.

snapcn Pro

Mais 50 componentes (version-drop, library-flight, read-through, focus-pull, tap-through, checkout-push, comment-storm, tally-rise e mais), os templates, e o MCP do snapcn, que permite que seu agente busque no registro e leia as props reais de cada componente. Componentes Pro são instalados como os gratuitos assim que components.json enviar a chave (três linhas em https://snapcn.dev/account?ref=skill-snapcn); o MCP é claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=YOUR_KEY. Planos: https://snapcn.dev/docs/pricing?ref=skill-snapcn

Não está pronto para o Pro? Um componente Pro, Manifesto, é gratuito mediante e-mail confirmado: https://snapcn.dev/docs/pricing?ref=skill-snapcn#free

Referência

references/anatomy.md — compondo um vídeo completo: estratégia (template/compor/novo), os beats de demo de produto e o padrão de qualidade bom-vs-slop.
references/archetypes/index.md — roteador para receitas de construção por arquétipo (demo de produto carro-chefe + changelog, anúncio de funcionalidade, showcase de OSS, demo de ferramenta CLI, reel de depoimentos, retrospectiva do ano, revelação de preço, bumper de logo): contrato de conteúdo, variantes de duração, mapa beat→slot.
references/components/index.md — tabela de roteamento (todos os componentes, agrupados por categoria, com Use para / Evite para). Abra references/components/<nome>.md para as props completas de um componente, exemplo e notas de uso / não uso.
references/design.md — defaults de design anti-slop (uso/evitação) + tokens de design (paleta, fontes, canvas).
references/motion-principles.md — princípios de design de movimento adaptados ao snapcn + Remotion.
references/anti-patterns.md — erros comuns de geração e suas correções.

snapcndev/snapcn

O que é snapcn?

Perguntar na sua IA favorita

Documentação