動画編集において、特にRemotionのようなフレーム単位で動画を処理するツールを使う際に起こる「テキストが点滅する」という問題は非常に厄介です。私も似たような経験があり、プレビュー画面では完璧に表示されているのに、実際に動画を書き出すとテキストがちらついてしまい、何度も調整を繰り返したことがあります。 これは、Remotionが並列で各フレームを処理しているため、CSSのtransitionがシステムクロックに依存し、特定のフレームでの値が固定できなくなることが原因です。つまり、プレビュー時はブラウザの表示タイミングに同期してなめらかに動作しますが、実際の書き出し時にはフレームごとの計算が独立しているため、transitionが正しく反映されず点滅してしまいます。 解決策として、RemotionのuseCurrentFrame()フックやinterpolate()関数を使い、フレーム番号に基づいて透明度や位置を計算する「決定論的レンダリング」への切り替えが有効です。これにより、書き出し動画の各フレームでの要素の状態が一意に定まり、点滅しなくなります。 実際に自分の制作でもこの方法を導入したところ、それまでは苦労していた書き出しトラブルが大幅に減少し、作業効率が格段にアップしました。また、夜中に緊急対応する必要もなくなり、精神的な負担も軽減されました。 Remotionを使った動画制作で同じような点滅問題に悩んでいる方は、ぜひこのフレームベースの計算方法を試してみてください。理解しづらい部分はRemotionの公式ドキュメントや先人のノートを参考にしつつ、自分のプロジェクトに応じてカスタマイズするとより効果的です。 この経験から、単純にCSSのアニメーションに頼るのではなく、動画の特性に合ったレンダリング手法を理解し活用することが重要だと実感しました。動画制作の品質向上と効率化に役立つ知識として、ぜひ皆さんの制作に役立てていただければと思います。