Remotion Video Generator

{/* chuk-motion/src/chuk_motion/components/layouts/FocusStrip/template.tsx.j2 */}
import React from 'react';
import { AbsoluteFill, useCurrentFrame } from 'remotion';

interface FocusStripProps {
  main_content?: React.ReactNode;
  focus_content?: React.ReactNode;
  startFrame: number;
  durationInFrames: number;
  position?: string;
  strip_height?: number;
  padding?: number;
  gap?: number;
  border_width?: number;
  border_color?: string;
  border_radius?: number;
}

export const FocusStrip: React.FC<FocusStripProps> = ({
  main_content,
  focus_content,
  startFrame,
  durationInFrames,
  position = 'center',
  strip_height = 30,
  padding = parseInt('[[ spacing.spacing.xl ]]'),
  gap = parseInt('[[ spacing.spacing.md ]]'),
  border_width = parseInt('[[ spacing.border_width.medium ]]'),
  border_color = '[[ colors.border.medium ]]',
  border_radius = parseInt('[[ spacing.border_radius.md ]]')
}) => {
  const frame = useCurrentFrame();

  if (frame < startFrame || frame >= startFrame + durationInFrames) {
    return null;
  }

  const getStripPosition = () => {
    switch (position) {
      case 'top':
        return { top: padding, left: padding, right: padding };
      case 'bottom':
        return { bottom: padding, left: padding, right: padding };
      case 'center':
      default:
        return {
          top: '50%',
          left: padding,
          right: padding,
          transform: 'translateY(-50%)'
        };
    }
  };

  return (
    <AbsoluteFill style={{ pointerEvents: 'none' }}>
      {/* Background content (dimmed) */}
      {main_content && (
        <div style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          display: 'flex',
          overflow: 'hidden',
          opacity: 0.4,
          filter: 'blur([[ spacing.border_width.medium ]])',
        }}>
          {main_content}
        </div>
      )}

      {/* Focus strip */}
      {focus_content && (
        <div style={{
          position: 'absolute',
          ...getStripPosition(),
          height: `${strip_height}%`,
          width: `calc(100% - ${padding * 2}px)`,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          overflow: 'hidden',
          border: `${border_width}px solid ${border_color}`,
          borderRadius: border_radius,
          backgroundColor: '[[ colors.background.dark ]]',
          zIndex: 10,
        }}>
          {focus_content}
        </div>
      )}
    </AbsoluteFill>
  );
};