Lyrics

歌詞の配置、安全領域、文字方向と演出パターンを説明します。

歌詞パターンは、文字表現と入場アニメーションを用途に合わせて組み合わせたコンポーネントです。以下の一覧から、フレーズに合う演出を選べます。

配置とセーフエリア

LyricsLayout は歌詞を置ける基準領域を作ります。既定値は1920×1080基準で左右50px・上下100pxです。位置は領域内の割合で、中央は { x: 0.5, y: 0.5 } です。意図的にはみ出させる場合は各パターンにsafeArea=“ignore” を指定します。

<SceneLayer followsCamera={false}>
  <LyricsLayout>
    <LyricFade
      from={30}
      durationInFrames={120}
      position={{ x: 0.5, y: 0.78 }}
      anchor="center"
      size="base"
    >
      歌詞
    </LyricFade>
  </LyricsLayout>
</SceneLayer>

共通の文字設定

パターンはposition、anchor、size、orientation、rotationDegreesなどで配置を調整します。白い明朝体を基本にし、画面内で読みやすい位置と背景とのコントラストを確認します。

パターン一覧

Pattern	動き	合うフレーズ
`LyricFade`	歌詞全体をフェードインする基本パターン。	静かな導入、余韻、歌詞の意味を落ち着いて読ませたい場面。
`LyricCharacterReveal`	文字を一文字ずつ順に表示するパターン。	語りかけや、言葉を順に受け取ってほしいフレーズ。
`LyricGather`	離れた文字が集まり、正しい位置に整うパターン。	散らばりからまとまりへ変わる意味や、気持ちが定まる箇所。
`LyricFragmentAssembly`	文字の断片が組み上がって歌詞になるパターン。	記憶や断片、再構成を感じさせたいフレーズ。
`LyricSlide`	歌詞を横方向から滑り込ませるパターン。	場面の切り替わりや、視線を新しい位置へ導きたい箇所。
`LyricBlink`	歌詞を指定回数だけ点滅させて表示するパターン。	短い音のアクセントや、切れ味を出したい言葉。
`LyricLetterSpacing`	文字間隔が広がる、または狭まるパターン。	中央配置で余白を感じさせる言葉や、まとまりへ向かう箇所。
`LyricCharacterScale`	一文字ずつスケールして表示するパターン。	短いキーワードや拍ごとに強調したいフレーズ。
`LyricCharacterUnderline`	文字の出現に合わせて下線を引くパターン。	一文字ずつの出現を視覚的に補い、フレーズに線の動きを足したい場面。

API Reference

`LyricsLayout`

Prop	Type	Default	Description
`children`	`ReactNode`	—	配置する歌詞パターン。
`safeArea`	`LyricsSafeArea`	`{ horizontal: 50, vertical: 100 }`	全歌詞で共有するセーフエリア。値は1920×1080基準のピクセルで、コンポジション寸法に合わせて拡縮。
`safeArea.horizontal`	`number`	`50`	左右の余白。デザインピクセル単位。
`safeArea.vertical`	`number`	`100`	上下の余白。デザインピクセル単位。