O que snapcn faz?

Componentes de copiar e colar 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 fica em 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 do registro shadcn. A URL de registro simples https://snapcn.dev/r/<nome>.json também funciona.

Dependências instalam automaticamente

Muitos componentes puxam outros via registryDependencies — 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.

Duas camadas

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

Camada 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. Baseadas em frames. Props compartilhados: speed (multiplicador de tempo), e para texto: fontSize, color, fontWeight.
Primitivos de UI (snap-cn-ui) — primitivos estilo shadcn baseados em timeline. Dois disponíveis hoje: input e caret. Props baseados em estado (state, style, size, theme) — o estado aberto/digitando é uma função pura da timeline. Sem prop speed. Construído sobre @snapcn/snap-cn-ui.

Categorias de componentes

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

Categoria	Camada	Componentes
Texto e Títulos	`snapcn`	`text-reveal`, `text-swell`, `text-highlight`, `text-swap`, `text-build`, `word-flip`
Legendas	`snapcn`	`word-captions`, `karaoke-captions`
Entrada de Chat de IA	`snapcn`	`search-typing`, `prompt-zoom`, `answer-stream`
Telas e Dispositivos	`snapcn`	`phone-frame`, `laptop-frame`, `terminal-simulator`
Logos	`snapcn`	`logo-assemble`, `logo-flicker`, `block-wordmark`
Cenas	`snapcn`	`announce-title`, `hero-launch`, `orbit-gallery`, `moodboard-reveal`, `status-cycle`
Prova Social	`snapcn`	`follower-rush`
Efeitos	`snapcn`	`pulsing-border`
Primitivos de UI	`snap-cn-ui`	`input`, `caret` (+ `snap-cn-ui`, a biblioteca principal compartilhada)

Este é o registro completo — 27 itens. Não há shaders, componentes de transição independentes, 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 emita um shadcn add para um nome que não esteja nesta tabela. references/components/index.md mapeia os nomes mais antigos que não instalam mais.

Padrões de componentes

As convenções diferem por camada — não assuma props da camada de animação em um primitivo.

Camada de Animação (`snapcn`)

Interface Props nomeada por componente (ex.: TextRevealProps).
speed?: number — multiplicador de tempo global (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 transições do Remotion @remotion/transitions (slide, wipe, fade, flip) dentro de um <TransitionSeries>.
className?: string na 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 timeline (predefinições com keyframes).
Componha primitivos de camada modal (dialog, alert-dialog, drawer) com um elemento 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

Padrão do Canvas: 1280×720 @ 30fps. Os componentes são projetados para isso.
Defina o orçamento de cada Sequence em torno da duração natural do componente — a coluna Length em components/index.md (e Natural length de cada arquivo). Sub-orçamentar corta a animação; super-orçamentar deixa tempo morto.
Combinação de tom: cada entrada do catálogo carrega uma tag vibe (tech/premium/data/clean/ playful/social) — escolha componentes cujo vibe se encaixe na 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.

Padrões de design — evite slop de IA

Ao escrever seu próprio texto, moldura de cena ou cartões (não os componentes pré-construídos), mantenha-se contido:

Sem letter-spacing decorativo em texto de corpo/título que você adicionar.
Sem padrões text-transform: uppercase / CAIXA ALTA — prefira frase em maiúscula inicial (Launch, não LAUNCH).
Sem preenchimentos de texto gradiente ou lavagens gradientes decorativas — gradientes apenas como fundos intencionais.
Sem brilho / sombras projetadas coloridas ou grandes raios de desfoque (blur > ~24px, espalhamento, multicamada) — apenas elevação sutil de 1px.

Exceção: nunca remova estes de componentes cuja essência é o efeito — a palavra gradiente de word-flip, o baralho de cores de block-wordmark, o brilho de announce-title, o próprio pulsing-border, e os contornos pesados das predefinições de legenda são legítimos. As regras regem suas adições, não a biblioteca.

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

Armadilhas (específicas do snapcn)

Nenhum componente de transição é fornecido — uma mudança de cena é <TransitionSeries.Transition> do @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 use spring/ease na rolagem.
overflow: hidden em layouts divididos — evita quebra de conteúdo durante animações de largura.
A piscada do cursor é determinística — 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="" fallback para gradientes; sem fetch.

Regras gerais do Remotion (sem Math.random(), sem setInterval, anime transform não top/left, carregue fontes antes da renderização) 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 for solicitado a construir um vídeo completo ("faça uma demo de produto", "vídeo de changelog", "intro 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 é Hook → 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 <TransitionSeries> trabalhado.
Escolha o componente de cada beat em references/components/index.md; combine a tag vibe com a marca e defina o orçamento de cada <Sequence durationInFrames> em torno de sua duração natural.
Verifique a barra de qualidade — um destaque, tipo cinético em frase 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.

Referência

references/anatomy.md — compondo um vídeo completo: estratégia (template/compor/novo), os beats de demo de produto e a barra de qualidade bom-vs-slop.
references/archetypes/index.md — roteador para receitas de construção por arquétipo (demo de produto principal + changelog, anúncio de funcionalidade, showcase de OSS, demo de ferramenta CLI, reel de depoimento, retrospectiva anual, revelação de preço, bumper de logo): contrato de conteúdo, variantes de duração, mapa beat→slot.
references/components/index.md — tabela roteadora (todos os componentes, agrupados por categoria, com Use para / Evite para). Abra references/components/<nome>.md para props completos, exemplo e notas de uso / não uso de um componente.
references/design.md — padrões de design anti-slop (faça/não faça) + 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