`src/Caption.tsx`

70 lines
import { useCurrentFrame, interpolate, Easing } from 'remotion';
import type { Section } from './sections';

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

export const Caption: React.FC<{ s: Section; index: number; total: number }> = ({ s }) => {
  const f = useCurrentFrame();
  const inX = interpolate(f, [6, 24], [-60, 0], { easing: Easing.out(Easing.cubic), extrapolateRight: 'clamp', extrapolateLeft: 'clamp' });
  const inO = interpolate(f, [6, 24], [0, 1], { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' });

  return (
    <div
      style={{
        position: 'absolute',
        left: 60,
        bottom: 70,
        transform: `translateX(${inX}px)`,
        opacity: inO,
        maxWidth: 1200,
      }}
    >
      <div
        style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: 12,
          padding: '8px 16px',
          borderRadius: 999,
          background: `${s.accent}22`,
          border: `1px solid ${s.accent}55`,
          color: s.accent,
          fontFamily: FONT,
          fontWeight: 700,
          fontSize: 20,
          letterSpacing: 2,
          textTransform: 'uppercase',
        }}
      >
        <span style={{ width: 9, height: 9, borderRadius: 9, background: s.accent }} />
        {s.act}
      </div>
      <div
        style={{
          marginTop: 16,
          fontFamily: FONT,
          fontWeight: 800,
          fontSize: 68,
          lineHeight: 1.02,
          color: '#f2f7ff',
          textShadow: '0 6px 30px rgba(0,0,0,0.55)',
        }}
      >
        {s.title}
      </div>
      <div
        style={{
          marginTop: 12,
          fontFamily: FONT,
          fontWeight: 500,
          fontSize: 30,
          color: '#b8c9e0',
          textShadow: '0 4px 20px rgba(0,0,0,0.6)',
        }}
      >
        {s.sub}
      </div>
    </div>
  );
};