Remotion Video Generator

{/* chuk-motion/src/chuk_motion/components/overlays/EndScreen/template.tsx.j2 */}
import React from 'react';
import { AbsoluteFill, Img, interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion';

interface EndScreenProps {
  ctaText: string;
  thumbnailUrl?: string;
  variant: string;
  startFrame: number;
  durationInFrames: number;
}

export const EndScreen: React.FC<EndScreenProps> = ({
  ctaText,
  thumbnailUrl,
  variant,
  startFrame,
  durationInFrames
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const relativeFrame = frame - startFrame;

  // Don't render if outside the time range
  if (frame < startFrame || frame >= startFrame + durationInFrames) {
    return null;
  }

  // Animation: fade in with scale
  const progress = spring({
    frame: relativeFrame,
    fps,
    config: {
      damping: [[ motion.default_spring.config.damping ]],
      mass: [[ motion.default_spring.config.mass ]],
      stiffness: [[ motion.default_spring.config.stiffness ]]
    }
  });

  const opacity = interpolate(progress, [0, 1], [0, 1]);
  const scale = interpolate(progress, [0, 1], [0.9, 1]);

  // Pulse animation for CTA
  const pulse = Math.sin((relativeFrame / 30) * Math.PI * 2) * 0.05 + 1;

  // Render based on variant
  const renderContent = () => {
    if (variant === 'minimal') {
      return (
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
            gap: parseInt('[[ spacing.spacing['2xl'] ]]')
          }}
        >
          <div
            style={{
              fontSize: parseInt('[[ typography.font_sizes[typography.default_resolution]['2xl'] ]]'),
              fontWeight: parseInt('[[ typography.font_weights.black ]]'),
              color: '[[ colors.text.on_dark ]]',
              textAlign: 'center',
              letterSpacing: '[[ typography.letter_spacing.tight ]]'
            }}
          >
            {ctaText}
          </div>
          <div
            style={{
              padding: '[[ spacing.spacing.lg ]] [[ spacing.spacing['3xl'] ]]',
              background: `linear-gradient(135deg, [[ colors.primary[0] ]], [[ colors.accent[0] ]])`,
              borderRadius: parseInt('[[ spacing.border_radius.xl ]]'),
              fontSize: parseInt('[[ typography.font_sizes[typography.default_resolution].lg ]]'),
              fontWeight: parseInt('[[ typography.font_weights.bold ]]'),
              color: '[[ colors.text.on_dark ]]',
              transform: `scale(${pulse})`,
              boxShadow: `0 [[ spacing.spacing.md ]] [[ spacing.spacing['4xl'] ]] [[ colors.primary[0] ]]60`
            }}
          >
            SUBSCRIBE
          </div>
        </div>
      );
    } else if (variant === 'split') {
      return (
        <div
          style={{
            display: 'flex',
            width: '100%',
            height: '100%',
            gap: parseInt('[[ spacing.spacing['2xl'] ]]'),
            padding: parseInt('[[ spacing.spacing['3xl'] ]]')
          }}
        >
          {/* Left side - CTA */}
          <div
            style={{
              flex: 1,
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'center',
              alignItems: 'center',
              background: '[[ colors.background.glass ]]',
              backdropFilter: 'blur([[ spacing.spacing.md ]])',
              borderRadius: parseInt('[[ spacing.border_radius.lg ]]'),
              padding: parseInt('[[ spacing.spacing['3xl'] ]]'),
              gap: parseInt('[[ spacing.spacing['2xl'] ]]')
            }}
          >
            <div
              style={{
                fontSize: parseInt('[[ typography.font_sizes[typography.default_resolution].xl ]]'),
                fontWeight: parseInt('[[ typography.font_weights.black ]]'),
                color: '[[ colors.text.on_dark ]]',
                textAlign: 'center',
                letterSpacing: '[[ typography.letter_spacing.tight ]]'
              }}
            >
              {ctaText}
            </div>
            <div
              style={{
                padding: '[[ spacing.spacing.lg ]] [[ spacing.spacing['3xl'] ]]',
                background: `linear-gradient(135deg, [[ colors.primary[0] ]], [[ colors.accent[0] ]])`,
                borderRadius: parseInt('[[ spacing.border_radius.xl ]]'),
                fontSize: parseInt('[[ typography.font_sizes[typography.default_resolution].base ]]'),
                fontWeight: parseInt('[[ typography.font_weights.bold ]]'),
                color: '[[ colors.text.on_dark ]]',
                transform: `scale(${pulse})`,
                boxShadow: `0 [[ spacing.spacing.md ]] [[ spacing.spacing['4xl'] ]] [[ colors.primary[0] ]]60`
              }}
            >
              SUBSCRIBE
            </div>
          </div>

          {/* Right side - Thumbnail */}
          {thumbnailUrl && (
            <div
              style={{
                flex: 1,
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center',
                background: '[[ colors.background.glass ]]',
                backdropFilter: 'blur([[ spacing.spacing.md ]])',
                borderRadius: parseInt('[[ spacing.border_radius.lg ]]'),
                padding: parseInt('[[ spacing.spacing['2xl'] ]]'),
                gap: parseInt('[[ spacing.spacing.lg ]]')
              }}
            >
              <Img
                src={thumbnailUrl}
                style={{
                  width: '100%',
                  height: 'auto',
                  borderRadius: parseInt('[[ spacing.border_radius.xl ]]'),
                  boxShadow: `0 [[ spacing.spacing.md ]] [[ spacing.spacing['4xl'] ]] [[ colors.shadow.dark ]]`
                }}
              />
              <div
                style={{
                  fontSize: parseInt('[[ typography.font_sizes[typography.default_resolution].sm ]]'),
                  fontWeight: parseInt('[[ typography.font_weights.semibold ]]'),
                  color: '[[ colors.text.on_dark ]]',
                  textAlign: 'center'
                }}
              >
                Watch Next
              </div>
            </div>
          )}
        </div>
      );
    } else if (variant === 'carousel') {
      // Simplified carousel - would need multiple thumbnails for full effect
      return (
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
            gap: parseInt('[[ spacing.spacing['3xl'] ]]'),
            padding: parseInt('[[ spacing.spacing['3xl'] ]]')
          }}
        >
          <div
            style={{
              fontSize: parseInt('[[ typography.font_sizes[typography.default_resolution].xl ]]'),
              fontWeight: parseInt('[[ typography.font_weights.black ]]'),
              color: '[[ colors.text.on_dark ]]',
              textAlign: 'center',
              letterSpacing: '[[ typography.letter_spacing.tight ]]'
            }}
          >
            {ctaText}
          </div>
          {thumbnailUrl && (
            <div
              style={{
                display: 'flex',
                gap: parseInt('[[ spacing.spacing['2xl'] ]]'),
                alignItems: 'center'
              }}
            >
              <Img
                src={thumbnailUrl}
                style={{
                  width: 480,
                  height: 270,
                  borderRadius: parseInt('[[ spacing.border_radius.xl ]]'),
                  boxShadow: `0 [[ spacing.spacing.md ]] [[ spacing.spacing['4xl'] ]] [[ colors.shadow.dark ]]`,
                  border: `[[ spacing.spacing.xxs ]] solid [[ colors.accent[0] ]]`
                }}
              />
            </div>
          )}
          <div
            style={{
              padding: '[[ spacing.spacing.lg ]] [[ spacing.spacing['3xl'] ]]',
              background: `linear-gradient(135deg, [[ colors.primary[0] ]], [[ colors.accent[0] ]])`,
              borderRadius: parseInt('[[ spacing.border_radius.xl ]]'),
              fontSize: parseInt('[[ typography.font_sizes[typography.default_resolution].lg ]]'),
              fontWeight: parseInt('[[ typography.font_weights.bold ]]'),
              color: '[[ colors.text.on_dark ]]',
              transform: `scale(${pulse})`,
              boxShadow: `0 [[ spacing.spacing.md ]] [[ spacing.spacing['4xl'] ]] [[ colors.primary[0] ]]60`
            }}
          >
            SUBSCRIBE
          </div>
        </div>
      );
    } else {
      // Standard variant
      return (
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center',
            gap: parseInt('[[ spacing.spacing['3xl'] ]]'),
            padding: parseInt('[[ spacing.spacing['4xl'] ]]')
          }}
        >
          {thumbnailUrl && (
            <Img
              src={thumbnailUrl}
              style={{
                width: 640,
                height: 360,
                borderRadius: 20,
                boxShadow: `0 [[ spacing.spacing.lg ]] [[ spacing.spacing['5xl'] ]] [[ colors.shadow.medium ]]`,
                border: `[[ spacing.border_width.thick ]] solid [[ colors.primary[0] ]]`
              }}
            />
          )}
          <div
            style={{
              fontSize: parseInt('[[ typography.font_sizes[typography.default_resolution].xl ]]'),
              fontWeight: parseInt('[[ typography.font_weights.black ]]'),
              color: '[[ colors.text.on_dark ]]',
              textAlign: 'center',
              letterSpacing: '[[ typography.letter_spacing.tight ]]'
            }}
          >
            {ctaText}
          </div>
          <div
            style={{
              padding: '[[ spacing.spacing.lg ]] [[ spacing.spacing['4xl'] ]]',
              background: `linear-gradient(135deg, [[ colors.primary[0] ]], [[ colors.accent[0] ]])`,
              borderRadius: parseInt('[[ spacing.border_radius.lg ]]'),
              fontSize: parseInt('[[ typography.font_sizes[typography.default_resolution].lg ]]'),
              fontWeight: parseInt('[[ typography.font_weights.bold ]]'),
              color: '[[ colors.text.on_dark ]]',
              transform: `scale(${pulse})`,
              boxShadow: `0 [[ spacing.spacing.md ]] [[ spacing.spacing['4xl'] ]] [[ colors.primary[0] ]]60`,
              cursor: 'pointer'
            }}
          >
            SUBSCRIBE
          </div>
        </div>
      );
    }
  };

  return (
    <AbsoluteFill
      style={{
        background: '[[ colors.background.dark ]]',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        fontFamily: "'[[ "', '".join(typography.primary_font.fonts) ]]'"
      }}
    >
      <div
        style={{
          opacity,
          transform: `scale(${scale})`,
          width: '100%',
          height: '100%',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center'
        }}
      >
        {renderContent()}
      </div>
    </AbsoluteFill>
  );
};