ugcinc-render 1.5.20 → 1.5.22

package/dist/index.d.mts

@@ -916,6 +916,8 @@ interface ImageElementProps {
     segment: ImageSegment;
     /** The source URL of the image */
     src: string;
+    /** Start frame of this segment in the composition (needed for fade-in) */
+    startFrame?: number;
     /** Optional scale for high-DPI rendering */
     scale?: number;
 }
@@ -925,8 +927,9 @@ interface ImageElementProps {
  * - Opacity
  * - Rotation
  * - Border radius (uniform or per-corner)
+ * - Fade-in effect
  */
-declare function ImageElement({ segment, src, scale }: ImageElementProps): react_jsx_runtime.JSX.Element;
+declare function ImageElement({ segment, src, startFrame, scale }: ImageElementProps): react_jsx_runtime.JSX.Element;
 
 interface VideoElementProps {
     segment: VideoSegment;

package/dist/index.d.ts

@@ -916,6 +916,8 @@ interface ImageElementProps {
     segment: ImageSegment;
     /** The source URL of the image */
     src: string;
+    /** Start frame of this segment in the composition (needed for fade-in) */
+    startFrame?: number;
     /** Optional scale for high-DPI rendering */
     scale?: number;
 }
@@ -925,8 +927,9 @@ interface ImageElementProps {
  * - Opacity
  * - Rotation
  * - Border radius (uniform or per-corner)
+ * - Fade-in effect
  */
-declare function ImageElement({ segment, src, scale }: ImageElementProps): react_jsx_runtime.JSX.Element;
+declare function ImageElement({ segment, src, startFrame, scale }: ImageElementProps): react_jsx_runtime.JSX.Element;
 
 interface VideoElementProps {
     segment: VideoSegment;

package/dist/index.js

@@ -717,15 +717,26 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 function fitModeToCss(fit) {
   return fit;
 }
-function ImageElement({ segment, src, scale = 1 }) {
+function ImageElement({ segment, src, startFrame = 0, scale = 1 }) {
+  const frame = (0, import_remotion.useCurrentFrame)();
+  const { fps } = (0, import_remotion.useVideoConfig)();
   const fit = segment.fit ?? IMAGE_DEFAULTS.fit;
   const opacity = (segment.opacity ?? VISUAL_DEFAULTS.opacity) / 100;
   const rotation = segment.rotation ?? 0;
   const borderRadius = segment.borderRadius;
+  const fadeIn = segment.fadeIn ?? 0;
   const x = segment.xOffset * scale;
   const y = segment.yOffset * scale;
   const width = segment.width * scale;
   const height = segment.height * scale;
+  const fadeOpacity = (0, import_react2.useMemo)(() => {
+    if (fadeIn <= 0) return 1;
+    const framesFromStart = frame - startFrame;
+    const fadeInFrames = fadeIn / 1e3 * fps;
+    if (framesFromStart >= fadeInFrames) return 1;
+    if (framesFromStart <= 0) return 0;
+    return framesFromStart / fadeInFrames;
+  }, [frame, startFrame, fadeIn, fps]);
   const borderRadiusStyle = (0, import_react2.useMemo)(() => {
     if (!borderRadius) return void 0;
     if (typeof borderRadius === "number") {
@@ -744,14 +755,14 @@ function ImageElement({ segment, src, scale = 1 }) {
     transform: rotation !== 0 ? `rotate(${rotation}deg)` : void 0,
     transformOrigin: "center center",
     overflow: "hidden",
-    borderRadius: borderRadiusStyle
-  }), [x, y, width, height, rotation, borderRadiusStyle]);
+    borderRadius: borderRadiusStyle,
+    opacity: opacity * fadeOpacity
+  }), [x, y, width, height, rotation, borderRadiusStyle, opacity, fadeOpacity]);
   const imageStyle = (0, import_react2.useMemo)(() => ({
     width: "100%",
     height: "100%",
-    objectFit: fitModeToCss(fit),
-    opacity
-  }), [fit, opacity]);
+    objectFit: fitModeToCss(fit)
+  }), [fit]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_remotion.Img,
     {
@@ -1320,17 +1331,42 @@ function ImageEditorComposition({
         if (typeof document !== "undefined" && document.fonts) {
           console.log("[Composition] Waiting for fonts to load...");
           await document.fonts.ready;
-          const fontChecks = await Promise.all([
-            document.fonts.load('normal 48px "SF Pro"').catch(() => []),
-            document.fonts.load('bold 48px "SF Pro"').catch(() => []),
-            document.fonts.load('normal 48px "TikTok Sans"').catch(() => []),
-            document.fonts.load('bold 48px "TikTok Sans"').catch(() => [])
-          ]);
+          const fontsToLoad = [
+            // SF Pro
+            'normal 48px "SF Pro"',
+            'bold 48px "SF Pro"',
+            '100 48px "SF Pro"',
+            '200 48px "SF Pro"',
+            '300 48px "SF Pro"',
+            '400 48px "SF Pro"',
+            '500 48px "SF Pro"',
+            '600 48px "SF Pro"',
+            '700 48px "SF Pro"',
+            '800 48px "SF Pro"',
+            '900 48px "SF Pro"',
+            // TikTok Sans
+            'normal 48px "TikTok Sans"',
+            'bold 48px "TikTok Sans"',
+            '400 48px "TikTok Sans"',
+            '500 48px "TikTok Sans"',
+            '600 48px "TikTok Sans"',
+            '700 48px "TikTok Sans"',
+            '800 48px "TikTok Sans"',
+            '900 48px "TikTok Sans"',
+            // Apple Color Emoji
+            'normal 48px "Apple Color Emoji"'
+          ];
+          await Promise.all(
+            fontsToLoad.map(
+              (font) => document.fonts.load(font).catch(() => [])
+            )
+          );
+          await document.fonts.ready;
           console.log("[Composition] Fonts loaded:", {
-            sfProNormal: document.fonts.check('normal 48px "SF Pro"'),
-            sfProBold: document.fonts.check('bold 48px "SF Pro"'),
-            tiktokNormal: document.fonts.check('normal 48px "TikTok Sans"'),
-            tiktokBold: document.fonts.check('bold 48px "TikTok Sans"')
+            sfPro: document.fonts.check('normal 48px "SF Pro"'),
+            tiktok: document.fonts.check('normal 48px "TikTok Sans"'),
+            emoji: document.fonts.check('normal 48px "Apple Color Emoji"'),
+            totalFonts: document.fonts.size
           });
         }
         setFontsLoaded(true);
@@ -1709,6 +1745,7 @@ function VideoEditorComposition({
           {
             segment,
             src,
+            startFrame,
             scale: 1
           },
           segment.id

package/dist/index.mjs

@@ -626,20 +626,31 @@ function TextElement({ segment, scale = 1 }) {
 
 // src/components/ImageElement.tsx
 import { useMemo as useMemo2 } from "react";
-import { Img } from "remotion";
+import { Img, useCurrentFrame, useVideoConfig } from "remotion";
 import { jsx as jsx2 } from "react/jsx-runtime";
 function fitModeToCss(fit) {
   return fit;
 }
-function ImageElement({ segment, src, scale = 1 }) {
+function ImageElement({ segment, src, startFrame = 0, scale = 1 }) {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
   const fit = segment.fit ?? IMAGE_DEFAULTS.fit;
   const opacity = (segment.opacity ?? VISUAL_DEFAULTS.opacity) / 100;
   const rotation = segment.rotation ?? 0;
   const borderRadius = segment.borderRadius;
+  const fadeIn = segment.fadeIn ?? 0;
   const x = segment.xOffset * scale;
   const y = segment.yOffset * scale;
   const width = segment.width * scale;
   const height = segment.height * scale;
+  const fadeOpacity = useMemo2(() => {
+    if (fadeIn <= 0) return 1;
+    const framesFromStart = frame - startFrame;
+    const fadeInFrames = fadeIn / 1e3 * fps;
+    if (framesFromStart >= fadeInFrames) return 1;
+    if (framesFromStart <= 0) return 0;
+    return framesFromStart / fadeInFrames;
+  }, [frame, startFrame, fadeIn, fps]);
   const borderRadiusStyle = useMemo2(() => {
     if (!borderRadius) return void 0;
     if (typeof borderRadius === "number") {
@@ -658,14 +669,14 @@ function ImageElement({ segment, src, scale = 1 }) {
     transform: rotation !== 0 ? `rotate(${rotation}deg)` : void 0,
     transformOrigin: "center center",
     overflow: "hidden",
-    borderRadius: borderRadiusStyle
-  }), [x, y, width, height, rotation, borderRadiusStyle]);
+    borderRadius: borderRadiusStyle,
+    opacity: opacity * fadeOpacity
+  }), [x, y, width, height, rotation, borderRadiusStyle, opacity, fadeOpacity]);
   const imageStyle = useMemo2(() => ({
     width: "100%",
     height: "100%",
-    objectFit: fitModeToCss(fit),
-    opacity
-  }), [fit, opacity]);
+    objectFit: fitModeToCss(fit)
+  }), [fit]);
   return /* @__PURE__ */ jsx2("div", { style: containerStyle, children: /* @__PURE__ */ jsx2(
     Img,
     {
@@ -1234,17 +1245,42 @@ function ImageEditorComposition({
         if (typeof document !== "undefined" && document.fonts) {
           console.log("[Composition] Waiting for fonts to load...");
           await document.fonts.ready;
-          const fontChecks = await Promise.all([
-            document.fonts.load('normal 48px "SF Pro"').catch(() => []),
-            document.fonts.load('bold 48px "SF Pro"').catch(() => []),
-            document.fonts.load('normal 48px "TikTok Sans"').catch(() => []),
-            document.fonts.load('bold 48px "TikTok Sans"').catch(() => [])
-          ]);
+          const fontsToLoad = [
+            // SF Pro
+            'normal 48px "SF Pro"',
+            'bold 48px "SF Pro"',
+            '100 48px "SF Pro"',
+            '200 48px "SF Pro"',
+            '300 48px "SF Pro"',
+            '400 48px "SF Pro"',
+            '500 48px "SF Pro"',
+            '600 48px "SF Pro"',
+            '700 48px "SF Pro"',
+            '800 48px "SF Pro"',
+            '900 48px "SF Pro"',
+            // TikTok Sans
+            'normal 48px "TikTok Sans"',
+            'bold 48px "TikTok Sans"',
+            '400 48px "TikTok Sans"',
+            '500 48px "TikTok Sans"',
+            '600 48px "TikTok Sans"',
+            '700 48px "TikTok Sans"',
+            '800 48px "TikTok Sans"',
+            '900 48px "TikTok Sans"',
+            // Apple Color Emoji
+            'normal 48px "Apple Color Emoji"'
+          ];
+          await Promise.all(
+            fontsToLoad.map(
+              (font) => document.fonts.load(font).catch(() => [])
+            )
+          );
+          await document.fonts.ready;
           console.log("[Composition] Fonts loaded:", {
-            sfProNormal: document.fonts.check('normal 48px "SF Pro"'),
-            sfProBold: document.fonts.check('bold 48px "SF Pro"'),
-            tiktokNormal: document.fonts.check('normal 48px "TikTok Sans"'),
-            tiktokBold: document.fonts.check('bold 48px "TikTok Sans"')
+            sfPro: document.fonts.check('normal 48px "SF Pro"'),
+            tiktok: document.fonts.check('normal 48px "TikTok Sans"'),
+            emoji: document.fonts.check('normal 48px "Apple Color Emoji"'),
+            totalFonts: document.fonts.size
           });
         }
         setFontsLoaded(true);
@@ -1417,11 +1453,11 @@ function BackgroundImage({
 
 // src/compositions/VideoEditorComposition.tsx
 import { useMemo as useMemo5 } from "react";
-import { AbsoluteFill as AbsoluteFill2, useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2, Sequence, Audio } from "remotion";
+import { AbsoluteFill as AbsoluteFill2, useCurrentFrame as useCurrentFrame3, useVideoConfig as useVideoConfig3, Sequence, Audio } from "remotion";
 
 // src/components/VideoElement.tsx
 import { useMemo as useMemo4 } from "react";
-import { Video, useCurrentFrame, useVideoConfig } from "remotion";
+import { Video, useCurrentFrame as useCurrentFrame2, useVideoConfig as useVideoConfig2 } from "remotion";
 import { jsx as jsx4 } from "react/jsx-runtime";
 function fitModeToCss2(fit) {
   return fit;
@@ -1433,8 +1469,8 @@ function VideoElement({
   durationInFrames,
   scale = 1
 }) {
-  const frame = useCurrentFrame();
-  const { fps } = useVideoConfig();
+  const frame = useCurrentFrame2();
+  const { fps } = useVideoConfig2();
   const fit = segment.fit ?? VIDEO_DEFAULTS.fit;
   const speed = segment.speed ?? VIDEO_DEFAULTS.speed;
   const volume = (segment.volume ?? VIDEO_DEFAULTS.volume) / 100;
@@ -1554,8 +1590,8 @@ function VideoEditorComposition({
   sources = {},
   textContent = {}
 }) {
-  const frame = useCurrentFrame2();
-  const { fps, durationInFrames } = useVideoConfig2();
+  const frame = useCurrentFrame3();
+  const { fps, durationInFrames } = useVideoConfig3();
   const segmentTimings = useMemo5(
     () => calculateSegmentTimings(config, fps),
     [config, fps]
@@ -1623,6 +1659,7 @@ function VideoEditorComposition({
           {
             segment,
             src,
+            startFrame,
             scale: 1
           },
           segment.id

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc-render",
-  "version": "1.5.20",
+  "version": "1.5.22",
   "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",