Snapcn

Overview

Snapcn is an open-source Remotion component registry designed for React developers. It brings the beloved shadcn copy-paste philosophy directly into programmatic video creation, offering modular video building blocks including dynamic text reveals, synchronized karaoke captions, 3D device mockups, and animated logo stings.

Key Features

• 🎬 Remotion-Native Architecture: Built directly on top of Remotion and React, enabling programmatic video generation and frame-accurate animations.
• 📋 Zero-Lockin Copy-Paste Model: Uses the standard shadcn CLI workflow to install components directly into your codebase with complete source ownership.
• 📱 Rich Visual Scenes: Includes pre-built device frame mockups, audio-reactive visualizers, typographic motion, and cinematic transitions.
• ⚡ Developer-Centric Customization: Styled with Tailwind CSS and fully typed with TypeScript for effortless property adjustments and styling.

Installation & Quick Start

npx shadcn@latest add https://snapcn.dev/r/text-reveal
# or add device mockups
npx shadcn@latest add https://snapcn.dev/r/device-mockup

import React from 'react';
import { Composition } from 'remotion';
import { TextReveal } from '@/components/snapcn/text-reveal';

export const PromoVideo: React.FC = () => {
  return (
    <Composition
      id="Promo"
      component={() => (
        <div className="flex h-full w-full items-center justify-center bg-black text-white">
          <TextReveal text="Ship Stunning Videos with Code" delay={15} />
        </div>
      )}
      durationInFrames={150}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

Why Choose Snapcn?

• Perfect for: SaaS product promo videos, dynamic social media video generation, automated marketing clip pipelines, and developers building video rendering backends.
• Comparison: Unlike complex After Effects workflows, Snapcn keeps video assets strictly versioned as React code alongside your application.