LyricLetterSpacing

import { AbsoluteFill, useVideoConfig } from 'remotion'
import { secondsToFrameRange } from 'framoo/core'
import { LyricsLayout, LyricLetterSpacing } from 'framoo/lyrics'

export const LyricLetterSpacingPreview = () => {
  const { fps } = useVideoConfig()
  const lyricTiming = secondsToFrameRange(0.5, 5, fps)
  const framesForSeconds = (seconds: number) =>
    secondsToFrameRange(0, seconds, fps).durationInFrames

  return (
    <AbsoluteFill style={{ backgroundColor: '#17191f' }}>
      {/* 背景画像など */}
      <LyricsLayout>
        <LyricLetterSpacing
          name="LyricLetterSpacing · expand"
          {...lyricTiming}
          position={{ x: 0.5, y: 0.38 }}
          anchor="center"
          size="base"
          direction="expand"
          motion={{
            extraSpacingEm: 0.22,
            durationInFrames: framesForSeconds(24 / 30),
            easing: 'ease-out',
          }}
        >
          昨日より少し遠くへ
        </LyricLetterSpacing>
        <LyricLetterSpacing
          name="LyricLetterSpacing · contract"
          {...lyricTiming}
          position={{ x: 0.5, y: 0.72 }}
          anchor="center"
          size="base"
          direction="contract"
          motion={{
            extraSpacingEm: 0.22,
            durationInFrames: framesForSeconds(24 / 30),
            easing: 'ease-out',
          }}
        >
          昨日より少し遠くへ
        </LyricLetterSpacing>
      </LyricsLayout>
    </AbsoluteFill>
  )
}