Remotion Video Generator

import React from 'react';
import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion';
import { Highlight, themes } from 'prism-react-renderer';

interface CodeBlockProps {
  code: string;
  language?: string;
  title?: string;
  startFrame: number;
  durationInFrames: number;
  variant?: string;
  animation?: string;
  show_line_numbers?: boolean;
}

export const CodeBlock: React.FC<CodeBlockProps> = ({
  code,
  language = 'javascript',
  title,
  startFrame,
  durationInFrames,
  variant = '[[ config.variant ]]',
  animation = '[[ config.animation ]]',
  show_line_numbers = [[ 'true' if config.show_line_numbers else 'false' ]]
}) => {
  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;
  }

  [% if config.animation == 'fade_in' %]
  // Fade in animation
  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 = progress;
  const scale = 1;
  const translateY = 0;
  const blur = 0;

  [% elif config.animation == 'slide_up' %]
  // Slide up animation
  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 = progress;
  const scale = 1;
  const translateY = interpolate(progress, [0, 1], [50, 0]);
  const blur = 0;

  [% elif config.animation == 'scale_in' %]
  // Scale in animation
  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 = progress;
  const scale = interpolate(progress, [0, 1], [0.9, 1]);
  const translateY = 0;
  const blur = 0;

  [% elif config.animation == 'blur_in' %]
  // Blur to focus animation
  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 = progress;
  const scale = 1;
  const translateY = 0;
  const blur = interpolate(progress, [0, 1], [10, 0]);

  [% else %]
  // Default: fade in
  const opacity = interpolate(relativeFrame, [0, [[ motion.default_duration.frames ]]], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp'
  });
  const scale = 1;
  const translateY = 0;
  const blur = 0;
  [% endif %]

  // Exit animation
  const exitDuration = [[ motion.default_duration.frames ]];
  const exitProgress = interpolate(
    relativeFrame,
    [durationInFrames - exitDuration, durationInFrames],
    [1, 0],
    {
      extrapolateLeft: 'clamp',
      extrapolateRight: 'clamp'
    }
  );

  const finalOpacity = opacity * exitProgress;

  // Variant styles
  const variants = {
    minimal: {
      background: 'rgba(30, 35, 50, 0.95)',
      borderRadius: 12,
      border: 'none',
      padding: 20,
      boxShadow: '0 10px 40px rgba(0, 0, 0, 0.3)',
      maxWidth: '100%',
      maxHeight: '100%',
      overflow: 'hidden'
    },
    terminal: {
      background: 'rgba(20, 20, 20, 0.98)',
      borderRadius: 8,
      border: '1px solid rgba(255, 255, 255, 0.1)',
      padding: 30,
      boxShadow: '0 10px 40px rgba(0, 0, 0, 0.5)'
    },
    editor: {
      background: 'rgba(26, 31, 46, 0.98)',
      borderRadius: 12,
      border: '1px solid rgba(255, 255, 255, 0.05)',
      padding: 0,
      boxShadow: '0 20px 60px rgba(0, 0, 0, 0.4)'
    },
    glass: {
      background: '[[ colors.background.glass ]]',
      backdropFilter: 'blur(20px)',
      borderRadius: 16,
      border: '1px solid rgba(255, 255, 255, 0.1)',
      padding: 30,
      boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)'
    }
  };

  const variantStyle = variants[variant as keyof typeof variants] || variants.editor;

  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        transform: `scale(${scale}) translateY(${translateY}px)`,
        opacity: finalOpacity,
        filter: `blur(${blur}px)`,
        fontFamily: "'[[ "', '".join(typography.code_font.fonts) ]]'",
        overflow: 'hidden'
      }}
    >
      <Highlight
        theme={themes.nightOwl}
        code={code}
        language={language as any}
      >
        {({ className, style, tokens, getLineProps, getTokenProps }) => (
          <div style={variantStyle}>
            [% if config.title %]
            [% if config.variant == 'editor' %]
            {/* Editor title bar */}
            <div
              style={{
                background: 'rgba(0, 0, 0, 0.3)',
                padding: '12px 20px',
                borderTopLeftRadius: 12,
                borderTopRightRadius: 12,
                borderBottom: '1px solid rgba(255, 255, 255, 0.05)',
                display: 'flex',
                alignItems: 'center',
                gap: 8
              }}
            >
              {/* Window buttons */}
              <div style={{ display: 'flex', gap: 6 }}>
                <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#FF5F56' }} />
                <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#FFBD2E' }} />
                <div style={{ width: 12, height: 12, borderRadius: '50%', background: '#27C93F' }} />
              </div>
              <div
                style={{
                  fontSize: '[[ font_sizes.xs ]]',
                  color: '[[ colors.text.muted ]]',
                  marginLeft: 12,
                  fontFamily: "'[[ "', '".join(typography.body_font.fonts) ]]'"
                }}
              >
                [[ config.title ]]
              </div>
            </div>
            <div style={{ padding: 30 }}>
            [% else %]
            <div
              style={{
                fontSize: '[[ font_sizes.lg ]]',
                fontWeight: 600,
                color: '[[ colors.text.on_dark ]]',
                marginBottom: 20,
                fontFamily: "'[[ "', '".join(typography.body_font.fonts) ]]'"
              }}
            >
              [[ config.title ]]
            </div>
            [% endif %]
            [% else %]
            <div>
            [% endif %]
              {/* Code content with syntax highlighting */}
              <div style={{ display: 'flex', gap: 20 }}>
                {show_line_numbers && (
                  <div
                    style={{
                      color: 'rgba(255, 255, 255, 0.3)',
                      fontSize: '[[ font_sizes.sm ]]',
                      lineHeight: 1.8,
                      textAlign: 'right',
                      userSelect: 'none',
                      minWidth: 50
                    }}
                  >
                    {tokens.map((_, idx) => (
                      <div key={idx}>{idx + 1}</div>
                    ))}
                  </div>
                )}

                {/* Code with syntax highlighting */}
                <div
                  style={{
                    flex: 1,
                    fontSize: '[[ font_sizes.sm ]]',
                    lineHeight: 1.6,
                    overflow: 'auto',
                    maxHeight: '100%',
                    whiteSpace: 'pre'
                  }}
                >
                  {tokens.map((line, i) => (
                    <div key={i} {...getLineProps({ line })}>
                      {line.map((token, key) => (
                        <span key={key} {...getTokenProps({ token })} />
                      ))}
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        )}
      </Highlight>
    </div>
  );
};