Imgcli

Was macht Imgcli?

Copy-Paste-Komponenten für Remotion-Videos. Die Komponenten werden über shadcn installiert und landen in components/imgcli/ – du besitzt den Code.

Installation

Voraussetzungen: ein Remotion-Projekt (npx create-video@latest).

# Aus der Imgcli-Registry installieren
npx shadcn@latest add https://imgcli.com/r/text-reveal.json

# Die Komponente landet unter components/imgcli/text-reveal.tsx

Um die kürzere Form @imgcli/<name> zu verwenden, ordne @imgcli in components.json auf https://imgcli.com/r/{name}.json zu. Siehe die Installationsanleitung für die Einrichtung des Projekts.

Abhängigkeiten werden automatisch installiert

Viele Komponenten ziehen weitere über registryDependencies nach sich – shadcn installiert sie transitiv. Beispielsweise installiert search-typing auch snap-cn-ui, input und caret.

• @imgcli/snap-cn-ui ist die gemeinsame Kernbibliothek (Timeline-Fold-Hook, Theme-Kontext, Farbmathematik). Die meisten UI-Primitive sind darauf angewiesen. Du installierst sie selten direkt.

Zwei Stufen

Imgcli hat zwei Arten von Komponenten – sie haben unterschiedliche APIs:

• Animation-Stufe (Szenen und Animationen) – Textanimationen, Übergänge, Hintergründe, UI-Block-Simulationen, Marken-/Social-Cards, ganze Kompositionen. Bildgesteuert. Gemeinsame Props: speed (Zeitmultiplikator), und für Text: fontSize, color, fontWeight.
• UI-Primitive (snap-cn-ui) – timeline-gesteuerte, shadcn-artige Primitive. Derzeit zwei Auslieferungen: input und caret. Zustandsbasierte Props (state, style, size, theme) – der geöffnete/Schreib-Zustand ist eine reine Funktion der Timeline. Kein speed-Prop. Basiert auf @imgcli/snap-cn-ui.

Komponentenkategorien

Wähle basierend darauf, was du baust. Der Katalog ist unter references/components/ aufgeteilt – eine Datei pro Komponente. Beginne bei references/components/index.md – einer Routertabelle, gruppiert nach diesen Kategorien mit einem Verwende für / Vermeide für-Signal pro Komponente. Scanne sie, wähle Kandidaten aus und öffne dann nur die benötigten references/components/<name>.md-Dateien (vollständige Props, Beispiel, alle Verwende-/Nicht-Verwende-Hinweise). Lies nicht jede Datei.

Kategorie	Stufe	Komponenten
Text & Titel	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
Untertitel	Animation	word-captions, karaoke-captions
KI-Chat-Eingabe	Animation	prompt-send, search-typing, prompt-zoom, answer-stream, answer-highlight, agent-steps
Bildschirme & Geräte	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
Szenen	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
Social Proof	Animation	follower-rush, channel-thread
Effekte	Animation	pulsing-border
UI-Primitive	snap-cn-ui	input, caret (+ snap-cn-ui, die gemeinsame Kernbibliothek)

Verwende den Live-Komponentenindex, um zu bestätigen, welche Namen installierbar sind. Die Referenzen unten enthalten ältere Namen und deren Ersatz.

Komponentenmuster

Die Konventionen unterscheiden sich je nach Stufe – nimm nicht an, dass Animation-Stufen-Props auf einem Primitiv gelten.

Animation-Stufe (Szenen und Animationen)

• Benannte Props-Schnittstelle pro Komponente (z. B. TextRevealProps).
• speed?: number – globaler Zeitmultiplikator (Standard 1), angewendet als frame * speed.
• Text-Komponenten: fontSize, color, fontWeight.
• Szenenübergänge sind nicht in dieser Registry – verwende Remotions eigene @remotion/transitions (slide, wipe, fade, flip) innerhalb einer <TransitionSeries>.
• className?: string am Root-Element.

UI-Primitive (snap-cn-ui)

• Zustandsbasiert, nicht speed-basiert: state (z. B. "open" / "closed"), style, variant, size, theme?: Partial<SnapCnTheme>.
• Der geöffnete/geschlossene/aktive Zustand ist eine reine Funktion der Timeline (keyframed Presets).
• Kombiniere modale Primitive (Dialog, Alert-Dialog, Drawer) mit einem Trigger-Element – siehe das Beispiel jeder Komponente.

Animations-API

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

// Deterministischer Zufall (NIEMALS Math.random())
import { random } from "@remotion/random";
const jitter = random(`seed-${frame}`);

Kompositionsstruktur

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>

Leinwand & Timing

• Leinwandstandard: 1280×720 @ 30fps. Komponenten sind dafür ausgelegt.
• Budgetiere jede Sequence um die natürliche Länge der Komponente – die Spalte Länge in components/index.md (und die Natürliche Länge jeder Datei). Zu knappe Budgetierung beschneidet die Animation; zu großzügige Budgetierung hinterlässt tote Luft.
• Stimmungsabstimmung: Jeder Katalogeintrag trägt ein vibe-Tag (tech/premium/data/clean/playful/social) – wähle Komponenten, deren Stil zur Marke passt.
• Palette & Schriften: Bleibe innerhalb der Token der Bibliothek (references/design.md → Token), damit deine eigenen Elemente nicht kollidieren.

Designvorgaben – vermeide KI-Schludrigkeit

Wenn du eigene Texte, Szenenrahmen oder Karten schreibst (nicht die vorgefertigten Komponenten), halte es zurückhaltend:

