remotion-3d-ticker

Remotion 3D 縦型ティッカー

このスキルでは、Remotion で無限に複数列を 3D スクロールするアニメーション（写真ギャラリー、3D写真スクロールウォール、技術スタックの紹介、クレジットロールなどでよく使われます）を作成するための、再利用可能なアーキテクチャパターンとコンポーネントを提供します。

仕組み

無限スクロールのように見せるには、コンテンツの重複と剰余演算を CSS 3D 変換と組み合わせます。

1. 無限スクロールの計算: コンテンツのリスト（[...items, ...items]）を複製します。フレームレートと希望するループ時間に基づいて、0 から 1 までの progress を計算します。列を 0% から -50%（逆方向の場合は -50% から 0%）まで移動させます。コンテンツが複製されているため、-50% のフレームは 0% のフレームと同じように見え、リセット時にシームレスなループが作られます。
2. 3D パースペクティブ: 親ラッパーに perspective: 1000px、rotateX(20deg)、scale(1.2) を適用します。傾いた上下の端が 2D 画面の範囲を超えて広がるようにするには、この拡大縮小が重要です。これにより、背景が空白の領域から透けて見えるのを防げます。
3. マスキング: CSS の linear-gradient オーバーレイを上部と下部に絶対配置し、高い zIndex を指定して、コンテンツが背景色へ滑らかにフェードするようにします。

このスキルの使い方

ユーザーから縦スクロールギャラリーや無限ティッカーを求められた場合は、次の手順に従います。

1. アセットをコピーする: assets/VerticalTicker.tsx にある汎用コンポーネントを、ユーザーのプロジェクトの components/animations フォルダーに提供またはコピーします。
2. 設定する: Remotion の <Composition /> 内で <VerticalTicker /> コンポーネントをインポートしてレンダリングするよう、ユーザーを案内します。
3. データに合わせる: このコンポーネントはデータに依存しません。任意の画像 URL 配列または React ノードを列として受け取ります。視差を実現するには、列ごとに異なる durationInSeconds と direction（1 または -1）を指定できます。

提供されるアセット

• assets/VerticalTicker.tsx: 3D 無限スクロールパターンを実装する、汎用性が高く、型安全な Remotion コンポーネント。