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 est dans le répertoire du registre shadcn. L'URL du registre simple https://snapcn.dev/r/<nom>.json fonctionne aussi.

Les dépendances s'installent automatiquement

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

@snapcn/snap-cn-ui est la bibliothèque centrale partagée (hook de pliage de timeline, contexte de thème, mathématiques de couleur). La plupart des primitives d'interface utilisateur 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 de texte, transitions, arrière-plans, simulations de blocs d'interface utilisateur, cartes de marque/réseaux sociaux, compositions complètes. Basé sur les images. Propriétés partagées : speed (multiplicateur de temps), et pour le texte : fontSize, color, fontWeight.
Primitives d'interface utilisateur (snap-cn-ui) — primitives de style shadcn basées sur la timeline. Deux livrées aujourd'hui : input et caret. Propriétés basées sur l'état (state, style, size, theme) — l'état ouvert/typage est une fonction pure de la timeline. Pas de propriété 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 sous references/components/. Commencez par references/components/index.md — un tableau de routage groupé par ces catégories avec un signal Utiliser pour / Éviter pour par composant. Parcourez-le, choisissez des candidats, puis ouvrez uniquement les fichiers references/components/<nom>.md dont vous avez besoin (propriétés 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`, `text-swell`, `text-highlight`, `text-swap`, `text-build`, `word-flip`
Sous-titres	`snapcn`	`word-captions`, `karaoke-captions`
Saisie de Chat IA	`snapcn`	`search-typing`, `prompt-zoom`, `answer-stream`
Écrans et Appareils	`snapcn`	`phone-frame`, `laptop-frame`, `terminal-simulator`
Logos	`snapcn`	`logo-assemble`, `logo-flicker`, `block-wordmark`
Scènes	`snapcn`	`announce-title`, `hero-launch`, `orbit-gallery`, `moodboard-reveal`, `status-cycle`
Preuve Sociale	`snapcn`	`follower-rush`
Effets	`snapcn`	`pulsing-border`
Primitives d'interface utilisateur	`snap-cn-ui`	`input`, `caret` (+ `snap-cn-ui`, la bibliothèque centrale partagée)

C'est l'intégralité du registre — 27 éléments. Il n'y a pas de shaders, de composants de transition autonomes, de composants de graphiques ou de cartes sociales, ni de primitives shadcn au-delà de input et caret. Si une scène en nécessite un, construisez-le (references/anatomy.md §1) — n'émettez pas un 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 propriétés du niveau Animation sur une primitive.

Niveau Animation (`snapcn`)

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

Primitives d'interface utilisateur (`snap-cn-ui`)

Basé sur l'état, pas basé sur speed : state (par ex. "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 des primitives de 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 composition

import { Sequence, Series } from "remotion";

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

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

Zone de travail et timing

Standard zone de travail : 1280×720 @ 30fps. Les composants sont disposés pour cela.
Budgétisez chaque Sequence autour de la longueur naturelle du composant — la colonne Longueur dans components/index.md (et la Longueur naturelle de chaque fichier). Un sous-budget coupe l'animation ; un sur-budget laisse du vide.
Correspondance de tonalité : chaque entrée du catalogue porte une balise vibe (tech/premium/data/clean/playful/social) — choisissez des composants dont la vibe correspond à la marque.
Palette et polices : restez dans les jetons de la bibliothèque (references/design.md → jetons) afin 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édéfinis), faites preuve de retenue :

Pas de letter-spacing décoratif sur le corps/le texte de titre que vous ajoutez.
Pas de text-transform: uppercase / TOUT EN MAJUSCULES par défaut — préférez la casse de phrase (Lancement, pas LANCEMENT).
Pas de remplissage de texte en dégradé ou de lavis de 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 supprimez jamais ces éléments des composants dont l'essence est l'effet — le mot en dégradé de word-flip, le jeu de couleurs de block-wordmark, la lueur de announce-title, pulsing-border lui-même, et les contours épais des préréglages de sous-titres sont tous légitimes. Les règles régissent vos ajouts, pas la bibliothèque.

Exemples complets de faire/éviter : references/design.md. Pour la qualité du mouvement (timing, anticipation, mise en scène, assouplissement), 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é — fonction échelon translateY, jamais de 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'importations.
Les cartes sociales sont rendues hors ligne — avatarUrl="" / coverUrl="" reviennent à des dégradés ; pas de récupération.

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 dans celle-ci : npx skills add remotion-dev/skills.

Composer une vidéo

Ne déversez pas de composants — composez une seule histoire. Lorsqu'on vous demande de construire une vidéo complète (« faire une démo produit », « vidéo de changelog », « intro pour ma page d'accueil ») :

Décidez de la stratégie — modèle prêt vs composer à partir de composants vs construire un nouveau composant. Voir references/anatomy.md §1.
Suivez les temps forts — une démo produit est Accroche → Positionnement → Révélation du produit → Fonctionnalités → Preuve → Appel à l'action (les deux derniers facultatifs). Voir references/anatomy.md §2.
Utilisez la recette — references/archetypes/index.md dirige vers des constructions par archétype : contrat de contenu (inférer → demander → espace réservé), variantes de durée, emplacements temps fort→composant, et un squelette <TransitionSeries> travaillé.
Choisissez le composant de chaque temps fort depuis references/components/index.md ; faites correspondre la balise vibe à la marque et budgétisez chaque <Sequence durationInFrames> autour de sa longueur naturelle.
Vérifiez la barre de qualité — un accent, typographie 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 de dégradé décoratif derrière la typographie. Voir references/anatomy.md §3.

Référence

references/anatomy.md — composer une vidéo complète : stratégie (modèle/composer/nouveau), les temps forts de la démo produit, et la barre de qualité bon vs médiocre.
references/archetypes/index.md — routeur vers des recettes de construction par archétype (démo produit phare + changelog, annonce de fonctionnalité, vitrine open-source, démo d'outil en ligne de commande, bobine de témoignage, bilan annuel, révélation de prix, logo d'ouverture) : contrat de contenu, variantes de durée, carte temps fort→emplacement.
references/components/index.md — tableau de routage (tous les composants, groupés par catégorie, avec Utiliser pour / Éviter pour). Ouvrez references/components/<nom>.md pour les propriétés complètes d'un composant, son exemple, et ses notes d'utilisation / non-utilisation.
references/design.md — valeurs par défaut de conception anti-médiocres (faire/éviter) + jetons de conception (palette, polices, zone de travail).
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