Remotion Video Generator

{/* chuk-motion/src/chuk_motion/components/overlays/TrueFocus/template.tsx.j2 */} import React, { useMemo } from 'react'; import { AbsoluteFill, useCurrentFrame, interpolate, spring, useVideoConfig } from 'remotion'; interface TrueFocusProps { text: string; fontSize?: 'xl' | '2xl' | '3xl' | '4xl'; fontWeight?: 'bold' | 'extrabold' | 'black'; textColor?: string; frameColor?: string; glowColor?: string; blurAmount?: number; wordDuration?: number; position?: 'center' | 'top' | 'bottom'; startFrame?: number; durationInFrames?: number; } export const TrueFocus: React.FC<TrueFocusProps> = ({ text = 'True Focus', fontSize = '3xl', fontWeight = 'black', textColor = '[[ colors.text.on_dark ]]', frameColor = '[[ colors.primary[0] ]]', glowColor = '[[ colors.primary[0] ]]', blurAmount = 5, wordDuration = 30, // frames per word position = 'center', startFrame = 0, durationInFrames = 150, }) => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); // Split text into words - MUST be called before any conditional returns const words = useMemo(() => text.split(' '), [text]); const wordCount = words.length; const relativeFrame = frame - startFrame; // Don't render if outside time range - AFTER all hooks if (frame < startFrame || frame >= startFrame + durationInFrames) { return null; } // Calculate which word is currently focused const cycleProgress = (relativeFrame / wordDuration) % wordCount; const currentWordIndex = Math.floor(cycleProgress); // Smooth transition progress for frame animation const transitionProgress = cycleProgress - currentWordIndex; const smoothTransition = spring({ frame: transitionProgress * fps / 2, // Adjust for smooth spring fps, config: { damping: [[ motion.default_spring.config.damping ]], stiffness: [[ motion.default_spring.config.stiffness ]], mass: [[ motion.default_spring.config.mass ]], }, }); // Overall fade in const fadeIn = interpolate(relativeFrame, [0, 20], [0, 1], { extrapolateRight: 'clamp', }); // Position styles const positionStyles = { center: { justifyContent: 'center', alignItems: 'center' }, top: { justifyContent: 'center', alignItems: 'flex-start', paddingTop: '[[ spacing.spacing['3xl'] ]]' }, bottom: { justifyContent: 'center', alignItems: 'flex-end', paddingBottom: '[[ spacing.spacing['3xl'] ]]' }, }; // Font size mapping const fontSizeMap = { 'xl': parseInt('[[ typography.font_sizes[typography.default_resolution].xl ]]'), '2xl': parseInt('[[ typography.font_sizes[typography.default_resolution]['2xl'] ]]'), '3xl': parseInt('[[ typography.font_sizes[typography.default_resolution]['3xl'] ]]'), '4xl': parseInt('[[ typography.font_sizes[typography.default_resolution]['4xl'] ]]'), }; const fontWeightMap = { 'bold': '[[ typography.font_weights.bold ]]', 'extrabold': '[[ typography.font_weights.extrabold ]]', 'black': '[[ typography.font_weights.black ]]', }; return ( <AbsoluteFill style={{ opacity: fadeIn, display: 'flex', ...positionStyles[position], pointerEvents: 'none', }} > <div style={{ position: 'relative', display: 'flex', flexDirection: 'row', gap: '[[ spacing.spacing.lg ]]', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center', padding: '[[ spacing.spacing.xl ]]', }} > {words.map((word, index) => { // Calculate blur for this word const isFocused = index === currentWordIndex; const blur = isFocused ? 0 : blurAmount; // Calculate frame position and size for focused word // Frame appears around the focused word with animated corners const isFrameTarget = index === currentWordIndex; return ( <div key={index} style={{ position: 'relative', fontSize: fontSizeMap[fontSize], fontWeight: fontWeightMap[fontWeight], fontFamily: "'[[ "', '".join(typography.primary_font.fonts) ]]'", color: textColor, filter: `blur(${blur}px)`, transition: `filter 0.3s ease`, letterSpacing: '[[ typography.letter_spacing.tight ]]', lineHeight: '[[ typography.line_heights.tight ]]', }} > {word} {/* Animated frame with corner brackets */} {isFrameTarget && ( <div style={{ position: 'absolute', inset: `-[[ spacing.spacing.sm ]]`, pointerEvents: 'none', opacity: smoothTransition, }} > {/* Top-left corner */} <div style={{ position: 'absolute', top: 0, left: 0, width: '[[ spacing.spacing.lg ]]', height: '[[ spacing.spacing.lg ]]', borderTop: `[[ spacing.border_width.thick ]] solid ${frameColor}`, borderLeft: `[[ spacing.border_width.thick ]] solid ${frameColor}`, borderRadius: '[[ spacing.border_radius.xs ]]', filter: `drop-shadow(0 0 [[ spacing.spacing.xs ]] ${glowColor})`, }} /> {/* Top-right corner */} <div style={{ position: 'absolute', top: 0, right: 0, width: '[[ spacing.spacing.lg ]]', height: '[[ spacing.spacing.lg ]]', borderTop: `[[ spacing.border_width.thick ]] solid ${frameColor}`, borderRight: `[[ spacing.border_width.thick ]] solid ${frameColor}`, borderRadius: '[[ spacing.border_radius.xs ]]', filter: `drop-shadow(0 0 [[ spacing.spacing.xs ]] ${glowColor})`, }} /> {/* Bottom-left corner */} <div style={{ position: 'absolute', bottom: 0, left: 0, width: '[[ spacing.spacing.lg ]]', height: '[[ spacing.spacing.lg ]]', borderBottom: `[[ spacing.border_width.thick ]] solid ${frameColor}`, borderLeft: `[[ spacing.border_width.thick ]] solid ${frameColor}`, borderRadius: '[[ spacing.border_radius.xs ]]', filter: `drop-shadow(0 0 [[ spacing.spacing.xs ]] ${glowColor})`, }} /> {/* Bottom-right corner */} <div style={{ position: 'absolute', bottom: 0, right: 0, width: '[[ spacing.spacing.lg ]]', height: '[[ spacing.spacing.lg ]]', borderBottom: `[[ spacing.border_width.thick ]] solid ${frameColor}`, borderRight: `[[ spacing.border_width.thick ]] solid ${frameColor}`, borderRadius: '[[ spacing.border_radius.xs ]]', filter: `drop-shadow(0 0 [[ spacing.spacing.xs ]] ${glowColor})`, }} /> </div> )} </div> ); })} </div> </AbsoluteFill> ); };