ColorWashSequence

import { useVideoConfig } from 'remotion'
import {
  SceneLayer,
  SceneStage,
  secondsToFrameRange,
  secondsToFrames,
} from 'framoo/core'
import { ColorWashSequence } from 'framoo/atmosphere'

export const ColorWashSequencePreview = () => {
  const { fps } = useVideoConfig()
  const transitionDuration = secondsToFrameRange(0, 1.5, fps).durationInFrames

  return (
    <SceneStage>
      <SceneLayer followsCamera>
        {/* 背景画像など */}
        <ColorWashSequence
          cues={[
            {
              atFrame: secondsToFrames(0, fps),
              wash: 'linear-gradient(135deg, #0f2d53, #170a27)',
              opacity: 0.2,
            },
            {
              atFrame: secondsToFrames(2.4, fps),
              wash: 'linear-gradient(135deg, #ff705e, #2e125b)',
              opacity: 0.34,
            },
            {
              atFrame: secondsToFrames(5, fps),
              wash: 'linear-gradient(135deg, #11607e, #0b143a)',
              opacity: 0.3,
            },
          ]}
          transitionInFrames={transitionDuration}
        />
      </SceneLayer>
    </SceneStage>
  )
}