Remotion Video Generator

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

interface LowerThirdProps {
  name: string;
  title?: string;
  startFrame: number;
  durationInFrames: number;
  variant?: string;
  position?: string;
}

export const LowerThird: React.FC<LowerThirdProps> = ({
  name,
  title,
  startFrame,
  durationInFrames,
  variant = 'glass',
  position = 'bottom_left'
}) => {
  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: slide in from left
  const slideIn = spring({
    frame: relativeFrame,
    fps,
    config: {
      damping: [[ motion.default_spring.config.damping ]],
      mass: [[ motion.default_spring.config.mass ]],
      stiffness: [[ motion.default_spring.config.stiffness ]]
    }
  });

  // Fade in
  const opacity = interpolate(relativeFrame, [0, 10], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp'
  });

  // Fade out near end
  const fadeOut = interpolate(
    relativeFrame,
    [durationInFrames - 10, durationInFrames],
    [1, 0],
    {
      extrapolateLeft: 'clamp',
      extrapolateRight: 'clamp'
    }
  );

  const finalOpacity = Math.min(opacity, fadeOut);

  // Position based on runtime prop
  const positions: Record<string, any> = {
    bottom_left: { bottom: parseInt('[[ spacing.spacing['2xl'] ]]'), left: interpolate(slideIn, [0, 1], [-400, parseInt('[[ spacing.spacing['2xl'] ]]')]) },
    bottom_center: { bottom: parseInt('[[ spacing.spacing['2xl'] ]]'), left: '50%', transform: `translateX(-50%) translateX(${interpolate(slideIn, [0, 1], [-400, 0])}px)` },
    bottom_right: { bottom: parseInt('[[ spacing.spacing['2xl'] ]]'), right: interpolate(slideIn, [0, 1], [-400, parseInt('[[ spacing.spacing['2xl'] ]]')]) },
    top_left: { top: parseInt('[[ spacing.spacing['2xl'] ]]'), left: interpolate(slideIn, [0, 1], [-400, parseInt('[[ spacing.spacing['2xl'] ]]')]) },
    top_center: { top: parseInt('[[ spacing.spacing['2xl'] ]]'), left: '50%', transform: `translateX(-50%) translateX(${interpolate(slideIn, [0, 1], [-400, 0])}px)` },
    top_right: { top: parseInt('[[ spacing.spacing['2xl'] ]]'), right: interpolate(slideIn, [0, 1], [-400, parseInt('[[ spacing.spacing['2xl'] ]]')]) }
  };

  const positionStyle = positions[position] || positions.bottom_left;

  // Variant styles using theme tokens
  const variants: Record<string, any> = {
    minimal: {
      background: '[[ colors.background.dark ]]',
      backdropFilter: 'none',
      padding: `${parseInt('[[ spacing.spacing.md ]]')}px ${parseInt('[[ spacing.spacing.lg ]]')}px`,
      borderRadius: parseInt('[[ spacing.border_radius.md ]]')
    },
    standard: {
      background: '[[ colors.background.dark ]]',
      backdropFilter: 'none',
      padding: `${parseInt('[[ spacing.spacing.lg ]]')}px ${parseInt('[[ spacing.spacing.xl ]]')}px`,
      borderRadius: parseInt('[[ spacing.border_radius.lg ]]'),
      borderLeft: `${parseInt('[[ spacing.border_width.thick ]]')}px solid [[ colors.primary[0] ]]`
    },
    glass: {
      background: '[[ colors.background.glass ]]',
      backdropFilter: 'blur(10px)',
      padding: `${parseInt('[[ spacing.spacing.lg ]]')}px ${parseInt('[[ spacing.spacing.xl ]]')}px`,
      borderRadius: parseInt('[[ spacing.border_radius.lg ]]'),
      border: '1px solid [[ colors.border.light ]]'
    },
    bold: {
      background: `linear-gradient(135deg, [[ colors.primary[0] ]], [[ colors.accent[0] ]])`,
      backdropFilter: 'none',
      padding: `${parseInt('[[ spacing.spacing.lg ]]')}px ${parseInt('[[ spacing.spacing['2xl'] ]]')}px`,
      borderRadius: parseInt('[[ spacing.border_radius.lg ]]'),
      boxShadow: `0 10px 40px [[ colors.shadow.dark ]]`
    },
    animated: {
      background: '[[ colors.background.glass ]]',
      backdropFilter: 'blur(10px)',
      padding: `${parseInt('[[ spacing.spacing.lg ]]')}px ${parseInt('[[ spacing.spacing.xl ]]')}px`,
      borderRadius: parseInt('[[ spacing.border_radius.lg ]]'),
      border: `${parseInt('[[ spacing.border_width.medium ]]')}px solid [[ colors.accent[0] ]]`,
      boxShadow: `0 0 ${parseInt('[[ spacing.spacing.lg ]]')}px [[ colors.accent[0] ]]80`
    }
  };

  const variantStyle = variants[variant] || variants.glass;

  return (
    <AbsoluteFill style={{ pointerEvents: 'none' }}>
      <div
        style={{
          position: 'absolute',
          ...positionStyle,
          ...variantStyle,
          opacity: finalOpacity,
          fontFamily: "'[[ "', '".join(typography.body_font.fonts) ]]'"
        }}
      >
        <div
          style={{
            fontSize: parseInt('[[ typography.font_sizes[typography.default_resolution].base ]]'),
            fontWeight: parseInt('[[ typography.font_weights.bold ]]'),
            color: '[[ colors.text.on_dark ]]',
            marginBottom: title ? parseInt('[[ spacing.spacing.xxs ]]') : 0,
            lineHeight: 1.2
          }}
        >
          {name}
        </div>
        {title && (
          <div
            style={{
              fontSize: parseInt('[[ typography.font_sizes[typography.default_resolution].sm ]]'),
              fontWeight: parseInt('[[ typography.font_weights.medium ]]'),
              color: '[[ colors.accent[0] ]]',
              lineHeight: 1.3
            }}
          >
            {title}
          </div>
        )}
      </div>
    </AbsoluteFill>
  );
};