ugcinc-render 1.7.0 → 1.8.1

package/dist/index.d.mts

@@ -1071,6 +1071,112 @@ declare function isDeduplicationLevel(input: DeduplicationInput): input is Dedup
  */
 declare function resolveDeduplicationConfig(input: DeduplicationInput): DeduplicationConfig;
 
+/**
+ * Caption types for auto-captioning functionality
+ *
+ * These types are used by both the CaptionOverlay component (client + server)
+ * and the AutoCaptionComposition for rendering captioned videos.
+ */
+/**
+ * Caption word with timing information from transcription
+ */
+interface CaptionWord {
+    /** The word text */
+    word: string;
+    /** Start time in milliseconds */
+    startMs: number;
+    /** End time in milliseconds */
+    endMs: number;
+}
+/**
+ * Caption page - a group of words displayed together
+ */
+interface CaptionPage {
+    /** Words in this page */
+    words: CaptionWord[];
+    /** Start time of first word in ms */
+    startMs: number;
+    /** End time of last word in ms */
+    endMs: number;
+}
+/**
+ * Caption style preset names
+ */
+type CaptionPreset = 'hormozi' | 'minimal' | 'bold-pop' | 'clean' | 'neon';
+/**
+ * Caption vertical position on screen
+ */
+type CaptionPosition = 'top' | 'center' | 'bottom';
+/**
+ * Caption font weight options
+ */
+type CaptionFontWeight = 'normal' | 'bold' | 'black';
+/**
+ * Full caption style configuration
+ */
+interface CaptionStyle {
+    /** Preset name (if used, provides defaults for other fields) */
+    preset?: CaptionPreset;
+    /** Google Font name (e.g., 'Montserrat', 'Inter') */
+    fontName: string;
+    /** Font size in pixels (relative to 1920p height) */
+    fontSize: number;
+    /** Font weight */
+    fontWeight: CaptionFontWeight;
+    /** Text color for inactive words */
+    fontColor: string;
+    /** Text color for the currently active/highlighted word */
+    highlightColor: string;
+    /** Stroke/outline color */
+    strokeColor: string;
+    /** Stroke width in pixels */
+    strokeWidth: number;
+    /** Background color (hex) - omit for transparent */
+    backgroundColor?: string;
+    /** Background opacity (0-1) */
+    backgroundOpacity?: number;
+    /** Background border radius in pixels */
+    backgroundBorderRadius?: number;
+    /** Vertical position on screen */
+    position: CaptionPosition;
+    /** Vertical offset in pixels from position edge */
+    yOffset: number;
+    /** Max width as percentage of video width (0-100) */
+    maxWidth: number;
+    /** Enable bounce/scale animation on active word */
+    enableAnimation: boolean;
+    /** Maximum words per caption page/screen */
+    wordsPerPage: number;
+}
+/**
+ * Props for AutoCaptionComposition
+ */
+interface AutoCaptionCompositionProps {
+    /** Video source URL */
+    videoUrl: string;
+    /** Video width in pixels */
+    width: number;
+    /** Video height in pixels */
+    height: number;
+    /** Video duration in milliseconds */
+    durationMs: number;
+    /** Caption words with timing */
+    captions: CaptionWord[];
+    /** Caption styling configuration */
+    style: CaptionStyle;
+}
+/**
+ * Props for CaptionOverlay component
+ */
+interface CaptionOverlayProps {
+    /** Caption words with timing */
+    captions: CaptionWord[];
+    /** Caption styling configuration */
+    style: CaptionStyle;
+    /** Override current time for preview mode (ms) */
+    previewTimeMs?: number;
+}
+
 interface ImageEditorCompositionProps {
     /** The editor configuration to render (legacy format with pre-resolved segments) */
     config?: ImageEditorConfig;
@@ -1171,6 +1277,16 @@ interface VideoEditorCompositionProps {
  */
 declare function VideoEditorComposition({ config, sources, textContent, }: VideoEditorCompositionProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * AutoCaptionComposition renders a video with synchronized caption overlay
+ */
+declare function AutoCaptionComposition({ videoUrl, captions, style, }: AutoCaptionCompositionProps): react_jsx_runtime.JSX.Element;
+/**
+ * AutoCaptionComposition with standard Video component
+ * Use this variant for client-side preview where OffthreadVideo may not work
+ */
+declare function AutoCaptionCompositionWithVideo({ videoUrl, captions, style, }: AutoCaptionCompositionProps): react_jsx_runtime.JSX.Element;
+
 interface TextElementProps {
     segment: TextSegment;
     /** Optional scale for high-DPI rendering */
@@ -1236,6 +1352,11 @@ interface VideoElementProps {
  */
 declare function VideoElement({ segment, src, startFrame, durationInFrames, scale }: VideoElementProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * CaptionOverlay renders animated captions synchronized with video playback
+ */
+declare function CaptionOverlay({ captions, style, previewTimeMs }: CaptionOverlayProps): react_jsx_runtime.JSX.Element | null;
+
 /**
  * Font utilities for the rendering system
  */
@@ -1592,6 +1713,45 @@ declare function generateSegmentId(): string;
  */
 declare function generateOverlayId(): string;
 
+/**
+ * Caption style presets and resolution utilities
+ *
+ * Provides TikTok-style caption presets and a function to resolve
+ * partial config into a complete CaptionStyle object.
+ */
+
+/**
+ * Predefined caption style presets
+ *
+ * Font sizes are designed for 1920p height and scale proportionally.
+ * maxWidth is a percentage of video width (0-100).
+ */
+declare const CAPTION_PRESETS: Record<CaptionPreset, Omit<CaptionStyle, 'preset'>>;
+/**
+ * Default caption style (used when no preset or custom values provided)
+ */
+declare const DEFAULT_CAPTION_STYLE: Omit<CaptionStyle, "preset">;
+/**
+ * Resolve a partial caption style config into a complete CaptionStyle object
+ *
+ * Priority:
+ * 1. Explicit values in the input style
+ * 2. Preset values (if preset is specified)
+ * 3. Default values (hormozi preset)
+ *
+ * @param style - Partial caption style configuration
+ * @returns Complete CaptionStyle object with all fields populated
+ */
+declare function resolveCaptionStyle(style: Partial<CaptionStyle> | undefined): CaptionStyle;
+/**
+ * Get all available preset names
+ */
+declare function getCaptionPresetNames(): CaptionPreset[];
+/**
+ * Check if a string is a valid caption preset name
+ */
+declare function isValidCaptionPreset(name: string): name is CaptionPreset;
+
 /**
  * Hook exports for ugcinc-render
  *
@@ -1654,4 +1814,4 @@ declare function useResolvedPositions(elements: ImageEditorElement[], textValues
 
 declare const RenderRoot: React.FC;
 
-export { APPLE_EMOJI_FONT, type Acceleration, type AudioConfig, type AudioSegment, type BaseEditorConfig, type BaseSegment, type BlendMode, type BorderRadiusConfig, type Channel, type ColorFilterConfig, type ColorShiftConfig, type CropAxisConfig, type CropBoundary, type CropBounds, type CropConfig, type CuttingConfig, DEDUPLICATION_LEVELS, DIMENSION_PRESETS, type DeduplicationConfig, type DeduplicationInput, type DeduplicationLevel, type DiagonalFilterConfig, type DiagonalFilterType, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, type EnhanceLevel, type EnhancementConfig, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type FrameManipulationConfig, type GifOverlayConfig, type GifSource, type GradientOverlayConfig, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, LEVEL_1_CONFIG, LEVEL_2_CONFIG, LEVEL_3_CONFIG, LEVEL_4_CONFIG, LEVEL_5_CONFIG, type LensCorrectionConfig, type MobileEncodingConfig, type ParticleOverlayConfig, type PhoneConfig, type PhoneModel, type PhoneType, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RenderRoot, type Segment, type SegmentTimelinePosition, type SegmentType, type SpeedConfig, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextStyleProperties, type TextWrap, type TimeMode, type TimeValue, type TraceRemovalConfig, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoCodec, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoExtension, type VideoSegment, type VisualAdjustmentsConfig, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateCropBounds, calculateEstimatedDuration, calculateFitDimensions, calculateLineWidth, calculateTimelineContentEnd, canSetAsReference, debugFontStatus, defaultOffset, formatTime, generateOverlayId, generateSegmentId, getBaseSegments, getBorderRadii, getDependentElements, getFontFamily, getOverlays, getReferenceElementX, getReferenceElementY, getSegmentTimelinePosition, hexToRgba, isDeduplicationLevel, isDynamicCropEnabled, isSegmentVisibleAtTime, parseHexColor, parseTime, preloadFonts, resolveDeduplicationConfig, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };
+export { APPLE_EMOJI_FONT, type Acceleration, type AudioConfig, type AudioSegment, AutoCaptionComposition, type AutoCaptionCompositionProps, AutoCaptionCompositionWithVideo, type BaseEditorConfig, type BaseSegment, type BlendMode, type BorderRadiusConfig, CAPTION_PRESETS, type CaptionFontWeight, CaptionOverlay, type CaptionOverlayProps, type CaptionPage, type CaptionPosition, type CaptionPreset, type CaptionStyle, type CaptionWord, type Channel, type ColorFilterConfig, type ColorShiftConfig, type CropAxisConfig, type CropBoundary, type CropBounds, type CropConfig, type CuttingConfig, DEDUPLICATION_LEVELS, DEFAULT_CAPTION_STYLE, DIMENSION_PRESETS, type DeduplicationConfig, type DeduplicationInput, type DeduplicationLevel, type DiagonalFilterConfig, type DiagonalFilterType, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, type EnhanceLevel, type EnhancementConfig, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type FrameManipulationConfig, type GifOverlayConfig, type GifSource, type GradientOverlayConfig, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, LEVEL_1_CONFIG, LEVEL_2_CONFIG, LEVEL_3_CONFIG, LEVEL_4_CONFIG, LEVEL_5_CONFIG, type LensCorrectionConfig, type MobileEncodingConfig, type ParticleOverlayConfig, type PhoneConfig, type PhoneModel, type PhoneType, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RenderRoot, type Segment, type SegmentTimelinePosition, type SegmentType, type SpeedConfig, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextStyleProperties, type TextWrap, type TimeMode, type TimeValue, type TraceRemovalConfig, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoCodec, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoExtension, type VideoSegment, type VisualAdjustmentsConfig, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateCropBounds, calculateEstimatedDuration, calculateFitDimensions, calculateLineWidth, calculateTimelineContentEnd, canSetAsReference, debugFontStatus, defaultOffset, formatTime, generateOverlayId, generateSegmentId, getBaseSegments, getBorderRadii, getCaptionPresetNames, getDependentElements, getFontFamily, getOverlays, getReferenceElementX, getReferenceElementY, getSegmentTimelinePosition, hexToRgba, isDeduplicationLevel, isDynamicCropEnabled, isSegmentVisibleAtTime, isValidCaptionPreset, parseHexColor, parseTime, preloadFonts, resolveCaptionStyle, resolveDeduplicationConfig, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };

package/dist/index.d.ts

@@ -1071,6 +1071,112 @@ declare function isDeduplicationLevel(input: DeduplicationInput): input is Dedup
  */
 declare function resolveDeduplicationConfig(input: DeduplicationInput): DeduplicationConfig;
 
+/**
+ * Caption types for auto-captioning functionality
+ *
+ * These types are used by both the CaptionOverlay component (client + server)
+ * and the AutoCaptionComposition for rendering captioned videos.
+ */
+/**
+ * Caption word with timing information from transcription
+ */
+interface CaptionWord {
+    /** The word text */
+    word: string;
+    /** Start time in milliseconds */
+    startMs: number;
+    /** End time in milliseconds */
+    endMs: number;
+}
+/**
+ * Caption page - a group of words displayed together
+ */
+interface CaptionPage {
+    /** Words in this page */
+    words: CaptionWord[];
+    /** Start time of first word in ms */
+    startMs: number;
+    /** End time of last word in ms */
+    endMs: number;
+}
+/**
+ * Caption style preset names
+ */
+type CaptionPreset = 'hormozi' | 'minimal' | 'bold-pop' | 'clean' | 'neon';
+/**
+ * Caption vertical position on screen
+ */
+type CaptionPosition = 'top' | 'center' | 'bottom';
+/**
+ * Caption font weight options
+ */
+type CaptionFontWeight = 'normal' | 'bold' | 'black';
+/**
+ * Full caption style configuration
+ */
+interface CaptionStyle {
+    /** Preset name (if used, provides defaults for other fields) */
+    preset?: CaptionPreset;
+    /** Google Font name (e.g., 'Montserrat', 'Inter') */
+    fontName: string;
+    /** Font size in pixels (relative to 1920p height) */
+    fontSize: number;
+    /** Font weight */
+    fontWeight: CaptionFontWeight;
+    /** Text color for inactive words */
+    fontColor: string;
+    /** Text color for the currently active/highlighted word */
+    highlightColor: string;
+    /** Stroke/outline color */
+    strokeColor: string;
+    /** Stroke width in pixels */
+    strokeWidth: number;
+    /** Background color (hex) - omit for transparent */
+    backgroundColor?: string;
+    /** Background opacity (0-1) */
+    backgroundOpacity?: number;
+    /** Background border radius in pixels */
+    backgroundBorderRadius?: number;
+    /** Vertical position on screen */
+    position: CaptionPosition;
+    /** Vertical offset in pixels from position edge */
+    yOffset: number;
+    /** Max width as percentage of video width (0-100) */
+    maxWidth: number;
+    /** Enable bounce/scale animation on active word */
+    enableAnimation: boolean;
+    /** Maximum words per caption page/screen */
+    wordsPerPage: number;
+}
+/**
+ * Props for AutoCaptionComposition
+ */
+interface AutoCaptionCompositionProps {
+    /** Video source URL */
+    videoUrl: string;
+    /** Video width in pixels */
+    width: number;
+    /** Video height in pixels */
+    height: number;
+    /** Video duration in milliseconds */
+    durationMs: number;
+    /** Caption words with timing */
+    captions: CaptionWord[];
+    /** Caption styling configuration */
+    style: CaptionStyle;
+}
+/**
+ * Props for CaptionOverlay component
+ */
+interface CaptionOverlayProps {
+    /** Caption words with timing */
+    captions: CaptionWord[];
+    /** Caption styling configuration */
+    style: CaptionStyle;
+    /** Override current time for preview mode (ms) */
+    previewTimeMs?: number;
+}
+
 interface ImageEditorCompositionProps {
     /** The editor configuration to render (legacy format with pre-resolved segments) */
     config?: ImageEditorConfig;
@@ -1171,6 +1277,16 @@ interface VideoEditorCompositionProps {
  */
 declare function VideoEditorComposition({ config, sources, textContent, }: VideoEditorCompositionProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * AutoCaptionComposition renders a video with synchronized caption overlay
+ */
+declare function AutoCaptionComposition({ videoUrl, captions, style, }: AutoCaptionCompositionProps): react_jsx_runtime.JSX.Element;
+/**
+ * AutoCaptionComposition with standard Video component
+ * Use this variant for client-side preview where OffthreadVideo may not work
+ */
+declare function AutoCaptionCompositionWithVideo({ videoUrl, captions, style, }: AutoCaptionCompositionProps): react_jsx_runtime.JSX.Element;
+
 interface TextElementProps {
     segment: TextSegment;
     /** Optional scale for high-DPI rendering */
@@ -1236,6 +1352,11 @@ interface VideoElementProps {
  */
 declare function VideoElement({ segment, src, startFrame, durationInFrames, scale }: VideoElementProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * CaptionOverlay renders animated captions synchronized with video playback
+ */
+declare function CaptionOverlay({ captions, style, previewTimeMs }: CaptionOverlayProps): react_jsx_runtime.JSX.Element | null;
+
 /**
  * Font utilities for the rendering system
  */
@@ -1592,6 +1713,45 @@ declare function generateSegmentId(): string;
  */
 declare function generateOverlayId(): string;
 
+/**
+ * Caption style presets and resolution utilities
+ *
+ * Provides TikTok-style caption presets and a function to resolve
+ * partial config into a complete CaptionStyle object.
+ */
+
+/**
+ * Predefined caption style presets
+ *
+ * Font sizes are designed for 1920p height and scale proportionally.
+ * maxWidth is a percentage of video width (0-100).
+ */
+declare const CAPTION_PRESETS: Record<CaptionPreset, Omit<CaptionStyle, 'preset'>>;
+/**
+ * Default caption style (used when no preset or custom values provided)
+ */
+declare const DEFAULT_CAPTION_STYLE: Omit<CaptionStyle, "preset">;
+/**
+ * Resolve a partial caption style config into a complete CaptionStyle object
+ *
+ * Priority:
+ * 1. Explicit values in the input style
+ * 2. Preset values (if preset is specified)
+ * 3. Default values (hormozi preset)
+ *
+ * @param style - Partial caption style configuration
+ * @returns Complete CaptionStyle object with all fields populated
+ */
+declare function resolveCaptionStyle(style: Partial<CaptionStyle> | undefined): CaptionStyle;
+/**
+ * Get all available preset names
+ */
+declare function getCaptionPresetNames(): CaptionPreset[];
+/**
+ * Check if a string is a valid caption preset name
+ */
+declare function isValidCaptionPreset(name: string): name is CaptionPreset;
+
 /**
  * Hook exports for ugcinc-render
  *
@@ -1654,4 +1814,4 @@ declare function useResolvedPositions(elements: ImageEditorElement[], textValues
 
 declare const RenderRoot: React.FC;
 
-export { APPLE_EMOJI_FONT, type Acceleration, type AudioConfig, type AudioSegment, type BaseEditorConfig, type BaseSegment, type BlendMode, type BorderRadiusConfig, type Channel, type ColorFilterConfig, type ColorShiftConfig, type CropAxisConfig, type CropBoundary, type CropBounds, type CropConfig, type CuttingConfig, DEDUPLICATION_LEVELS, DIMENSION_PRESETS, type DeduplicationConfig, type DeduplicationInput, type DeduplicationLevel, type DiagonalFilterConfig, type DiagonalFilterType, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, type EnhanceLevel, type EnhancementConfig, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type FrameManipulationConfig, type GifOverlayConfig, type GifSource, type GradientOverlayConfig, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, LEVEL_1_CONFIG, LEVEL_2_CONFIG, LEVEL_3_CONFIG, LEVEL_4_CONFIG, LEVEL_5_CONFIG, type LensCorrectionConfig, type MobileEncodingConfig, type ParticleOverlayConfig, type PhoneConfig, type PhoneModel, type PhoneType, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RenderRoot, type Segment, type SegmentTimelinePosition, type SegmentType, type SpeedConfig, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextStyleProperties, type TextWrap, type TimeMode, type TimeValue, type TraceRemovalConfig, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoCodec, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoExtension, type VideoSegment, type VisualAdjustmentsConfig, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateCropBounds, calculateEstimatedDuration, calculateFitDimensions, calculateLineWidth, calculateTimelineContentEnd, canSetAsReference, debugFontStatus, defaultOffset, formatTime, generateOverlayId, generateSegmentId, getBaseSegments, getBorderRadii, getDependentElements, getFontFamily, getOverlays, getReferenceElementX, getReferenceElementY, getSegmentTimelinePosition, hexToRgba, isDeduplicationLevel, isDynamicCropEnabled, isSegmentVisibleAtTime, parseHexColor, parseTime, preloadFonts, resolveDeduplicationConfig, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };
+export { APPLE_EMOJI_FONT, type Acceleration, type AudioConfig, type AudioSegment, AutoCaptionComposition, type AutoCaptionCompositionProps, AutoCaptionCompositionWithVideo, type BaseEditorConfig, type BaseSegment, type BlendMode, type BorderRadiusConfig, CAPTION_PRESETS, type CaptionFontWeight, CaptionOverlay, type CaptionOverlayProps, type CaptionPage, type CaptionPosition, type CaptionPreset, type CaptionStyle, type CaptionWord, type Channel, type ColorFilterConfig, type ColorShiftConfig, type CropAxisConfig, type CropBoundary, type CropBounds, type CropConfig, type CuttingConfig, DEDUPLICATION_LEVELS, DEFAULT_CAPTION_STYLE, DIMENSION_PRESETS, type DeduplicationConfig, type DeduplicationInput, type DeduplicationLevel, type DiagonalFilterConfig, type DiagonalFilterType, type DimensionPreset, type DimensionPresetKey, type DynamicCropConfig, type EditorConfig, type EditorSegment, type EnhanceLevel, type EnhancementConfig, FONT_FAMILIES, FONT_URLS, type FitDimensions, type FitMode, type FontType, type FontWeight, type FrameManipulationConfig, type GifOverlayConfig, type GifSource, type GradientOverlayConfig, type HorizontalAnchor, type HorizontalSelfAnchor, type Hyphenation, IMAGE_DEFAULTS, ImageEditorComposition, type ImageEditorCompositionProps, type ImageEditorConfig, type ImageEditorElement, type ImageEditorNodeConfig, ImageElement, type ImageElementProps, type ImageSegment, LEVEL_1_CONFIG, LEVEL_2_CONFIG, LEVEL_3_CONFIG, LEVEL_4_CONFIG, LEVEL_5_CONFIG, type LensCorrectionConfig, type MobileEncodingConfig, type ParticleOverlayConfig, type PhoneConfig, type PhoneModel, type PhoneType, type PictureSegment, type PositionResolutionError, type PositionResolutionResult, type RelativePositionConfigX, type RelativePositionConfigY, RenderRoot, type Segment, type SegmentTimelinePosition, type SegmentType, type SpeedConfig, type StaticSegment, TEXT_DEFAULTS, type TextAlignment, type TextDirection, TextElement, type TextElementProps, type TextOverflow, type TextSegment, type TextStyleProperties, type TextWrap, type TimeMode, type TimeValue, type TraceRemovalConfig, VIDEO_DEFAULTS, VISUAL_DEFAULTS, type VerticalAlignment, type VerticalAnchor, type VerticalSelfAnchor, type VideoCodec, type VideoEditorAudioSegment, type VideoEditorBaseSegment, type VideoEditorChannel, VideoEditorComposition, type VideoEditorCompositionProps, type VideoEditorConfig, type VideoEditorImageSegment, type VideoEditorNodeConfig, type VideoEditorSegment, type VideoEditorTextSegment, type VideoEditorVideoSegment, type VideoEditorVisualSegment, VideoElement, type VideoElementProps, type VideoExtension, type VideoSegment, type VisualAdjustmentsConfig, type VisualSegment, type VisualSegmentUnion, type WordBreak, applyImageDefaults, applyTextDefaults, applyVideoDefaults, areFontsLoaded, buildFontString, calculateAutoWidthDimensions, calculateCropBounds, calculateEstimatedDuration, calculateFitDimensions, calculateLineWidth, calculateTimelineContentEnd, canSetAsReference, debugFontStatus, defaultOffset, formatTime, generateOverlayId, generateSegmentId, getBaseSegments, getBorderRadii, getCaptionPresetNames, getDependentElements, getFontFamily, getOverlays, getReferenceElementX, getReferenceElementY, getSegmentTimelinePosition, hexToRgba, isDeduplicationLevel, isDynamicCropEnabled, isSegmentVisibleAtTime, isValidCaptionPreset, parseHexColor, parseTime, preloadFonts, resolveCaptionStyle, resolveDeduplicationConfig, resolveElementPositions, useFontsLoaded, useImageLoader, useImagePreloader, useResolvedPositions, wrapText };

package/dist/index.js

@@ -31,7 +31,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   APPLE_EMOJI_FONT: () => APPLE_EMOJI_FONT,
+  AutoCaptionComposition: () => AutoCaptionComposition,
+  AutoCaptionCompositionWithVideo: () => AutoCaptionCompositionWithVideo,
+  CAPTION_PRESETS: () => CAPTION_PRESETS,
+  CaptionOverlay: () => CaptionOverlay,
   DEDUPLICATION_LEVELS: () => DEDUPLICATION_LEVELS,
+  DEFAULT_CAPTION_STYLE: () => DEFAULT_CAPTION_STYLE,
   DIMENSION_PRESETS: () => DIMENSION_PRESETS,
   FONT_FAMILIES: () => FONT_FAMILIES,
   FONT_URLS: () => FONT_URLS,
@@ -69,6 +74,7 @@ __export(index_exports, {
   generateSegmentId: () => generateSegmentId,
   getBaseSegments: () => getBaseSegments,
   getBorderRadii: () => getBorderRadii,
+  getCaptionPresetNames: () => getCaptionPresetNames,
   getDependentElements: () => getDependentElements,
   getFontFamily: () => getFontFamily,
   getOverlays: () => getOverlays,
@@ -79,9 +85,11 @@ __export(index_exports, {
   isDeduplicationLevel: () => isDeduplicationLevel,
   isDynamicCropEnabled: () => isDynamicCropEnabled,
   isSegmentVisibleAtTime: () => isSegmentVisibleAtTime,
+  isValidCaptionPreset: () => isValidCaptionPreset,
   parseHexColor: () => parseHexColor,
   parseTime: () => parseTime,
   preloadFonts: () => preloadFonts,
+  resolveCaptionStyle: () => resolveCaptionStyle,
   resolveDeduplicationConfig: () => resolveDeduplicationConfig,
   resolveElementPositions: () => resolveElementPositions,
   useFontsLoaded: () => useFontsLoaded,
@@ -2051,6 +2059,194 @@ function VideoEditorComposition({
   ] });
 }
 
+// src/compositions/AutoCaptionComposition.tsx
+var import_remotion6 = require("remotion");
+
+// src/components/CaptionOverlay.tsx
+var import_react6 = require("react");
+var import_remotion5 = require("remotion");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function createPages(words, wordsPerPage) {
+  const pages = [];
+  for (let i = 0; i < words.length; i += wordsPerPage) {
+    const pageWords = words.slice(i, i + wordsPerPage);
+    if (pageWords.length > 0) {
+      pages.push({
+        words: pageWords,
+        startMs: pageWords[0].startMs,
+        endMs: pageWords[pageWords.length - 1].endMs
+      });
+    }
+  }
+  return pages;
+}
+function hexToRgba2(hex, opacity) {
+  const cleanHex = hex.replace("#", "");
+  const r = parseInt(cleanHex.substring(0, 2), 16);
+  const g = parseInt(cleanHex.substring(2, 4), 16);
+  const b = parseInt(cleanHex.substring(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
+function CaptionOverlay({ captions, style, previewTimeMs }) {
+  const frame = (0, import_remotion5.useCurrentFrame)();
+  const { fps, width, height } = (0, import_remotion5.useVideoConfig)();
+  const currentMs = previewTimeMs ?? frame / fps * 1e3;
+  const pages = (0, import_react6.useMemo)(
+    () => createPages(captions, style.wordsPerPage),
+    [captions, style.wordsPerPage]
+  );
+  const currentPage = pages.find(
+    (page) => currentMs >= page.startMs && currentMs <= page.endMs
+  );
+  if (!currentPage) return null;
+  const maxWidthPx = style.maxWidth / 100 * width;
+  const scaleFactor = height / 1920;
+  const scaledFontSize = style.fontSize * scaleFactor;
+  const scaledStrokeWidth = style.strokeWidth * scaleFactor;
+  const scaledYOffset = style.yOffset * scaleFactor;
+  const scaledBorderRadius = (style.backgroundBorderRadius ?? 0) * scaleFactor;
+  const getPositionStyles = () => {
+    const base = {
+      position: "absolute",
+      left: "50%"
+    };
+    switch (style.position) {
+      case "top":
+        return {
+          ...base,
+          top: scaledYOffset,
+          transform: "translateX(-50%)"
+        };
+      case "center":
+        return {
+          ...base,
+          top: "50%",
+          transform: "translate(-50%, -50%)"
+        };
+      case "bottom":
+      default:
+        return {
+          ...base,
+          bottom: scaledYOffset,
+          transform: "translateX(-50%)"
+        };
+    }
+  };
+  const containerStyles = {
+    ...getPositionStyles(),
+    maxWidth: maxWidthPx,
+    textAlign: "center",
+    // Add padding if background is enabled
+    padding: style.backgroundColor ? `${scaledFontSize * 0.3}px ${scaledFontSize * 0.5}px` : 0,
+    // Background styling
+    backgroundColor: style.backgroundColor ? hexToRgba2(style.backgroundColor, style.backgroundOpacity ?? 0.7) : "transparent",
+    borderRadius: scaledBorderRadius
+  };
+  const numericFontWeight = style.fontWeight === "black" ? 900 : style.fontWeight === "bold" ? 700 : 400;
+  const buildStrokeShadow = () => {
+    if (scaledStrokeWidth <= 0) return "none";
+    const sw = scaledStrokeWidth;
+    const sc = style.strokeColor;
+    return `
+      -${sw}px -${sw}px 0 ${sc},
+      ${sw}px -${sw}px 0 ${sc},
+      -${sw}px ${sw}px 0 ${sc},
+      ${sw}px ${sw}px 0 ${sc},
+      0 -${sw}px 0 ${sc},
+      0 ${sw}px 0 ${sc},
+      -${sw}px 0 0 ${sc},
+      ${sw}px 0 0 ${sc}
+    `;
+  };
+  const textContainerStyles = {
+    fontFamily: `"${style.fontName}", sans-serif`,
+    fontSize: scaledFontSize,
+    fontWeight: numericFontWeight,
+    lineHeight: 1.2,
+    wordBreak: "break-word",
+    textShadow: buildStrokeShadow()
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: containerStyles, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: textContainerStyles, children: currentPage.words.map((word, index) => {
+    const isActive = currentMs >= word.startMs && currentMs <= word.endMs;
+    const color = isActive ? style.highlightColor : style.fontColor;
+    let scale = 1;
+    if (style.enableAnimation && isActive) {
+      const wordDuration = word.endMs - word.startMs;
+      if (wordDuration > 0) {
+        const progress = (currentMs - word.startMs) / wordDuration;
+        scale = (0, import_remotion5.interpolate)(
+          progress,
+          [0, 0.15, 0.3, 1],
+          [1, 1.15, 1.05, 1],
+          {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp"
+          }
+        );
+      }
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "span",
+      {
+        style: {
+          color,
+          display: "inline-block",
+          transform: `scale(${scale})`,
+          transformOrigin: "center center"
+        },
+        children: [
+          word.word,
+          index < currentPage.words.length - 1 ? " " : ""
+        ]
+      },
+      `${word.word}-${word.startMs}-${index}`
+    );
+  }) }) });
+}
+
+// src/compositions/AutoCaptionComposition.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function AutoCaptionComposition({
+  videoUrl,
+  captions,
+  style
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_remotion6.AbsoluteFill, { style: { backgroundColor: "#000000" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_remotion6.OffthreadVideo,
+      {
+        src: videoUrl,
+        style: {
+          width: "100%",
+          height: "100%",
+          objectFit: "contain"
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CaptionOverlay, { captions, style })
+  ] });
+}
+function AutoCaptionCompositionWithVideo({
+  videoUrl,
+  captions,
+  style
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_remotion6.AbsoluteFill, { style: { backgroundColor: "#000000" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_remotion6.Video,
+      {
+        src: videoUrl,
+        style: {
+          width: "100%",
+          height: "100%",
+          objectFit: "contain"
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CaptionOverlay, { captions, style })
+  ] });
+}
+
 // src/utils/fit.ts
 function calculateFitDimensions({
   sourceWidth,
@@ -2205,11 +2401,140 @@ function generateOverlayId() {
   return `overlay-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
 }
 
+// src/utils/captionPresets.ts
+var CAPTION_PRESETS = {
+  /**
+   * Hormozi style - bold, attention-grabbing captions
+   * Yellow highlight on white text with thick black stroke
+   */
+  hormozi: {
+    fontName: "Montserrat",
+    fontSize: 80,
+    fontWeight: "black",
+    fontColor: "#FFFFFF",
+    highlightColor: "#FFFF00",
+    strokeColor: "#000000",
+    strokeWidth: 3,
+    position: "bottom",
+    yOffset: 100,
+    maxWidth: 90,
+    enableAnimation: true,
+    wordsPerPage: 3
+  },
+  /**
+   * Minimal style - clean and understated
+   * White on white (no highlight distinction), smaller text
+   */
+  minimal: {
+    fontName: "Inter",
+    fontSize: 60,
+    fontWeight: "bold",
+    fontColor: "#FFFFFF",
+    highlightColor: "#FFFFFF",
+    strokeColor: "#000000",
+    strokeWidth: 2,
+    position: "bottom",
+    yOffset: 80,
+    maxWidth: 85,
+    enableAnimation: false,
+    wordsPerPage: 5
+  },
+  /**
+   * Bold Pop style - maximum impact, one word at a time
+   * Yellow text with red highlight, centered position
+   */
+  "bold-pop": {
+    fontName: "Bangers",
+    fontSize: 90,
+    fontWeight: "bold",
+    fontColor: "#FFFF00",
+    highlightColor: "#FF0000",
+    strokeColor: "#000000",
+    strokeWidth: 4,
+    position: "center",
+    yOffset: 0,
+    maxWidth: 80,
+    enableAnimation: true,
+    wordsPerPage: 2
+  },
+  /**
+   * Clean style - professional look with background
+   * White text with blue highlight, semi-transparent background
+   */
+  clean: {
+    fontName: "Roboto",
+    fontSize: 55,
+    fontWeight: "normal",
+    fontColor: "#FFFFFF",
+    highlightColor: "#3B82F6",
+    strokeColor: "#000000",
+    strokeWidth: 0,
+    backgroundColor: "#000000",
+    backgroundOpacity: 0.7,
+    backgroundBorderRadius: 8,
+    position: "bottom",
+    yOffset: 80,
+    maxWidth: 90,
+    enableAnimation: false,
+    wordsPerPage: 6
+  },
+  /**
+   * Neon style - vibrant, eye-catching colors
+   * Cyan text with magenta highlight
+   */
+  neon: {
+    fontName: "Poppins",
+    fontSize: 70,
+    fontWeight: "bold",
+    fontColor: "#00FFFF",
+    highlightColor: "#FF00FF",
+    strokeColor: "#000000",
+    strokeWidth: 3,
+    position: "bottom",
+    yOffset: 100,
+    maxWidth: 85,
+    enableAnimation: true,
+    wordsPerPage: 3
+  }
+};
+var DEFAULT_CAPTION_STYLE = CAPTION_PRESETS.hormozi;
+function resolveCaptionStyle(style) {
+  if (!style) {
+    return { ...DEFAULT_CAPTION_STYLE };
+  }
+  const presetValues = style.preset ? CAPTION_PRESETS[style.preset] : {};
+  const defaults = DEFAULT_CAPTION_STYLE;
+  return {
+    preset: style.preset,
+    fontName: style.fontName ?? presetValues.fontName ?? defaults.fontName,
+    fontSize: style.fontSize ?? presetValues.fontSize ?? defaults.fontSize,
+    fontWeight: style.fontWeight ?? presetValues.fontWeight ?? defaults.fontWeight,
+    fontColor: style.fontColor ?? presetValues.fontColor ?? defaults.fontColor,
+    highlightColor: style.highlightColor ?? presetValues.highlightColor ?? defaults.highlightColor,
+    strokeColor: style.strokeColor ?? presetValues.strokeColor ?? defaults.strokeColor,
+    strokeWidth: style.strokeWidth ?? presetValues.strokeWidth ?? defaults.strokeWidth,
+    backgroundColor: style.backgroundColor ?? presetValues.backgroundColor,
+    backgroundOpacity: style.backgroundOpacity ?? presetValues.backgroundOpacity,
+    backgroundBorderRadius: style.backgroundBorderRadius ?? presetValues.backgroundBorderRadius,
+    position: style.position ?? presetValues.position ?? defaults.position,
+    yOffset: style.yOffset ?? presetValues.yOffset ?? defaults.yOffset,
+    maxWidth: style.maxWidth ?? presetValues.maxWidth ?? defaults.maxWidth,
+    enableAnimation: style.enableAnimation ?? presetValues.enableAnimation ?? defaults.enableAnimation,
+    wordsPerPage: style.wordsPerPage ?? presetValues.wordsPerPage ?? defaults.wordsPerPage
+  };
+}
+function getCaptionPresetNames() {
+  return Object.keys(CAPTION_PRESETS);
+}
+function isValidCaptionPreset(name) {
+  return name in CAPTION_PRESETS;
+}
+
 // src/hooks/index.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 function useFontsLoaded() {
-  const [loaded, setLoaded] = (0, import_react6.useState)(areFontsLoaded());
-  (0, import_react6.useEffect)(() => {
+  const [loaded, setLoaded] = (0, import_react7.useState)(areFontsLoaded());
+  (0, import_react7.useEffect)(() => {
     if (!loaded) {
       preloadFonts().then(() => setLoaded(true)).catch(console.error);
     }
@@ -2217,8 +2542,8 @@ function useFontsLoaded() {
   return loaded;
 }
 function useImageLoader(src) {
-  const [image, setImage] = (0, import_react6.useState)(null);
-  (0, import_react6.useEffect)(() => {
+  const [image, setImage] = (0, import_react7.useState)(null);
+  (0, import_react7.useEffect)(() => {
     if (!src) {
       setImage(null);
       return;
@@ -2238,9 +2563,9 @@ function useImageLoader(src) {
   return image;
 }
 function useImagePreloader(sources) {
-  const [images, setImages] = (0, import_react6.useState)({});
-  const [loaded, setLoaded] = (0, import_react6.useState)(false);
-  (0, import_react6.useEffect)(() => {
+  const [images, setImages] = (0, import_react7.useState)({});
+  const [loaded, setLoaded] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => {
     const entries = Object.entries(sources);
     if (entries.length === 0) {
       setLoaded(true);
@@ -2278,7 +2603,7 @@ function useImagePreloader(sources) {
   return { loaded, images };
 }
 function useResolvedPositions(elements, textValues) {
-  return (0, import_react6.useMemo)(() => {
+  return (0, import_react7.useMemo)(() => {
     if (elements.length === 0) {
       return { elements: [], errors: [] };
     }
@@ -2287,8 +2612,8 @@ function useResolvedPositions(elements, textValues) {
 }
 
 // src/Root.tsx
-var import_remotion5 = require("remotion");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_remotion7 = require("remotion");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var defaultImageProps = {
   config: {
     width: 1080,
@@ -2309,8 +2634,30 @@ var defaultVideoProps = {
   sources: {},
   scale: 1
 };
+var defaultAutoCaptionProps = {
+  videoUrl: "",
+  width: 1080,
+  height: 1920,
+  durationMs: 1e3,
+  captions: [],
+  style: {
+    fontName: "Montserrat",
+    fontSize: 80,
+    fontWeight: "black",
+    fontColor: "#FFFFFF",
+    highlightColor: "#FFFF00",
+    strokeColor: "#000000",
+    strokeWidth: 3,
+    position: "bottom",
+    yOffset: 100,
+    maxWidth: 90,
+    enableAnimation: true,
+    wordsPerPage: 3
+  }
+};
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;
+var AutoCaptionComp = AutoCaptionComposition;
 var calculateImageMetadata = async ({ props }) => {
   console.log("[calculateMetadata] Starting metadata calculation...");
   const canvasWidth = props.width ?? props.config?.width ?? 1080;
@@ -2361,9 +2708,9 @@ var calculateImageMetadata = async ({ props }) => {
   };
 };
 var RenderRoot = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_remotion5.Composition,
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_remotion7.Composition,
       {
         id: "ImageEditorComposition",
         component: ImageComp,
@@ -2375,8 +2722,8 @@ var RenderRoot = () => {
         defaultProps: defaultImageProps
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_remotion5.Composition,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_remotion7.Composition,
       {
         id: "VideoEditorComposition",
         component: VideoComp,
@@ -2386,13 +2733,30 @@ var RenderRoot = () => {
         height: 1920,
         defaultProps: defaultVideoProps
       }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_remotion7.Composition,
+      {
+        id: "AutoCaptionComposition",
+        component: AutoCaptionComp,
+        durationInFrames: 300,
+        fps: 30,
+        width: 1080,
+        height: 1920,
+        defaultProps: defaultAutoCaptionProps
+      }
     )
   ] });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   APPLE_EMOJI_FONT,
+  AutoCaptionComposition,
+  AutoCaptionCompositionWithVideo,
+  CAPTION_PRESETS,
+  CaptionOverlay,
   DEDUPLICATION_LEVELS,
+  DEFAULT_CAPTION_STYLE,
   DIMENSION_PRESETS,
   FONT_FAMILIES,
   FONT_URLS,
@@ -2430,6 +2794,7 @@ var RenderRoot = () => {
   generateSegmentId,
   getBaseSegments,
   getBorderRadii,
+  getCaptionPresetNames,
   getDependentElements,
   getFontFamily,
   getOverlays,
@@ -2440,9 +2805,11 @@ var RenderRoot = () => {
   isDeduplicationLevel,
   isDynamicCropEnabled,
   isSegmentVisibleAtTime,
+  isValidCaptionPreset,
   parseHexColor,
   parseTime,
   preloadFonts,
+  resolveCaptionStyle,
   resolveDeduplicationConfig,
   resolveElementPositions,
   useFontsLoaded,

package/dist/index.mjs

@@ -1957,6 +1957,194 @@ function VideoEditorComposition({
   ] });
 }
 
+// src/compositions/AutoCaptionComposition.tsx
+import { AbsoluteFill as AbsoluteFill3, Video, OffthreadVideo as OffthreadVideo2 } from "remotion";
+
+// src/components/CaptionOverlay.tsx
+import { useMemo as useMemo6 } from "react";
+import { useCurrentFrame as useCurrentFrame4, useVideoConfig as useVideoConfig4, interpolate } from "remotion";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function createPages(words, wordsPerPage) {
+  const pages = [];
+  for (let i = 0; i < words.length; i += wordsPerPage) {
+    const pageWords = words.slice(i, i + wordsPerPage);
+    if (pageWords.length > 0) {
+      pages.push({
+        words: pageWords,
+        startMs: pageWords[0].startMs,
+        endMs: pageWords[pageWords.length - 1].endMs
+      });
+    }
+  }
+  return pages;
+}
+function hexToRgba2(hex, opacity) {
+  const cleanHex = hex.replace("#", "");
+  const r = parseInt(cleanHex.substring(0, 2), 16);
+  const g = parseInt(cleanHex.substring(2, 4), 16);
+  const b = parseInt(cleanHex.substring(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+}
+function CaptionOverlay({ captions, style, previewTimeMs }) {
+  const frame = useCurrentFrame4();
+  const { fps, width, height } = useVideoConfig4();
+  const currentMs = previewTimeMs ?? frame / fps * 1e3;
+  const pages = useMemo6(
+    () => createPages(captions, style.wordsPerPage),
+    [captions, style.wordsPerPage]
+  );
+  const currentPage = pages.find(
+    (page) => currentMs >= page.startMs && currentMs <= page.endMs
+  );
+  if (!currentPage) return null;
+  const maxWidthPx = style.maxWidth / 100 * width;
+  const scaleFactor = height / 1920;
+  const scaledFontSize = style.fontSize * scaleFactor;
+  const scaledStrokeWidth = style.strokeWidth * scaleFactor;
+  const scaledYOffset = style.yOffset * scaleFactor;
+  const scaledBorderRadius = (style.backgroundBorderRadius ?? 0) * scaleFactor;
+  const getPositionStyles = () => {
+    const base = {
+      position: "absolute",
+      left: "50%"
+    };
+    switch (style.position) {
+      case "top":
+        return {
+          ...base,
+          top: scaledYOffset,
+          transform: "translateX(-50%)"
+        };
+      case "center":
+        return {
+          ...base,
+          top: "50%",
+          transform: "translate(-50%, -50%)"
+        };
+      case "bottom":
+      default:
+        return {
+          ...base,
+          bottom: scaledYOffset,
+          transform: "translateX(-50%)"
+        };
+    }
+  };
+  const containerStyles = {
+    ...getPositionStyles(),
+    maxWidth: maxWidthPx,
+    textAlign: "center",
+    // Add padding if background is enabled
+    padding: style.backgroundColor ? `${scaledFontSize * 0.3}px ${scaledFontSize * 0.5}px` : 0,
+    // Background styling
+    backgroundColor: style.backgroundColor ? hexToRgba2(style.backgroundColor, style.backgroundOpacity ?? 0.7) : "transparent",
+    borderRadius: scaledBorderRadius
+  };
+  const numericFontWeight = style.fontWeight === "black" ? 900 : style.fontWeight === "bold" ? 700 : 400;
+  const buildStrokeShadow = () => {
+    if (scaledStrokeWidth <= 0) return "none";
+    const sw = scaledStrokeWidth;
+    const sc = style.strokeColor;
+    return `
+      -${sw}px -${sw}px 0 ${sc},
+      ${sw}px -${sw}px 0 ${sc},
+      -${sw}px ${sw}px 0 ${sc},
+      ${sw}px ${sw}px 0 ${sc},
+      0 -${sw}px 0 ${sc},
+      0 ${sw}px 0 ${sc},
+      -${sw}px 0 0 ${sc},
+      ${sw}px 0 0 ${sc}
+    `;
+  };
+  const textContainerStyles = {
+    fontFamily: `"${style.fontName}", sans-serif`,
+    fontSize: scaledFontSize,
+    fontWeight: numericFontWeight,
+    lineHeight: 1.2,
+    wordBreak: "break-word",
+    textShadow: buildStrokeShadow()
+  };
+  return /* @__PURE__ */ jsx6("div", { style: containerStyles, children: /* @__PURE__ */ jsx6("div", { style: textContainerStyles, children: currentPage.words.map((word, index) => {
+    const isActive = currentMs >= word.startMs && currentMs <= word.endMs;
+    const color = isActive ? style.highlightColor : style.fontColor;
+    let scale = 1;
+    if (style.enableAnimation && isActive) {
+      const wordDuration = word.endMs - word.startMs;
+      if (wordDuration > 0) {
+        const progress = (currentMs - word.startMs) / wordDuration;
+        scale = interpolate(
+          progress,
+          [0, 0.15, 0.3, 1],
+          [1, 1.15, 1.05, 1],
+          {
+            extrapolateLeft: "clamp",
+            extrapolateRight: "clamp"
+          }
+        );
+      }
+    }
+    return /* @__PURE__ */ jsxs4(
+      "span",
+      {
+        style: {
+          color,
+          display: "inline-block",
+          transform: `scale(${scale})`,
+          transformOrigin: "center center"
+        },
+        children: [
+          word.word,
+          index < currentPage.words.length - 1 ? " " : ""
+        ]
+      },
+      `${word.word}-${word.startMs}-${index}`
+    );
+  }) }) });
+}
+
+// src/compositions/AutoCaptionComposition.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function AutoCaptionComposition({
+  videoUrl,
+  captions,
+  style
+}) {
+  return /* @__PURE__ */ jsxs5(AbsoluteFill3, { style: { backgroundColor: "#000000" }, children: [
+    /* @__PURE__ */ jsx7(
+      OffthreadVideo2,
+      {
+        src: videoUrl,
+        style: {
+          width: "100%",
+          height: "100%",
+          objectFit: "contain"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx7(CaptionOverlay, { captions, style })
+  ] });
+}
+function AutoCaptionCompositionWithVideo({
+  videoUrl,
+  captions,
+  style
+}) {
+  return /* @__PURE__ */ jsxs5(AbsoluteFill3, { style: { backgroundColor: "#000000" }, children: [
+    /* @__PURE__ */ jsx7(
+      Video,
+      {
+        src: videoUrl,
+        style: {
+          width: "100%",
+          height: "100%",
+          objectFit: "contain"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx7(CaptionOverlay, { captions, style })
+  ] });
+}
+
 // src/utils/fit.ts
 function calculateFitDimensions({
   sourceWidth,
@@ -2111,8 +2299,137 @@ function generateOverlayId() {
   return `overlay-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
 }
 
+// src/utils/captionPresets.ts
+var CAPTION_PRESETS = {
+  /**
+   * Hormozi style - bold, attention-grabbing captions
+   * Yellow highlight on white text with thick black stroke
+   */
+  hormozi: {
+    fontName: "Montserrat",
+    fontSize: 80,
+    fontWeight: "black",
+    fontColor: "#FFFFFF",
+    highlightColor: "#FFFF00",
+    strokeColor: "#000000",
+    strokeWidth: 3,
+    position: "bottom",
+    yOffset: 100,
+    maxWidth: 90,
+    enableAnimation: true,
+    wordsPerPage: 3
+  },
+  /**
+   * Minimal style - clean and understated
+   * White on white (no highlight distinction), smaller text
+   */
+  minimal: {
+    fontName: "Inter",
+    fontSize: 60,
+    fontWeight: "bold",
+    fontColor: "#FFFFFF",
+    highlightColor: "#FFFFFF",
+    strokeColor: "#000000",
+    strokeWidth: 2,
+    position: "bottom",
+    yOffset: 80,
+    maxWidth: 85,
+    enableAnimation: false,
+    wordsPerPage: 5
+  },
+  /**
+   * Bold Pop style - maximum impact, one word at a time
+   * Yellow text with red highlight, centered position
+   */
+  "bold-pop": {
+    fontName: "Bangers",
+    fontSize: 90,
+    fontWeight: "bold",
+    fontColor: "#FFFF00",
+    highlightColor: "#FF0000",
+    strokeColor: "#000000",
+    strokeWidth: 4,
+    position: "center",
+    yOffset: 0,
+    maxWidth: 80,
+    enableAnimation: true,
+    wordsPerPage: 2
+  },
+  /**
+   * Clean style - professional look with background
+   * White text with blue highlight, semi-transparent background
+   */
+  clean: {
+    fontName: "Roboto",
+    fontSize: 55,
+    fontWeight: "normal",
+    fontColor: "#FFFFFF",
+    highlightColor: "#3B82F6",
+    strokeColor: "#000000",
+    strokeWidth: 0,
+    backgroundColor: "#000000",
+    backgroundOpacity: 0.7,
+    backgroundBorderRadius: 8,
+    position: "bottom",
+    yOffset: 80,
+    maxWidth: 90,
+    enableAnimation: false,
+    wordsPerPage: 6
+  },
+  /**
+   * Neon style - vibrant, eye-catching colors
+   * Cyan text with magenta highlight
+   */
+  neon: {
+    fontName: "Poppins",
+    fontSize: 70,
+    fontWeight: "bold",
+    fontColor: "#00FFFF",
+    highlightColor: "#FF00FF",
+    strokeColor: "#000000",
+    strokeWidth: 3,
+    position: "bottom",
+    yOffset: 100,
+    maxWidth: 85,
+    enableAnimation: true,
+    wordsPerPage: 3
+  }
+};
+var DEFAULT_CAPTION_STYLE = CAPTION_PRESETS.hormozi;
+function resolveCaptionStyle(style) {
+  if (!style) {
+    return { ...DEFAULT_CAPTION_STYLE };
+  }
+  const presetValues = style.preset ? CAPTION_PRESETS[style.preset] : {};
+  const defaults = DEFAULT_CAPTION_STYLE;
+  return {
+    preset: style.preset,
+    fontName: style.fontName ?? presetValues.fontName ?? defaults.fontName,
+    fontSize: style.fontSize ?? presetValues.fontSize ?? defaults.fontSize,
+    fontWeight: style.fontWeight ?? presetValues.fontWeight ?? defaults.fontWeight,
+    fontColor: style.fontColor ?? presetValues.fontColor ?? defaults.fontColor,
+    highlightColor: style.highlightColor ?? presetValues.highlightColor ?? defaults.highlightColor,
+    strokeColor: style.strokeColor ?? presetValues.strokeColor ?? defaults.strokeColor,
+    strokeWidth: style.strokeWidth ?? presetValues.strokeWidth ?? defaults.strokeWidth,
+    backgroundColor: style.backgroundColor ?? presetValues.backgroundColor,
+    backgroundOpacity: style.backgroundOpacity ?? presetValues.backgroundOpacity,
+    backgroundBorderRadius: style.backgroundBorderRadius ?? presetValues.backgroundBorderRadius,
+    position: style.position ?? presetValues.position ?? defaults.position,
+    yOffset: style.yOffset ?? presetValues.yOffset ?? defaults.yOffset,
+    maxWidth: style.maxWidth ?? presetValues.maxWidth ?? defaults.maxWidth,
+    enableAnimation: style.enableAnimation ?? presetValues.enableAnimation ?? defaults.enableAnimation,
+    wordsPerPage: style.wordsPerPage ?? presetValues.wordsPerPage ?? defaults.wordsPerPage
+  };
+}
+function getCaptionPresetNames() {
+  return Object.keys(CAPTION_PRESETS);
+}
+function isValidCaptionPreset(name) {
+  return name in CAPTION_PRESETS;
+}
+
 // src/hooks/index.ts
-import { useEffect as useEffect2, useState as useState2, useMemo as useMemo6 } from "react";
+import { useEffect as useEffect2, useState as useState2, useMemo as useMemo7 } from "react";
 function useFontsLoaded() {
   const [loaded, setLoaded] = useState2(areFontsLoaded());
   useEffect2(() => {
@@ -2184,7 +2501,7 @@ function useImagePreloader(sources) {
   return { loaded, images };
 }
 function useResolvedPositions(elements, textValues) {
-  return useMemo6(() => {
+  return useMemo7(() => {
     if (elements.length === 0) {
       return { elements: [], errors: [] };
     }
@@ -2194,7 +2511,7 @@ function useResolvedPositions(elements, textValues) {
 
 // src/Root.tsx
 import { Composition } from "remotion";
-import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var defaultImageProps = {
   config: {
     width: 1080,
@@ -2215,8 +2532,30 @@ var defaultVideoProps = {
   sources: {},
   scale: 1
 };
+var defaultAutoCaptionProps = {
+  videoUrl: "",
+  width: 1080,
+  height: 1920,
+  durationMs: 1e3,
+  captions: [],
+  style: {
+    fontName: "Montserrat",
+    fontSize: 80,
+    fontWeight: "black",
+    fontColor: "#FFFFFF",
+    highlightColor: "#FFFF00",
+    strokeColor: "#000000",
+    strokeWidth: 3,
+    position: "bottom",
+    yOffset: 100,
+    maxWidth: 90,
+    enableAnimation: true,
+    wordsPerPage: 3
+  }
+};
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;
+var AutoCaptionComp = AutoCaptionComposition;
 var calculateImageMetadata = async ({ props }) => {
   console.log("[calculateMetadata] Starting metadata calculation...");
   const canvasWidth = props.width ?? props.config?.width ?? 1080;
@@ -2267,8 +2606,8 @@ var calculateImageMetadata = async ({ props }) => {
   };
 };
 var RenderRoot = () => {
-  return /* @__PURE__ */ jsxs4(Fragment, { children: [
-    /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsx8(
       Composition,
       {
         id: "ImageEditorComposition",
@@ -2281,7 +2620,7 @@ var RenderRoot = () => {
         defaultProps: defaultImageProps
       }
     ),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx8(
       Composition,
       {
         id: "VideoEditorComposition",
@@ -2292,12 +2631,29 @@ var RenderRoot = () => {
         height: 1920,
         defaultProps: defaultVideoProps
       }
+    ),
+    /* @__PURE__ */ jsx8(
+      Composition,
+      {
+        id: "AutoCaptionComposition",
+        component: AutoCaptionComp,
+        durationInFrames: 300,
+        fps: 30,
+        width: 1080,
+        height: 1920,
+        defaultProps: defaultAutoCaptionProps
+      }
     )
   ] });
 };
 export {
   APPLE_EMOJI_FONT,
+  AutoCaptionComposition,
+  AutoCaptionCompositionWithVideo,
+  CAPTION_PRESETS,
+  CaptionOverlay,
   DEDUPLICATION_LEVELS,
+  DEFAULT_CAPTION_STYLE,
   DIMENSION_PRESETS,
   FONT_FAMILIES,
   FONT_URLS,
@@ -2335,6 +2691,7 @@ export {
   generateSegmentId,
   getBaseSegments,
   getBorderRadii,
+  getCaptionPresetNames,
   getDependentElements,
   getFontFamily,
   getOverlays,
@@ -2345,9 +2702,11 @@ export {
   isDeduplicationLevel,
   isDynamicCropEnabled,
   isSegmentVisibleAtTime,
+  isValidCaptionPreset,
   parseHexColor,
   parseTime,
   preloadFonts,
+  resolveCaptionStyle,
   resolveDeduplicationConfig,
   resolveElementPositions,
   useFontsLoaded,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc-render",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "description": "Unified rendering package for UGC Inc - shared types, components, and compositions for pixel-perfect client/server rendering",
   "main": "dist/index.js",
   "module": "dist/index.mjs",