GPT Astra 6.0과 Remotion TSX로 구축하는 코드 기반 시네마틱 3D 모션그래픽 파이프라인

import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
import React from "react";

// GPT Astra 6.0이 자동 생성한 시네마틱 카메라 리그 및 키네틱 타이포 컴포넌트
export const AstraCinematicScene = ({ headline, subtitle }: { headline: string; subtitle: string }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // 1. Astra 6.0이 계산한 부드러운 카메라 패닝 & 줌 궤적
  const cameraZ = interpolate(frame, [0, 90], [1200, 450], { extrapolateRight: "clamp" });
  const cameraRotateY = interpolate(frame, [0, 90], [-18, 4], { extrapolateRight: "clamp" });
  
  // 2. 물리 스프링 기반 텍스트 진입 타이밍
  const textEntrance = spring({ frame: frame - 15, fps, config: { damping: 14, stiffness: 120 } });
  const blurAmount = interpolate(frame, [0, 25], [16, 0], { extrapolateRight: "clamp" });

  return (
    <div
      style={{
        perspective: 1000,
        width: "100%",
        height: "100%",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        background: "radial-gradient(circle at 60% 40%, #1e1b4b 0%, #030712 100%)",
      }}
    >
      <div
        style={{
          transform: `translateZ(${cameraZ}px) rotateY(${cameraRotateY}deg)`,
          filter: `blur(${blurAmount}px)`,
          opacity: textEntrance,
          textAlign: "center",
        }}
      >
        <h1 style={{ fontSize: 84, fontWeight: 900, color: "#facc15", letterSpacing: "-0.04em" }}>
          {headline}
        </h1>
        <p style={{ fontSize: 36, color: "#cbd5e1", marginTop: 24 }}>{subtitle}</p>
      </div>
    </div>
  );
};