imgcli

Que fait imgcli ?

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

Installation

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

# Installation depuis le registre Imgcli
npx shadcn@latest add https://imgcli.com/r/text-reveal.json

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

Pour utiliser la forme courte @imgcli/<nom>, mappez @imgcli vers https://imgcli.com/r/{nom}.json dans components.json. Consultez le guide d'installation pour la configuration du projet.

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, installer search-typing installe aussi snap-cn-ui, input et caret.

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

Deux niveaux

Imgcli propose deux types de composants — ils ont des API différentes :

• Niveau Animation (scènes et animations) — animations de texte, transitions, arrière-plans, simulations de blocs UI, cartes de marque/sociales, compositions complètes. Piloté par les images. Propriétés 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 disponibles aujourd'hui : input et caret. Propriétés basées sur l'état (state, style, size, theme) — l'état ouvert/tape est une fonction pure de la timeline. Pas de propriété speed. Construit sur @imgcli/snap-cn-ui.

Catégories de composants

Choisissez selon ce que vous construisez. Le catalogue est divisé en un fichier par composant sous references/components/. Commencez par references/components/index.md — une table de routage groupée par ces catégories avec un signal Utiliser pour / Éviter pour par composant. Parcourez-la, sélectionnez 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
Textes & Titres	Animation	text-reveal, type-morph, text-swell, text-highlight, text-swap, text-build, text-rewrite, text-select, word-flip, punch-lines, word-gather, word-wheel
Sous-titres	Animation	word-captions, karaoke-captions
Saisie Chat IA	Animation	prompt-send, search-typing, prompt-zoom, answer-stream, answer-highlight, agent-steps
Écrans & Appareils	Animation	phone-frame, laptop-frame, terminal-simulator, screen-recording, cursor-track
Logos	Animation	logo-assemble, logo-flicker, logo-collapse, logo-drift, block-wordmark, wordmark-cut
Scènes	Animation	announce-title, hero-launch, orbit-gallery, moodboard-reveal, status-cycle, count-grid, roster-grant, orb-swarm, reel-collage, card-rail, cut-lockup, bloom-lockup, gather-lockup, sky-lockup
Preuve Sociale	Animation	follower-rush, channel-thread
Effets	Animation	pulsing-border
Primitives UI	snap-cn-ui	input, caret (+ snap-cn-ui, la bibliothèque centrale partagée)

Utilisez l'index de composants en direct pour confirmer quels noms sont installables. Les références ci-dessous incluent les noms plus anciens et leurs remplacements.

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 (scènes et animations)

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

Primitives UI (snap-cn-ui)

• Basées sur l'état, pas sur speed : state (ex. "open" / "closed"), style, variant, size, theme?: Partial<SnapCnTheme>.
• L'état ouvert/fermé/actif est une fonction pure de la timeline (préréglages par images clés).
• Composez les primitives de calque modal (dialog, alert-dialog, drawer) 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="Livrez-le en React" />
</Sequence>

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

Canevas et minutage

• Standard canevas : 1280×720 @ 30fps. Les composants sont conçus pour cela.
• Budgetez chaque Sequence autour de la durée naturelle du composant — la colonne Longueur dans components/index.md (et Durée naturelle dans chaque fichier). Un sous-budget coupe l'animation ; un sur-budget laisse du vide.
• 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 jetons de la bibliothèque (references/design.md → jetons) afin que vos propres éléments ne jurent pas.

Valeurs par défaut du design — évitez la banalité IA

Lorsque vous écrivez vos propres textes, chrome de scène ou cartes (pas les composants préconstruits), soyez retenu :

• Pas de letter-spacing décoratif sur les textes de corps/titre que vous ajoutez.
• Pas de text-transform: uppercase / TOUT EN MAJUSCULES par défaut — préférez la casse normale (Lancement, pas LANCEMENT).
• Pas de remplissage de texte dégradé ou de lavis de dégradé décoratif — les dégradés uniquement comme arrière-plans intentionnels.
• Pas de lueur / ombre portée colorée ou de grands rayons de flou (blur > ~24px, propagation, multi-couche) — seule une élévation subtile de 1px.

Exception : ne retirez jamais ces effets 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 sous-titres sont tous légitimes. Les règles régissent vos ajouts, pas la bibliothèque.

Exemples complets de faire/ne pas faire : references/design.md. Pour la qualité du mouvement (minutage, anticipation, mise en scène, assouplissement), voir references/motion-principles.md.

Pièges (Imgcli spécifiques)

• Aucun composant de transition n'est fourni — un changement de scène est <TransitionSeries.Transition> de @remotion/transitions, pas un composant Imgcli. text-swap échange une ligne, pas une scène.
• Le défilement du terminal est instantané — translateY en fonction échelon, jamais de ressort/assouplissement du défilement.
• overflow: hidden sur les dispositions fractionnées — empêche la rupture du 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 s'affichent hors ligne — avatarUrl="" / coverUrl="" reviennent aux 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) vivent dans les propres skills de Remotion, pas ici : npx skills add remotion-dev/skills.

Composer une vidéo

Ne déversez pas de composants — composez une 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") :

1. 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.
2. 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.
3. 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é.
4. 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 durée naturelle.
5. Vérifiez la barre de qualité — un accent, texte cinétique en casse normale, 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 le texte. Voir references/anatomy.md §3.

Workflows

Pour une vidéo entière, utilisez le Skill de workflow correspondant lorsqu'il est disponible. Chacun compose les composants Imgcli étape par étape et vérifie le résultat dans Remotion. Le guide d'agent couvre l'installation et la découverte publique de composants.

• remotion-launch-video pour les films de lancement, annonces, promos Product Hunt / X.
• remotion-product-demo pour les démonstrations à partir d'un enregistrement d'écran réel, des démos CLI et d'applications IA.
• remotion-motion-graphics pour le texte cinétique, les logos animés, les statistiques et les courts génériques.
• remotion-kinetic-typography pour les textes animés et les cartes titres.
• remotion-logo-animation pour les révélations de logo, les génériques d'intro et d'outro.
• remotion-explainer-video pour les vidéos explicatives narrées avec sous-titres incrustés.

Référence

• references/anatomy.md — composition d'une vidéo complète : stratégie (modèle/composer/nouveau), les étapes de démo produit, et la barre de qualité bon vs banal.
• references/archetypes/index.md — routeur vers les recettes de construction par archétype (product-demo phare + changelog, feature-announcement, oss-showcase, cli-tool-demo, testimonial-reel, year-in-review, pricing-reveal, logo-bumper) : contrat de contenu, variantes de durée, carte étape→emplacement.
• references/components/index.md — table 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, l'exemple et les notes d'utilisation/non-utilisation d'un composant.
• references/design.md — valeurs par défaut de design anti-banalité (faire/ne pas faire) + jetons de design (palette, polices, canevas).
• references/motion-principles.md — principes de design de mouvement adaptés à Imgcli + Remotion.
• references/anti-patterns.md — erreurs de génération courantes et leurs corrections.