Remotion Video Generator

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

interface PixelTransitionProps {
  firstContent: React.ReactNode;
  secondContent: React.ReactNode;
  gridSize?: number;
  pixelColor?: string;
  transitionStart?: number;
  transitionDuration?: number;
  startFrame?: number;
  durationInFrames?: number;
}

export const PixelTransition: React.FC<PixelTransitionProps> = ({
  firstContent,
  secondContent,
  gridSize = 10,
  pixelColor = '[[ colors.primary[0] ]]',
  transitionStart = 60, // Start transition at 2 seconds (60 frames)
  transitionDuration = 30, // Transition lasts 1 second (30 frames)
  startFrame = 0,
  durationInFrames = 150,
}) => {
  const frame = useCurrentFrame();
  const { width, height } = useVideoConfig();

  // Generate pixel grid data - memoized to prevent recalculation
  // MUST be called before any conditional returns (React Rules of Hooks)
  const pixels = useMemo(() => {
    const pixelArray = [];
    for (let row = 0; row < gridSize; row++) {
      for (let col = 0; col < gridSize; col++) {
        pixelArray.push({
          id: `${row}-${col}`,
          row,
          col,
          // Random offset for staggered animation
          randomOffset: Math.random(),
        });
      }
    }
    return pixelArray;
  }, [gridSize]);

  const relativeFrame = frame - startFrame;

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

  // Calculate pixel size
  const pixelSize = 100 / gridSize;

  // Animation phases:
  // Phase 1: Pixels fade in (cover first content)
  // Phase 2: Switch content while pixels are visible
  // Phase 3: Pixels fade out (reveal second content)

  const phase1End = transitionStart + transitionDuration / 2;
  const phase2End = phase1End;
  const phase3End = phase2End + transitionDuration / 2;

  // Determine which content to show
  const showSecondContent = relativeFrame >= phase2End;

  return (
    <AbsoluteFill>
      {/* First Content - visible before transition midpoint */}
      {!showSecondContent && (
        <AbsoluteFill style={{ pointerEvents: 'none' }}>
          {firstContent}
        </AbsoluteFill>
      )}

      {/* Second Content - visible after transition midpoint */}
      {showSecondContent && (
        <AbsoluteFill style={{ pointerEvents: 'none' }}>
          {secondContent}
        </AbsoluteFill>
      )}

      {/* Pixel Grid Overlay */}
      <AbsoluteFill style={{ pointerEvents: 'none' }}>
        <svg width={width} height={height} style={{ position: 'absolute', top: 0, left: 0 }}>
          {pixels.map((pixel) => {
            // Stagger based on random offset
            const staggerDelay = pixel.randomOffset * (transitionDuration / 2);

            // Phase 1: Fade in
            const phase1Start = transitionStart + staggerDelay;
            const phase1Opacity = interpolate(
              relativeFrame,
              [phase1Start, phase1Start + 10],
              [0, 1],
              {
                extrapolateLeft: 'clamp',
                extrapolateRight: 'clamp',
              }
            );

            // Phase 3: Fade out
            const phase3Start = phase2End + staggerDelay;
            const phase3Opacity = interpolate(
              relativeFrame,
              [phase3Start, phase3Start + 10],
              [1, 0],
              {
                extrapolateLeft: 'clamp',
                extrapolateRight: 'clamp',
              }
            );

            // Combine opacities based on phase
            let opacity = 0;
            if (relativeFrame < transitionStart) {
              opacity = 0;
            } else if (relativeFrame < phase1End) {
              opacity = phase1Opacity;
            } else if (relativeFrame < phase2End) {
              opacity = 1;
            } else if (relativeFrame < phase3End) {
              opacity = phase3Opacity;
            } else {
              opacity = 0;
            }

            return (
              <rect
                key={pixel.id}
                x={`${pixel.col * pixelSize}%`}
                y={`${pixel.row * pixelSize}%`}
                width={`${pixelSize}%`}
                height={`${pixelSize}%`}
                fill={pixelColor}
                opacity={opacity}
              />
            );
          })}
        </svg>
      </AbsoluteFill>
    </AbsoluteFill>
  );
};