shadcn-labs/snapcn

A shadcn registry of Remotion components for product demo videos. Install a text reveal, device frame, terminal session, logo sting or a whole scene with a command.

解決する課題

高品質なソフトウェア製品デモの作成は、しばしば煩雑で、多くの人が単純なスクリーンレコーディングに頼っています。snapcnは、ソフトウェアショーケース向けに特別に設計されたプロフェッショナルでプログラム可能なビデオコンポーネントのライブラリを提供します(AIチャットストリーム、ターミナルセッション、デバイスフレームなど)。これにより、プロジェクトのデザインシステムとの視覚的な一貫性を維持できます。

仕組み

ReactとRemotion上に構築されたsnapcnは、shadcn CLIでインストールできるコンポーネントのコレクションを提供します。これらのコンポーネントはユーザーのコードベースに直接コピーされるため、完全な所有権とカスタマイズが可能です。テーマシステム(SnapCnTheme)を活用して、ビデオのUIがアプリのUIトークンと一致することを保証します。視覚的な品質を向上させるために、アニメーションテキストのジッターをなくすgeometricPrecisionなどの特定のモーション修正を実装しています。

対象ユーザー

ソフトウェアの洗練されたプログラムによるビデオデモを作成したい開発者や製品チーム向けです。アニメーションを手動で調整したり、デザインシステムから逸脱したりする必要はありません。

ハイライト

  • ソフトウェア中心のコンポーネント: AI回答ストリーム、検索タイピング、ターミナルシミュレーターなどの特別なショットが含まれます。
  • デザインシステム統合: shadcnサーフェストークンを再利用するため、ビデオUIは製品UIと同期したままです。
  • markdown駆動のインストール: コンポーネントはshadcn CLIで追加され、開発者が完全に所有できます。
  • AIエージェントサポート: コーディングエージェントがビデオを組み立て、適切なコンポーネントを選択できるようにする特定の「スキル」とコンテキストファイル(llms.txt)を提供します。

関連

  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト