Remotion Video Generator

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

interface WebPageProps {
  html?: string;
  css?: string;
  baseStyles?: boolean;
  scale?: number;
  scrollY?: number;
  animateScroll?: boolean;
  scrollDuration?: number;
  theme?: 'light' | 'dark';
  startFrame?: number;
  durationInFrames?: number;
}

export const WebPage: React.FC<WebPageProps> = ({
  html = '<div style="padding: 40px; text-align: center;"><h1>Hello World</h1><p>This is a web page.</p></div>',
  css = '',
  baseStyles = true,
  scale = 1.0,
  scrollY = 0,
  animateScroll = false,
  scrollDuration = 60,
  theme = 'light',
  startFrame = 0,
  durationInFrames = 150
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

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

  const relativeFrame = frame - startFrame;

  // Entrance animation
  const entrance = spring({
    frame: relativeFrame,
    fps: fps,
    config: {
      damping: [[ motion.default_spring.config.damping ]],
      stiffness: [[ motion.default_spring.config.stiffness ]],
    },
  });

  const opacity = interpolate(relativeFrame, [0, 20], [0, 1], { extrapolateRight: 'clamp' });

  // Animated scroll
  const currentScrollY = animateScroll
    ? interpolate(relativeFrame, [0, scrollDuration], [0, scrollY], { extrapolateRight: 'clamp' })
    : scrollY;

  // Theme colors
  const isDark = theme === 'dark';
  const bgColor = isDark ? '[[ colors.background.dark ]]' : '[[ colors.background.light ]]';
  const textColor = isDark ? '[[ colors.text.on_dark ]]' : '[[ colors.text.on_light ]]';

  // Base styles to make HTML look good
  const defaultStyles = baseStyles ? `
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: '[[ "', '".join(typography.body_font.fonts) ]]';
      font-size: [[ typography.font_sizes[typography.default_resolution].base ]]px;
      line-height: [[ typography.line_heights.normal ]];
      color: ${textColor};
      background: ${bgColor};
      padding: [[ spacing.spacing.xl ]]px;
    }
    h1, h2, h3, h4, h5, h6 {
      font-family: '[[ "', '".join(typography.primary_font.fonts) ]]';
      font-weight: [[ typography.font_weights.bold ]];
      margin-bottom: [[ spacing.spacing.md ]]px;
      color: ${textColor};
    }
    h1 {
      font-size: [[ typography.font_sizes[typography.default_resolution]['2xl'] ]]px;
      margin-bottom: [[ spacing.spacing.lg ]]px;
    }
    h2 {
      font-size: [[ typography.font_sizes[typography.default_resolution].xl ]]px;
    }
    h3 {
      font-size: [[ typography.font_sizes[typography.default_resolution].lg ]]px;
    }
    p {
      margin-bottom: [[ spacing.spacing.md ]]px;
      line-height: [[ typography.line_heights.relaxed ]];
    }
    a {
      color: [[ colors.primary[0] ]];
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
    button {
      background: [[ colors.primary[0] ]];
      color: [[ colors.text.on_dark ]];
      border: none;
      padding: [[ spacing.spacing.sm ]]px [[ spacing.spacing.lg ]]px;
      border-radius: [[ spacing.border_radius.md ]]px;
      font-family: '[[ "', '".join(typography.body_font.fonts) ]]';
      font-size: [[ typography.font_sizes[typography.default_resolution].base ]]px;
      cursor: pointer;
    }
    img {
      max-width: 100%;
      height: auto;
    }
    code {
      background: ${isDark ? '[[ colors.background.glass ]]' : 'rgba(0, 0, 0, 0.05)'};
      padding: [[ spacing.border_width.medium ]]px [[ spacing.spacing.xs ]]px;
      border-radius: [[ spacing.border_radius.sm ]]px;
      font-family: '[[ "', '".join(typography.code_font.fonts) ]]';
      font-size: [[ typography.font_sizes[typography.default_resolution].sm ]]px;
    }
    pre {
      background: ${isDark ? '[[ colors.background.glass ]]' : 'rgba(0, 0, 0, 0.05)'};
      padding: [[ spacing.spacing.md ]]px;
      border-radius: [[ spacing.border_radius.md ]]px;
      overflow-x: auto;
      margin-bottom: [[ spacing.spacing.md ]]px;
    }
    pre code {
      background: transparent;
      padding: 0;
    }
    ul, ol {
      margin-left: [[ spacing.spacing.xl ]]px;
      margin-bottom: [[ spacing.spacing.md ]]px;
    }
    li {
      margin-bottom: [[ spacing.spacing.xs ]]px;
    }
  ` : '';

  // Combine default styles with custom CSS
  const fullCSS = defaultStyles + '\n' + css;

  return (
    <div
      style={{
        width: '100%',
        height: '100%',
        backgroundColor: bgColor,
        opacity,
        transform: `scale(${entrance * scale})`,
        overflow: 'hidden',
        position: 'relative',
      }}
    >
      <div
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          overflow: 'hidden',
        }}
      >
        <div
          style={{
            transform: `translateY(-${currentScrollY}px)`,
            width: '100%',
            minHeight: '100%',
          }}
        >
          <style>{fullCSS}</style>
          <div dangerouslySetInnerHTML={{ __html: html }} />
        </div>
      </div>
    </div>
  );
};