Was macht snapcn?

Copy-Paste-Komponenten für Remotion-Videos. Die Komponenten werden über shadcn installiert und landen in components/snap-cn/ – der Code gehört dir.

Installation

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

# Eine beliebige Komponente hinzufügen (namespaced shadcn registry)
shadcn add @snapcn/text-reveal

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

@snapcn/<name> ist die kanonische namespaced-Form. Es ist kein registries-Eintrag nötig – der Namespace befindet sich im shadcn-Registry-Verzeichnis. Die reine Registry-URL https://snapcn.dev/r/<name>.json funktioniert ebenfalls.

Abhängigkeiten werden automatisch installiert

Viele Komponenten ziehen über registryDependencies weitere Komponenten nach sich – shadcn installiert sie transitiv. Zum Beispiel installiert shadcn add @snapcn/search-typing auch @snapcn/snap-cn-ui, @snapcn/input und @snapcn/caret.

@snapcn/snap-cn-ui ist die gemeinsame Kernbibliothek (Timeline-Fold-Hook, Theme-Kontext, Farb-Mathematik). Die meisten UI-Primitiven hängen davon ab. Du installierst sie selten direkt.

Zwei Ebenen

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

Animationsebene (snapcn) – Textanimationen, Übergänge, Hintergründe, UI-Block-Simulationen, Marken-/Social-Karten, vollständige Kompositionen. Frame-gesteuert. Gemeinsame Props: speed (Zeitmultiplikator), und für Text: fontSize, color, fontWeight.
UI-Primitiven (snap-cn-ui) – timeline-gesteuerte shadcn-artige Primitive. Derzeit zwei: input und caret. Zustandsbasierte Props (state, style, size, theme) – der offene/schreibende Zustand ist eine reine Funktion der Timeline. Kein speed-Prop. Basiert auf @snapcn/snap-cn-ui.

Komponentenkategorien

Wähle je nachdem, was du baust. Der Katalog ist auf eine Datei pro Komponente unter references/components/ aufgeteilt. Beginne mit references/components/index.md – einer Routingtabelle, 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 references/components/<name>.md-Dateien, die du benötigst (vollständige Props, Beispiel, alle Nutzungs-/Nicht-Nutzungs-Hinweise). Lies nicht jede Datei.

Kategorie	Ebene	Komponenten
Text & Titel	`snapcn`	`text-reveal`, `text-swell`, `text-highlight`, `text-swap`, `text-build`, `word-flip`
Untertitel	`snapcn`	`word-captions`, `karaoke-captions`
KI-Chat-Eingabe	`snapcn`	`search-typing`, `prompt-zoom`, `answer-stream`
Bildschirme & Geräte	`snapcn`	`phone-frame`, `laptop-frame`, `terminal-simulator`
Logos	`snapcn`	`logo-assemble`, `logo-flicker`, `block-wordmark`
Szenen	`snapcn`	`announce-title`, `hero-launch`, `orbit-gallery`, `moodboard-reveal`, `status-cycle`
Sozialer Beweis	`snapcn`	`follower-rush`
Effekte	`snapcn`	`pulsing-border`
UI-Primitiven	`snap-cn-ui`	`input`, `caret` (+ `snap-cn-ui`, die gemeinsame Kernbibliothek)

Das ist die gesamte Registry – 27 Elemente. Es gibt keine Shader, keine eigenständigen Übergangskomponenten, keine Diagramm- oder Social-Card-Komponenten und keine weiteren shadcn-Primitiven außer input und caret. Wenn eine Szene eine benötigt, baue sie selbst (references/anatomy.md §1) – führe kein shadcn add für einen Namen aus, der nicht in dieser Tabelle steht. references/components/index.md bildet die älteren Namen ab, die nicht mehr installiert werden.

Komponentenmuster

Die Konventionen unterscheiden sich je nach Ebene – gehe nicht davon aus, dass Props der Animationsebene auf einer Primitive funktionieren.

Animationsebene (`snapcn`)

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

