Remotion Video Generator

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

interface SubscribeButtonProps {
  variant: string;
  animation: string;
  position: string;
  customText: string;
  startFrame: number;
  durationInFrames: number;
}

export const SubscribeButton: React.FC<SubscribeButtonProps> = ({
  variant,
  animation,
  position,
  customText,
  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;
  }

  // Base animation progress
  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 ]]
    }
  });

  // Animation-specific transforms
  let transform = 'none';
  let opacity = interpolate(progress, [0, 1], [0, 1]);

  if (animation === 'bounce') {
    const bounceScale = spring({
      frame: relativeFrame,
      fps,
      config: {
        damping: 8,
        mass: 0.5,
        stiffness: 100
      }
    });
    const scale = interpolate(bounceScale, [0, 1], [0.3, 1]);
    transform = `scale(${scale})`;
  } else if (animation === 'pulse') {
    const pulse = Math.sin((relativeFrame / 20) * Math.PI * 2) * 0.1 + 1;
    transform = `scale(${pulse})`;
  } else if (animation === 'slide') {
    const slideDistance = position.includes('right') ? 200 : position.includes('left') ? -200 : 0;
    const translateX = interpolate(progress, [0, 1], [slideDistance, 0]);
    transform = `translateX(${translateX}px)`;
  } else if (animation === 'glow') {
    const pulse = Math.sin((relativeFrame / 30) * Math.PI * 2) * 0.5 + 1;
    transform = `scale(${pulse})`;
  } else if (animation === 'wiggle') {
    const wiggle = Math.sin((relativeFrame / 5) * Math.PI * 2) * 5;
    transform = `rotate(${wiggle}deg) scale(${interpolate(progress, [0, 1], [0.5, 1])})`;
  }

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

  const finalOpacity = opacity * fadeOut;

  // Position styles
  const positions: Record<string, any> = {
    bottom_right: { bottom: parseInt('[[ spacing.spacing['5xl'] ]]'), right: parseInt('[[ spacing.spacing['5xl'] ]]') },
    bottom_center: { bottom: parseInt('[[ spacing.spacing['5xl'] ]]'), left: '50%', transform: `${transform} translateX(-50%)` },
    center: { top: '50%', left: '50%', transform: `${transform} translate(-50%, -50%)` },
    top_right: { top: parseInt('[[ spacing.spacing['5xl'] ]]'), right: parseInt('[[ spacing.spacing['5xl'] ]]') }
  };

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

  // Variant styles
  const variants: Record<string, any> = {
    minimal: {
      background: '[[ colors.background.dark ]]',
      padding: `${parseInt('[[ spacing.spacing.md ]]')}px ${parseInt('[[ spacing.spacing['2xl'] ]]')}px`,
      borderRadius: parseInt('[[ spacing.border_radius.md ]]'),
      border: `${parseInt('[[ spacing.border_width.medium ]]')}px solid [[ colors.primary[0] ]]`
    },
    standard: {
      background: `linear-gradient(135deg, [[ colors.primary[0] ]], [[ colors.accent[0] ]])`,
      padding: `${parseInt('[[ spacing.spacing.lg ]]')}px ${parseInt('[[ spacing.spacing['2xl'] ]]')}px`,
      borderRadius: parseInt('[[ spacing.border_radius.lg ]]'),
      boxShadow: `0 ${parseInt('[[ spacing.spacing.xs ]]')}px ${parseInt('[[ spacing.spacing.xl ]]')}px [[ colors.primary[0] ]]60`
    },
    animated: {
      background: `linear-gradient(135deg, [[ colors.primary[0] ]], [[ colors.accent[0] ]])`,
      padding: `${parseInt('[[ spacing.spacing.lg ]]')}px ${parseInt('[[ spacing.spacing['3xl'] ]]')}px`,
      borderRadius: parseInt('[[ spacing.border_radius.lg ]]'),
      boxShadow: `0 10px ${parseInt('[[ spacing.spacing['2xl'] ]]')}px [[ colors.primary[0] ]]80`,
      border: `${parseInt('[[ spacing.border_width.medium ]]')}px solid [[ colors.border.medium ]]`
    },
    '3d': {
      background: `linear-gradient(135deg, [[ colors.primary[0] ]], [[ colors.accent[0] ]])`,
      padding: `${parseInt('[[ spacing.spacing.lg ]]')}px ${parseInt('[[ spacing.spacing['3xl'] ]]')}px`,
      borderRadius: parseInt('[[ spacing.border_radius.lg ]]'),
      boxShadow: `
        0 10px ${parseInt('[[ spacing.spacing['2xl'] ]]')}px [[ colors.primary[0] ]]80,
        0 ${parseInt('[[ spacing.spacing.xxs ]]')}px 0 [[ colors.primary[1] ]],
        0 ${parseInt('[[ spacing.spacing.xs ]]')}px ${parseInt('[[ spacing.spacing.lg ]]')}px [[ colors.shadow.dark ]]
      `,
      transform: `${transform} translateY(-${parseInt('[[ spacing.spacing.xxs ]]')}px)`
    }
  };

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

  // Glow effect for certain animations
  const glowIntensity = animation === 'glow' ? Math.sin((relativeFrame / 30) * Math.PI * 2) * 0.5 + 0.5 : 0;
  const glowSize = parseInt('[[ spacing.spacing['2xl'] ]]');

  return (
    <AbsoluteFill style={{ pointerEvents: 'none' }}>
      <div
        style={{
          position: 'absolute',
          ...positionStyle,
          ...variantStyle,
          opacity: finalOpacity,
          fontFamily: "'[[ "', '".join(typography.primary_font.fonts) ]]'",
          fontSize: parseInt('[[ typography.font_sizes[typography.default_resolution].base ]]'),
          fontWeight: parseInt('[[ typography.font_weights.bold ]]'),
          color: '[[ colors.text.on_dark ]]',
          textTransform: 'uppercase',
          letterSpacing: '0.05em',
          cursor: 'pointer',
          userSelect: 'none',
          ...(animation === 'glow' && {
            boxShadow: `
              ${variantStyle.boxShadow},
              0 0 ${glowSize + glowIntensity * glowSize}px [[ colors.accent[0] ]]
            `
          })
        }}
      >
        {customText}
      </div>
    </AbsoluteFill>
  );
};