// (어딘가 컴포넌트 내부) 
import { useCurrentFrame, interpolate, Easing } from 'remotion'; const frame = useCurrentFrame(); const duration = 30; // 1초 (30fps 기준) const x = interpolate( frame, [0, duration], // 입력 프레임 범위 [0, 100], // 출력 값 범위 
{ easing: Easing.linear, extrapolateLeft: 'clamp', extrapolateRight: 'clamp' } ); 
// 이제 이 'x' 값을 스타일이나 속성에 적용하면 된다. 

//src/remotion/Compositions/Example1/CompositionExample.tsx 
import { Composition } from "remotion" // 필요한 컴포넌트, 스키마, 메타데이터 계산 함수 등 임포트 
import { AnimationsIntroComposition } from "./Compositions/AnimationsIntro/AnimationsIntroComposition" 
// ... 기타 임포트 ... 
export const CompositionExample: React.FC = () => { // 기본값 설정 (calculateMetadata에서 덮어쓸 거지만 타입스크립트 달래주기용) 
const overwrittenProperties = { durationInFrames: 1, fps: 1, width: 10, height: 10, } 

return ( 
<> 
<Composition 
{...overwrittenProperties} 
id="AnimationsIntro" // 각 컴포지션 고유 ID 
component={AnimationsIntroComposition} // 렌더링할 컴포넌트 // schema, calculateMetadata, defaultProps 등 필요한 속성들 // ... 
/> 
<Composition
{...overwrittenProperties}
id="PopcornSoundVisualizer" 
component={PopcornSoundVisualizerComposition} // ...
        // ... (PopcornSoundVisualizer의 schema, calculateMetadata 등)
        schema={popcornSoundVisualizerCompositionSchema}
        calculateMetadata={calculatePopcornSoundVisualizerMetadata}
        defaultProps={{
          colorPalette: popcornSoundVisualizerColorPalettes.dark,
          scene: "FinalScene" as const,
        }}
      />
      {/* 만약 더 추가할 컴포지션이 있다면 여기에 계속 추가하면 된다 */}
    </>
  )
}

import { CompositionExample } from './CompositionExample';

// 다른 예제 세트들처럼 컨테이너 컴포넌트를 만들어서 export 한다.
export const Example1Container: React.FC = () => {
  return (
    // 별다른 로직 없이 CompositionExample을 렌더링
    <CompositionExample />
  );
};

// ... 다른 예제 세트들의 컨테이너 임포트 ...
import { Example1Container } from './Compositions/Example1/Main'; // <- 새로 추가된 부분

export const RemotionVideo = () => { // 혹은 네 파일의 최상위 컴포넌트 이름
  return (
    <>
      {/* ... 기존에 있던 다른 예제 세트 컴포넌트들 ... */}

      {/* 새로 만든 예제 세트 컨테이너를 여기에 추가 */}
      <Example1Container />

      {/* ... 만약 뒤에 더 있다면 ... */}
    </>
  );
};