UI-Primitiven (`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).
Zusammensetzbare Modal-Layer-Primitiven (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 } });

// Deterministische Zufälligkeit (NIEMALS Math.random())
import { random } from "@remotion/random";
const jitter = random(`seed-${frame}`);

Aufbau von Kompositionen

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. Die Komponenten sind darauf ausgelegt.
Bemesse jede Sequence um die natürliche Länge der Komponente herum – die Spalte Länge in components/index.md (und die Natürliche Länge jeder Datei). Zu knappe Bemessung schneidet die Animation ab; zu großzügige Bemessung hinterlässt tote Luft.
Tonangepasstheit: Jeder Katalogeintrag trägt ein vibe-Tag (tech/premium/data/clean/playful/social) – wähle Komponenten, deren Vibe zur Marke passt.
Palette & Schriftarten: Bleibe innerhalb der Tokens der Bibliothek (references/design.md → Tokens), damit deine eigenen Elemente nicht kollidieren.

Designvorgaben – vermeide KI-Schluderei

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

Kein dekoratives letter-spacing bei von dir hinzugefügtem Fließtext/Überschriftentext.
Kein text-transform: uppercase / GROSSSCHRIFT als Standard – bevorzuge Satzfall (Launch, nicht LAUNCH).
Keine Farbverlaufs-Textfüllungen oder dekorativen Farbverlaufswaschungen – Farbverläufe nur als bewusste Hintergründe.
Kein Glühen / farbige Schlagschatten oder große Weichzeichnungsradien (blur > ~24px, Spread, mehrschichtig) – nur dezente 1-Px-Höhe.

Ausnahme: Entferne diese niemals von Komponenten, deren Wesen der Effekt ist – word-flips Farbverlaufswort, block-wordmarks Farbdeck, announce-titles Glühen, pulsing-border selbst und die dicken Konturen der Untertitel-Presets sind alle legitim. Die Regeln gelten für deine Ergänzungen, nicht für die Bibliothek.

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

Fallstricke (snapcn-spezifisch)

Es werden keine Übergangskomponenten ausgeliefert – ein Szenenwechsel erfolgt über <TransitionSeries.Transition> von @remotion/transitions, nicht über eine snapcn-Komponente. text-swap tauscht eine Zeile aus, keine Szene.
Terminal-Scroll ist instantan – Schrittfunktion translateY, niemals Spring/Ease für 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 sie über staticFile('cursor.svg'), nicht über Imports.
Social-Karten rendern offline – avatarUrl="" / coverUrl="" fallen auf Farbverläufe zurück; kein Fetch.

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

Ein Video zusammenstellen

Wirf nicht einfach Komponenten zusammen – erzähle eine Geschichte. Wenn du gebeten wirst, ein vollständiges Video zu erstellen ("eine Produktdemo machen", "Changelog-Video", "Intro für meine Landing-Page"):

Entscheide die Strategie – fertige Vorlage vs. aus Komponenten zusammensetzen vs. neue Komponente bauen. Siehe references/anatomy.md §1.
Folge den Schritten – eine Produktdemo ist: Hook → Positionierung → Produktvorstellung → Funktionen → Beweis → CTA (letzte zwei optional). Siehe references/anatomy.md §2.
Verwende das Rezept – references/archetypes/index.md leitet zu bauartspezifischen Builds weiter: Inhaltsvertrag (ableiten → fragen → Platzhalter), Dauer-Varianten, Schritt→Komponenten-Slots und ein ausgearbeitetes <TransitionSeries>-Gerüst.
Wähle die Komponente für jeden Schritt aus references/components/index.md; gleiche das vibe-Tag mit der Marke ab und bemesse jede <Sequence durationInFrames> um ihre natürliche Länge herum.
Überprüfe die Qualitätsschwelle – ein Akzent, kinetischer Text in Satzform, echter Inhalt, keine Glüh-Halos, keine Aufzählung von Feature-Listen, kein dekorativer Farbverlaufshintergrund hinter dem Text. Siehe references/anatomy.md §3.

Referenz

references/anatomy.md – Ein vollständiges Video zusammenstellen: Strategie (Vorlage/zusammensetzen/neu), die Schritte einer Produktdemo und die Qualitätsschwelle zwischen gut und schlampig.
references/archetypes/index.md – Router zu bauartspezifischen Build-Rezepten (Produktdemo-Flaggschiff + Changelog, Feature-Ankündigung, OSS-Showcase, CLI-Tool-Demo, Testimonial-Reel, Jahresrückblick, Preisvorstellung, Logo-Bumper): Inhaltsvertrag, Dauer-Varianten, Schritt→Slot-Zuordnung.
references/components/index.md – Router-Tabelle (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 Nutzungs-/Nicht-Nutzungshinweise einer einzelnen Komponente.
references/design.md – Anti-Schluderei-Designvorgaben (Do/Avoid) + Design-Tokens (Palette, Schriftarten, Leinwand).
references/motion-principles.md – Bewegungsdesign-Prinzipien, angepasst an snapcn + Remotion.
references/anti-patterns.md – Häufige Generierungsfehler und ihre Behebungen.

snapcndev/snapcn

Was ist snapcn?

In Ihrer bevorzugten KI fragen

Dokumentation