• Kein dekorativer letter-spacing auf von dir hinzugefügtem Fließtext/Überschriftentext.
• Kein text-transform: uppercase / GROSSBUCHSTABEN als Standard – bevorzuge Satzfall (Launch, nicht LAUNCH).
• Keine Gradient-Textfüllungen oder dekorativen Gradient-Washes – Gradienten nur als absichtliche Hintergründe.
• Kein Glühen / farbige Schlagschatten oder große Unschärferadien (blur > ~24px, Spread, mehrschichtig) – nur subtile 1px-Höhe.

Ausnahme: Entferne diese niemals aus Komponenten, deren Wesen der Effekt ist – word-flip's Gradientenwort, block-wordmark's Farbdeck, announce-title's Glühen, pulsing-border selbst und die dicken Umrandungen der Untertitel-Presets sind legitim. Die Regeln gelten für deine Ergänzungen, nicht für die Bibliothek.

Vollständige Verwende-/Vermeide-Beispiele: references/design.md. Für Bewegungsqualität (Timing, Antizipation, Inszenierung, Easing) siehe references/motion-principles.md.

Fallstricke (Imgcli-spezifisch)

• Es werden keine Übergangskomponenten ausgeliefert – ein Szenenwechsel ist <TransitionSeries.Transition> von @remotion/transitions, keine Imgcli-Komponente. text-swap tauscht eine Zeile aus, keine Szene.
• Terminal-Scroll ist sofort – Schrittfunktion translateY, niemals spring/ease den Scroll.
• overflow: hidden bei geteilten Layouts – verhindert Inhaltsbrüche während Breitenanimationen.
• Cursor-Blinken ist deterministisch – Math.floor(frame / 15) % 2 === 0, keine Intervalle.
• Statische Dateien kommen in public/ – lade über staticFile('cursor.svg'), nicht über Imports.
• Social-Karten werden offline gerendert – avatarUrl="" / coverUrl="" fallen auf Gradienten zurück; kein Fetch.

Allgemeine Remotion-Regeln (kein Math.random(), kein setInterval, animiere transform nicht top/left, lade Schriftarten vor dem Rendern) sind in Remotions eigenen Skills enthalten, nicht in diesem: npx skills add remotion-dev/skills.

Ein Video komponieren

Wirf keine Komponenten zusammen – erzähle eine Geschichte. Wenn du gebeten wirst, ein vollständiges Video zu erstellen („Produktdemo machen“, „Changelog-Video“, „Intro für meine Landingpage“):

1. Entscheide die Strategie – fertige Vorlage vs. aus Komponenten komponieren vs. neue Komponente bauen. Siehe references/anatomy.md §1.
2. Folge den Beats – eine Produktdemo ist: Aufhänger → Positionierung → Produktvorstellung → Funktionen → Nachweis → CTA (die letzten beiden optional). Siehe references/anatomy.md §2.
3. Verwende das Rezept – references/archetypes/index.md führt zu bauspezifischen Builds: Inhaltsvertrag (ableiten → fragen → Platzhalter), Dauer-Varianten, Beat→Komponenten-Slots und ein ausgearbeitetes <TransitionSeries>-Grundgerüst.
4. Wähle die Komponente für jeden Beat aus references/components/index.md; stimme das vibe-Tag auf die Marke ab und budgetiere jede <Sequence durationInFrames> um ihre natürliche Länge.
5. Prüfe die Qualitätsschwelle – eine Akzentuierung, Satzfall-Kinetik-Typografie, echte Inhalte, kein Glüh-Halo, keine Aufzählung von Funktionen, kein dekorativer Gradienten-Wash hinter der Schrift. Siehe references/anatomy.md §3.

Workflows

Für ein ganzes Video verwende den passenden Workflow-Skill, wenn verfügbar. Jeder komponiert Imgcli-Komponenten Beat für Beat und prüft das Ergebnis in Remotion. Der Agentenleitfaden behandelt Installation und öffentliche Komponentenentdeckung.

• remotion-launch-video für Launch-Filme, Ankündigungen, Product Hunt / X-Promos.
• remotion-product-demo für Walkthroughs von echten Screen-Recordings, CLI- und KI-App-Demos.
• remotion-motion-graphics für kinetische Typografie, Logo-Stings, Statistiken und kurze Opener.
• remotion-kinetic-typography für animierten Text und Titelcards.
• remotion-logo-animation für Logo-Enthüllungen, Intro- und Outro-Stings.
• remotion-explainer-video für gesprochene Erklärvideos mit eingebrannten Untertiteln.

Referenz

• references/anatomy.md – Komposition eines ganzen Videos: Strategie (Vorlage/komponieren/neu), die Produktdemo-Beats und die Qualitätsschwelle zwischen gut und schludrig.
• references/archetypes/index.md – Router zu bauspezifischen Build-Rezepten (Produktdemo-Flaggschiff + Changelog, Feature-Ankündigung, OSS-Showcase, CLI-Tool-Demo, Testimonial-Reel, Jahresrückblick, Preis-Enthüllung, Logo-Bumper): Inhaltsvertrag, Dauer-Varianten, Beat→Slot-Zuordnung.
• references/components/index.md – Routertabelle (alle Komponenten, gruppiert nach Kategorie, mit Verwende für / Vermeide für). Öffne references/components/<name>.md für die vollständigen Props, ein Beispiel und Verwende-/Nicht-Verwende-Hinweise einer Komponente.
• references/design.md – Anti-Schludrigkeit-Designvorgaben (Verwende/Vermeide) + Design-Token (Palette, Schriften, Leinwand).
• references/motion-principles.md – Bewegungsdesign-Prinzipien angepasst an Imgcli + Remotion.
• references/anti-patterns.md – Häufige Generierungsfehler und deren Behebung.