Remotion Video Generator

{/* chuk-motion/src/chuk_motion/components/overlays/TitleScene/template.tsx.j2 */} import React from 'react'; import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion'; interface TitleSceneProps { title: string; subtitle?: string; startFrame: number; durationInFrames: number; variant?: string; animation?: string; } export const TitleScene: React.FC<TitleSceneProps> = ({ title, subtitle, startFrame, durationInFrames, variant = 'bold', animation = 'fade' }) => { 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; } // Animation logic let opacity = 1; let transform = 'none'; let filter = 'none'; let displayText = title; if (animation === 'fade_zoom') { // Fade + Zoom 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 ]] } }); opacity = interpolate(progress, [0, 1], [0, 1]); const scale = interpolate(progress, [0, 1], [0.8, 1]); transform = `scale(${scale})`; } else if (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 ]] } }); opacity = interpolate(progress, [0, 1], [0, 1]); const translateY = interpolate(progress, [0, 1], [100, 0]); transform = `translateY(${translateY}px)`; } else if (animation === 'typewriter') { // Typewriter animation const charsToShow = Math.floor(interpolate(relativeFrame, [0, 60], [0, title.length], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' })); displayText = title.slice(0, charsToShow); opacity = 1; } else if (animation === 'blur_in') { // Blur to focus animation const progress = spring({ frame: relativeFrame, fps, config: { damping: 150, mass: 0.5, stiffness: 150 } }); opacity = interpolate(progress, [0, 1], [0, 1]); const blur = interpolate(progress, [0, 1], [20, 0]); filter = `blur(${blur}px)`; } else if (animation === 'fade_slide') { // Fade + Slide 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 ]] } }); opacity = interpolate(progress, [0, 1], [0, 1]); const translateX = interpolate(progress, [0, 1], [-50, 0]); transform = `translateX(${translateX}px)`; } else if (animation === 'zoom') { // Zoom 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 ]] } }); opacity = interpolate(progress, [0, 1], [0, 1]); const scale = interpolate(progress, [0, 1], [1.2, 1]); transform = `scale(${scale})`; } else { // Default: fade in opacity = interpolate(relativeFrame, [0, 20], [0, 1], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }); } // Fade out at the end const fadeOutStart = durationInFrames - 20; const fadeOut = interpolate( relativeFrame, [fadeOutStart, durationInFrames], [1, 0], { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' } ); const finalOpacity = opacity * fadeOut; // Variant styles using theme tokens const variants: Record<string, any> = { minimal: { background: '[[ colors.background.light ]]', textColor: '[[ colors.text.on_light ]]', accentColor: '[[ colors.primary[0] ]]' }, standard: { background: '[[ colors.gradient.primary_to_secondary ]]', textColor: '[[ colors.text.on_dark ]]', accentColor: '[[ colors.accent[0] ]]' }, bold: { background: '[[ colors.gradient.bold ]]', textColor: '[[ colors.text.on_dark ]]', accentColor: '[[ colors.text.on_dark ]]' }, kinetic: { background: '[[ colors.background.dark ]]', textColor: '[[ colors.text.on_dark ]]', accentColor: '[[ colors.accent[0] ]]' }, glass: { background: '[[ colors.background.glass ]]', textColor: '[[ colors.text.on_dark ]]', accentColor: '[[ colors.accent[0] ]]' } }; const variantStyle = variants[variant] || variants.bold; return ( <AbsoluteFill style={{ background: variantStyle.background, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', fontFamily: "'[[ "', '".join(typography.primary_font.fonts) ]]'", padding: parseInt('[[ spacing.spacing['4xl'] ]]') }} > <div style={{ opacity: finalOpacity, transform, filter, textAlign: 'center' }} > <h1 style={{ fontSize: variant === 'bold' ? parseInt('[[ typography.font_sizes[typography.default_resolution]['4xl'] ]]') : parseInt('[[ typography.font_sizes[typography.default_resolution]['2xl'] ]]'), fontWeight: variant === 'kinetic' ? parseInt('[[ typography.font_weights.black ]]') : parseInt('[[ typography.font_weights.bold ]]'), color: variantStyle.textColor, margin: 0, lineHeight: parseFloat('[[ typography.line_heights.tight ]]'), letterSpacing: '[[ typography.letter_spacing.tight ]]', textTransform: variant === 'kinetic' ? 'uppercase' : 'none', maxWidth: 1200 }} > {displayText} </h1> {subtitle && ( <p style={{ fontSize: parseInt('[[ typography.font_sizes[typography.default_resolution].lg ]]'), fontWeight: parseInt('[[ typography.font_weights.medium ]]'), color: variantStyle.accentColor, margin: '[[ spacing.spacing.xl ]] 0 0 0', lineHeight: parseFloat('[[ typography.line_heights.snug ]]'), maxWidth: 900 }} > {subtitle} </p> )} </div> </AbsoluteFill> ); };