`src/scenes/OptionScene.tsx`

43 lines
import { AbsoluteFill, OffthreadVideo, Audio, staticFile, useCurrentFrame, interpolate, Easing } from 'remotion';
import type { Scene } from '../story';

const FONT = 'Inter, "SF Pro Display", system-ui, -apple-system, sans-serif';

export const OptionScene: React.FC<{ s: Scene }> = ({ s }) => {
  const f = useCurrentFrame();
  const zoom = interpolate(f, [0, s.frames], [1.06, 1.14], { extrapolateRight: 'clamp' });
  const panelIn = interpolate(f, [8, 26], [80, 0], { easing: Easing.out(Easing.cubic), extrapolateRight: 'clamp', extrapolateLeft: 'clamp' });
  const panelO = interpolate(f, [8, 26, s.frames - 10, s.frames], [0, 1, 1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' });
  const priceScale = interpolate(f, [16, 34], [0.7, 1], { easing: Easing.out(Easing.back(1.6)), extrapolateRight: 'clamp', extrapolateLeft: 'clamp' });

  return (
    <AbsoluteFill style={{ backgroundColor: '#05090f' }}>
      <AbsoluteFill style={{ transform: `scale(${zoom})` }}>
        <OffthreadVideo src={staticFile(s.clip!)} muted loop playbackRate={1}
          style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
      </AbsoluteFill>
      {/* cinematic scrims */}
      <AbsoluteFill style={{ background: 'linear-gradient(90deg, rgba(4,8,15,0.92) 0%, rgba(4,8,15,0.5) 42%, rgba(4,8,15,0) 68%)' }} />
      <AbsoluteFill style={{ background: 'linear-gradient(0deg, rgba(4,8,15,0.6) 0%, transparent 30%)' }} />
      {s.narr && <Audio src={staticFile(`audio/${s.narr}.wav`)} />}

      <div style={{ position: 'absolute', left: 90, top: 300, maxWidth: 820, transform: `translateY(${panelIn}px)`, opacity: panelO }}>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, padding: '8px 16px', borderRadius: 999,
          background: `${s.accent}26`, border: `1px solid ${s.accent}66`, color: s.accent, fontFamily: FONT,
          fontWeight: 800, fontSize: 20, letterSpacing: 3, textTransform: 'uppercase' }}>
          <span style={{ width: 9, height: 9, borderRadius: 9, background: s.accent }} /> {s.category}
        </div>
        <div style={{ marginTop: 18, fontFamily: FONT, fontWeight: 900, fontSize: 78, lineHeight: 1.0, color: '#f4f9ff', textShadow: '0 8px 40px rgba(0,0,0,0.7)' }}>
          {s.name}
        </div>
        <div style={{ marginTop: 22, display: 'flex', alignItems: 'flex-end', gap: 16, transform: `scale(${priceScale})`, transformOrigin: 'left bottom' }}>
          <span style={{ fontFamily: FONT, fontWeight: 900, fontSize: 96, lineHeight: 0.9, color: s.accent, textShadow: `0 0 40px ${s.accent}55` }}>{s.price}</span>
        </div>
        <div style={{ marginTop: 22, fontFamily: FONT, fontWeight: 500, fontSize: 30, lineHeight: 1.35, color: '#d6e2f2', maxWidth: 680, textShadow: '0 3px 18px rgba(0,0,0,0.8)' }}>
          {s.blurb}
        </div>
      </div>
    </AbsoluteFill>
  );
};