showcase

Showcase Polish

この atom では、ビジュアルの仕上げシステムについて説明します。compose atom から呼び出されるため、直接呼び出す必要はありません。プリセットの見た目や、シネマティックなレイヤーの仕組みを理解する必要がある場合に読み込んでください。

制御できる項目

プリセットを選び、propsを渡すことで、ビジュアル出力を制御します。それ以外はすべて自動です。Remotion コンポーネントが、プリセットとパレットに基づいてすべてのシネマティックなレイヤーを内部で処理します。

プリセット

各プリセットでは、ウィンドウの装飾、余白、背景のスタイル、パレットの選択が設定されます。

プリセット	見た目	最適な用途
factory	アンバーの放射状グローがかかった温かみのある黒い背景、信号機のようなドット、12px の角丸、ゆったりした余白。豊かなシネマティックな温かみがあります。	Factory の公式コンテンツ
factory-hero	factoryと同じ要素に、グラデーション背景を追加。シネマティックなインパクトを最大限に高めます。	Factory のランディングページ、ソーシャルメディア
hero	寒色系のグラデーション背景、大きな余白、目立つシャドウ。	Factory 以外のマーケティング、サードパーティ
macos	すっきりした暗い背景、信号機のようなドット、控えめなシャドウ。プロフェッショナルでありながら、落ち着いた印象です。	汎用デモ、README のヒーロー
presentation	黒い背景、ゆったりした余白。スライド上で見栄えするように設計されています。	講演、スライド資料
minimal	ウィンドウバーなし、小さな角丸、狭い余白。フレームの存在感をほとんど感じさせません。	ドキュメントへの埋め込み、インラインクリップ

各プリセットに自動的に含まれる要素

Factory / factory-hero プリセット（暖色系パレット）：

• ビデオの再生時間に応じて強まる、アンバーのグローブロブを伴う暖色系の放射状背景ビネット
• ほのかなアクセントグローのハローを伴う、暖色系のボックスシャドウ
• 暖色系のカラーグレーディングオーバーレイ（アンバーの色合い）
• Factory Orange の浮遊パーティクル

その他すべてのプリセット（寒色系 Catppuccin パレット）：

• 寒色系の単色またはグラデーション背景
• ニュートラルなボックスシャドウ
• ほのかな寒色系のカラーグレーディングオーバーレイ
• アクセントブルーの浮遊パーティクル

すべてのプリセットに含まれる要素：浮遊パーティクル、ノイズテクスチャオーバーレイ、カラーグレーディング、タイトルからコンテンツへのモーションブラー付きトランジション（transitionStyleで設定可能）、ウィンドウのアニメーション付き登場、パネルの段階的な登場（横並び表示）、およびメインコンテンツのシーケンス中に表示できる、任意のcodeAnnotationsによるシンタックスハイライト付きオーバーレイ。

ビジュアルパレット

パレットはプリセットに基づいて自動的に選択されます。Factory/factory-hero では暖色系パレットを使用し、それ以外では寒色系パレットを使用します。

Factory（暖色系）

トークン	Hex	役割
bg	#0a0804	温かみのある、ほぼ黒の色
surface	#18120e	ターミナルコンテンツの背景
accent	#EE6018	Factory Orange
text	#f0e8e0	温かみのある白
muted	#948781	控えめなテキスト

Catppuccin（寒色系）

トークン	Hex	役割
bg	#0d1117	寒色系の暗い色
surface	#181818	コンテンツの背景
accent	#89b4fa	ブルーのアクセント
text	#cdd6f4	寒色系の白
muted	#6c7086	控えめなテキスト

トランジションスタイル

transitionStyleでは、クロスフェードの見せ方を選択します。スキーマはcompose/SKILL.mdに記載されています。プリセットの階層に応じた推奨スタイルは次のとおりです。

プリセット	推奨（先頭がデフォルト）	避けるスタイル
factory, factory-hero	motion-blur, light-leak, whip-pan, flash	glitch-lite（暖色系のトーンと合いません）
hero, presentation	motion-blur, whip-pan, flash	light-leak（暖色系の光のスイープが寒色系パレットと合いません）
macos, minimal	motion-blur	glitch-lite, light-leak（実用本位のフレームには個性が強すぎます）

codeAnnotationsはプリセットに依存しません。パレットとフォントスタックは自動的に導出されます。スキーマと作成ルールについては、compose/SKILL.mdを参照してください。

運用上の注意事項

レンダリング時間：1920x1080 の 30〜60 秒の動画で約 1〜3 分です。ワーカーのタイムアウトは 5 分に設定してください。

よくある失敗例：

• コンテンツが途中で切れる、またはパネルが早い段階でフリーズする：clipDuration は最も長いクリップの長さで、render-showcase.sh によって確認されます。短いクリップでは最後のフレームが保持されます。clipDuration を編集するのではなく、ソースをトリミングするか、再録画してください。
• public/ にクリップがない：レンダリングが "Could not read file." で失敗します。レンダースクリプトは、レンダリングごとの専用ディレクトリにクリップをステージングします。npx remotion render を直接実行しないでください。
• npm の依存関係が不足している：初回のレンダリングが失敗した場合は、cd ${REMOTION_DIR} && npm install を実行してください。

レイアウトのデバッグ：render-showcase.sh --still <frame> を実行すると、完全なレンダリングと同じ正規化およびステージングを経由して 1 フレームをレンダリングできます（compose/SKILL.md のステップ 3 を参照）。

クリーンアップ：render-showcase.sh は、成功時、失敗時、または Ctrl-C／プロセスグループへのシグナルによるキャンセル時に、自身が作成したステージング済みディレクトリのみを削除します。スクリプトの PID のみに送られたシグナルは、npx remotion の子プロセスが終了するまで保留されます。

レンダリング

compose のレンダースクリプトを使用してください。詳しい使い方は compose/SKILL.md のステップ 3 を参照してください。

RENDER=${DROID_PLUGIN_ROOT}/scripts/render-showcase.sh

$RENDER --props "${RUN_DIR}/props.json" --output "${RUN_DIR}/showcase.mp4" "${RUN_DIR}/clip.mp4"

上級編：GlitchTitle

エッジの効いたハッカー風のイントロ向けに、スタイライズされたグリッチタイトルカードのコンポーネントが src/components/GlitchTitle.tsx にあります（散らばったブロックが集まってテキストを構成する、ピクセルが崩れていくエフェクト）。これはデフォルトの Showcase 構成には組み込まれていません。 使用するには、カスタムの Remotion 構成を作成する必要があります。明示的に依頼された場合にのみ使用してください。通常の用途には、標準の TitleCard で対応できます。

前提条件

• Node.js（>= 18）
• Chrome / Chromium（Remotion はヘッドレス Chrome を使用します）
• ffmpeg と ffprobe（Remotion は内部でこれらを使用します）

cd ${DROID_PLUGIN_ROOT}/remotion && npm install