Que fait snapcn ?

Composants copier-coller pour les vidéos Remotion. Les composants s'installent via shadcn et atterrissent dans components/snap-cn/ — vous possédez le code.

Installation

Prérequis : un projet Remotion (npx create-video@latest).

# Ajouter n'importe quel composant (registre shadcn avec espace de noms)
shadcn add @snapcn/text-reveal

# Le composant atterrit dans components/snap-cn/text-reveal.tsx

@snapcn/<nom> est la forme canonique avec espace de noms. Elle ne nécessite pas d'entrée registries — l'espace de noms se trouve dans le répertoire du registre shadcn. L'URL du registre simple https://snapcn.dev/r/<nom>.json fonctionne également.

Les dépendances s'installent automatiquement

De nombreux composants tirent d'autres via registryDependencies — shadcn les installe de manière transitive. Par exemple, shadcn add @snapcn/search-typing tire également @snapcn/snap-cn-ui, @snapcn/input et @snapcn/caret.

@snapcn/snap-cn-ui est la bibliothèque de base partagée (hook de pliage de timeline, contexte de thème, mathématiques de couleur). La plupart des primitives d'interface en dépendent. Vous l'installez rarement directement.

Deux niveaux

snapcn a deux types de composants — ils ont des API différentes :

Niveau Animation (snapcn) — animations textuelles, transitions, arrière-plans, simulations de blocs d'interface, cartes de marque/réseaux sociaux, compositions complètes. Piloté par les trames. Props partagées : speed (multiplicateur de temps), et pour le texte : fontSize, color, fontWeight.
Primitives UI (snap-cn-ui) — primitives de style shadcn pilotées par la timeline. Deux sont livrées aujourd'hui : input et caret. Props basées sur l'état (state, style, size, theme) — l'état ouvert/saisie est une fonction pure de la timeline. Pas de prop speed. Construit sur @snapcn/snap-cn-ui.

Catégories de composants

Choisissez en fonction de ce que vous construisez. Le catalogue est divisé en un fichier par composant dans references/components/. Commencez par references/components/index.md — une table de routage regroupée par ces catégories avec un signal Utiliser pour / Éviter pour par composant. Parcourez-la, sélectionnez les candidats, puis ouvrez uniquement les fichiers references/components/<nom>.md dont vous avez besoin (props complètes, exemple, toutes les notes d'utilisation / non-utilisation). Ne lisez pas chaque fichier.

Catégorie	Niveau	Composants
Texte et Titres	`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`
Légendes	`snapcn`	`word-captions`, `karaoke-captions`
Saisie IA Chat	`snapcn`	`prompt-send`, `search-typing`, `prompt-zoom`, `answer-stream`, `answer-highlight`, `agent-steps`
Écrans et Appareils	`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`
Scènes	`snapcn`	`announce-title`, `hero-launch`, `orbit-gallery`, `moodboard-reveal`, `status-cycle`, `count-grid`, `roster-grant`, `orb-swarm`, `reel-collage`, `card-rail`
Preuve Sociale	`snapcn`	`follower-rush`, `channel-thread`
Effets	`snapcn`	`pulsing-border`
Primitives UI	`snap-cn-ui`	`input`, `caret` (+ `snap-cn-ui`, la bibliothèque de base partagée)

Voilà tout le registre gratuit — 47 éléments (la liste en direct est toujours https://snapcn.dev/llms.txt?ref=skill-snapcn ; 50 supplémentaires sont Pro, voir ci-dessous). Il n'y a pas de shaders, de composants de transition autonomes, de composants de graphiques ou de cartes sociales, ni de primitive shadcn au-delà d'input et caret. Si une scène en nécessite un, construisez-le (references/anatomy.md §1) — n'émettez pas de shadcn add pour un nom qui n'est pas dans ce tableau. references/components/index.md fait correspondre les anciens noms qui ne s'installent plus.

Modèles de composants

Les conventions diffèrent selon le niveau — ne supposez pas les props du niveau animation sur une primitive.

Niveau Animation (`snapcn`)

Interface Props nommée par composant (par exemple TextRevealProps).
speed?: number — multiplicateur de temps global (par défaut 1), appliqué comme frame * speed.
Composants textuels : fontSize, color, fontWeight.
Les transitions scène à scène ne sont pas dans ce registre — utilisez les propres transitions de Remotion @remotion/transitions (slide, wipe, fade, flip) dans un <TransitionSeries>.
className?: string sur la racine.

Primitives UI (`snap-cn-ui`)

Basé sur l'état, pas basé sur speed : state (par exemple "open" / "closed"), style, variant, size, theme?: Partial<SnapCnTheme>.
L'état ouvert/fermé/actif est une fonction pure de la timeline (préréglages avec images clés).
Composez les primitives de la couche modale (dialogue, dialogue d'alerte, tiroir) avec un élément déclencheur — voir l'exemple de chaque composant.

API d'animation

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

// Aléatoire déterministe (JAMAIS Math.random())
import { random } from "@remotion/random";
const jitter = random(`seed-${frame}`);

Structure de la composition

import { Sequence, Series } from "remotion";

<Sequence from={30} durationInFrames={60}>
  <TextReveal text="Livrez-le en React" />
</Sequence>

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

Canevas et timing

Canevas standard : 1280×720 @ 30fps. Les composants sont conçus pour cela.
Budgetez chaque Sequence autour de la longueur naturelle du composant — la colonne Longueur dans components/index.md (et Longueur naturelle de chaque fichier). Un sous-budget coupe l'animation ; un sur-budget laisse un temps mort.
Correspondance d'ambiance : chaque entrée du catalogue porte une balise vibe (tech/premium/data/clean/playful/social) — choisissez des composants dont l'ambiance correspond à la marque.
Palette et polices : restez dans les tokens de la bibliothèque (references/design.md → tokens) pour que vos propres éléments ne jurent pas.

Valeurs par défaut de conception — évitez le « AI-slop »

Lorsque vous écrivez votre propre texte, chrome de scène ou cartes (pas les composants préconstruits), restez sobre :

Pas de letter-spacing décoratif sur le corps/le titre du texte que vous ajoutez.
Pas de text-transform: uppercase / TOUT EN MAJUSCULES par défaut — préférez la casse normale des phrases (Launch, pas LAUNCH).
Pas de remplissage de texte dégradé ou de lavis dégradé décoratif — les dégradés uniquement comme arrière-plans intentionnels.
Pas de lueur / d'ombres portées colorées ou de grands rayons de flou (blur > ~24px, étalement, multicouche) — seule une élévation subtile de 1px.

Exception : ne les supprimez jamais des composants dont l'essence est l'effet — le mot dégradé de word-flip, la palette de couleurs de block-wordmark, la lueur de announce-title, pulsing-border lui-même, et les contours épais des préréglages de légendes sont tous légitimes. Les règles régissent vos ajouts, pas la bibliothèque.

Exemples complets à faire/éviter : references/design.md. Pour la qualité du mouvement (timing, anticipation, mise en scène, easing), voir references/motion-principles.md.

Pièges (spécifiques à snapcn)

Aucun composant de transition n'est livré — un changement de scène est <TransitionSeries.Transition> de @remotion/transitions, pas un composant snapcn. text-swap échange une ligne, pas une scène.
Le défilement du terminal est instantané — translateY en fonction échelon, jamais spring/ease pour le défilement.
overflow: hidden sur les mises en page fractionnées — empêche la rupture de contenu pendant les animations de largeur.
Le clignotement du curseur est déterministe — Math.floor(frame / 15) % 2 === 0, pas d'intervalles.
Les fichiers statiques vont dans public/ — chargez via staticFile('cursor.svg'), pas d'imports.
Les cartes sociales sont rendues hors ligne — avatarUrl="" / coverUrl="" reviennent aux dégradés ; pas de fetch.

Les règles générales de Remotion (pas de Math.random(), pas de setInterval, animez transform pas top/left, chargez les polices avant le rendu) se trouvent dans les propres compétences de Remotion, pas celles-ci : npx skills add remotion-dev/skills.

Composer une vidéo

Ne déversez pas de composants — composez une histoire. Lorsque vous devez construire une vidéo complète ("faire une démo produit", "vidéo de changelog", "intro pour ma page d'atterrissage") :

Décidez de la stratégie — modèle prêt vs composition à partir de composants vs construction d'un nouveau composant. Voir references/anatomy.md §1.
Suivez les étapes — une démo produit est Accroche → Positionnement → Révélation produit → Fonctionnalités → Preuve → Appel à l'action (les deux dernières facultatives). Voir references/anatomy.md §2.
Utilisez la recette — references/archetypes/index.md achemine vers des constructions par archétype : contrat de contenu (inférer → demander → placeholder), variantes de durée, emplacements étape→composant, et un squelette <TransitionSeries> travaillé.
Choisissez le composant de chaque étape dans references/components/index.md ; faites correspondre la balise vibe à la marque et budgetez chaque <Sequence durationInFrames> autour de sa longueur naturelle.
Vérifiez la barre de qualité — un accent, texte cinétique en casse de phrase, contenu réel, pas de halos de lueur, pas d'énumération de liste de fonctionnalités, pas de lavis dégradé décoratif derrière le texte. Voir references/anatomy.md §3.

Workflows

Pour une vidéo entière, installez la compétence de workflow pour le travail. Chacune compose ces composants étape par étape avec une composition qui vérifie les types et rend :

npx skills add snapcndev/snapcn --skill remotion-launch-video : films de lancement, annonces, promos Product Hunt / X.
npx skills add snapcndev/snapcn --skill remotion-product-demo : présentations pas à pas à partir d'un enregistrement d'écran réel, démos CLI et applications IA.
npx skills add snapcndev/snapcn --skill remotion-motion-graphics : texte cinétique, jingles de logo, statistiques et ouvreurs courts.
npx skills add snapcndev/snapcn --skill remotion-kinetic-typography : texte animé et cartes de titre.
npx skills add snapcndev/snapcn --skill remotion-logo-animation : révélations de logo, jingles d'intro et d'outro.
npx skills add snapcndev/snapcn --skill remotion-explainer-video : vidéos explicatives commentées avec légendes incrustées.

snapcn Pro

50 composants supplémentaires (version-drop, library-flight, read-through, focus-pull, tap-through, checkout-push, comment-storm, tally-rise et plus), les modèles, et le MCP snapcn, qui permet à votre agent de rechercher dans le registre et de lire les vraies props de chaque composant. Les composants Pro s'installent comme les gratuits une fois que components.json envoie la clé (trois lignes sur https://snapcn.dev/account?ref=skill-snapcn) ; le MCP est claude mcp add snapcn -- npx -y @snapcn/mcp@latest SNAPCN_API_KEY=VOTRE_CLÉ. Forfaits : https://snapcn.dev/docs/pricing?ref=skill-snapcn

Pas prêt pour Pro ? Un composant Pro, Manifesto, est gratuit pour un email confirmé : https://snapcn.dev/docs/pricing?ref=skill-snapcn#free

Références

references/anatomy.md — composition d'une vidéo complète : stratégie (modèle/composer/nouveau), les étapes de la démo produit, et la barre de qualité bon-vs-slop.
references/archetypes/index.md — routeur vers les recettes de construction par archétype (démo produit phare + changelog, annonce de fonctionnalité, vitrine OSS, démo d'outil CLI, bande de témoignages, bilan de l'année, révélation de prix, jingle de logo) : contrat de contenu, variantes de durée, carte étape→emplacement.
references/components/index.md — table de routage (tous les composants, regroupés par catégorie, avec Utiliser pour / Éviter pour). Ouvrez references/components/<nom>.md pour les props complètes, l'exemple et les notes d'utilisation / non-utilisation d'un composant.
references/design.md — valeurs par défaut de conception anti-slop (faire/éviter) + tokens de conception (palette, polices, canevas).
references/motion-principles.md — principes de conception de mouvement adaptés à snapcn + Remotion.
references/anti-patterns.md — erreurs de génération courantes et leurs correctifs.

snapcndev/snapcn

Qu'est-ce que snapcn ?

Demander à votre IA préférée

Documentation