@microfox/remotion 1.2.2 → 1.2.5

package/dist/index.mjs

@@ -4,21 +4,21 @@ var ComponentRegistryManager = class {
     this.registry = {};
     this.packageRegistry = {};
   }
-  registerComponent(name, component, type, config15 = { displayName: "" }, packageName) {
-    this.registry[name] = { component, config: config15 };
+  registerComponent(name, component, type, config18 = { displayName: "" }, packageName) {
+    this.registry[name] = { component, config: config18 };
     if (packageName) {
       if (!this.packageRegistry[packageName]) {
         this.packageRegistry[packageName] = {};
       }
-      this.packageRegistry[packageName][name] = { component, config: config15 };
+      this.packageRegistry[packageName][name] = { component, config: config18 };
     }
   }
-  registerEffect(name, component, config15 = { displayName: "" }, packageName) {
+  registerEffect(name, component, config18 = { displayName: "" }, packageName) {
     this.registerComponent(
       name?.includes("effect-") ? name : `effect-${name}`,
       component,
       "layout",
-      config15,
+      config18,
       packageName
     );
   }
@@ -33,8 +33,8 @@ var ComponentRegistryManager = class {
   }
   registerPackage(packageName, components) {
     this.packageRegistry[packageName] = components;
-    Object.entries(components).forEach(([name, { component, config: config15 }]) => {
-      this.registry[`${packageName}:${name}`] = { component, config: config15 };
+    Object.entries(components).forEach(([name, { component, config: config18 }]) => {
+      this.registry[`${packageName}:${name}`] = { component, config: config18 };
     });
   }
   getPackageComponents(packageName) {
@@ -49,17 +49,17 @@ var ComponentRegistryManager = class {
   }
 };
 var componentRegistry = new ComponentRegistryManager();
-var registerComponent = (name, component, type, config15 = { displayName: "" }, packageName) => {
+var registerComponent = (name, component, type, config18 = { displayName: "" }, packageName) => {
   componentRegistry.registerComponent(
     name,
     component,
     type,
-    config15,
+    config18,
     packageName
   );
 };
-var registerEffect = (name, component, config15 = { displayName: "" }, packageName) => {
-  componentRegistry.registerEffect(name, component, config15, packageName);
+var registerEffect = (name, component, config18 = { displayName: "" }, packageName) => {
+  componentRegistry.registerEffect(name, component, config18, packageName);
 };
 var registerPackage = (packageName, components) => {
   componentRegistry.registerPackage(packageName, components);
@@ -84,6 +84,13 @@ var useComposition = () => {
 
 // src/core/context/timing.ts
 import { ALL_FORMATS, Input, UrlSource } from "mediabunny";
+var durationCache = /* @__PURE__ */ new Map();
+var getDurationCacheKey = (src, startFrom, endAt, playbackRate) => {
+  const startFromStr = startFrom === void 0 ? "undefined" : String(startFrom);
+  const endAtStr = endAt === void 0 ? "undefined" : String(endAt);
+  const playbackRateStr = playbackRate === void 0 ? "1" : String(playbackRate);
+  return `${src}|${startFromStr}|${endAtStr}|${playbackRateStr}`;
+};
 var findMatchingComponents = (childrenData, targetIds) => {
   const matches = [];
   const searchRecursively = (components) => {
@@ -126,34 +133,48 @@ var findMatchingComponentsByQuery = (childrenData, query) => {
 };
 var calculateComponentDuration = async (component) => {
   const src = component.data.src;
-  if (src.startsWith("http")) {
-    const audioInput = new Input({
-      formats: ALL_FORMATS,
-      source: new UrlSource(src)
-    });
-    const audioDuration = await audioInput.computeDuration();
-    let trimmedDuration = audioDuration;
-    if (component.data.startFrom || component.data.endAt) {
-      trimmedDuration = audioDuration - (component.data.startFrom || 0) - (component.data.endAt ? audioDuration - (component.data.endAt || 0) : 0);
-    }
+  if (src?.startsWith("http")) {
+    const startFrom = component.data.startFrom;
+    const endAt = component.data.endAt;
     const playbackRate = component.data.playbackRate || 1;
-    const effectiveDuration = trimmedDuration / playbackRate;
-    return effectiveDuration;
+    const cacheKey = getDurationCacheKey(src, startFrom, endAt, playbackRate);
+    if (durationCache.has(cacheKey)) {
+      return durationCache.get(cacheKey);
+    }
+    const calculationPromise = (async () => {
+      const audioInput = new Input({
+        formats: ALL_FORMATS,
+        source: new UrlSource(src)
+      });
+      const audioDuration = await audioInput.computeDuration();
+      let trimmedDuration = audioDuration;
+      if (startFrom || endAt) {
+        trimmedDuration = audioDuration - (startFrom || 0) - (endAt ? audioDuration - (endAt || 0) : 0);
+      }
+      const effectiveDuration = trimmedDuration / playbackRate;
+      return effectiveDuration;
+    })();
+    durationCache.set(cacheKey, calculationPromise);
+    return calculationPromise;
   } else {
   }
 };
-var calculateDuration = async (childrenData, config15) => {
+var calculateDuration = async (childrenData, config18) => {
   let calculatedDuration = void 0;
-  const targetIds = Array.isArray(config15.fitDurationTo) ? config15.fitDurationTo : [config15.fitDurationTo];
+  const targetIds = Array.isArray(config18.fitDurationTo) ? config18.fitDurationTo : [config18.fitDurationTo];
   const matchingComponents = findMatchingComponents(
     childrenData || [],
     targetIds
   );
   if (matchingComponents.length === 1) {
     if (matchingComponents[0].type === "atom" && (matchingComponents[0].componentId === "AudioAtom" || matchingComponents[0].componentId === "VideoAtom")) {
-      calculatedDuration = await calculateComponentDuration(
-        matchingComponents[0]
-      );
+      if (matchingComponents[0].context?.timing?.duration) {
+        calculatedDuration = matchingComponents[0].context.timing.duration;
+      } else {
+        calculatedDuration = await calculateComponentDuration(
+          matchingComponents[0]
+        );
+      }
     }
     if ((matchingComponents[0].type === "scene" || matchingComponents[0].type === "layout") && matchingComponents[0].context?.timing?.duration) {
       calculatedDuration = matchingComponents[0].context.timing.duration;
@@ -162,6 +183,7 @@ var calculateDuration = async (childrenData, config15) => {
   return calculatedDuration;
 };
 var setDurationsInContext = async (root) => {
+  durationCache.clear();
   const iterateRecursively = async (components, onlyScene = false) => {
     const updatedComponents = [];
     for (const component of components) {
@@ -173,12 +195,15 @@ var setDurationsInContext = async (root) => {
         );
       }
       if (updatedComponent.context?.timing?.fitDurationTo?.length > 0 && !onlyScene && updatedComponent.context?.timing?.fitDurationTo != updatedComponent.id && updatedComponent.context?.timing?.fitDurationTo != "this" && updatedComponent.context?.timing?.fitDurationTo != "fill") {
-        const duration = await calculateDuration(
-          updatedComponent.childrenData,
-          {
-            fitDurationTo: updatedComponent.context?.timing?.fitDurationTo
-          }
-        );
+        let duration = updatedComponent.context?.timing?.duration;
+        if (!duration) {
+          duration = await calculateDuration(
+            updatedComponent.childrenData,
+            {
+              fitDurationTo: updatedComponent.context?.timing?.fitDurationTo
+            }
+          );
+        }
         updatedComponent = {
           ...updatedComponent,
           context: {
@@ -201,6 +226,8 @@ var setDurationsInContext = async (root) => {
             (acc, child) => acc + (child.context?.timing?.duration ?? 0),
             0
           ) ?? 10;
+        } else {
+          duration = updatedComponent.context.timing.duration;
         }
         if (duration !== void 0) {
           updatedComponent.context = {
@@ -214,7 +241,13 @@ var setDurationsInContext = async (root) => {
       }
       if (updatedComponent.type === "atom" && !onlyScene) {
         if (updatedComponent.componentId === "VideoAtom" || updatedComponent.componentId === "AudioAtom") {
-          const mediaDuration = await calculateComponentDuration(updatedComponent);
+          const needsDurationCalculation = !updatedComponent.context?.timing?.duration || updatedComponent.data?.loop && !updatedComponent.data?.srcDuration;
+          let mediaDuration;
+          if (needsDurationCalculation) {
+            mediaDuration = await calculateComponentDuration(updatedComponent);
+          } else {
+            mediaDuration = updatedComponent.context?.timing?.duration;
+          }
           if (!updatedComponent.context?.timing?.fitDurationTo) {
             updatedComponent.context = {
               ...updatedComponent.context || {},
@@ -225,9 +258,9 @@ var setDurationsInContext = async (root) => {
             };
             updatedComponent.data = {
               ...updatedComponent.data,
-              ...updatedComponent.data.loop ? { srcDuration: mediaDuration } : {}
+              ...updatedComponent.data.loop && mediaDuration ? { srcDuration: mediaDuration } : {}
             };
-          } else if (updatedComponent.context?.timing?.fitDurationTo) {
+          } else if (updatedComponent.context?.timing?.fitDurationTo && mediaDuration) {
             updatedComponent.data = {
               ...updatedComponent.data,
               srcDuration: mediaDuration
@@ -498,8 +531,8 @@ var ComponentRenderer = ({
     context
   };
   if (type === "layout") {
-    const config15 = getComponentConfig(componentId);
-    const isInnerSequence = config15?.isInnerSequence;
+    const config18 = getComponentConfig(componentId);
+    const isInnerSequence = config18?.isInnerSequence;
     if (isInnerSequence) {
       return /* @__PURE__ */ React3.createElement(RenderContext.Provider, { value: newContext }, /* @__PURE__ */ React3.createElement(ComponentClass, { ...props }, effects && effects.length > 0 ? /* @__PURE__ */ React3.createElement(EffectWrapper, { effects, context: newContext }, childrenData?.map((child) => /* @__PURE__ */ React3.createElement(ComponentRenderer, { key: child.id, ...child }))) : childrenData?.map((child) => /* @__PURE__ */ React3.createElement(ComponentRenderer, { key: child.id, ...child }))));
     }
@@ -542,7 +575,7 @@ var SceneFrame = ({ children }) => {
 };
 
 // src/components/layouts/BaseLayout.tsx
-import React13, { Children, useMemo as useMemo7 } from "react";
+import React19, { Children, useMemo as useMemo9 } from "react";
 import { AbsoluteFill as AbsoluteFill3 } from "remotion";
 
 // src/components/effects/BlurEffect.tsx
@@ -557,10 +590,45 @@ var parseFunctionsString = (functions) => {
   if (!functions) {
     return result;
   }
-  const regex = /(\w+)\(([^)]*)\)/g;
-  let match;
-  while ((match = regex.exec(functions)) !== null) {
-    result.set(match[1], match[0]);
+  let i = 0;
+  while (i < functions.length) {
+    while (i < functions.length && /\s/.test(functions[i])) {
+      i++;
+    }
+    if (i >= functions.length) break;
+    const nameStart = i;
+    while (i < functions.length && /[\w-]/.test(functions[i])) {
+      i++;
+    }
+    if (i === nameStart) break;
+    const functionName = functions.substring(nameStart, i);
+    while (i < functions.length && /\s/.test(functions[i])) {
+      i++;
+    }
+    if (i >= functions.length || functions[i] !== "(") {
+      break;
+    }
+    i++;
+    let depth = 1;
+    const contentStart = i;
+    while (i < functions.length && depth > 0) {
+      if (functions[i] === "(") {
+        depth++;
+      } else if (functions[i] === ")") {
+        depth--;
+      }
+      if (depth > 0) {
+        i++;
+      }
+    }
+    if (depth === 0) {
+      const content = functions.substring(contentStart, i);
+      const fullFunction = `${functionName}(${content})`;
+      result.set(functionName, fullFunction);
+      i++;
+    } else {
+      break;
+    }
   }
   return result;
 };
@@ -724,11 +792,20 @@ var parseHexColor = (hex) => {
 var parseRgbaColor = (rgba) => {
   const match = rgba.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)/);
   if (match) {
+    let alpha = 1;
+    if (match[4]) {
+      const alphaValue = parseFloat(match[4]);
+      if (alphaValue > 1) {
+        alpha = Math.max(0, Math.min(1, alphaValue / 100));
+      } else {
+        alpha = Math.max(0, Math.min(1, alphaValue));
+      }
+    }
     return {
       r: Math.max(0, Math.min(255, parseInt(match[1], 10))),
       g: Math.max(0, Math.min(255, parseInt(match[2], 10))),
       b: Math.max(0, Math.min(255, parseInt(match[3], 10))),
-      a: match[4] ? Math.max(0, Math.min(1, parseFloat(match[4]))) : 1
+      a: alpha
     };
   }
   return { r: 0, g: 0, b: 0, a: 1 };
@@ -742,14 +819,21 @@ var parseColor = (color) => {
   }
   return { r: 0, g: 0, b: 0, a: 1 };
 };
-var rgbaToString = (color) => {
-  if (color.a === 1) {
-    return `rgb(${Math.round(color.r)}, ${Math.round(color.g)}, ${Math.round(color.b)})`;
-  } else {
-    return `rgba(${Math.round(color.r)}, ${Math.round(color.g)}, ${Math.round(color.b)}, ${color.a})`;
+var rgbaToString = (color, preserveFormat) => {
+  const r = Math.round(color.r);
+  const g = Math.round(color.g);
+  const b = Math.round(color.b);
+  const a = color.a;
+  if (preserveFormat) {
+    if (preserveFormat.hasSpaces) {
+      return `rgba(${r}, ${g}, ${b}, ${a})`;
+    } else {
+      return `rgba(${r},${g},${b},${a})`;
+    }
   }
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
 };
-var interpolateColors = (color1, color2, progress) => {
+var interpolateColors = (color1, color2, progress, preserveFormat) => {
   const parsedColor1 = parseColor(color1);
   const parsedColor2 = parseColor(color2);
   const interpolatedColor = {
@@ -758,7 +842,75 @@ var interpolateColors = (color1, color2, progress) => {
     b: interpolate(progress, [0, 1], [parsedColor1.b, parsedColor2.b]),
     a: interpolate(progress, [0, 1], [parsedColor1.a, parsedColor2.a])
   };
-  return rgbaToString(interpolatedColor);
+  return rgbaToString(interpolatedColor, preserveFormat);
+};
+var findColorsInString = (str) => {
+  const matches = [];
+  const rgbaPattern = /rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)/g;
+  let match;
+  rgbaPattern.lastIndex = 0;
+  while ((match = rgbaPattern.exec(str)) !== null) {
+    matches.push({
+      fullMatch: match[0],
+      color: match[0],
+      startIndex: match.index,
+      endIndex: match.index + match[0].length
+    });
+  }
+  const hexPattern = /#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\b/g;
+  hexPattern.lastIndex = 0;
+  while ((match = hexPattern.exec(str)) !== null) {
+    matches.push({
+      fullMatch: match[0],
+      color: match[0],
+      startIndex: match.index,
+      endIndex: match.index + match[0].length
+    });
+  }
+  return matches.sort((a, b) => a.startIndex - b.startIndex);
+};
+var interpolateColorsInString = (str1, str2, progress) => {
+  const colors1 = findColorsInString(str1);
+  const colors2 = findColorsInString(str2);
+  if (colors1.length === 0 && colors2.length === 0) {
+    return str1;
+  }
+  if (colors1.length === 0 || colors2.length === 0) {
+    return str1;
+  }
+  const minLength = Math.min(colors1.length, colors2.length);
+  const replacements = [];
+  for (let i = 0; i < minLength; i++) {
+    const color1 = colors1[i];
+    const color2 = colors2[i];
+    const originalColor = color1.color;
+    const hasSpaces = originalColor.includes(", ");
+    const interpolatedColor = interpolateColors(color1.color, color2.color, progress, { hasSpaces });
+    replacements.push({
+      startIndex: color1.startIndex,
+      endIndex: color1.endIndex,
+      replacement: interpolatedColor
+    });
+  }
+  replacements.sort((a, b) => b.startIndex - a.startIndex);
+  let result = str1;
+  for (const replacement of replacements) {
+    const originalSubstring = result.substring(replacement.startIndex, replacement.endIndex);
+    const expectedColor = colors1.find((c) => c.startIndex === replacement.startIndex);
+    if (expectedColor && (originalSubstring === expectedColor.color || originalSubstring.trim().match(/^rgba?\(/i))) {
+      result = result.substring(0, replacement.startIndex) + replacement.replacement + result.substring(replacement.endIndex);
+    } else {
+      const currentColors = findColorsInString(result);
+      const matchingColor = currentColors.find(
+        (c) => Math.abs(c.startIndex - replacement.startIndex) < 30
+        // Allow some offset
+      );
+      if (matchingColor) {
+        result = result.substring(0, matchingColor.startIndex) + replacement.replacement + result.substring(matchingColor.endIndex);
+      }
+    }
+  }
+  return result;
 };
 var calculateAnimatedValue = (ranges, progress, key) => {
   const sortedRanges = [...ranges].sort((a, b) => a.prog - b.prog);
@@ -794,6 +946,11 @@ var calculateAnimatedValue = (ranges, progress, key) => {
         if (isColor(currentValue) && isColor(nextValue)) {
           return interpolateColors(currentValue, nextValue, localProgress);
         }
+        const colors1 = findColorsInString(currentValue);
+        const colors2 = findColorsInString(nextValue);
+        if (colors1.length > 0 || colors2.length > 0) {
+          return interpolateColorsInString(currentValue, nextValue, localProgress);
+        }
         const getUnitAndValue = (str) => {
           const units = ["vmax", "vmin", "rem", "deg", "bpm", "vh", "vw", "px", "em", "ms", "hz", "db", "fr", "s", "%"];
           for (const unit of units) {
@@ -842,7 +999,7 @@ var rangesToCSSProperties = (ranges, progress) => {
     const value = calculateAnimatedValue(keyRanges, progress, key);
     switch (key) {
       case "scale":
-        styles.transform = `scale(${value})`;
+        styles.transform = `${styles.transform || ""} scale(${value})`.trim();
         break;
       case "rotate":
         const rotateValue = typeof value === "string" && value.includes("deg") ? value : `${value}deg`;
@@ -1748,209 +1905,1721 @@ var config7 = {
   }
 };
 
-// src/components/effects/GenericPresets.ts
-var fadeInPreset = [
-  { key: "opacity", val: 0, prog: 0 },
-  { key: "opacity", val: 1, prog: 1 }
-];
-var fadeOutPreset = [
-  { key: "opacity", val: 1, prog: 0 },
-  { key: "opacity", val: 0, prog: 1 }
-];
-var scaleInPreset = [
-  { key: "scale", val: 0, prog: 0 },
-  { key: "scale", val: 1, prog: 1 }
-];
-var scaleOutPreset = [
-  { key: "scale", val: 1, prog: 0 },
-  { key: "scale", val: 0, prog: 1 }
-];
-var slideInLeftPreset = [
-  { key: "translateX", val: -100, prog: 0 },
-  { key: "translateX", val: 0, prog: 1 }
-];
-var slideInRightPreset = [
-  { key: "translateX", val: 100, prog: 0 },
-  { key: "translateX", val: 0, prog: 1 }
-];
-var slideInTopPreset = [
-  { key: "translateY", val: -100, prog: 0 },
-  { key: "translateY", val: 0, prog: 1 }
-];
-var slideInBottomPreset = [
-  { key: "translateY", val: 100, prog: 0 },
-  { key: "translateY", val: 0, prog: 1 }
-];
-var bouncePreset = [
-  { key: "scale", val: 0, prog: 0 },
-  { key: "scale", val: 1.2, prog: 0.6 },
-  { key: "scale", val: 1, prog: 1 }
-];
-var pulsePreset = [
-  { key: "scale", val: 1, prog: 0 },
-  { key: "scale", val: 1.1, prog: 0.5 },
-  { key: "scale", val: 1, prog: 1 }
-];
-var rotateInPreset = [
-  { key: "rotate", val: -180, prog: 0 },
-  { key: "rotate", val: 0, prog: 1 }
-];
-var blurInPreset = [
-  { key: "blur", val: 10, prog: 0 },
-  { key: "blur", val: 0, prog: 1 }
-];
-var fadeInScalePreset = [
-  { key: "opacity", val: 0, prog: 0 },
-  { key: "opacity", val: 1, prog: 1 },
-  { key: "scale", val: 0.8, prog: 0 },
-  { key: "scale", val: 1, prog: 1 }
-];
-var slideInFadePreset = [
-  { key: "translateX", val: -50, prog: 0 },
-  { key: "translateX", val: 0, prog: 1 },
-  { key: "opacity", val: 0, prog: 0 },
-  { key: "opacity", val: 1, prog: 1 }
-];
-var slideInLeftStringPreset = [
-  { key: "translateX", val: "-100px", prog: 0 },
-  { key: "translateX", val: "0px", prog: 1 }
-];
-var slideInRightStringPreset = [
-  { key: "translateX", val: "100px", prog: 0 },
-  { key: "translateX", val: "0px", prog: 1 }
-];
-var slideInTopStringPreset = [
-  { key: "translateY", val: "-100px", prog: 0 },
-  { key: "translateY", val: "0px", prog: 1 }
-];
-var slideInBottomStringPreset = [
-  { key: "translateY", val: "100px", prog: 0 },
-  { key: "translateY", val: "0px", prog: 1 }
-];
-var rotateInStringPreset = [
-  { key: "rotate", val: "-180deg", prog: 0 },
-  { key: "rotate", val: "0deg", prog: 1 }
-];
-var blurInStringPreset = [
-  { key: "blur", val: "10px", prog: 0 },
-  { key: "blur", val: "0px", prog: 1 }
-];
-var scaleInStringPreset = [
-  { key: "scale", val: 0, prog: 0 },
-  { key: "scale", val: 1, prog: 1 }
-];
-var slideInLeftResponsivePreset = [
-  { key: "translateX", val: "-50vw", prog: 0 },
-  { key: "translateX", val: "0vw", prog: 1 }
-];
-var slideInTopResponsivePreset = [
-  { key: "translateY", val: "-50vh", prog: 0 },
-  { key: "translateY", val: "0vh", prog: 1 }
-];
-var backgroundColorPreset = [
-  { key: "backgroundColor", val: "#ff0000", prog: 0 },
-  { key: "backgroundColor", val: "#0000ff", prog: 1 }
-];
-var borderRadiusPreset = [
-  { key: "borderRadius", val: "0px", prog: 0 },
-  { key: "borderRadius", val: "50px", prog: 1 }
-];
-var boxShadowPreset = [
-  { key: "boxShadow", val: "0px 0px 0px rgba(0,0,0,0)", prog: 0 },
-  { key: "boxShadow", val: "10px 10px 20px rgba(0,0,0,0.5)", prog: 1 }
-];
-var fontSizePreset = [
-  { key: "fontSize", val: "12px", prog: 0 },
-  { key: "fontSize", val: "24px", prog: 1 }
-];
-var letterSpacingPreset = [
-  { key: "letterSpacing", val: "0px", prog: 0 },
-  { key: "letterSpacing", val: "5px", prog: 1 }
-];
-var lineHeightPreset = [
-  { key: "lineHeight", val: "1", prog: 0 },
-  { key: "lineHeight", val: "2", prog: 1 }
-];
-var textShadowPreset = [
-  { key: "textShadow", val: "0px 0px 0px rgba(0,0,0,0)", prog: 0 },
-  { key: "textShadow", val: "2px 2px 4px rgba(0,0,0,0.5)", prog: 1 }
-];
-var widthPreset = [
-  { key: "width", val: "0px", prog: 0 },
-  { key: "width", val: "100%", prog: 1 }
-];
-var heightPreset = [
-  { key: "height", val: "0px", prog: 0 },
-  { key: "height", val: "100%", prog: 1 }
-];
-var marginPreset = [
-  { key: "margin", val: "0px", prog: 0 },
-  { key: "margin", val: "20px", prog: 1 }
-];
-var paddingPreset = [
-  { key: "padding", val: "0px", prog: 0 },
-  { key: "padding", val: "20px", prog: 1 }
-];
-var morphingCardPreset = [
-  { key: "borderRadius", val: "0px", prog: 0 },
-  { key: "borderRadius", val: "20px", prog: 0.5 },
-  { key: "borderRadius", val: "50px", prog: 1 },
-  { key: "boxShadow", val: "0px 0px 0px rgba(0,0,0,0)", prog: 0 },
-  { key: "boxShadow", val: "0px 10px 30px rgba(0,0,0,0.3)", prog: 1 },
-  { key: "backgroundColor", val: "#ffffff", prog: 0 },
-  { key: "backgroundColor", val: "#f0f0f0", prog: 1 }
-];
-var textRevealPreset = [
-  { key: "opacity", val: 0, prog: 0 },
-  { key: "opacity", val: 1, prog: 1 },
-  { key: "letterSpacing", val: "10px", prog: 0 },
-  { key: "letterSpacing", val: "0px", prog: 1 },
-  { key: "textShadow", val: "0px 0px 0px rgba(0,0,0,0)", prog: 0 },
-  { key: "textShadow", val: "2px 2px 4px rgba(0,0,0,0.5)", prog: 1 }
-];
-var GenericEffectPresets = {
-  fadeInPreset,
-  fadeOutPreset,
-  scaleInPreset,
-  scaleOutPreset,
-  slideInLeftPreset,
-  slideInRightPreset,
-  slideInTopPreset,
-  slideInBottomPreset,
-  bouncePreset,
-  pulsePreset,
-  rotateInPreset,
-  blurInPreset,
-  fadeInScalePreset,
-  slideInFadePreset,
-  // String-based presets
-  slideInLeftStringPreset,
-  slideInRightStringPreset,
-  slideInTopStringPreset,
-  slideInBottomStringPreset,
-  rotateInStringPreset,
-  blurInStringPreset,
-  scaleInStringPreset,
-  slideInLeftResponsivePreset,
-  slideInTopResponsivePreset,
-  // Custom CSS property presets
-  backgroundColorPreset,
-  borderRadiusPreset,
-  boxShadowPreset,
-  fontSizePreset,
-  letterSpacingPreset,
-  lineHeightPreset,
-  textShadowPreset,
-  widthPreset,
-  heightPreset,
-  marginPreset,
-  paddingPreset,
-  morphingCardPreset,
-  textRevealPreset
-};
+// src/components/effects/WaveformEffect.tsx
+import React13, { useMemo as useMemo8 } from "react";
 
-// src/components/effects/index.ts
-registerEffect(config2.displayName, BlurEffect, config2);
+// src/templates/waveform/hooks/useWaveformData.ts
+import { useMemo as useMemo7 } from "react";
+import {
+  useAudioData,
+  visualizeAudioWaveform,
+  visualizeAudio
+} from "@remotion/media-utils";
+import { staticFile } from "remotion";
+var isValidPowerOfTwo = (num) => {
+  return num > 0 && (num & num - 1) === 0;
+};
+var getClosestPowerOfTwo = (num) => {
+  if (num <= 0) return 32;
+  let power = 1;
+  while (power < num) {
+    power *= 2;
+  }
+  const lower = power / 2;
+  const upper = power;
+  return Math.abs(num - lower) < Math.abs(num - upper) ? lower : upper;
+};
+var useWaveformData = (config18) => {
+  const {
+    audioSrc,
+    numberOfSamples,
+    windowInSeconds,
+    dataOffsetInSeconds = 0,
+    normalize = false,
+    frame,
+    fps,
+    posterize,
+    includeFrequencyData = false,
+    minDb = -100,
+    maxDb = -30,
+    smoothNormalisation = 1
+  } = config18;
+  const { root } = useComposition();
+  const validatedNumberOfSamples = useMemo7(() => {
+    if (!isValidPowerOfTwo(numberOfSamples)) {
+      console.warn(
+        `numberOfSamples must be a power of 2. Adjusting ${numberOfSamples} to ${getClosestPowerOfTwo(numberOfSamples)}`
+      );
+      return getClosestPowerOfTwo(numberOfSamples);
+    }
+    return numberOfSamples;
+  }, [numberOfSamples]);
+  const { source, audioStartsFrom } = useMemo7(() => {
+    if (audioSrc.startsWith("http")) {
+      return { source: audioSrc, audioStartsFrom: void 0 };
+    }
+    if (audioSrc.startsWith("ref:")) {
+      const matchingComponent = findMatchingComponents(root, [
+        audioSrc.replace("ref:", "")
+      ]);
+      if (matchingComponent.length > 0) {
+        const firstMatchingComponent = matchingComponent[0];
+        if (firstMatchingComponent.componentId === "AudioAtom") {
+          return {
+            source: firstMatchingComponent.data.src,
+            audioStartsFrom: firstMatchingComponent.data?.startFrom ?? void 0
+          };
+        }
+        if (firstMatchingComponent.type === "layout" || firstMatchingComponent.type === "scene") {
+          const audioComponents = findMatchingComponentsByQuery(
+            firstMatchingComponent.childrenData,
+            { componentId: "AudioAtom" }
+          );
+          if (audioComponents.length > 0) {
+            return {
+              source: audioComponents[0].data.src,
+              audioStartsFrom: audioComponents[0].data?.startFrom ?? void 0
+            };
+          }
+        }
+      }
+    }
+    return { source: staticFile(audioSrc), audioStartsFrom: void 0 };
+  }, [audioSrc]);
+  const audioData = useAudioData(source);
+  const adjustedFrame = useMemo7(() => {
+    if (posterize && posterize > 1) {
+      return Math.round(frame / posterize) * posterize;
+    }
+    let offset = 0;
+    if (audioStartsFrom && audioStartsFrom != 0) {
+      offset += Math.round(audioStartsFrom * fps);
+    }
+    if (dataOffsetInSeconds != 0) {
+      offset += Math.round(dataOffsetInSeconds * fps);
+    }
+    return frame + offset;
+  }, [frame, posterize, dataOffsetInSeconds, audioStartsFrom]);
+  const waveformData = useMemo7(() => {
+    if (!audioData) return null;
+    try {
+      const baseSmoothingFrames = 3;
+      const smoothingFrames = smoothNormalisation > 0 ? Math.floor(smoothNormalisation * baseSmoothingFrames) : 0;
+      const samples = [];
+      if (smoothingFrames === 0) {
+        const waveform = visualizeAudioWaveform({
+          fps,
+          frame: adjustedFrame,
+          audioData,
+          numberOfSamples: validatedNumberOfSamples,
+          windowInSeconds,
+          dataOffsetInSeconds: 0,
+          normalize
+        });
+        return waveform;
+      }
+      for (let offset = -smoothingFrames; offset <= smoothingFrames; offset++) {
+        const sampleFrame = adjustedFrame + offset;
+        if (sampleFrame >= 0) {
+          try {
+            const waveform = visualizeAudioWaveform({
+              fps,
+              frame: sampleFrame,
+              audioData,
+              numberOfSamples: validatedNumberOfSamples,
+              windowInSeconds,
+              dataOffsetInSeconds: 0,
+              normalize
+            });
+            if (waveform && waveform.length > 0) {
+              samples.push(waveform);
+            }
+          } catch (e) {
+          }
+        }
+      }
+      if (samples.length === 0) {
+        const waveform = visualizeAudioWaveform({
+          fps,
+          frame: adjustedFrame,
+          audioData,
+          numberOfSamples: validatedNumberOfSamples,
+          windowInSeconds,
+          dataOffsetInSeconds: 0,
+          normalize
+        });
+        return waveform;
+      }
+      const averaged = new Array(validatedNumberOfSamples).fill(0);
+      for (let i = 0; i < validatedNumberOfSamples; i++) {
+        let sum = 0;
+        let count = 0;
+        for (const sample of samples) {
+          if (sample[i] !== void 0) {
+            sum += sample[i];
+            count++;
+          }
+        }
+        averaged[i] = count > 0 ? sum / count : 0;
+      }
+      return averaged;
+    } catch (error2) {
+      console.error("Error generating waveform:", error2);
+      return null;
+    }
+  }, [
+    audioData,
+    adjustedFrame,
+    fps,
+    validatedNumberOfSamples,
+    windowInSeconds,
+    dataOffsetInSeconds,
+    normalize,
+    smoothNormalisation
+  ]);
+  const {
+    frequencyData,
+    amplitudes,
+    bass,
+    mid,
+    treble,
+    bassValues,
+    midValues,
+    trebleValues
+  } = useMemo7(() => {
+    if (!audioData || !includeFrequencyData) {
+      return {
+        frequencyData: null,
+        amplitudes: null,
+        bass: null,
+        mid: null,
+        treble: null,
+        bassValues: null,
+        midValues: null,
+        trebleValues: null
+      };
+    }
+    try {
+      const baseSmoothingFrames = 3;
+      const smoothingFrames = smoothNormalisation > 0 ? Math.floor(smoothNormalisation * baseSmoothingFrames) : 0;
+      const frequencySamples = [];
+      let frequencyData2;
+      if (smoothingFrames === 0) {
+        frequencyData2 = visualizeAudio({
+          fps,
+          frame: adjustedFrame,
+          audioData,
+          numberOfSamples: validatedNumberOfSamples
+        });
+      } else {
+        for (let offset = -smoothingFrames; offset <= smoothingFrames; offset++) {
+          const sampleFrame = adjustedFrame + offset;
+          if (sampleFrame >= 0) {
+            try {
+              const freqData = visualizeAudio({
+                fps,
+                frame: sampleFrame,
+                audioData,
+                numberOfSamples: validatedNumberOfSamples
+              });
+              if (freqData && freqData.length > 0) {
+                frequencySamples.push(freqData);
+              }
+            } catch (e) {
+            }
+          }
+        }
+        if (frequencySamples.length === 0) {
+          frequencyData2 = visualizeAudio({
+            fps,
+            frame: adjustedFrame,
+            audioData,
+            numberOfSamples: validatedNumberOfSamples
+          });
+        } else {
+          frequencyData2 = new Array(validatedNumberOfSamples).fill(0);
+          for (let i = 0; i < validatedNumberOfSamples; i++) {
+            let sum = 0;
+            let count = 0;
+            for (const sample of frequencySamples) {
+              if (sample[i] !== void 0) {
+                sum += sample[i];
+                count++;
+              }
+            }
+            frequencyData2[i] = count > 0 ? sum / count : 0;
+          }
+        }
+      }
+      const { sampleRate } = audioData;
+      const bassValues2 = [];
+      const midValues2 = [];
+      const trebleValues2 = [];
+      for (let i = 0; i < frequencyData2.length; i++) {
+        const freq = i * sampleRate / (2 * frequencyData2.length);
+        const value = frequencyData2[i];
+        if (freq >= 0 && freq < 250) {
+          bassValues2.push(value * 2.5);
+        } else if (freq >= 250 && freq < 4e3) {
+          midValues2.push(value * 3);
+          midValues2.push(value * 4.5);
+          midValues2.push(value * 5);
+        } else if (freq >= 4e3 && freq < sampleRate / 2) {
+          trebleValues2.push(value * 30);
+        }
+      }
+      const getAverage = (arr) => arr.length > 0 ? arr.reduce((a, b) => a + b, 0) / arr.length : 0;
+      const bass2 = getAverage(bassValues2);
+      const mid2 = getAverage(midValues2);
+      const treble2 = getAverage(trebleValues2);
+      const amplitudes2 = frequencyData2.map((value) => {
+        const db = 20 * Math.log10(value);
+        const scaled = (db - minDb) / (maxDb - minDb);
+        return Math.max(0, Math.min(1, scaled));
+      });
+      return {
+        frequencyData: frequencyData2,
+        amplitudes: amplitudes2,
+        bass: bass2,
+        mid: mid2,
+        treble: treble2,
+        bassValues: bassValues2,
+        midValues: midValues2,
+        trebleValues: trebleValues2.reverse()
+      };
+    } catch (error2) {
+      console.error("Error generating frequency data:", error2);
+      return {
+        frequencyData: null,
+        amplitudes: null,
+        bass: null,
+        mid: null,
+        treble: null
+      };
+    }
+  }, [
+    audioData,
+    includeFrequencyData,
+    adjustedFrame,
+    fps,
+    validatedNumberOfSamples,
+    windowInSeconds,
+    dataOffsetInSeconds,
+    minDb,
+    maxDb,
+    smoothNormalisation
+  ]);
+  const isLoading = !audioData;
+  const error = audioData === null && !isLoading ? "Failed to load audio data" : null;
+  return {
+    waveformData,
+    frequencyData,
+    amplitudes,
+    audioData,
+    isLoading,
+    error,
+    bass,
+    bassValues,
+    mid,
+    midValues,
+    treble,
+    trebleValues
+  };
+};
+
+// src/components/effects/WaveformEffect.tsx
+var WaveformEffect = ({
+  id,
+  componentId,
+  type,
+  data,
+  children,
+  context
+}) => {
+  const { progress, frame, mode, targetIds, effectData, fps } = useUniversalAnimation(data, context);
+  const {
+    audioSrc,
+    numberOfSamples = 128,
+    windowInSeconds,
+    dataOffsetInSeconds = 0,
+    normalize = false,
+    useFrequencyData = true,
+    audioProperty = "bass",
+    sensitivity = 1,
+    threshold = 0,
+    smoothing = 0.5,
+    smoothNormalisation = 1,
+    effectType = "zoom",
+    intensity = 1,
+    minValue,
+    maxValue,
+    shakeAxis = "both",
+    baseScale = 1,
+    baseBrightness = 1,
+    rotationRange = 15
+  } = effectData;
+  const parentContext = useUniversalEffectOptional();
+  const analysisWindow = smoothNormalisation === 0 ? windowInSeconds || 1 / fps : windowInSeconds || Math.max(1 / fps, 0.05);
+  const { bass, mid, treble, waveformData } = useWaveformData({
+    audioSrc,
+    numberOfSamples,
+    windowInSeconds: analysisWindow,
+    dataOffsetInSeconds,
+    normalize,
+    frame,
+    fps,
+    includeFrequencyData: useFrequencyData,
+    smoothNormalisation
+  });
+  const audioIntensity = useMemo8(() => {
+    let rawValue = 0;
+    switch (audioProperty) {
+      case "bass":
+        rawValue = bass || 0;
+        break;
+      case "mid":
+        rawValue = mid || 0;
+        break;
+      case "treble":
+        rawValue = treble || 0;
+        break;
+      case "waveform":
+        if (waveformData && waveformData.length > 0) {
+          rawValue = waveformData.reduce((sum, val) => sum + Math.abs(val), 0) / waveformData.length;
+        }
+        break;
+      case "frequency":
+        rawValue = bass || 0;
+        break;
+      default:
+        rawValue = bass || 0;
+    }
+    const thresholdedValue = Math.max(0, rawValue - threshold);
+    const sensitizedValue = thresholdedValue * sensitivity;
+    return Math.min(1, Math.max(0, sensitizedValue));
+  }, [audioProperty, bass, mid, treble, waveformData, threshold, sensitivity]);
+  const smoothedIntensity = useMemo8(() => {
+    if (smoothNormalisation === 0) {
+      return audioIntensity;
+    }
+    const smoothingPower = 1 + smoothing * 2;
+    const smoothed = Math.pow(audioIntensity, smoothingPower);
+    const baseline = 0.1;
+    const filtered = smoothed * (1 - baseline * smoothing) + baseline * smoothing;
+    return Math.min(1, Math.max(0, filtered));
+  }, [audioIntensity, smoothing, smoothNormalisation]);
+  const animatedStyles = useMemo8(() => {
+    const intensityValue = smoothedIntensity || audioIntensity;
+    let effectValue = intensityValue * intensity;
+    if (minValue !== void 0 || maxValue !== void 0) {
+      const defaultMin = effectType === "zoom" || effectType === "scale" ? baseScale : 0;
+      const defaultMax = effectType === "zoom" || effectType === "scale" ? baseScale + intensity : intensity;
+      const min = minValue !== void 0 ? minValue : defaultMin;
+      const max = maxValue !== void 0 ? maxValue : defaultMax;
+      effectValue = min + intensityValue * (max - min);
+    } else {
+      switch (effectType) {
+        case "zoom":
+        case "scale":
+          effectValue = baseScale + intensityValue * intensity;
+          break;
+        case "exposure":
+          effectValue = baseBrightness + intensityValue * intensity;
+          break;
+        case "blur":
+          effectValue = intensityValue * intensity * 10;
+          break;
+        case "rotate":
+          effectValue = (intensityValue - 0.5) * 2 * rotationRange;
+          break;
+        case "translateX":
+        case "translateY":
+          effectValue = (intensityValue - 0.5) * 2 * intensity * 50;
+          break;
+        default:
+          effectValue = intensityValue * intensity;
+      }
+    }
+    const styles = {};
+    switch (effectType) {
+      case "zoom":
+      case "scale":
+        styles.transform = `scale(${effectValue})`;
+        break;
+      case "shake":
+        const shakeFrequency = 0.1;
+        const shakeTime = frame * shakeFrequency;
+        const shakeAmplitude = intensityValue * intensity * 20;
+        const shakeX = shakeAxis === "x" || shakeAxis === "both" ? Math.sin(shakeTime * 2.3) * shakeAmplitude : 0;
+        const shakeY = shakeAxis === "y" || shakeAxis === "both" ? Math.cos(shakeTime * 1.7) * shakeAmplitude : 0;
+        styles.transform = `translateX(${shakeX}px) translateY(${shakeY}px)`;
+        break;
+      case "exposure":
+        styles.filter = `brightness(${effectValue})`;
+        break;
+      case "blur":
+        styles.filter = `blur(${effectValue}px)`;
+        break;
+      case "rotate":
+        styles.transform = `rotate(${effectValue}deg)`;
+        break;
+      case "translateX":
+        styles.transform = `translateX(${effectValue}px)`;
+        break;
+      case "translateY":
+        styles.transform = `translateY(${effectValue}px)`;
+        break;
+      default:
+        styles.transform = `scale(${effectValue})`;
+    }
+    if (parentContext && mode === "provider") {
+      const combinedStyles = mergeCSSStyles_default(parentContext.animatedStyles, styles);
+      return combinedStyles;
+    }
+    return styles;
+  }, [
+    smoothedIntensity,
+    audioIntensity,
+    effectType,
+    intensity,
+    minValue,
+    maxValue,
+    baseScale,
+    baseBrightness,
+    rotationRange,
+    shakeAxis,
+    mode,
+    parentContext?.animatedStyles,
+    frame
+    // Add frame dependency for shake effect
+  ]);
+  const contextValue = useMemo8(
+    () => ({
+      animatedStyles,
+      targetIds,
+      effectType: "waveform"
+    }),
+    [animatedStyles, targetIds]
+  );
+  if (mode === "provider") {
+    return /* @__PURE__ */ React13.createElement(UniversalEffectContext.Provider, { value: contextValue }, children);
+  }
+  return /* @__PURE__ */ React13.createElement("div", { ...effectData.props, style: animatedStyles }, children);
+};
+var config8 = {
+  displayName: "waveform",
+  description: "Waveform-driven effect that reacts to audio data (bass, mid, treble, waveform)",
+  isInnerSequence: false,
+  props: {
+    audioSrc: {
+      type: "string",
+      required: true,
+      description: "Audio source URL or ref:componentId"
+    },
+    audioProperty: {
+      type: "enum",
+      values: ["bass", "mid", "treble", "waveform", "frequency"],
+      default: "bass",
+      description: "Which audio property to react to"
+    },
+    effectType: {
+      type: "enum",
+      values: ["zoom", "shake", "exposure", "blur", "scale", "rotate", "translateX", "translateY"],
+      default: "zoom",
+      description: "Type of effect to apply"
+    },
+    intensity: {
+      type: "number",
+      default: 1,
+      description: "Effect intensity multiplier"
+    },
+    sensitivity: {
+      type: "number",
+      default: 1,
+      description: "Sensitivity multiplier for audio detection"
+    },
+    threshold: {
+      type: "number",
+      default: 0,
+      description: "Minimum audio value to trigger effect"
+    },
+    smoothing: {
+      type: "number",
+      default: 0.5,
+      description: "Smoothing factor (0-1) for audio data"
+    },
+    smoothNormalisation: {
+      type: "number",
+      default: 1,
+      description: "Frame-based smoothing control (0 = no smoothing, 1 = default, >1 = more smoothing)"
+    }
+  }
+};
+
+// src/components/effects/CanvasWipeReveal.tsx
+import React15, { useEffect, useRef, useState } from "react";
+import { useCurrentFrame as useCurrentFrame4, useVideoConfig as useVideoConfig5 } from "remotion";
+import { z as z2 } from "zod";
+
+// src/components/atoms/CanvasAtom.tsx
+import React14 from "react";
+import { z } from "zod";
+var CanvasAtomDataProps = z.object({
+  className: z.string().optional(),
+  style: z.record(z.string(), z.any()).optional()
+});
+var Atom = React14.forwardRef(({ data, id }, ref) => {
+  const { className, style } = data;
+  return /* @__PURE__ */ React14.createElement("canvas", { ref, className, style, id });
+});
+var config9 = {
+  displayName: "CanvasAtom",
+  type: "atom",
+  isInnerSequence: false,
+  props: CanvasAtomDataProps
+  // The config points to the Zod schema for data
+};
+
+// src/components/effects/CanvasWipeReveal.tsx
+var mulberry32 = (seed) => {
+  return () => {
+    let t = seed += 1831565813;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+};
+var CanvasWipeRevealProps = z2.object({
+  imageUrl: z2.string().url(),
+  revealDurationInFrames: z2.number().min(1),
+  revealType: z2.enum(["wipe", "radial"]).default("wipe"),
+  angle: z2.number().default(0),
+  fit: z2.enum(["cover", "contain"]).default("cover"),
+  edgeStyle: z2.enum(["straight", "organic", "burn"]).default("straight"),
+  edgeWaviness: z2.number().default(30),
+  edgeFrequency: z2.number().default(4),
+  backgroundColor: z2.string().default("rgba(0,0,0,0)"),
+  burnGlow: z2.boolean().default(true),
+  burnGlowColor: z2.string().default("#ff6600"),
+  burnGlowIntensity: z2.number().default(1),
+  organicRandomAmplitude: z2.boolean().default(true),
+  organicRandomWavelength: z2.boolean().default(false)
+});
+var CanvasWipeReveal = ({ data, id }) => {
+  const {
+    imageUrl,
+    revealDurationInFrames,
+    revealType,
+    angle,
+    fit,
+    edgeStyle,
+    edgeWaviness,
+    edgeFrequency,
+    backgroundColor,
+    burnGlow,
+    burnGlowColor,
+    burnGlowIntensity,
+    organicRandomAmplitude,
+    organicRandomWavelength
+  } = data;
+  const frame = useCurrentFrame4();
+  const { width, height } = useVideoConfig5();
+  const canvasRef = useRef(null);
+  const [image, setImage] = useState(null);
+  useEffect(() => {
+    const img = new window.Image();
+    img.crossOrigin = "Anonymous";
+    img.src = imageUrl;
+    img.onload = () => setImage(img);
+  }, [imageUrl]);
+  useEffect(() => {
+    if (!canvasRef.current || !image) return;
+    const context = canvasRef.current.getContext("2d");
+    if (!context) return;
+    context.canvas.width = width;
+    context.canvas.height = height;
+    context.fillStyle = backgroundColor;
+    context.fillRect(0, 0, width, height);
+    const progress = Math.min(frame / revealDurationInFrames, 1);
+    if (progress === 0 && backgroundColor === "rgba(0,0,0,0)") return;
+    const seed = id.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0);
+    context.save();
+    context.beginPath();
+    if (revealType === "radial") {
+      const baseRadius = Math.sqrt(width * width + height * height) / 2 * progress;
+      if (edgeStyle === "organic") {
+        const points = 120;
+        const random = mulberry32(seed);
+        const amplitudes = Array.from(
+          { length: points + 1 },
+          () => organicRandomAmplitude ? 0.5 + random() : 1
+        );
+        const wavelengths = Array.from(
+          { length: points + 1 },
+          () => organicRandomWavelength ? 0.5 + random() * 1.5 : 1
+        );
+        for (let i = 0; i <= points; i++) {
+          const p = i / points;
+          const angle2 = p * Math.PI * 2;
+          const wave = Math.sin(
+            p * Math.PI * edgeFrequency * wavelengths[i] + frame * 0.1
+          ) * edgeWaviness * progress * amplitudes[i];
+          const radius = baseRadius + wave;
+          const x = width / 2 + Math.cos(angle2) * radius;
+          const y = height / 2 + Math.sin(angle2) * radius;
+          if (i === 0) context.moveTo(x, y);
+          else context.lineTo(x, y);
+        }
+        context.closePath();
+      } else if (edgeStyle === "burn") {
+        const points = 120;
+        const random = mulberry32(seed);
+        const randomValues = Array.from({ length: points + 1 }, () => random());
+        const phaseOffsets = Array.from(
+          { length: points + 1 },
+          () => random() * Math.PI * 2
+        );
+        const sparklePoints = [];
+        for (let i = 0; i <= points; i++) {
+          const p = i / points;
+          const angle2 = p * Math.PI * 2;
+          const flicker = Math.sin(frame * 0.3 + phaseOffsets[i]);
+          const burnOffset = (randomValues[i] * 2 - 1) * flicker * edgeWaviness * progress;
+          const radius = baseRadius + burnOffset;
+          const x = width / 2 + Math.cos(angle2) * radius;
+          const y = height / 2 + Math.sin(angle2) * radius;
+          if (burnGlow && i % 5 === 0 && flicker > 0.3) {
+            sparklePoints.push({ x, y, intensity: flicker });
+          }
+          if (i === 0) context.moveTo(x, y);
+          else context.lineTo(x, y);
+        }
+        context.closePath();
+        if (burnGlow && sparklePoints.length > 0) {
+          sparklePoints.forEach((point) => {
+            const glowSize = 3 + point.intensity * 5 * burnGlowIntensity;
+            if (isFinite(point.x) && isFinite(point.y) && isFinite(glowSize) && glowSize > 0) {
+              const gradient = context.createRadialGradient(
+                point.x,
+                point.y,
+                0,
+                point.x,
+                point.y,
+                glowSize
+              );
+              gradient.addColorStop(0, burnGlowColor);
+              gradient.addColorStop(0.5, burnGlowColor + "80");
+              gradient.addColorStop(1, burnGlowColor + "00");
+              context.fillStyle = gradient;
+              context.fillRect(
+                point.x - glowSize,
+                point.y - glowSize,
+                glowSize * 2,
+                glowSize * 2
+              );
+            }
+          });
+        }
+      } else {
+        context.arc(width / 2, height / 2, baseRadius, 0, Math.PI * 2);
+      }
+    } else {
+      const angleInRadians = angle * Math.PI / 180;
+      const diagonal = Math.sqrt(width * width + height * height);
+      context.translate(width / 2, height / 2);
+      context.rotate(angleInRadians);
+      const wipeEdgePosition = progress * diagonal - diagonal / 2;
+      if (edgeStyle === "burn") {
+        const points = 100;
+        const random = mulberry32(seed);
+        const randomValues = Array.from({ length: points + 1 }, () => random());
+        const phaseOffsets = Array.from(
+          { length: points + 1 },
+          () => random() * Math.PI * 2
+        );
+        const edgePoints = [];
+        context.moveTo(wipeEdgePosition, -diagonal / 2);
+        for (let i = 0; i <= points; i++) {
+          const p = i / points;
+          const y = (p - 0.5) * diagonal;
+          const flicker = Math.sin(frame * 0.3 + phaseOffsets[i]);
+          const x = wipeEdgePosition + (randomValues[i] * 2 - 1) * flicker * edgeWaviness;
+          context.lineTo(x, y);
+          edgePoints.push({ x, y });
+        }
+        context.lineTo(wipeEdgePosition, diagonal / 2);
+        context.lineTo(-diagonal / 2, diagonal / 2);
+        context.lineTo(-diagonal / 2, -diagonal / 2);
+        context.closePath();
+        if (burnGlow && progress > 0.01) {
+          const random2 = mulberry32(seed + frame);
+          for (let i = 0; i < edgePoints.length; i += 3) {
+            const point = edgePoints[i];
+            const flicker = Math.sin(frame * 0.3 + phaseOffsets[i]);
+            if (flicker > 0.2) {
+              const glowSize = 4 + random2() * 6 * flicker * burnGlowIntensity;
+              if (isFinite(point.x) && isFinite(point.y) && isFinite(glowSize) && glowSize > 0) {
+                const gradient = context.createRadialGradient(
+                  point.x,
+                  point.y,
+                  0,
+                  point.x,
+                  point.y,
+                  glowSize
+                );
+                gradient.addColorStop(0, burnGlowColor);
+                gradient.addColorStop(0.4, burnGlowColor + "CC");
+                gradient.addColorStop(1, burnGlowColor + "00");
+                context.fillStyle = gradient;
+                context.fillRect(
+                  point.x - glowSize,
+                  point.y - glowSize,
+                  glowSize * 2,
+                  glowSize * 2
+                );
+                if (random2() > 0.85) {
+                  const sparkleSize = 2 + random2() * 3;
+                  context.fillStyle = "#ffffff";
+                  context.fillRect(
+                    point.x - sparkleSize / 2,
+                    point.y - sparkleSize / 2,
+                    sparkleSize,
+                    sparkleSize
+                  );
+                }
+              }
+            }
+          }
+        }
+      } else if (edgeStyle === "organic") {
+        const points = 100;
+        const random = mulberry32(seed);
+        const amplitudes = Array.from(
+          { length: points + 1 },
+          () => organicRandomAmplitude ? 0.5 + random() : 1
+        );
+        const wavelengths = Array.from(
+          { length: points + 1 },
+          () => organicRandomWavelength ? 0.5 + random() * 1.5 : 1
+        );
+        context.moveTo(wipeEdgePosition, -diagonal / 2);
+        for (let i = 0; i <= points; i++) {
+          const p = i / points;
+          const y = (p - 0.5) * diagonal;
+          const wave = Math.sin(
+            p * edgeFrequency * wavelengths[i] * Math.PI + frame * 0.1
+          ) * edgeWaviness * amplitudes[i];
+          context.lineTo(wipeEdgePosition + wave, y);
+        }
+        context.lineTo(wipeEdgePosition, diagonal / 2);
+        context.lineTo(-diagonal / 2, diagonal / 2);
+        context.lineTo(-diagonal / 2, -diagonal / 2);
+        context.closePath();
+      } else {
+        context.rect(
+          -diagonal / 2,
+          -diagonal / 2,
+          wipeEdgePosition + diagonal / 2,
+          diagonal
+        );
+      }
+      context.rotate(-angleInRadians);
+      context.translate(-width / 2, -height / 2);
+    }
+    context.clip();
+    let sx = 0, sy = 0, sWidth = image.width, sHeight = image.height;
+    if (fit === "cover") {
+      const imgAspect = image.width / image.height;
+      const canvasAspect = width / height;
+      if (imgAspect > canvasAspect) {
+        sWidth = image.height * canvasAspect;
+        sx = (image.width - sWidth) / 2;
+      } else {
+        sHeight = image.width / canvasAspect;
+        sy = (image.height - sHeight) / 2;
+      }
+    }
+    context.drawImage(image, sx, sy, sWidth, sHeight, 0, 0, width, height);
+    context.restore();
+  }, [
+    frame,
+    image,
+    width,
+    height,
+    revealDurationInFrames,
+    fit,
+    revealType,
+    angle,
+    edgeStyle,
+    edgeWaviness,
+    edgeFrequency,
+    id,
+    backgroundColor,
+    burnGlow,
+    burnGlowColor,
+    burnGlowIntensity,
+    organicRandomAmplitude,
+    organicRandomWavelength
+  ]);
+  return /* @__PURE__ */ React15.createElement(Atom, { ref: canvasRef, data: { className: "w-full h-full" }, id });
+};
+
+// src/components/effects/CanvasContentAwareReveal.tsx
+import React16, { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { useCurrentFrame as useCurrentFrame5, useVideoConfig as useVideoConfig6 } from "remotion";
+import { z as z3 } from "zod";
+var CanvasContentAwareRevealProps = z3.object({
+  imageUrl: z3.string().url(),
+  revealDurationInFrames: z3.number().min(1),
+  fit: z3.enum(["cover", "contain"]).default("cover"),
+  backgroundColor: z3.string().default("rgba(0,0,0,0)"),
+  burnColorOrder: z3.enum(["vibgyor", "luminance", "random"]).default("vibgyor"),
+  revealMode: z3.enum(["color", "direction", "combined"]).default("combined").describe("Reveal mode: color-only, direction-only, or combined"),
+  direction: z3.enum(["horizontal", "vertical", "diagonal-down", "diagonal-up", "top-to-bottom"]).default("top-to-bottom"),
+  directionLayers: z3.number().default(10).describe("Number of layers for horizontal/vertical patterns")
+});
+var CanvasContentAwareReveal = ({ data, id }) => {
+  const {
+    imageUrl,
+    revealDurationInFrames,
+    fit,
+    backgroundColor,
+    burnColorOrder,
+    revealMode,
+    direction,
+    directionLayers
+  } = data;
+  const frame = useCurrentFrame5();
+  const { width, height } = useVideoConfig6();
+  const canvasRef = useRef2(null);
+  const [image, setImage] = useState2(null);
+  const [pixelBurnMap, setPixelBurnMap] = useState2(null);
+  const [isProcessing, setIsProcessing] = useState2(false);
+  const burnMapGeneratedRef = useRef2(false);
+  const rgbToHsv = (r, g, b) => {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b), min = Math.min(r, g, b), delta = max - min;
+    let h = 0;
+    if (delta !== 0) {
+      if (max === r) h = (g - b) / delta % 6;
+      else if (max === g) h = (b - r) / delta + 2;
+      else h = (r - g) / delta + 4;
+      h *= 60;
+      if (h < 0) h += 360;
+    }
+    return [h, max === 0 ? 0 : delta / max, max];
+  };
+  const getLuminance = (r, g, b) => 0.299 * r + 0.587 * g + 0.114 * b;
+  const hueToVibgyorOrder = (hue) => {
+    if (hue >= 260 && hue <= 290) return 0;
+    if (hue >= 240 && hue < 260) return 0.15;
+    if (hue >= 200 && hue < 240) return 0.3;
+    if (hue >= 120 && hue < 200) return 0.5;
+    if (hue >= 50 && hue < 120) return 0.65;
+    if (hue >= 20 && hue < 50) return 0.8;
+    if (hue >= 290 || hue < 20) return 1;
+    return hue / 360;
+  };
+  useEffect2(() => {
+    const img = new window.Image();
+    img.crossOrigin = "Anonymous";
+    img.src = imageUrl;
+    img.onload = () => {
+      setImage(img);
+      burnMapGeneratedRef.current = false;
+    };
+  }, [imageUrl]);
+  useEffect2(() => {
+    if (!image || isProcessing || burnMapGeneratedRef.current) return;
+    setIsProcessing(true);
+    setTimeout(() => {
+      try {
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        if (!ctx) return;
+        canvas.width = image.width;
+        canvas.height = image.height;
+        ctx.drawImage(image, 0, 0);
+        const imageData = ctx.getImageData(0, 0, image.width, image.height);
+        const pixels = imageData.data;
+        const burnMap = new Float32Array(image.width * image.height);
+        const rawValues = [];
+        for (let i = 0; i < pixels.length; i += 4) {
+          const pixelIndex = i / 4;
+          const [r, g, b] = [pixels[i], pixels[i + 1], pixels[i + 2]];
+          let burnValue = 0;
+          if (burnColorOrder === "vibgyor") {
+            const [h, s] = rgbToHsv(r, g, b);
+            burnValue = hueToVibgyorOrder(h) * s + 0.5 * (1 - s);
+          } else if (burnColorOrder === "luminance") {
+            burnValue = getLuminance(r, g, b) / 255;
+          } else {
+            burnValue = pixelIndex * 2654435761 % 2147483648 / 2147483648;
+          }
+          rawValues.push(burnValue);
+        }
+        const numBuckets = 200;
+        const buckets = new Array(numBuckets).fill(0);
+        rawValues.forEach((val) => {
+          buckets[Math.min(Math.floor(val * numBuckets), numBuckets - 1)]++;
+        });
+        const cumulative = new Array(numBuckets);
+        cumulative[0] = buckets[0];
+        for (let i = 1; i < numBuckets; i++) {
+          cumulative[i] = cumulative[i - 1] + buckets[i];
+        }
+        rawValues.forEach((val, idx) => {
+          const bucket = Math.min(Math.floor(val * numBuckets), numBuckets - 1);
+          burnMap[idx] = cumulative[bucket] / (image.width * image.height);
+        });
+        if (revealMode === "direction" || revealMode === "combined") {
+          for (let idx = 0; idx < image.width * image.height; idx++) {
+            const x = idx % image.width;
+            const y = Math.floor(idx / image.width);
+            let directionValue = 0;
+            if (direction === "horizontal") {
+              const layer = Math.floor(y / (image.height / directionLayers));
+              const isReverse = layer % 2 === 1;
+              const xNorm = isReverse ? (image.width - x) / image.width : x / image.width;
+              directionValue = layer / directionLayers + xNorm / directionLayers;
+            } else if (direction === "vertical") {
+              const layer = Math.floor(x / (image.width / directionLayers));
+              const isReverse = layer % 2 === 1;
+              const yNorm = isReverse ? (image.height - y) / image.height : y / image.height;
+              directionValue = layer / directionLayers + yNorm / directionLayers;
+            } else if (direction === "top-to-bottom") {
+              directionValue = y / image.height;
+            } else if (direction === "diagonal-down") {
+              directionValue = (x + y) / (image.width + image.height);
+            } else {
+              directionValue = (x + (image.height - y)) / (image.width + image.height);
+            }
+            burnMap[idx] = revealMode === "combined" ? burnMap[idx] * 0.6 + directionValue * 0.4 : directionValue;
+          }
+          let minVal = burnMap[0];
+          let maxVal = burnMap[0];
+          for (let i = 1; i < burnMap.length; i++) {
+            if (burnMap[i] < minVal) minVal = burnMap[i];
+            if (burnMap[i] > maxVal) maxVal = burnMap[i];
+          }
+          const range = maxVal - minVal;
+          if (range > 0) {
+            for (let i = 0; i < burnMap.length; i++) {
+              burnMap[i] = (burnMap[i] - minVal) / range;
+            }
+          }
+        }
+        setPixelBurnMap(burnMap);
+        burnMapGeneratedRef.current = true;
+      } finally {
+        setIsProcessing(false);
+      }
+    }, 0);
+  }, [
+    image,
+    burnColorOrder,
+    revealMode,
+    direction,
+    directionLayers
+  ]);
+  useEffect2(() => {
+    if (!canvasRef.current || !image || !pixelBurnMap) return;
+    const context = canvasRef.current.getContext("2d");
+    if (!context) return;
+    context.canvas.width = width;
+    context.canvas.height = height;
+    context.fillStyle = backgroundColor;
+    context.fillRect(0, 0, width, height);
+    const progress = Math.min(frame / revealDurationInFrames, 1);
+    if (progress >= 1) {
+      let sx2 = 0, sy2 = 0, sWidth2 = image.width, sHeight2 = image.height;
+      if (fit === "cover") {
+        const imgAspect = image.width / image.height;
+        const canvasAspect = width / height;
+        if (imgAspect > canvasAspect) {
+          sWidth2 = image.height * canvasAspect;
+          sx2 = (image.width - sWidth2) / 2;
+        } else {
+          sHeight2 = image.width / canvasAspect;
+          sy2 = (image.height - sHeight2) / 2;
+        }
+      }
+      context.drawImage(image, sx2, sy2, sWidth2, sHeight2, 0, 0, width, height);
+      return;
+    }
+    const tempCanvas = document.createElement("canvas");
+    tempCanvas.width = image.width;
+    tempCanvas.height = image.height;
+    const tempCtx = tempCanvas.getContext("2d");
+    if (!tempCtx) return;
+    tempCtx.drawImage(image, 0, 0);
+    const imageData = tempCtx.getImageData(0, 0, image.width, image.height);
+    const pixels = imageData.data;
+    const transitionWidth = Math.max(
+      0.02,
+      Math.min(0.15, 3 / (revealDurationInFrames / 100))
+    );
+    for (let i = 0; i < pixels.length; i += 4) {
+      const pixelIndex = i / 4;
+      const burnProgress = (progress - pixelBurnMap[pixelIndex]) / transitionWidth;
+      pixels[i + 3] = Math.floor(
+        pixels[i + 3] * Math.max(0, Math.min(1, burnProgress))
+      );
+    }
+    tempCtx.putImageData(imageData, 0, 0);
+    let sx = 0, sy = 0, sWidth = image.width, sHeight = image.height;
+    if (fit === "cover") {
+      const imgAspect = image.width / image.height;
+      const canvasAspect = width / height;
+      if (imgAspect > canvasAspect) {
+        sWidth = image.height * canvasAspect;
+        sx = (image.width - sWidth) / 2;
+      } else {
+        sHeight = image.width / canvasAspect;
+        sy = (image.height - sHeight) / 2;
+      }
+    }
+    context.drawImage(tempCanvas, sx, sy, sWidth, sHeight, 0, 0, width, height);
+  }, [
+    frame,
+    image,
+    width,
+    height,
+    pixelBurnMap,
+    revealDurationInFrames,
+    fit,
+    backgroundColor
+  ]);
+  return /* @__PURE__ */ React16.createElement(Atom, { ref: canvasRef, data: { className: "w-full h-full" }, id });
+};
+
+// src/components/effects/CanvasGlitchEffect.tsx
+import React17, { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
+import { useCurrentFrame as useCurrentFrame6, useVideoConfig as useVideoConfig7 } from "remotion";
+import { z as z4 } from "zod";
+var CanvasGlitchEffectProps = z4.object({
+  imageUrl: z4.string().url(),
+  durationInFrames: z4.number().min(1),
+  fit: z4.enum(["cover", "contain"]).default("cover"),
+  backgroundColor: z4.string().default("rgba(0,0,0,0)"),
+  glitchType: z4.enum(["rgb-shift", "slice", "corrupt", "static", "scan"]).default("rgb-shift"),
+  intensity: z4.number().default(10).describe("Intensity of glitch effect"),
+  frequency: z4.number().default(0.3).describe("How often glitches occur (0-1)"),
+  continuous: z4.boolean().default(false).describe("Continuous glitch vs periodic"),
+  glitchStartFrame: z4.number().default(0).describe("Frame to start glitching"),
+  glitchEndFrame: z4.number().default(-1).describe("Frame to end glitching (-1 = duration)")
+});
+var CanvasGlitchEffect = ({ data, id }) => {
+  const {
+    imageUrl,
+    durationInFrames,
+    fit,
+    backgroundColor,
+    glitchType,
+    intensity,
+    frequency,
+    continuous,
+    glitchStartFrame,
+    glitchEndFrame
+  } = data;
+  const frame = useCurrentFrame6();
+  const { width, height } = useVideoConfig7();
+  const canvasRef = useRef3(null);
+  const [image, setImage] = useState3(null);
+  useEffect3(() => {
+    const img = new window.Image();
+    img.crossOrigin = "Anonymous";
+    img.src = imageUrl;
+    img.onload = () => setImage(img);
+  }, [imageUrl]);
+  useEffect3(() => {
+    if (!canvasRef.current || !image) return;
+    const context = canvasRef.current.getContext("2d");
+    if (!context) return;
+    context.canvas.width = width;
+    context.canvas.height = height;
+    context.fillStyle = backgroundColor;
+    context.fillRect(0, 0, width, height);
+    const endFrame = glitchEndFrame === -1 ? durationInFrames : glitchEndFrame;
+    const isInGlitchRange = frame >= glitchStartFrame && frame <= endFrame;
+    const seed = Math.floor(frame / 3);
+    const random = (seed * 9301 + 49297) % 233280 / 233280;
+    const isGlitching = isInGlitchRange && (continuous || random < frequency);
+    let sx = 0, sy = 0, sWidth = image.width, sHeight = image.height;
+    if (fit === "cover") {
+      const imgAspect = image.width / image.height;
+      const canvasAspect = width / height;
+      if (imgAspect > canvasAspect) {
+        sWidth = image.height * canvasAspect;
+        sx = (image.width - sWidth) / 2;
+      } else {
+        sHeight = image.width / canvasAspect;
+        sy = (image.height - sHeight) / 2;
+      }
+    }
+    if (!isGlitching) {
+      context.drawImage(image, sx, sy, sWidth, sHeight, 0, 0, width, height);
+      return;
+    }
+    if (glitchType === "rgb-shift") {
+      const tempCanvas = document.createElement("canvas");
+      tempCanvas.width = image.width;
+      tempCanvas.height = image.height;
+      const tempCtx = tempCanvas.getContext("2d");
+      if (!tempCtx) return;
+      tempCtx.drawImage(image, 0, 0);
+      const imageData = tempCtx.getImageData(0, 0, image.width, image.height);
+      const pixels = imageData.data;
+      const shift = intensity * (random * 2 - 1);
+      const redData = tempCtx.createImageData(image.width, image.height);
+      const greenData = tempCtx.createImageData(image.width, image.height);
+      const blueData = tempCtx.createImageData(image.width, image.height);
+      for (let i = 0; i < pixels.length; i += 4) {
+        redData.data[i] = pixels[i];
+        redData.data[i + 3] = pixels[i + 3];
+        greenData.data[i + 1] = pixels[i + 1];
+        greenData.data[i + 3] = pixels[i + 3];
+        blueData.data[i + 2] = pixels[i + 2];
+        blueData.data[i + 3] = pixels[i + 3];
+      }
+      context.save();
+      context.globalCompositeOperation = "screen";
+      tempCtx.putImageData(redData, 0, 0);
+      context.drawImage(
+        tempCanvas,
+        sx + shift,
+        sy,
+        sWidth,
+        sHeight,
+        shift,
+        0,
+        width,
+        height
+      );
+      tempCtx.putImageData(greenData, 0, 0);
+      context.drawImage(
+        tempCanvas,
+        sx,
+        sy,
+        sWidth,
+        sHeight,
+        0,
+        0,
+        width,
+        height
+      );
+      tempCtx.putImageData(blueData, 0, 0);
+      context.drawImage(
+        tempCanvas,
+        sx - shift,
+        sy,
+        sWidth,
+        sHeight,
+        -shift,
+        0,
+        width,
+        height
+      );
+      context.restore();
+    } else if (glitchType === "slice") {
+      const sliceCount = 20;
+      const sliceHeight = height / sliceCount;
+      for (let i = 0; i < sliceCount; i++) {
+        const offset = (random * 2 - 1) * intensity * (i % 2 === 0 ? 1 : -1);
+        const sy_slice = sy + sHeight / sliceCount * i;
+        const dy = sliceHeight * i;
+        context.drawImage(
+          image,
+          sx,
+          sy_slice,
+          sWidth,
+          sHeight / sliceCount,
+          offset,
+          dy,
+          width,
+          sliceHeight
+        );
+      }
+    } else if (glitchType === "corrupt") {
+      context.drawImage(image, sx, sy, sWidth, sHeight, 0, 0, width, height);
+      const blockCount = Math.floor(intensity / 2);
+      for (let i = 0; i < blockCount; i++) {
+        const blockW = Math.random() * width * 0.3;
+        const blockH = Math.random() * height * 0.2;
+        const blockX = Math.random() * (width - blockW);
+        const blockY = Math.random() * (height - blockH);
+        const sourceX = Math.random() * (width - blockW);
+        const sourceY = Math.random() * (height - blockH);
+        try {
+          const imgData = context.getImageData(
+            sourceX,
+            sourceY,
+            blockW,
+            blockH
+          );
+          context.putImageData(imgData, blockX, blockY);
+        } catch (e) {
+        }
+      }
+    } else if (glitchType === "static") {
+      context.drawImage(image, sx, sy, sWidth, sHeight, 0, 0, width, height);
+      const imageData = context.getImageData(0, 0, width, height);
+      const pixels = imageData.data;
+      for (let i = 0; i < pixels.length; i += 4) {
+        if (Math.random() < intensity / 100) {
+          const noise = Math.random() * 255;
+          pixels[i] = noise;
+          pixels[i + 1] = noise;
+          pixels[i + 2] = noise;
+        }
+      }
+      context.putImageData(imageData, 0, 0);
+    } else if (glitchType === "scan") {
+      context.drawImage(image, sx, sy, sWidth, sHeight, 0, 0, width, height);
+      const scanY = frame * 5 % height;
+      context.fillStyle = `rgba(255, 255, 255, ${intensity / 100})`;
+      context.fillRect(0, scanY, width, 3);
+      const distortY = Math.max(0, scanY - 10);
+      const distortHeight = Math.min(20, height - distortY);
+      if (distortHeight > 0) {
+        try {
+          const imgData = context.getImageData(
+            0,
+            distortY,
+            width,
+            distortHeight
+          );
+          const shiftAmount = intensity * (random * 2 - 1);
+          context.putImageData(imgData, shiftAmount, distortY);
+        } catch (e) {
+        }
+      }
+    }
+  }, [
+    frame,
+    image,
+    width,
+    height,
+    durationInFrames,
+    fit,
+    backgroundColor,
+    glitchType,
+    intensity,
+    frequency,
+    continuous,
+    glitchStartFrame,
+    glitchEndFrame
+  ]);
+  return /* @__PURE__ */ React17.createElement(Atom, { ref: canvasRef, data: { className: "w-full h-full" }, id });
+};
+
+// src/components/effects/CanvasParticleEffect.tsx
+import React18, { useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
+import { useCurrentFrame as useCurrentFrame7, useVideoConfig as useVideoConfig8 } from "remotion";
+import { z as z5 } from "zod";
+var CanvasParticleEffectProps = z5.object({
+  imageUrl: z5.string().url(),
+  revealDurationInFrames: z5.number().min(1),
+  fit: z5.enum(["cover", "contain"]).default("cover"),
+  backgroundColor: z5.string().default("rgba(0,0,0,0)"),
+  particleCount: z5.number().default(2e3).describe("Number of particles"),
+  particleSize: z5.number().default(3).describe("Size of each particle"),
+  particleEffect: z5.enum(["assemble", "disassemble", "explode", "pixelate"]).default("assemble"),
+  assembleFrom: z5.enum(["center", "edges", "random", "bottom"]).default("random"),
+  speed: z5.number().default(1).describe("Animation speed multiplier"),
+  rotation: z5.boolean().default(false).describe("Add rotation to particles")
+});
+var CanvasParticleEffect = ({ data, id }) => {
+  const {
+    imageUrl,
+    revealDurationInFrames,
+    fit,
+    backgroundColor,
+    particleCount,
+    particleSize,
+    particleEffect,
+    assembleFrom,
+    speed,
+    rotation
+  } = data;
+  const frame = useCurrentFrame7();
+  const { width, height } = useVideoConfig8();
+  const canvasRef = useRef4(null);
+  const [image, setImage] = useState4(null);
+  const [particles, setParticles] = useState4(null);
+  useEffect4(() => {
+    const img = new window.Image();
+    img.crossOrigin = "Anonymous";
+    img.src = imageUrl;
+    img.onload = () => setImage(img);
+  }, [imageUrl]);
+  useEffect4(() => {
+    if (!image) return;
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    canvas.width = image.width;
+    canvas.height = image.height;
+    ctx.drawImage(image, 0, 0);
+    const imageData = ctx.getImageData(0, 0, image.width, image.height);
+    const pixels = imageData.data;
+    const particleArray = [];
+    const step = Math.floor(
+      Math.sqrt(image.width * image.height / particleCount)
+    );
+    for (let y = 0; y < image.height; y += step) {
+      for (let x = 0; x < image.width; x += step) {
+        const i = (y * image.width + x) * 4;
+        const [r, g, b, a] = [
+          pixels[i],
+          pixels[i + 1],
+          pixels[i + 2],
+          pixels[i + 3]
+        ];
+        if (a > 128) {
+          const targetX = x;
+          const targetY = y;
+          let startX = targetX, startY = targetY;
+          if (particleEffect === "assemble") {
+            if (assembleFrom === "center") {
+              startX = image.width / 2;
+              startY = image.height / 2;
+            } else if (assembleFrom === "edges") {
+              const edge = Math.floor(Math.random() * 4);
+              if (edge === 0) {
+                startX = 0;
+                startY = Math.random() * image.height;
+              } else if (edge === 1) {
+                startX = image.width;
+                startY = Math.random() * image.height;
+              } else if (edge === 2) {
+                startX = Math.random() * image.width;
+                startY = 0;
+              } else {
+                startX = Math.random() * image.width;
+                startY = image.height;
+              }
+            } else if (assembleFrom === "bottom") {
+              startX = targetX;
+              startY = image.height + Math.random() * 200;
+            } else {
+              startX = Math.random() * image.width;
+              startY = Math.random() * image.height;
+            }
+          }
+          particleArray.push({
+            x: startX,
+            y: startY,
+            targetX,
+            targetY,
+            color: `rgba(${r},${g},${b},${a / 255})`,
+            startX,
+            startY,
+            angle: Math.random() * Math.PI * 2
+          });
+        }
+      }
+    }
+    setParticles(particleArray);
+  }, [image, particleCount, particleEffect, assembleFrom]);
+  useEffect4(() => {
+    if (!canvasRef.current || !image || !particles) return;
+    const context = canvasRef.current.getContext("2d");
+    if (!context) return;
+    context.canvas.width = width;
+    context.canvas.height = height;
+    context.fillStyle = backgroundColor;
+    context.fillRect(0, 0, width, height);
+    const progress = Math.min(frame / revealDurationInFrames * speed, 1);
+    if (progress >= 1 && particleEffect === "assemble") {
+      const scaleX2 = width / image.width;
+      const scaleY2 = height / image.height;
+      let scale2 = scaleX2;
+      let offsetX2 = 0, offsetY2 = 0;
+      if (fit === "cover") {
+        scale2 = Math.max(scaleX2, scaleY2);
+        offsetX2 = (width - image.width * scale2) / 2;
+        offsetY2 = (height - image.height * scale2) / 2;
+      } else {
+        scale2 = Math.min(scaleX2, scaleY2);
+        offsetX2 = (width - image.width * scale2) / 2;
+        offsetY2 = (height - image.height * scale2) / 2;
+      }
+      context.save();
+      context.translate(offsetX2, offsetY2);
+      context.scale(scale2, scale2);
+      context.drawImage(image, 0, 0);
+      context.restore();
+      return;
+    }
+    const easeProgress = particleEffect === "explode" ? progress * progress * (3 - 2 * progress) : 1 - Math.pow(1 - progress, 3);
+    const scaleX = width / image.width;
+    const scaleY = height / image.height;
+    let scale = scaleX;
+    let offsetX = 0, offsetY = 0;
+    if (fit === "cover") {
+      scale = Math.max(scaleX, scaleY);
+      offsetX = (width - image.width * scale) / 2;
+      offsetY = (height - image.height * scale) / 2;
+    } else {
+      scale = Math.min(scaleX, scaleY);
+      offsetX = (width - image.width * scale) / 2;
+      offsetY = (height - image.height * scale) / 2;
+    }
+    particles.forEach((particle) => {
+      let x, y;
+      if (particleEffect === "assemble") {
+        x = particle.startX + (particle.targetX - particle.startX) * easeProgress;
+        y = particle.startY + (particle.targetY - particle.startY) * easeProgress;
+      } else if (particleEffect === "disassemble") {
+        const reverseProgress = 1 - easeProgress;
+        x = particle.targetX + (particle.startX - particle.targetX) * (1 - reverseProgress);
+        y = particle.targetY + (particle.startY - particle.targetY) * (1 - reverseProgress);
+      } else if (particleEffect === "explode") {
+        const dx = particle.targetX - image.width / 2;
+        const dy = particle.targetY - image.height / 2;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        const explosionDist = dist * easeProgress * 3;
+        x = particle.targetX + dx / dist * explosionDist;
+        y = particle.targetY + dy / dist * explosionDist;
+      } else {
+        x = particle.targetX;
+        y = particle.targetY;
+      }
+      const finalX = x * scale + offsetX;
+      const finalY = y * scale + offsetY;
+      context.save();
+      context.translate(finalX, finalY);
+      if (rotation && particleEffect !== "pixelate") {
+        context.rotate(particle.angle * easeProgress);
+      }
+      const size = particleEffect === "pixelate" ? particleSize * (1 + (1 - easeProgress) * 3) : particleSize;
+      context.fillStyle = particle.color;
+      context.fillRect(-size / 2, -size / 2, size, size);
+      context.restore();
+    });
+  }, [
+    frame,
+    image,
+    width,
+    height,
+    particles,
+    revealDurationInFrames,
+    fit,
+    backgroundColor,
+    particleSize,
+    particleEffect,
+    speed,
+    rotation
+  ]);
+  return /* @__PURE__ */ React18.createElement(Atom, { ref: canvasRef, data: { className: "w-full h-full" }, id });
+};
+
+// src/components/effects/GenericPresets.ts
+var fadeInPreset = [
+  { key: "opacity", val: 0, prog: 0 },
+  { key: "opacity", val: 1, prog: 1 }
+];
+var fadeOutPreset = [
+  { key: "opacity", val: 1, prog: 0 },
+  { key: "opacity", val: 0, prog: 1 }
+];
+var scaleInPreset = [
+  { key: "scale", val: 0, prog: 0 },
+  { key: "scale", val: 1, prog: 1 }
+];
+var scaleOutPreset = [
+  { key: "scale", val: 1, prog: 0 },
+  { key: "scale", val: 0, prog: 1 }
+];
+var slideInLeftPreset = [
+  { key: "translateX", val: -100, prog: 0 },
+  { key: "translateX", val: 0, prog: 1 }
+];
+var slideInRightPreset = [
+  { key: "translateX", val: 100, prog: 0 },
+  { key: "translateX", val: 0, prog: 1 }
+];
+var slideInTopPreset = [
+  { key: "translateY", val: -100, prog: 0 },
+  { key: "translateY", val: 0, prog: 1 }
+];
+var slideInBottomPreset = [
+  { key: "translateY", val: 100, prog: 0 },
+  { key: "translateY", val: 0, prog: 1 }
+];
+var bouncePreset = [
+  { key: "scale", val: 0, prog: 0 },
+  { key: "scale", val: 1.2, prog: 0.6 },
+  { key: "scale", val: 1, prog: 1 }
+];
+var pulsePreset = [
+  { key: "scale", val: 1, prog: 0 },
+  { key: "scale", val: 1.1, prog: 0.5 },
+  { key: "scale", val: 1, prog: 1 }
+];
+var rotateInPreset = [
+  { key: "rotate", val: -180, prog: 0 },
+  { key: "rotate", val: 0, prog: 1 }
+];
+var blurInPreset = [
+  { key: "blur", val: 10, prog: 0 },
+  { key: "blur", val: 0, prog: 1 }
+];
+var fadeInScalePreset = [
+  { key: "opacity", val: 0, prog: 0 },
+  { key: "opacity", val: 1, prog: 1 },
+  { key: "scale", val: 0.8, prog: 0 },
+  { key: "scale", val: 1, prog: 1 }
+];
+var slideInFadePreset = [
+  { key: "translateX", val: -50, prog: 0 },
+  { key: "translateX", val: 0, prog: 1 },
+  { key: "opacity", val: 0, prog: 0 },
+  { key: "opacity", val: 1, prog: 1 }
+];
+var slideInLeftStringPreset = [
+  { key: "translateX", val: "-100px", prog: 0 },
+  { key: "translateX", val: "0px", prog: 1 }
+];
+var slideInRightStringPreset = [
+  { key: "translateX", val: "100px", prog: 0 },
+  { key: "translateX", val: "0px", prog: 1 }
+];
+var slideInTopStringPreset = [
+  { key: "translateY", val: "-100px", prog: 0 },
+  { key: "translateY", val: "0px", prog: 1 }
+];
+var slideInBottomStringPreset = [
+  { key: "translateY", val: "100px", prog: 0 },
+  { key: "translateY", val: "0px", prog: 1 }
+];
+var rotateInStringPreset = [
+  { key: "rotate", val: "-180deg", prog: 0 },
+  { key: "rotate", val: "0deg", prog: 1 }
+];
+var blurInStringPreset = [
+  { key: "blur", val: "10px", prog: 0 },
+  { key: "blur", val: "0px", prog: 1 }
+];
+var scaleInStringPreset = [
+  { key: "scale", val: 0, prog: 0 },
+  { key: "scale", val: 1, prog: 1 }
+];
+var slideInLeftResponsivePreset = [
+  { key: "translateX", val: "-50vw", prog: 0 },
+  { key: "translateX", val: "0vw", prog: 1 }
+];
+var slideInTopResponsivePreset = [
+  { key: "translateY", val: "-50vh", prog: 0 },
+  { key: "translateY", val: "0vh", prog: 1 }
+];
+var backgroundColorPreset = [
+  { key: "backgroundColor", val: "#ff0000", prog: 0 },
+  { key: "backgroundColor", val: "#0000ff", prog: 1 }
+];
+var borderRadiusPreset = [
+  { key: "borderRadius", val: "0px", prog: 0 },
+  { key: "borderRadius", val: "50px", prog: 1 }
+];
+var boxShadowPreset = [
+  { key: "boxShadow", val: "0px 0px 0px rgba(0,0,0,0)", prog: 0 },
+  { key: "boxShadow", val: "10px 10px 20px rgba(0,0,0,0.5)", prog: 1 }
+];
+var fontSizePreset = [
+  { key: "fontSize", val: "12px", prog: 0 },
+  { key: "fontSize", val: "24px", prog: 1 }
+];
+var letterSpacingPreset = [
+  { key: "letterSpacing", val: "0px", prog: 0 },
+  { key: "letterSpacing", val: "5px", prog: 1 }
+];
+var lineHeightPreset = [
+  { key: "lineHeight", val: "1", prog: 0 },
+  { key: "lineHeight", val: "2", prog: 1 }
+];
+var textShadowPreset = [
+  { key: "textShadow", val: "0px 0px 0px rgba(0,0,0,0)", prog: 0 },
+  { key: "textShadow", val: "2px 2px 4px rgba(0,0,0,0.5)", prog: 1 }
+];
+var widthPreset = [
+  { key: "width", val: "0px", prog: 0 },
+  { key: "width", val: "100%", prog: 1 }
+];
+var heightPreset = [
+  { key: "height", val: "0px", prog: 0 },
+  { key: "height", val: "100%", prog: 1 }
+];
+var marginPreset = [
+  { key: "margin", val: "0px", prog: 0 },
+  { key: "margin", val: "20px", prog: 1 }
+];
+var paddingPreset = [
+  { key: "padding", val: "0px", prog: 0 },
+  { key: "padding", val: "20px", prog: 1 }
+];
+var morphingCardPreset = [
+  { key: "borderRadius", val: "0px", prog: 0 },
+  { key: "borderRadius", val: "20px", prog: 0.5 },
+  { key: "borderRadius", val: "50px", prog: 1 },
+  { key: "boxShadow", val: "0px 0px 0px rgba(0,0,0,0)", prog: 0 },
+  { key: "boxShadow", val: "0px 10px 30px rgba(0,0,0,0.3)", prog: 1 },
+  { key: "backgroundColor", val: "#ffffff", prog: 0 },
+  { key: "backgroundColor", val: "#f0f0f0", prog: 1 }
+];
+var textRevealPreset = [
+  { key: "opacity", val: 0, prog: 0 },
+  { key: "opacity", val: 1, prog: 1 },
+  { key: "letterSpacing", val: "10px", prog: 0 },
+  { key: "letterSpacing", val: "0px", prog: 1 },
+  { key: "textShadow", val: "0px 0px 0px rgba(0,0,0,0)", prog: 0 },
+  { key: "textShadow", val: "2px 2px 4px rgba(0,0,0,0.5)", prog: 1 }
+];
+var GenericEffectPresets = {
+  fadeInPreset,
+  fadeOutPreset,
+  scaleInPreset,
+  scaleOutPreset,
+  slideInLeftPreset,
+  slideInRightPreset,
+  slideInTopPreset,
+  slideInBottomPreset,
+  bouncePreset,
+  pulsePreset,
+  rotateInPreset,
+  blurInPreset,
+  fadeInScalePreset,
+  slideInFadePreset,
+  // String-based presets
+  slideInLeftStringPreset,
+  slideInRightStringPreset,
+  slideInTopStringPreset,
+  slideInBottomStringPreset,
+  rotateInStringPreset,
+  blurInStringPreset,
+  scaleInStringPreset,
+  slideInLeftResponsivePreset,
+  slideInTopResponsivePreset,
+  // Custom CSS property presets
+  backgroundColorPreset,
+  borderRadiusPreset,
+  boxShadowPreset,
+  fontSizePreset,
+  letterSpacingPreset,
+  lineHeightPreset,
+  textShadowPreset,
+  widthPreset,
+  heightPreset,
+  marginPreset,
+  paddingPreset,
+  morphingCardPreset,
+  textRevealPreset
+};
+
+// src/components/effects/index.ts
+registerEffect(config2.displayName, BlurEffect, config2);
 registerEffect(config3.displayName, LoopEffect, config3);
 registerEffect(config4.displayName, PanEffect, config4);
 registerEffect(config5.displayName, ZoomEffect, config5);
@@ -1961,13 +3630,22 @@ registerEffect(
   StretchEffect,
   config7
 );
+registerEffect(
+  config8.displayName,
+  WaveformEffect,
+  config8
+);
+registerEffect("CanvasWipeReveal", CanvasWipeReveal);
+registerEffect("CanvasContentAwareReveal", CanvasContentAwareReveal);
+registerEffect("CanvasParticleEffect", CanvasParticleEffect);
+registerEffect("CanvasGlitchEffect", CanvasGlitchEffect);
 
 // src/components/layouts/BaseLayout.tsx
 var Layout = ({ id, children, data, context }) => {
   const { containerProps = {}, childrenProps = [], repeatChildrenProps = {} } = data;
   const overrideStyles = useAnimatedStyles(id);
   const childrenArray = Children.toArray(children);
-  const enhancedStyle = useMemo7(
+  const enhancedStyle = useMemo9(
     () => ({
       ...!context?.boundaries?.reset ? context?.boundaries : {},
       ...containerProps.style,
@@ -1981,7 +3659,7 @@ var Layout = ({ id, children, data, context }) => {
   );
   if (Object.keys(repeatChildrenProps).length <= 0 && childrenProps.length <= 0) {
     if (data.isAbsoluteFill) {
-      return /* @__PURE__ */ React13.createElement(
+      return /* @__PURE__ */ React19.createElement(
         AbsoluteFill3,
         {
           ...containerProps,
@@ -1990,25 +3668,25 @@ var Layout = ({ id, children, data, context }) => {
         childrenArray
       );
     }
-    return /* @__PURE__ */ React13.createElement(
+    return /* @__PURE__ */ React19.createElement(
       "div",
       {
         id,
         ...containerProps,
         style: enhancedStyle
       },
-      childrenArray.map((child, index) => /* @__PURE__ */ React13.createElement(React13.Fragment, { key: index }, child))
+      childrenArray.map((child, index) => /* @__PURE__ */ React19.createElement(React19.Fragment, { key: index }, child))
     );
   }
   if (data.isAbsoluteFill) {
-    return /* @__PURE__ */ React13.createElement(
+    return /* @__PURE__ */ React19.createElement(
       AbsoluteFill3,
       {
         id,
         ...containerProps,
         style: enhancedStyle
       },
-      childrenArray.map((child, index) => /* @__PURE__ */ React13.createElement(
+      childrenArray.map((child, index) => /* @__PURE__ */ React19.createElement(
         "div",
         {
           key: index,
@@ -2018,14 +3696,14 @@ var Layout = ({ id, children, data, context }) => {
       ))
     );
   }
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React19.createElement(
     "div",
     {
       id,
       ...containerProps,
       style: enhancedStyle
     },
-    childrenArray.map((child, index) => /* @__PURE__ */ React13.createElement(
+    childrenArray.map((child, index) => /* @__PURE__ */ React19.createElement(
       "div",
       {
         key: index,
@@ -2035,7 +3713,7 @@ var Layout = ({ id, children, data, context }) => {
     ))
   );
 };
-var config8 = {
+var config10 = {
   displayName: "BaseLayout",
   type: "layout",
   isInnerSequence: false
@@ -2043,17 +3721,17 @@ var config8 = {
 
 // src/components/layouts/index.ts
 registerComponent(
-  config8.displayName,
+  config10.displayName,
   Layout,
   "layout",
-  config8
+  config10
 );
 
 // src/components/atoms/ShapeAtom.tsx
-import React14 from "react";
-import { Easing as Easing4, interpolate as interpolate4, useCurrentFrame as useCurrentFrame4 } from "remotion";
-var Atom = ({ data }) => {
-  const frame = useCurrentFrame4();
+import React20 from "react";
+import { Easing as Easing4, interpolate as interpolate4, useCurrentFrame as useCurrentFrame8 } from "remotion";
+var Atom2 = ({ data }) => {
+  const frame = useCurrentFrame8();
   const { shape, color, rotation, style } = data;
   const rotationStyle = rotation ? {
     transform: `rotate(${interpolate4(
@@ -2075,22 +3753,22 @@ var Atom = ({ data }) => {
   };
   switch (shape) {
     case "circle":
-      return /* @__PURE__ */ React14.createElement("div", { style: { ...baseStyle, backgroundColor: color, borderRadius: "50%" } });
+      return /* @__PURE__ */ React20.createElement("div", { style: { ...baseStyle, backgroundColor: color, borderRadius: "50%" } });
     case "rectangle":
-      return /* @__PURE__ */ React14.createElement("div", { style: { ...baseStyle, backgroundColor: color } });
+      return /* @__PURE__ */ React20.createElement("div", { style: { ...baseStyle, backgroundColor: color } });
     default:
       return null;
   }
 };
-var config9 = {
+var config11 = {
   displayName: "ShapeAtom",
   type: "atom",
   isInnerSequence: false
 };
 
 // src/components/atoms/ImageAtom.tsx
-import React15, { useMemo as useMemo8, useState, useEffect } from "react";
-import { continueRender, delayRender, Img, staticFile } from "remotion";
+import React21, { useMemo as useMemo10, useState as useState5, useEffect as useEffect5 } from "react";
+import { continueRender, delayRender, Img, staticFile as staticFile2 } from "remotion";
 var CORS_PROXIES = [
   "https://thingproxy.freeboard.io/fetch/",
   "https://api.allorigins.win/raw?url=",
@@ -2100,11 +3778,11 @@ var getCorsProxyUrl = (url) => {
   return `${CORS_PROXIES[0]}${encodeURIComponent(url)}`;
 };
 var useImageSource = (src, proxySrc) => {
-  const [imageSource, setImageSource] = useState(src);
-  const [isLoading, setIsLoading] = useState(false);
-  const [hasError, setHasError] = useState(false);
-  const [handle] = useState(() => delayRender("Loading image"));
-  useEffect(() => {
+  const [imageSource, setImageSource] = useState5(src);
+  const [isLoading, setIsLoading] = useState5(false);
+  const [hasError, setHasError] = useState5(false);
+  const [handle] = useState5(() => delayRender("Loading image"));
+  useEffect5(() => {
     if (!src.startsWith("http")) {
       setImageSource(src);
       continueRender(handle);
@@ -2140,20 +3818,20 @@ var useImageSource = (src, proxySrc) => {
   }, [src, proxySrc, handle]);
   return { imageSource, isLoading, hasError };
 };
-var Atom2 = ({ data, id }) => {
+var Atom3 = ({ data, id }) => {
   const overrideStyles = useAnimatedStyles(id);
   const { imageSource, isLoading, hasError } = useImageSource(data.src, data.proxySrc);
-  const source = useMemo8(() => {
+  const source = useMemo10(() => {
     if (data.src.startsWith("http")) {
       return imageSource;
     }
-    return staticFile(data.src);
+    return staticFile2(data.src);
   }, [data.src, imageSource]);
-  const enhancedStyle = useMemo8(() => ({
+  const enhancedStyle = useMemo10(() => ({
     ...data.style,
     ...overrideStyles
   }), [data.style, overrideStyles, isLoading, hasError]);
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React21.createElement(
     Img,
     {
       className: data.className,
@@ -2167,18 +3845,18 @@ var Atom2 = ({ data, id }) => {
     }
   );
 };
-var config10 = {
+var config12 = {
   displayName: "ImageAtom",
   type: "atom",
   isInnerSequence: false
 };
 
 // src/components/atoms/TextAtom.tsx
-import React16, { useEffect as useEffect3, useMemo as useMemo9, useState as useState3 } from "react";
+import React22, { useEffect as useEffect7, useMemo as useMemo11, useState as useState7 } from "react";
 import { delayRender as delayRender3, continueRender as continueRender3 } from "remotion";
 
 // src/hooks/useFontLoader.ts
-import { useState as useState2, useEffect as useEffect2, useCallback } from "react";
+import { useState as useState6, useEffect as useEffect6, useCallback } from "react";
 import { delayRender as delayRender2, continueRender as continueRender2 } from "remotion";
 
 // src/utils/fontUtils.ts
@@ -2320,7 +3998,7 @@ var getNormalizedFontName = (fontFamily) => {
 
 // src/hooks/useFontLoader.ts
 var useFontLoader = (options = {}) => {
-  const [state, setState] = useState2({
+  const [state, setState] = useState6({
     loadedFonts: /* @__PURE__ */ new Map(),
     loadingFonts: /* @__PURE__ */ new Set(),
     errorFonts: /* @__PURE__ */ new Map()
@@ -2479,14 +4157,14 @@ var useFontLoader = (options = {}) => {
 };
 var useFont = (fontFamily, options = {}) => {
   const { loadFont, isFontReady, getFontFamily, getFontError, ...rest } = useFontLoader(options);
-  const [isLoaded, setIsLoaded] = useState2(false);
-  const [error, setError] = useState2(null);
-  const [renderHandle] = useState2(
+  const [isLoaded, setIsLoaded] = useState6(false);
+  const [error, setError] = useState6(null);
+  const [renderHandle] = useState6(
     () => delayRender2(`Loading font: ${fontFamily}`)
   );
   const initialFontFamily = getFontFamily(fontFamily, options) || `"${fontFamily}", sans-serif`;
-  const [fontFamilyValue, setFontFamilyValue] = useState2(initialFontFamily);
-  useEffect2(() => {
+  const [fontFamilyValue, setFontFamilyValue] = useState6(initialFontFamily);
+  useEffect6(() => {
     const loadFontAsync = async () => {
       try {
         const cssValue = await loadFont(fontFamily, options);
@@ -2521,10 +4199,10 @@ var useFont = (fontFamily, options = {}) => {
 };
 
 // src/components/atoms/TextAtom.tsx
-var Atom3 = ({ id, data }) => {
+var Atom4 = ({ id, data }) => {
   const overrideStyles = useAnimatedStyles(id);
-  const [isFontLoading, setIsFontLoading] = useState3(false);
-  const [renderHandle] = useState3(
+  const [isFontLoading, setIsFontLoading] = useState7(false);
+  const [renderHandle] = useState7(
     () => delayRender3(`Loading font: ${data.font?.family}`)
   );
   const { isLoaded, error, isReady, fontFamily } = useFont(
@@ -2544,7 +4222,7 @@ var Atom3 = ({ id, data }) => {
       }
     }
   );
-  useEffect3(() => {
+  useEffect7(() => {
     if (data.font?.family) {
       if (isReady || isLoaded) {
         setIsFontLoading(false);
@@ -2553,7 +4231,7 @@ var Atom3 = ({ id, data }) => {
       }
     }
   }, [data.font, isReady, isLoaded, error]);
-  const enhancedStyle = useMemo9(() => {
+  const enhancedStyle = useMemo11(() => {
     const baseStyle = {
       fontFamily,
       ...data.style
@@ -2574,12 +4252,12 @@ var Atom3 = ({ id, data }) => {
     };
   }, [fontFamily, data.style, data.gradient, overrideStyles]);
   if (isFontLoading && data.loadingState?.showLoadingIndicator) {
-    return /* @__PURE__ */ React16.createElement("div", { style: enhancedStyle, className: data.className }, /* @__PURE__ */ React16.createElement("span", { style: data.loadingState.loadingStyle }, data.loadingState.loadingText || "Loading..."));
+    return /* @__PURE__ */ React22.createElement("div", { style: enhancedStyle, className: data.className }, /* @__PURE__ */ React22.createElement("span", { style: data.loadingState.loadingStyle }, data.loadingState.loadingText || "Loading..."));
   }
   if (error && data.errorState?.showErrorIndicator) {
-    return /* @__PURE__ */ React16.createElement("div", { style: enhancedStyle, className: data.className }, /* @__PURE__ */ React16.createElement("span", { style: data.errorState.errorStyle }, data.errorState.errorText || data.text));
+    return /* @__PURE__ */ React22.createElement("div", { style: enhancedStyle, className: data.className }, /* @__PURE__ */ React22.createElement("span", { style: data.errorState.errorStyle }, data.errorState.errorText || data.text));
   }
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React22.createElement(
     "div",
     {
       style: enhancedStyle,
@@ -2592,59 +4270,59 @@ var Atom3 = ({ id, data }) => {
     data.text
   );
 };
-var config11 = {
+var config13 = {
   displayName: "TextAtom",
   type: "atom",
   isInnerSequence: false
 };
 
 // src/components/atoms/VideoAtom.tsx
-import React17, { useMemo as useMemo10 } from "react";
-import { staticFile as staticFile2, useCurrentFrame as useCurrentFrame5, useVideoConfig as useVideoConfig5, OffthreadVideo, Loop as Loop2 } from "remotion";
-import { z } from "zod";
-var VideoAtomDataProps = z.object({
-  src: z.string(),
+import React23, { useMemo as useMemo12 } from "react";
+import { staticFile as staticFile3, useCurrentFrame as useCurrentFrame9, useVideoConfig as useVideoConfig9, OffthreadVideo, Loop as Loop2 } from "remotion";
+import { z as z6 } from "zod";
+var VideoAtomDataProps = z6.object({
+  src: z6.string(),
   // Video source URL
-  srcDuration: z.number().optional(),
+  srcDuration: z6.number().optional(),
   // Video duration in seconds (or to say it more accurately, each iteration duration in a loop))
-  style: z.record(z.string(), z.any()).optional(),
+  style: z6.record(z6.string(), z6.any()).optional(),
   // CSS styles object
-  containerClassName: z.string().optional(),
+  containerClassName: z6.string().optional(),
   // CSS class names
-  className: z.string().optional(),
+  className: z6.string().optional(),
   // CSS class names
-  startFrom: z.number().optional(),
+  startFrom: z6.number().optional(),
   // Start playback from this time (seconds)
-  endAt: z.number().optional(),
+  endAt: z6.number().optional(),
   // End playback at this time (seconds)
-  playbackRate: z.number().optional(),
+  playbackRate: z6.number().optional(),
   // Playback speed multiplier
-  volume: z.number().optional(),
+  volume: z6.number().optional(),
   // Volume level (0-1)
-  muted: z.boolean().optional(),
+  muted: z6.boolean().optional(),
   // Mute video audio
-  loop: z.boolean().optional(),
+  loop: z6.boolean().optional(),
   // Whether to loop the video
-  fit: z.enum(["contain", "cover", "fill", "none", "scale-down"]).optional()
+  fit: z6.enum(["contain", "cover", "fill", "none", "scale-down"]).optional()
   // Object fit style
 });
-var Atom4 = ({ data, id, context }) => {
-  const { fps } = useVideoConfig5();
+var Atom5 = ({ data, id, context }) => {
+  const { fps } = useVideoConfig9();
   const overrideStyles = useAnimatedStyles(id);
-  const frame = useCurrentFrame5();
-  const source = useMemo10(() => {
+  const frame = useCurrentFrame9();
+  const source = useMemo12(() => {
     if (data.src.startsWith("http")) {
       return data.src;
     }
-    return staticFile2(data.src);
+    return staticFile3(data.src);
   }, [data.src]);
-  const trimBefore = useMemo10(() => {
+  const trimBefore = useMemo12(() => {
     return data.startFrom ? data.startFrom * fps : void 0;
   }, [data.startFrom, fps]);
-  const trimAfter = useMemo10(() => {
+  const trimAfter = useMemo12(() => {
     return data.endAt ? data.endAt * fps : void 0;
   }, [data.endAt, fps]);
-  const videoComponent = /* @__PURE__ */ React17.createElement(
+  const videoComponent = /* @__PURE__ */ React23.createElement(
     OffthreadVideo,
     {
       className: data.className,
@@ -2657,7 +4335,7 @@ var Atom4 = ({ data, id, context }) => {
       muted: data.muted
     }
   );
-  const videoWithStyles = data.containerClassName ? videoComponent : /* @__PURE__ */ React17.createElement(
+  const videoWithStyles = data.containerClassName ? videoComponent : /* @__PURE__ */ React23.createElement(
     OffthreadVideo,
     {
       className: data.className,
@@ -2671,53 +4349,53 @@ var Atom4 = ({ data, id, context }) => {
     }
   );
   if (data.loop) {
-    return /* @__PURE__ */ React17.createElement(Loop2, { times: Infinity, durationInFrames: data.srcDuration ? data.srcDuration * fps : context.timing?.durationInFrames, layout: "none" }, data.containerClassName ? /* @__PURE__ */ React17.createElement("div", { className: data.containerClassName, style: overrideStyles }, videoComponent) : videoWithStyles);
+    return /* @__PURE__ */ React23.createElement(Loop2, { times: Infinity, durationInFrames: data.srcDuration ? data.srcDuration * fps : context.timing?.durationInFrames, layout: "none" }, data.containerClassName ? /* @__PURE__ */ React23.createElement("div", { className: data.containerClassName, style: overrideStyles }, videoComponent) : videoWithStyles);
   }
-  return data.containerClassName ? /* @__PURE__ */ React17.createElement("div", { className: data.containerClassName, style: overrideStyles }, videoComponent) : videoWithStyles;
+  return data.containerClassName ? /* @__PURE__ */ React23.createElement("div", { className: data.containerClassName, style: overrideStyles }, videoComponent) : videoWithStyles;
 };
-var config12 = {
+var config14 = {
   displayName: "VideoAtom",
   type: "atom",
   isInnerSequence: false
 };
 
 // src/components/atoms/AudioAtom.tsx
-import React18, { useMemo as useMemo11 } from "react";
-import { Audio, staticFile as staticFile3, useCurrentFrame as useCurrentFrame6, useVideoConfig as useVideoConfig6 } from "remotion";
-import { z as z2 } from "zod";
-var AudioAtomMutedRangeProps = z2.object({
-  type: z2.literal("range"),
-  values: z2.array(z2.object({
-    start: z2.number(),
+import React24, { useMemo as useMemo13 } from "react";
+import { Audio, staticFile as staticFile4, useCurrentFrame as useCurrentFrame10, useVideoConfig as useVideoConfig10 } from "remotion";
+import { z as z7 } from "zod";
+var AudioAtomMutedRangeProps = z7.object({
+  type: z7.literal("range"),
+  values: z7.array(z7.object({
+    start: z7.number(),
     // Start time in seconds
-    end: z2.number()
+    end: z7.number()
     // End time in seconds
   }))
 });
-var AudioAtomMutedFullProps = z2.object({
-  type: z2.literal("full"),
-  value: z2.boolean()
+var AudioAtomMutedFullProps = z7.object({
+  type: z7.literal("full"),
+  value: z7.boolean()
   // true = muted, false = unmuted
 });
-var AudioAtomDataProps = z2.object({
-  src: z2.string(),
+var AudioAtomDataProps = z7.object({
+  src: z7.string(),
   // Audio source URL
-  startFrom: z2.number().optional(),
+  startFrom: z7.number().optional(),
   // Start playback from this time (seconds)
-  endAt: z2.number().optional(),
+  endAt: z7.number().optional(),
   // End playback at this time (seconds)
-  volume: z2.number().optional(),
+  volume: z7.number().optional(),
   // Volume level (0-1)
-  playbackRate: z2.number().optional(),
+  playbackRate: z7.number().optional(),
   // Playback speed multiplier
-  muted: z2.union([AudioAtomMutedFullProps, AudioAtomMutedRangeProps]).optional()
+  muted: z7.union([AudioAtomMutedFullProps, AudioAtomMutedRangeProps]).optional()
   // Mute configuration
 });
-var Atom5 = ({ data }) => {
-  const { fps } = useVideoConfig6();
+var Atom6 = ({ data }) => {
+  const { fps } = useVideoConfig10();
   const { muted } = data;
-  const frame = useCurrentFrame6();
-  const isMuted = useMemo11(() => {
+  const frame = useCurrentFrame10();
+  const isMuted = useMemo13(() => {
     if (muted?.type === "full") {
       return muted.value;
     }
@@ -2728,15 +4406,15 @@ var Atom5 = ({ data }) => {
     }
     return false;
   }, [muted, frame, fps]);
-  const source = useMemo11(() => {
+  const source = useMemo13(() => {
     if (data.src.startsWith("http")) {
       return data.src;
     }
-    return staticFile3(data.src);
+    return staticFile4(data.src);
   }, [data.src]);
   return (
     // @ts-ignore
-    /* @__PURE__ */ React18.createElement(
+    /* @__PURE__ */ React24.createElement(
       Audio,
       {
         src: source,
@@ -2749,37 +4427,37 @@ var Atom5 = ({ data }) => {
     )
   );
 };
-var config13 = {
+var config15 = {
   displayName: "AudioAtom",
   type: "atom",
   isInnerSequence: false
 };
 
 // src/components/atoms/LottieAtom.tsx
-import React19, { useMemo as useMemo12, useState as useState4, useEffect as useEffect4 } from "react";
-import { continueRender as continueRender4, delayRender as delayRender5, staticFile as staticFile4, useCurrentFrame as useCurrentFrame7, useVideoConfig as useVideoConfig7 } from "remotion";
+import React25, { useMemo as useMemo14, useState as useState8, useEffect as useEffect8 } from "react";
+import { continueRender as continueRender4, delayRender as delayRender5, staticFile as staticFile5, useCurrentFrame as useCurrentFrame11, useVideoConfig as useVideoConfig11 } from "remotion";
 import { Lottie } from "@remotion/lottie";
-import { z as z3 } from "zod";
-var LottieAtomDataProps = z3.object({
-  src: z3.string(),
+import { z as z8 } from "zod";
+var LottieAtomDataProps = z8.object({
+  src: z8.string(),
   // Lottie JSON source URL or local path
-  style: z3.record(z3.string(), z3.any()).optional(),
+  style: z8.record(z8.string(), z8.any()).optional(),
   // CSS styles object
-  className: z3.string().optional(),
+  className: z8.string().optional(),
   // CSS class names
-  loop: z3.boolean().optional(),
+  loop: z8.boolean().optional(),
   // Whether to loop the animation (handled by Remotion timeline)
-  playbackRate: z3.number().optional(),
+  playbackRate: z8.number().optional(),
   // Playback speed multiplier (default: 1)
-  direction: z3.enum(["forward", "reverse"]).optional()
+  direction: z8.enum(["forward", "reverse"]).optional()
   // Animation direction
 });
 var useLottieData = (src) => {
-  const [animationData, setAnimationData] = useState4(null);
-  const [isLoading, setIsLoading] = useState4(true);
-  const [hasError, setHasError] = useState4(false);
-  const [handle] = useState4(() => delayRender5("Loading Lottie animation"));
-  useEffect4(() => {
+  const [animationData, setAnimationData] = useState8(null);
+  const [isLoading, setIsLoading] = useState8(true);
+  const [hasError, setHasError] = useState8(false);
+  const [handle] = useState8(() => delayRender5("Loading Lottie animation"));
+  useEffect8(() => {
     if (!src) {
       console.error("LottieAtom: No source provided");
       setHasError(true);
@@ -2789,7 +4467,7 @@ var useLottieData = (src) => {
     }
     setIsLoading(true);
     setHasError(false);
-    const sourceUrl = src.startsWith("http") ? src : staticFile4(src);
+    const sourceUrl = src.startsWith("http") ? src : staticFile5(src);
     fetch(sourceUrl, {
       mode: "cors",
       credentials: "omit"
@@ -2816,12 +4494,12 @@ var useLottieData = (src) => {
   }, [src, handle]);
   return { animationData, isLoading, hasError };
 };
-var Atom6 = ({ data, id }) => {
-  const { fps } = useVideoConfig7();
-  const frame = useCurrentFrame7();
+var Atom7 = ({ data, id }) => {
+  const { fps } = useVideoConfig11();
+  const frame = useCurrentFrame11();
   const overrideStyles = useAnimatedStyles(id);
   const { animationData, isLoading, hasError } = useLottieData(data.src);
-  const effectiveFrame = useMemo12(() => {
+  const effectiveFrame = useMemo14(() => {
     const playbackRate = data.playbackRate || 1;
     const direction = data.direction || "forward";
     if (direction === "reverse") {
@@ -2829,12 +4507,12 @@ var Atom6 = ({ data, id }) => {
     }
     return frame * playbackRate;
   }, [frame, data.playbackRate, data.direction]);
-  const enhancedStyle = useMemo12(() => ({
+  const enhancedStyle = useMemo14(() => ({
     ...data.style,
     ...overrideStyles
   }), [data.style, overrideStyles]);
   if (isLoading) {
-    return /* @__PURE__ */ React19.createElement(
+    return /* @__PURE__ */ React25.createElement(
       "div",
       {
         className: data.className,
@@ -2850,7 +4528,7 @@ var Atom6 = ({ data, id }) => {
   }
   if (hasError || !animationData) {
     console.warn(`LottieAtom: Failed to render animation from ${data.src}`);
-    return /* @__PURE__ */ React19.createElement(
+    return /* @__PURE__ */ React25.createElement(
       "div",
       {
         className: data.className,
@@ -2870,7 +4548,7 @@ var Atom6 = ({ data, id }) => {
       "\u26A0\uFE0F Lottie Error"
     );
   }
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React25.createElement(
     Lottie,
     {
       animationData,
@@ -2879,49 +4557,84 @@ var Atom6 = ({ data, id }) => {
     }
   );
 };
-var config14 = {
+var config16 = {
   displayName: "LottieAtom",
   type: "atom",
   isInnerSequence: false
 };
 
+// src/components/atoms/HTMLBlockAtom.tsx
+import React26 from "react";
+var Atom8 = ({ id, data }) => {
+  const overrideStyles = useAnimatedStyles(id);
+  const combinedStyle = {
+    ...data.style,
+    ...overrideStyles
+  };
+  return /* @__PURE__ */ React26.createElement(
+    "div",
+    {
+      className: data.className,
+      style: combinedStyle,
+      dangerouslySetInnerHTML: { __html: data.html }
+    }
+  );
+};
+var config17 = {
+  displayName: "HTMLBlockAtom",
+  type: "atom",
+  isInnerSequence: false
+};
+
 // src/components/atoms/index.ts
 registerComponent(
-  config9.displayName,
-  Atom,
-  "atom",
-  config9
-);
-registerComponent(
-  config10.displayName,
+  config11.displayName,
   Atom2,
   "atom",
-  config10
+  config11
 );
-registerComponent(config11.displayName, Atom3, "atom", config11);
 registerComponent(
   config12.displayName,
-  Atom4,
+  Atom3,
   "atom",
   config12
 );
+registerComponent(config13.displayName, Atom4, "atom", config13);
 registerComponent(
-  config13.displayName,
+  config14.displayName,
   Atom5,
   "atom",
-  config13
+  config14
 );
 registerComponent(
-  config14.displayName,
+  config15.displayName,
   Atom6,
   "atom",
-  config14
+  config15
+);
+registerComponent(
+  config16.displayName,
+  Atom7,
+  "atom",
+  config16
+);
+registerComponent(
+  config9.displayName,
+  Atom,
+  "atom",
+  config9
+);
+registerComponent(
+  config17.displayName,
+  Atom8,
+  "atom",
+  config17
 );
 
 // src/hooks/useComponentRegistry.ts
-import { useMemo as useMemo13 } from "react";
+import { useMemo as useMemo15 } from "react";
 var useComponentRegistry = () => {
-  return useMemo13(() => {
+  return useMemo15(() => {
     return {
       registerComponent: componentRegistry.registerComponent.bind(componentRegistry),
       registerPackage: componentRegistry.registerPackage.bind(componentRegistry),
@@ -2932,13 +4645,13 @@ var useComponentRegistry = () => {
 };
 
 // src/hooks/useBoundaryCalculation.ts
-import { useMemo as useMemo14 } from "react";
+import { useMemo as useMemo16 } from "react";
 var useBoundaryCalculation = ({
   parentBoundaries,
   constraints,
   layout
 }) => {
-  return useMemo14(() => {
+  return useMemo16(() => {
     const { x, y, width, height } = parentBoundaries;
     const calculatedX = typeof constraints.x === "number" ? constraints.x : x;
     const calculatedY = typeof constraints.y === "number" ? constraints.y : y;
@@ -3049,16 +4762,16 @@ var needsProxying = (url) => {
 
 // src/templates/rings/NextjsLogo.tsx
 import { evolvePath } from "@remotion/paths";
-import React22, { useMemo as useMemo15 } from "react";
-import { interpolate as interpolate5, spring as spring5, useCurrentFrame as useCurrentFrame9, useVideoConfig as useVideoConfig9 } from "remotion";
+import React29, { useMemo as useMemo17 } from "react";
+import { interpolate as interpolate5, spring as spring5, useCurrentFrame as useCurrentFrame13, useVideoConfig as useVideoConfig13 } from "remotion";
 
 // src/templates/rings/RippleOutLayout.tsx
-import React21 from "react";
-import { spring as spring4, useCurrentFrame as useCurrentFrame8, useVideoConfig as useVideoConfig8, Sequence as Sequence2, AbsoluteFill as AbsoluteFill4 } from "remotion";
-import { z as z4 } from "zod";
-var RippleOutTransitionSchema = z4.object({
-  progress: z4.number().min(0).max(1),
-  logoOut: z4.number().min(0).max(1)
+import React28 from "react";
+import { spring as spring4, useCurrentFrame as useCurrentFrame12, useVideoConfig as useVideoConfig12, Sequence as Sequence2, AbsoluteFill as AbsoluteFill4 } from "remotion";
+import { z as z9 } from "zod";
+var RippleOutTransitionSchema = z9.object({
+  progress: z9.number().min(0).max(1),
+  logoOut: z9.number().min(0).max(1)
 });
 var defaultRippleOutData = {
   progress: 0,
@@ -3076,10 +4789,10 @@ var RippleOutLayout = ({ data, context, children }) => {
     transitionStart,
     transitionDuration
   } = data || { transitionStart: 2, transitionDuration: 1 };
-  const frame = useCurrentFrame8();
-  const { fps } = useVideoConfig8();
+  const frame = useCurrentFrame12();
+  const { fps } = useVideoConfig12();
   const { hierarchy } = useRenderContext();
-  React21.useEffect(() => {
+  React28.useEffect(() => {
     loadGoogleFont("Inter", {
       subsets: ["latin"],
       weights: ["400", "700"]
@@ -3100,14 +4813,14 @@ var RippleOutLayout = ({ data, context, children }) => {
     progress: logoOut,
     logoOut
   };
-  const childrenArray = React21.Children.toArray(children).filter(
-    (child) => React21.isValidElement(child)
+  const childrenArray = React28.Children.toArray(children).filter(
+    (child) => React28.isValidElement(child)
   );
   const [from, to] = childrenArray;
-  return /* @__PURE__ */ React21.createElement(LayoutContext.Provider, { value: transitionData }, /* @__PURE__ */ React21.createElement(AbsoluteFill4, { style: {
+  return /* @__PURE__ */ React28.createElement(LayoutContext.Provider, { value: transitionData }, /* @__PURE__ */ React28.createElement(AbsoluteFill4, { style: {
     ...container,
     ...context?.boundaries
-  } }, /* @__PURE__ */ React21.createElement(Sequence2, { name: from.props.componentId + " - " + from.props.id, from: 0, durationInFrames: transitionStartFrame + transitionDurationFrames }, from), /* @__PURE__ */ React21.createElement(Sequence2, { name: to.props.componentId + " - " + to.props.id, from: transitionStartFrame + transitionDurationFrames / 2 }, to)));
+  } }, /* @__PURE__ */ React28.createElement(Sequence2, { name: from.props.componentId + " - " + from.props.id, from: 0, durationInFrames: transitionStartFrame + transitionDurationFrames }, from), /* @__PURE__ */ React28.createElement(Sequence2, { name: to.props.componentId + " - " + to.props.id, from: transitionStartFrame + transitionDurationFrames / 2 }, to)));
 };
 var rippleOutLayoutConfig = {
   displayName: "RippleOutLayout",
@@ -3123,8 +4836,8 @@ var nStroke = "M149.508 157.52L69.142 54H54V125.97H66.1136V69.3836L139.999 164.8
 var NextjsLogo = () => {
   const { logoOut } = useRippleOutLayout();
   const outProgress = logoOut;
-  const { fps } = useVideoConfig9();
-  const frame = useCurrentFrame9();
+  const { fps } = useVideoConfig13();
+  const frame = useCurrentFrame13();
   const evolve1 = spring5({
     fps,
     frame,
@@ -3148,7 +4861,7 @@ var NextjsLogo = () => {
     },
     durationInFrames: 30
   });
-  const style = useMemo15(() => {
+  const style = useMemo17(() => {
     return {
       height: 140,
       borderRadius: 70,
@@ -3164,7 +4877,7 @@ var NextjsLogo = () => {
     interpolate5(evolve3, [0, 1], [0, 0.7]),
     thirdPath
   );
-  return /* @__PURE__ */ React22.createElement("svg", { style, fill: "none", viewBox: "0 0 180 180" }, /* @__PURE__ */ React22.createElement("mask", { height: "180", id: "mask", style: mask, width: "180", x: "0", y: "0" }, /* @__PURE__ */ React22.createElement("circle", { cx: "90", cy: "90", fill: "black", r: "90" })), /* @__PURE__ */ React22.createElement("mask", { id: "n-mask", style: mask }, /* @__PURE__ */ React22.createElement("path", { d: nStroke, fill: "black" })), /* @__PURE__ */ React22.createElement("g", { mask: "url(#mask)" }, /* @__PURE__ */ React22.createElement("circle", { cx: "90", cy: "90", fill: "black", r: "90" }), /* @__PURE__ */ React22.createElement("g", { stroke: "url(#gradient0)", mask: "url(#n-mask)" }, /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React29.createElement("svg", { style, fill: "none", viewBox: "0 0 180 180" }, /* @__PURE__ */ React29.createElement("mask", { height: "180", id: "mask", style: mask, width: "180", x: "0", y: "0" }, /* @__PURE__ */ React29.createElement("circle", { cx: "90", cy: "90", fill: "black", r: "90" })), /* @__PURE__ */ React29.createElement("mask", { id: "n-mask", style: mask }, /* @__PURE__ */ React29.createElement("path", { d: nStroke, fill: "black" })), /* @__PURE__ */ React29.createElement("g", { mask: "url(#mask)" }, /* @__PURE__ */ React29.createElement("circle", { cx: "90", cy: "90", fill: "black", r: "90" }), /* @__PURE__ */ React29.createElement("g", { stroke: "url(#gradient0)", mask: "url(#n-mask)" }, /* @__PURE__ */ React29.createElement(
     "path",
     {
       strokeWidth: "12.1136",
@@ -3172,7 +4885,7 @@ var NextjsLogo = () => {
       strokeDasharray: evolution1.strokeDasharray,
       strokeDashoffset: evolution1.strokeDashoffset
     }
-  ), /* @__PURE__ */ React22.createElement(
+  ), /* @__PURE__ */ React29.createElement(
     "path",
     {
       strokeWidth: 12.1136,
@@ -3180,7 +4893,7 @@ var NextjsLogo = () => {
       strokeDasharray: evolution2.strokeDasharray,
       strokeDashoffset: evolution2.strokeDashoffset
     }
-  )), /* @__PURE__ */ React22.createElement(
+  )), /* @__PURE__ */ React29.createElement(
     "path",
     {
       stroke: "url(#gradient1)",
@@ -3189,7 +4902,7 @@ var NextjsLogo = () => {
       strokeDashoffset: evolution3.strokeDashoffset,
       strokeWidth: "12"
     }
-  )), /* @__PURE__ */ React22.createElement("defs", null, /* @__PURE__ */ React22.createElement(
+  )), /* @__PURE__ */ React29.createElement("defs", null, /* @__PURE__ */ React29.createElement(
     "linearGradient",
     {
       gradientUnits: "userSpaceOnUse",
@@ -3199,9 +4912,9 @@ var NextjsLogo = () => {
       y1: "116.5",
       y2: "160.5"
     },
-    /* @__PURE__ */ React22.createElement("stop", { stopColor: "white" }),
-    /* @__PURE__ */ React22.createElement("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
-  ), /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React29.createElement("stop", { stopColor: "white" }),
+    /* @__PURE__ */ React29.createElement("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
+  ), /* @__PURE__ */ React29.createElement(
     "linearGradient",
     {
       gradientUnits: "userSpaceOnUse",
@@ -3211,8 +4924,8 @@ var NextjsLogo = () => {
       y1: "54",
       y2: "106.875"
     },
-    /* @__PURE__ */ React22.createElement("stop", { stopColor: "white" }),
-    /* @__PURE__ */ React22.createElement("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
+    /* @__PURE__ */ React29.createElement("stop", { stopColor: "white" }),
+    /* @__PURE__ */ React29.createElement("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
   )));
 };
 var nextjsLogoConfig = {
@@ -3222,14 +4935,14 @@ var nextjsLogoConfig = {
 };
 
 // src/templates/rings/Rings.tsx
-import React23 from "react";
-import { AbsoluteFill as AbsoluteFill5, interpolateColors as interpolateColors2, useVideoConfig as useVideoConfig10 } from "remotion";
+import React30 from "react";
+import { AbsoluteFill as AbsoluteFill5, interpolateColors as interpolateColors2, useVideoConfig as useVideoConfig14 } from "remotion";
 var RadialGradient = ({ radius, color }) => {
   const height = radius * 2;
   const width = radius * 2;
   return (
     // @ts-ignore
-    /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React30.createElement(
       AbsoluteFill5,
       {
         style: {
@@ -3237,7 +4950,7 @@ var RadialGradient = ({ radius, color }) => {
           alignItems: "center"
         }
       },
-      /* @__PURE__ */ React23.createElement(
+      /* @__PURE__ */ React30.createElement(
         "div",
         {
           style: {
@@ -3257,10 +4970,10 @@ var Rings = ({ context, data }) => {
   const { logoOut } = useRippleOutLayout();
   const outProgress = logoOut;
   const scale = 1 / (1 - outProgress);
-  const { height } = useVideoConfig10();
+  const { height } = useVideoConfig14();
   return (
     // @ts-ignore
-    /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React30.createElement(
       AbsoluteFill5,
       {
         style: {
@@ -3269,7 +4982,7 @@ var Rings = ({ context, data }) => {
         }
       },
       new Array(5).fill(true).map((_, i) => {
-        return /* @__PURE__ */ React23.createElement(
+        return /* @__PURE__ */ React30.createElement(
           RadialGradient,
           {
             key: i,
@@ -3288,13 +5001,13 @@ var ringsConfig = {
 };
 
 // src/templates/rings/TextFade.tsx
-import React24, { useMemo as useMemo16 } from "react";
+import React31, { useMemo as useMemo18 } from "react";
 import {
   AbsoluteFill as AbsoluteFill6,
   interpolate as interpolate6,
   spring as spring6,
-  useCurrentFrame as useCurrentFrame10,
-  useVideoConfig as useVideoConfig11
+  useCurrentFrame as useCurrentFrame14,
+  useVideoConfig as useVideoConfig15
 } from "remotion";
 var TextFade = (props) => {
   const { children, context, data } = props;
@@ -3303,8 +5016,8 @@ var TextFade = (props) => {
       duration: 1
     }
   };
-  const { fps } = useVideoConfig11();
-  const frame = useCurrentFrame10();
+  const { fps } = useVideoConfig15();
+  const frame = useCurrentFrame14();
   const progress = spring6({
     fps,
     frame,
@@ -3316,7 +5029,7 @@ var TextFade = (props) => {
   const rightStop = interpolate6(progress, [0, 1], [200, 0]);
   const leftStop = Math.max(0, rightStop - 60);
   const maskImage = `linear-gradient(-45deg, transparent ${leftStop}%, black ${rightStop}%)`;
-  const container2 = useMemo16(() => {
+  const container2 = useMemo18(() => {
     return {
       width: "100%",
       height: "100%",
@@ -3324,7 +5037,7 @@ var TextFade = (props) => {
       alignItems: "center"
     };
   }, []);
-  const content = useMemo16(() => {
+  const content = useMemo18(() => {
     return {
       ...context?.boundaries,
       maskImage,
@@ -3336,7 +5049,7 @@ var TextFade = (props) => {
   }, [maskImage]);
   return (
     // @ts-ignore
-    /* @__PURE__ */ React24.createElement(AbsoluteFill6, { style: container2 }, /* @__PURE__ */ React24.createElement("div", { style: content }, children))
+    /* @__PURE__ */ React31.createElement(AbsoluteFill6, { style: container2 }, /* @__PURE__ */ React31.createElement("div", { style: content }, children))
   );
 };
 var textFadeConfig = {
@@ -3367,234 +5080,11 @@ registerComponent(
 );
 
 // src/templates/waveform/components/WaveformCircle.tsx
-import React26, { useMemo as useMemo18 } from "react";
-
-// src/templates/waveform/Waveform.tsx
-import React25, { createContext as createContext5, useContext as useContext6 } from "react";
-import { useCurrentFrame as useCurrentFrame11, useVideoConfig as useVideoConfig12 } from "remotion";
-
-// src/templates/waveform/hooks/useWaveformData.ts
-import { useMemo as useMemo17 } from "react";
-import {
-  useAudioData,
-  visualizeAudioWaveform,
-  visualizeAudio
-} from "@remotion/media-utils";
-import { staticFile as staticFile5 } from "remotion";
-var isValidPowerOfTwo = (num) => {
-  return num > 0 && (num & num - 1) === 0;
-};
-var getClosestPowerOfTwo = (num) => {
-  if (num <= 0) return 32;
-  let power = 1;
-  while (power < num) {
-    power *= 2;
-  }
-  const lower = power / 2;
-  const upper = power;
-  return Math.abs(num - lower) < Math.abs(num - upper) ? lower : upper;
-};
-var useWaveformData = (config15) => {
-  const {
-    audioSrc,
-    numberOfSamples,
-    windowInSeconds,
-    dataOffsetInSeconds = 0,
-    normalize = false,
-    frame,
-    fps,
-    posterize,
-    includeFrequencyData = false,
-    minDb = -100,
-    maxDb = -30
-  } = config15;
-  const { root } = useComposition();
-  const validatedNumberOfSamples = useMemo17(() => {
-    if (!isValidPowerOfTwo(numberOfSamples)) {
-      console.warn(
-        `numberOfSamples must be a power of 2. Adjusting ${numberOfSamples} to ${getClosestPowerOfTwo(numberOfSamples)}`
-      );
-      return getClosestPowerOfTwo(numberOfSamples);
-    }
-    return numberOfSamples;
-  }, [numberOfSamples]);
-  const { source, audioStartsFrom } = useMemo17(() => {
-    if (audioSrc.startsWith("http")) {
-      return { source: audioSrc, audioStartsFrom: void 0 };
-    }
-    if (audioSrc.startsWith("ref:")) {
-      const matchingComponent = findMatchingComponents(root, [
-        audioSrc.replace("ref:", "")
-      ]);
-      if (matchingComponent.length > 0) {
-        const firstMatchingComponent = matchingComponent[0];
-        if (firstMatchingComponent.componentId === "AudioAtom") {
-          return {
-            source: firstMatchingComponent.data.src,
-            audioStartsFrom: firstMatchingComponent.data?.startFrom ?? void 0
-          };
-        }
-        if (firstMatchingComponent.type === "layout" || firstMatchingComponent.type === "scene") {
-          const audioComponents = findMatchingComponentsByQuery(
-            firstMatchingComponent.childrenData,
-            { componentId: "AudioAtom" }
-          );
-          if (audioComponents.length > 0) {
-            return {
-              source: audioComponents[0].data.src,
-              audioStartsFrom: audioComponents[0].data?.startFrom ?? void 0
-            };
-          }
-        }
-      }
-    }
-    return { source: staticFile5(audioSrc), audioStartsFrom: void 0 };
-  }, [audioSrc]);
-  const audioData = useAudioData(source);
-  const adjustedFrame = useMemo17(() => {
-    if (posterize && posterize > 1) {
-      return Math.round(frame / posterize) * posterize;
-    }
-    let offset = 0;
-    if (audioStartsFrom && audioStartsFrom != 0) {
-      offset += Math.round(audioStartsFrom * fps);
-    }
-    if (dataOffsetInSeconds != 0) {
-      offset += Math.round(dataOffsetInSeconds * fps);
-    }
-    return frame + offset;
-  }, [frame, posterize, dataOffsetInSeconds, audioStartsFrom]);
-  const waveformData = useMemo17(() => {
-    if (!audioData) return null;
-    try {
-      const waveform = visualizeAudioWaveform({
-        fps,
-        frame: adjustedFrame,
-        audioData,
-        numberOfSamples: validatedNumberOfSamples,
-        windowInSeconds,
-        dataOffsetInSeconds: 0,
-        normalize
-      });
-      return waveform;
-    } catch (error2) {
-      console.error("Error generating waveform:", error2);
-      return null;
-    }
-  }, [
-    audioData,
-    adjustedFrame,
-    fps,
-    validatedNumberOfSamples,
-    windowInSeconds,
-    dataOffsetInSeconds,
-    normalize
-  ]);
-  const {
-    frequencyData,
-    amplitudes,
-    bass,
-    mid,
-    treble,
-    bassValues,
-    midValues,
-    trebleValues
-  } = useMemo17(() => {
-    if (!audioData || !includeFrequencyData) {
-      return {
-        frequencyData: null,
-        amplitudes: null,
-        bass: null,
-        mid: null,
-        treble: null,
-        bassValues: null,
-        midValues: null,
-        trebleValues: null
-      };
-    }
-    try {
-      const frequencyData2 = visualizeAudio({
-        fps,
-        frame: adjustedFrame,
-        audioData,
-        numberOfSamples: validatedNumberOfSamples
-      });
-      const { sampleRate } = audioData;
-      const bassValues2 = [];
-      const midValues2 = [];
-      const trebleValues2 = [];
-      for (let i = 0; i < frequencyData2.length; i++) {
-        const freq = i * sampleRate / (2 * frequencyData2.length);
-        const value = frequencyData2[i];
-        if (freq >= 0 && freq < 250) {
-          bassValues2.push(value * 2.5);
-        } else if (freq >= 250 && freq < 4e3) {
-          midValues2.push(value * 3);
-          midValues2.push(value * 4.5);
-          midValues2.push(value * 5);
-        } else if (freq >= 4e3 && freq < sampleRate / 2) {
-          trebleValues2.push(value * 30);
-        }
-      }
-      const getAverage = (arr) => arr.length > 0 ? arr.reduce((a, b) => a + b, 0) / arr.length : 0;
-      const bass2 = getAverage(bassValues2);
-      const mid2 = getAverage(midValues2);
-      const treble2 = getAverage(trebleValues2);
-      const amplitudes2 = frequencyData2.map((value) => {
-        const db = 20 * Math.log10(value);
-        const scaled = (db - minDb) / (maxDb - minDb);
-        return Math.max(0, Math.min(1, scaled));
-      });
-      return {
-        frequencyData: frequencyData2,
-        amplitudes: amplitudes2,
-        bass: bass2,
-        mid: mid2,
-        treble: treble2,
-        bassValues: bassValues2,
-        midValues: midValues2,
-        trebleValues: trebleValues2.reverse()
-      };
-    } catch (error2) {
-      console.error("Error generating frequency data:", error2);
-      return {
-        frequencyData: null,
-        amplitudes: null,
-        bass: null,
-        mid: null,
-        treble: null
-      };
-    }
-  }, [
-    audioData,
-    includeFrequencyData,
-    adjustedFrame,
-    fps,
-    validatedNumberOfSamples,
-    windowInSeconds,
-    dataOffsetInSeconds,
-    minDb,
-    maxDb
-  ]);
-  const isLoading = !audioData;
-  const error = audioData === null && !isLoading ? "Failed to load audio data" : null;
-  return {
-    waveformData,
-    frequencyData,
-    amplitudes,
-    audioData,
-    isLoading,
-    error,
-    bass,
-    bassValues,
-    mid,
-    midValues,
-    treble,
-    trebleValues
-  };
-};
+import React33, { useMemo as useMemo19 } from "react";
 
 // src/templates/waveform/Waveform.tsx
+import React32, { createContext as createContext5, useContext as useContext6 } from "react";
+import { useCurrentFrame as useCurrentFrame15, useVideoConfig as useVideoConfig16 } from "remotion";
 var WaveformContext = createContext5(null);
 var useWaveformContext = () => {
   const context = useContext6(WaveformContext);
@@ -3604,26 +5094,27 @@ var useWaveformContext = () => {
   return context;
 };
 var Waveform = ({
-  config: config15,
+  config: config18,
   children,
   className = "",
   style = {}
 }) => {
-  const frame = useCurrentFrame11();
-  const { width: videoWidth, height: videoHeight, fps } = useVideoConfig12();
+  const frame = useCurrentFrame15();
+  const { width: videoWidth, height: videoHeight, fps } = useVideoConfig16();
   const { waveformData, frequencyData, amplitudes, audioData, bass, mid, treble, bassValues, midValues, trebleValues } = useWaveformData({
-    audioSrc: config15.audioSrc,
-    numberOfSamples: config15.numberOfSamples || 128,
-    windowInSeconds: config15.windowInSeconds || 1 / fps,
-    dataOffsetInSeconds: config15.dataOffsetInSeconds || 0,
-    normalize: config15.normalize || false,
+    audioSrc: config18.audioSrc,
+    numberOfSamples: config18.numberOfSamples || 128,
+    windowInSeconds: config18.windowInSeconds || 1 / fps,
+    dataOffsetInSeconds: config18.dataOffsetInSeconds || 0,
+    normalize: config18.normalize || false,
     frame,
     fps,
-    posterize: config15.posterize,
-    includeFrequencyData: config15.useFrequencyData || false
+    posterize: config18.posterize,
+    includeFrequencyData: config18.useFrequencyData || false,
+    smoothNormalisation: config18.smoothNormalisation
   });
-  const width = config15.width || videoWidth;
-  const height = config15.height || videoHeight;
+  const width = config18.width || videoWidth;
+  const height = config18.height || videoHeight;
   const contextValue = {
     waveformData,
     frequencyData,
@@ -3631,7 +5122,7 @@ var Waveform = ({
     audioData,
     frame,
     fps,
-    config: config15,
+    config: config18,
     width,
     height,
     bass,
@@ -3641,7 +5132,7 @@ var Waveform = ({
     midValues,
     trebleValues
   };
-  return /* @__PURE__ */ React25.createElement(WaveformContext.Provider, { value: contextValue }, /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React32.createElement(WaveformContext.Provider, { value: contextValue }, /* @__PURE__ */ React32.createElement(
     "div",
     {
       className: `relative ${className}`,
@@ -3649,7 +5140,7 @@ var Waveform = ({
         width,
         height,
         position: "relative",
-        backgroundColor: config15.backgroundColor || "transparent",
+        backgroundColor: config18.backgroundColor || "transparent",
         ...style
       }
     },
@@ -3660,7 +5151,7 @@ var Waveform = ({
 // src/templates/waveform/components/WaveformCircle.tsx
 var WaveformCircle = ({ data }) => {
   const {
-    config: config15,
+    config: config18,
     className = "",
     style = {},
     strokeColor = "#FF6B6B",
@@ -3677,7 +5168,7 @@ var WaveformCircle = ({ data }) => {
     gradientStartColor,
     gradientEndColor
   } = data;
-  return /* @__PURE__ */ React26.createElement(Waveform, { config: config15, className, style }, /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React33.createElement(Waveform, { config: config18, className, style }, /* @__PURE__ */ React33.createElement(
     WaveformCircleContent,
     {
       strokeColor,
@@ -3716,7 +5207,7 @@ var WaveformCircleContent = ({
   const circleCenterX = width * (centerX || 50) / 100;
   const circleCenterY = height * (centerY || 50) / 100;
   const rotation = frame * (rotationSpeed || 0) % 360;
-  const circularPath = useMemo18(() => {
+  const circularPath = useMemo19(() => {
     if (!waveformData) return "";
     const totalAngle = (endAngle || 360) - (startAngle || 0);
     const angleStep = totalAngle / waveformData.length;
@@ -3738,11 +5229,11 @@ var WaveformCircleContent = ({
     return path;
   }, [waveformData, circleRadius, circleCenterX, circleCenterY, startAngle, endAngle, rotation, amplitude]);
   if (!waveformData) {
-    return /* @__PURE__ */ React26.createElement("div", { className: "flex items-center justify-center w-full h-full text-gray-500" }, "Loading circular waveform...");
+    return /* @__PURE__ */ React33.createElement("div", { className: "flex items-center justify-center w-full h-full text-gray-500" }, "Loading circular waveform...");
   }
   const gradientId = "circle-waveform-gradient";
   const hasGradient = gradientStartColor && gradientEndColor;
-  return /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React33.createElement(
     "svg",
     {
       width,
@@ -3750,8 +5241,8 @@ var WaveformCircleContent = ({
       className: "absolute inset-0",
       style: { pointerEvents: "none" }
     },
-    hasGradient && /* @__PURE__ */ React26.createElement("defs", null, /* @__PURE__ */ React26.createElement("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%" }, /* @__PURE__ */ React26.createElement("stop", { offset: "0%", stopColor: gradientStartColor }), /* @__PURE__ */ React26.createElement("stop", { offset: "100%", stopColor: gradientEndColor }))),
-    /* @__PURE__ */ React26.createElement(
+    hasGradient && /* @__PURE__ */ React33.createElement("defs", null, /* @__PURE__ */ React33.createElement("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%" }, /* @__PURE__ */ React33.createElement("stop", { offset: "0%", stopColor: gradientStartColor }), /* @__PURE__ */ React33.createElement("stop", { offset: "100%", stopColor: gradientEndColor }))),
+    /* @__PURE__ */ React33.createElement(
       "path",
       {
         d: circularPath,
@@ -3767,10 +5258,10 @@ var WaveformCircleContent = ({
 };
 
 // src/templates/waveform/components/WaveformHistogram.tsx
-import React27 from "react";
+import React34 from "react";
 var WaveformHistogram = ({ data }) => {
   const {
-    config: config15,
+    config: config18,
     className = "",
     style = {},
     barColor = "#FF6B6B",
@@ -3783,13 +5274,14 @@ var WaveformHistogram = ({ data }) => {
     histogramStyle = "centered",
     amplitude = 1,
     multiplier = 1,
+    barSlant = 0,
     gradientStartColor,
     gradientEndColor,
     gradientDirection = "vertical",
     gradientStyle = "normal",
     waveDirection = "right-to-left"
   } = data;
-  return /* @__PURE__ */ React27.createElement(Waveform, { config: config15, className, style }, /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React34.createElement(Waveform, { config: config18, className, style }, /* @__PURE__ */ React34.createElement(
     WaveformHistogramContent,
     {
       barColor,
@@ -3806,7 +5298,8 @@ var WaveformHistogram = ({ data }) => {
       gradientDirection,
       multiplier,
       gradientStyle,
-      waveDirection
+      waveDirection,
+      barSlant
     }
   ));
 };
@@ -3825,12 +5318,13 @@ var WaveformHistogramContent = ({
   gradientDirection,
   multiplier,
   gradientStyle,
-  waveDirection
+  waveDirection,
+  barSlant
 }) => {
   const { waveformData, frequencyData, amplitudes, width, height } = useWaveformContext();
   const dataToUse = amplitudes || waveformData;
   if (!dataToUse) {
-    return /* @__PURE__ */ React27.createElement("div", { className: "flex items-center justify-center w-full h-full text-gray-500" }, "Loading histogram...");
+    return /* @__PURE__ */ React34.createElement("div", { className: "flex items-center justify-center w-full h-full text-gray-500" }, "Loading histogram...");
   }
   let directedData = waveDirection === "left-to-right" ? dataToUse.slice(1).reverse() : dataToUse;
   const frequencies = horizontalSymmetry ? [...directedData, ...directedData.slice(1).reverse()] : Array(multiplier).fill(directedData).flat();
@@ -3854,7 +5348,7 @@ var WaveformHistogramContent = ({
       },
       opacity: gradientStyle === "mirrored" && !growUpwards ? 0.25 : 1
     };
-    return /* @__PURE__ */ React27.createElement("div", { style: containerStyle2 }, frequencies.map((value, index) => /* @__PURE__ */ React27.createElement(
+    return /* @__PURE__ */ React34.createElement("div", { style: containerStyle2 }, frequencies.map((value, index) => /* @__PURE__ */ React34.createElement(
       "div",
       {
         key: index,
@@ -3866,7 +5360,9 @@ var WaveformHistogramContent = ({
             Math.abs(value) * (height / 2) * (amplitude || 1)
           )}px`,
           borderRadius: growUpwards ? `${barBorderRadius}px ${barBorderRadius}px 0 0` : `0 0 ${barBorderRadius}px ${barBorderRadius}px`,
-          opacity
+          opacity,
+          transform: barSlant ? `rotate(${barSlant}deg)` : void 0,
+          transformOrigin: "center bottom"
         }
       }
     )));
@@ -3886,7 +5382,7 @@ var WaveformHistogramContent = ({
       width: "100%",
       left: 0
     };
-    return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement("div", { style: topHalfStyle }, /* @__PURE__ */ React27.createElement(Bars, { growUpwards: true })), /* @__PURE__ */ React27.createElement("div", { style: bottomHalfStyle }, /* @__PURE__ */ React27.createElement(Bars, { growUpwards: false })));
+    return /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement("div", { style: topHalfStyle }, /* @__PURE__ */ React34.createElement(Bars, { growUpwards: true })), /* @__PURE__ */ React34.createElement("div", { style: bottomHalfStyle }, /* @__PURE__ */ React34.createElement(Bars, { growUpwards: false })));
   }
   const containerStyle = {
     width: "100%",
@@ -3895,14 +5391,14 @@ var WaveformHistogramContent = ({
     height: `${height / 2}px`,
     left: 0
   };
-  return /* @__PURE__ */ React27.createElement("div", { style: containerStyle }, /* @__PURE__ */ React27.createElement(Bars, { growUpwards: true }));
+  return /* @__PURE__ */ React34.createElement("div", { style: containerStyle }, /* @__PURE__ */ React34.createElement(Bars, { growUpwards: true }));
 };
 
 // src/templates/waveform/components/WaveformHistogramRanged.tsx
-import React28 from "react";
+import React35 from "react";
 var WaveformHistogramRanged = ({ data }) => {
   const {
-    config: config15,
+    config: config18,
     className = "",
     style = {},
     barColor = "#FF6B6B",
@@ -3924,9 +5420,10 @@ var WaveformHistogramRanged = ({ data }) => {
     gradientDirection = "vertical",
     gradientStyle = "normal",
     horizontalSymmetry = false,
-    waveDirection = "right-to-left"
+    waveDirection = "right-to-left",
+    barSlant = 0
   } = data;
-  return /* @__PURE__ */ React28.createElement(Waveform, { config: config15, className, style }, /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React35.createElement(Waveform, { config: config18, className, style }, /* @__PURE__ */ React35.createElement(
     WaveformHistogramRangedContent,
     {
       barColor,
@@ -3948,7 +5445,8 @@ var WaveformHistogramRanged = ({ data }) => {
       gradientDirection,
       gradientStyle,
       horizontalSymmetry,
-      waveDirection
+      waveDirection,
+      barSlant
     }
   ));
 };
@@ -3972,11 +5470,12 @@ var WaveformHistogramRangedContent = ({
   gradientDirection,
   gradientStyle,
   horizontalSymmetry,
-  waveDirection
+  waveDirection,
+  barSlant
 }) => {
   const { amplitudes, bassValues, midValues, trebleValues, height } = useWaveformContext();
   if (!amplitudes || !bassValues || !midValues || !trebleValues) {
-    return /* @__PURE__ */ React28.createElement("div", { className: "flex items-center justify-center w-full h-full text-gray-500" }, "Loading frequency data...");
+    return /* @__PURE__ */ React35.createElement("div", { className: "flex items-center justify-center w-full h-full text-gray-500" }, "Loading frequency data...");
   }
   const bassFrequencies = bassValues;
   const midFrequencies = midValues;
@@ -4000,12 +5499,12 @@ var WaveformHistogramRangedContent = ({
       },
       opacity: gradientStyle === "mirrored" && !growUpwards ? 0.25 : 1
     };
-    return /* @__PURE__ */ React28.createElement("div", { style: containerStyle2 }, unifiedWaveform.map((value, index) => {
+    return /* @__PURE__ */ React35.createElement("div", { style: containerStyle2 }, unifiedWaveform.map((value, index) => {
       const rangeName = index === 0 ? "Bass" : index === 1 ? "Mid" : "Treble";
       const styleGradientProp = gradientStartColor && gradientEndColor ? {
         background: `linear-gradient(${gradientDirection === "horizontal" ? gradientStyle === "mirrored" ? "to right" : growUpwards ? "to right" : "to left" : gradientStyle === "normal" ? growUpwards ? "to top" : "to bottom" : "to bottom"}, ${gradientStartColor}, ${gradientEndColor})`
       } : { backgroundColor: barColor };
-      return /* @__PURE__ */ React28.createElement(
+      return /* @__PURE__ */ React35.createElement(
         "div",
         {
           key: index,
@@ -4019,11 +5518,13 @@ var WaveformHistogramRangedContent = ({
             )}px`,
             borderRadius: growUpwards ? `${barBorderRadius}px ${barBorderRadius}px 0 0` : `0 0 ${barBorderRadius}px ${barBorderRadius}px`,
             opacity,
-            position: "relative"
+            position: "relative",
+            transform: barSlant ? `rotate(${barSlant}deg)` : void 0,
+            transformOrigin: "center bottom"
           },
           title: `${rangeName}: ${(value * 100).toFixed(1)}%`
         },
-        rangeLabels && /* @__PURE__ */ React28.createElement("div", { style: {
+        rangeLabels && /* @__PURE__ */ React35.createElement("div", { style: {
           position: "absolute",
           bottom: growUpwards ? "-20px" : "auto",
           top: growUpwards ? "auto" : "-20px",
@@ -4051,7 +5552,7 @@ var WaveformHistogramRangedContent = ({
       width: "100%",
       left: 0
     };
-    return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement("div", { style: topHalfStyle }, /* @__PURE__ */ React28.createElement(Bars, { growUpwards: true })), /* @__PURE__ */ React28.createElement("div", { style: bottomHalfStyle }, /* @__PURE__ */ React28.createElement(Bars, { growUpwards: false })));
+    return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement("div", { style: topHalfStyle }, /* @__PURE__ */ React35.createElement(Bars, { growUpwards: true })), /* @__PURE__ */ React35.createElement("div", { style: bottomHalfStyle }, /* @__PURE__ */ React35.createElement(Bars, { growUpwards: false })));
   }
   const containerStyle = {
     width: "100%",
@@ -4060,13 +5561,13 @@ var WaveformHistogramRangedContent = ({
     height: `${height / 2}px`,
     left: 0
   };
-  return /* @__PURE__ */ React28.createElement("div", { style: containerStyle }, /* @__PURE__ */ React28.createElement(Bars, { growUpwards: true }));
+  return /* @__PURE__ */ React35.createElement("div", { style: containerStyle }, /* @__PURE__ */ React35.createElement(Bars, { growUpwards: true }));
 };
 
 // src/templates/waveform/components/WaveformLine.tsx
-import React29, { useMemo as useMemo19 } from "react";
+import React36, { useMemo as useMemo20 } from "react";
 import { createSmoothSvgPath } from "@remotion/media-utils";
-import { useCurrentFrame as useCurrentFrame12, useVideoConfig as useVideoConfig13 } from "remotion";
+import { useCurrentFrame as useCurrentFrame16, useVideoConfig as useVideoConfig17 } from "remotion";
 var detectBeat = (frequencyData, amplitudes, threshold = 0.7, bpm, frame = 0, fps = 30) => {
   if (!frequencyData || !amplitudes || frequencyData.length === 0) return false;
   if (bpm) {
@@ -4098,7 +5599,7 @@ var easingFunctions = {
 };
 var WaveformLine = ({ data }) => {
   const {
-    config: config15,
+    config: config18,
     className = "",
     style = {},
     strokeColor = "#FF6B6B",
@@ -4126,7 +5627,7 @@ var WaveformLine = ({ data }) => {
     pulseColor = "#FFD700",
     pulseScale = 1.2
   } = data;
-  return /* @__PURE__ */ React29.createElement(Waveform, { config: config15, className, style }, /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React36.createElement(Waveform, { config: config18, className, style }, /* @__PURE__ */ React36.createElement(
     WaveformLineContent,
     {
       strokeColor,
@@ -4182,14 +5683,14 @@ var WaveformLineContent = ({
   pulseColor,
   pulseScale
 }) => {
-  const { waveformData, frequencyData, amplitudes, width, height, config: config15, frame, fps } = useWaveformContext();
-  const currentFrame = useCurrentFrame12();
-  const videoConfig = useVideoConfig13();
-  const isBeat = useMemo19(() => {
+  const { waveformData, frequencyData, amplitudes, width, height, config: config18, frame, fps } = useWaveformContext();
+  const currentFrame = useCurrentFrame16();
+  const videoConfig = useVideoConfig17();
+  const isBeat = useMemo20(() => {
     if (!beatSync || !frequencyData || !amplitudes) return false;
     return detectBeat(frequencyData, amplitudes, beatThreshold, bpm, currentFrame, fps);
   }, [beatSync, frequencyData, amplitudes, beatThreshold, bpm, currentFrame, fps]);
-  const beatProgress = useMemo19(() => {
+  const beatProgress = useMemo20(() => {
     if (!isBeat || !beatAnimationDuration) return 0;
     const beatStartFrame = Math.floor(currentFrame / beatAnimationDuration) * beatAnimationDuration;
     const progress = (currentFrame - beatStartFrame) / beatAnimationDuration;
@@ -4199,19 +5700,19 @@ var WaveformLineContent = ({
     }
     return clampedProgress;
   }, [isBeat, currentFrame, beatAnimationDuration, smoothAnimation]);
-  const currentBeatMultiplier = useMemo19(() => {
+  const currentBeatMultiplier = useMemo20(() => {
     if (!beatSync || !isBeat || !beatAmplitudeMultiplier || !amplitudeCurve) return 1;
     const easing = easingFunctions[amplitudeCurve];
     const easedProgress = easing(beatProgress);
     return 1 + (beatAmplitudeMultiplier - 1) * (1 - easedProgress);
   }, [beatSync, isBeat, beatProgress, beatAmplitudeMultiplier, amplitudeCurve]);
-  const smoothFactor = useMemo19(() => {
+  const smoothFactor = useMemo20(() => {
     if (!beatSync) {
       return 0.3;
     }
     return smoothAnimation ? 0.7 : 1;
   }, [beatSync, smoothAnimation]);
-  const waveformPaths = useMemo19(() => {
+  const waveformPaths = useMemo20(() => {
     if (!waveformData) return [];
     const paths = [];
     const segments = waveSegments || 1;
@@ -4227,8 +5728,8 @@ var WaveformLineContent = ({
       const points = waveformData.map((y, index) => {
         const progress = index / (waveformData.length - 1);
         const x = segmentStart + progress * segmentDataWidth + offset;
-        let animatedAmplitude = y * (config15.amplitude || 1) * currentBeatMultiplier * speed;
-        const baseAmplitude = y * (config15.amplitude || 1) * speed;
+        let animatedAmplitude = y * (config18.amplitude || 1) * currentBeatMultiplier * speed;
+        const baseAmplitude = y * (config18.amplitude || 1) * speed;
         const beatAmplitude = animatedAmplitude - baseAmplitude;
         animatedAmplitude = baseAmplitude + beatAmplitude * smoothFactor;
         const yPos = waveDirection === "horizontal" ? animatedAmplitude * height / 2 + height / 2 : animatedAmplitude * width / 2 + width / 2;
@@ -4238,11 +5739,11 @@ var WaveformLineContent = ({
       paths.push({ path, segmentIndex: i });
     }
     return paths;
-  }, [waveformData, width, height, config15.amplitude, currentBeatMultiplier, animationSpeed, waveSegments, waveSpacing, waveOffset, waveDirection, smoothFactor]);
+  }, [waveformData, width, height, config18.amplitude, currentBeatMultiplier, animationSpeed, waveSegments, waveSpacing, waveOffset, waveDirection, smoothFactor]);
   if (!waveformData) {
-    return /* @__PURE__ */ React29.createElement("div", { className: "flex items-center justify-center w-full h-full text-gray-500" }, "Loading waveform...");
+    return /* @__PURE__ */ React36.createElement("div", { className: "flex items-center justify-center w-full h-full text-gray-500" }, "Loading waveform...");
   }
-  return /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React36.createElement(
     "svg",
     {
       width,
@@ -4250,7 +5751,7 @@ var WaveformLineContent = ({
       className: "absolute inset-0",
       style: { pointerEvents: "none" }
     },
-    centerLine && /* @__PURE__ */ React29.createElement(
+    centerLine && /* @__PURE__ */ React36.createElement(
       "line",
       {
         x1: waveDirection === "horizontal" ? 0 : width / 2,
@@ -4262,7 +5763,7 @@ var WaveformLineContent = ({
         opacity: 0.3
       }
     ),
-    waveformPaths.map(({ path, segmentIndex }) => /* @__PURE__ */ React29.createElement("g", { key: segmentIndex }, pulseOnBeat && isBeat && /* @__PURE__ */ React29.createElement(
+    waveformPaths.map(({ path, segmentIndex }) => /* @__PURE__ */ React36.createElement("g", { key: segmentIndex }, pulseOnBeat && isBeat && /* @__PURE__ */ React36.createElement(
       "path",
       {
         d: path,
@@ -4273,7 +5774,7 @@ var WaveformLineContent = ({
         fill: "none",
         opacity: (opacity || 1) * (1 - beatProgress)
       }
-    ), /* @__PURE__ */ React29.createElement(
+    ), /* @__PURE__ */ React36.createElement(
       "path",
       {
         d: path,
@@ -4334,19 +5835,19 @@ registerComponent("WaveformCircle", WaveformCircle, "atom", {
 
 // src/components/Composition.tsx
 import { Player as RemotionPlayer } from "@remotion/player";
-import React30 from "react";
+import React37 from "react";
 import { AbsoluteFill as AbsoluteFill7, Composition as RemotionComposition } from "remotion";
-import z5 from "zod";
-var CompositionLayout = ({ childrenData, style, config: config15 }) => {
-  return /* @__PURE__ */ React30.createElement(
+import z10 from "zod";
+var CompositionLayout = ({ childrenData, style, config: config18 }) => {
+  return /* @__PURE__ */ React37.createElement(
     CompositionProvider,
     {
       value: {
         root: childrenData,
-        duration: config15.duration
+        duration: config18.duration
       }
     },
-    /* @__PURE__ */ React30.createElement(AbsoluteFill7, { style }, childrenData?.map((component) => /* @__PURE__ */ React30.createElement(
+    /* @__PURE__ */ React37.createElement(AbsoluteFill7, { style }, childrenData?.map((component) => /* @__PURE__ */ React37.createElement(
       ComponentRenderer,
       {
         key: component.id,
@@ -4386,26 +5887,26 @@ var calculateCompositionLayoutMetadata = async ({ props, defaultProps, abortSign
 var Composition = ({
   id,
   childrenData,
-  config: config15,
+  config: config18,
   style
 }) => {
-  return /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React37.createElement(
     RemotionComposition,
     {
       id,
       component: CompositionLayout,
-      durationInFrames: Math.round(config15.duration * config15.fps),
-      fps: config15.fps,
-      width: config15.width ?? 1080,
-      height: config15.height ?? 1920,
-      defaultProps: { childrenData, style, config: config15 },
+      durationInFrames: Math.round(config18.duration * config18.fps),
+      fps: config18.fps,
+      width: config18.width ?? 1080,
+      height: config18.height ?? 1920,
+      defaultProps: { childrenData, style, config: config18 },
       calculateMetadata: calculateCompositionLayoutMetadata,
-      schema: z5.object({})
+      schema: z10.object({})
     }
   );
 };
 var Player = (props) => {
-  return /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React37.createElement(
     RemotionPlayer,
     {
       component: CompositionLayout,
@@ -4418,24 +5919,32 @@ var Player = (props) => {
   );
 };
 export {
-  Atom5 as AudioAtom,
-  config13 as AudioAtomConfig,
+  Atom6 as AudioAtom,
+  config15 as AudioAtomConfig,
   Layout as BaseLayout,
-  config8 as BaseLayoutConfig,
+  config10 as BaseLayoutConfig,
   BlurEffect,
   config2 as BlurEffectConfig,
+  Atom as CanvasAtom,
+  config9 as CanvasAtomConfig,
+  CanvasContentAwareReveal,
+  CanvasGlitchEffect,
+  CanvasParticleEffect,
+  CanvasWipeReveal,
   ComponentRenderer,
   Composition,
   CompositionLayout,
   CompositionProvider,
   Frame,
   GenericEffectPresets,
-  Atom2 as ImageAtom,
-  config10 as ImageAtomConfig,
+  Atom8 as HTMLBlockAtom,
+  config17 as HTMLBlockAtomConfig,
+  Atom3 as ImageAtom,
+  config12 as ImageAtomConfig,
   LoopEffect,
   config3 as LoopEffectConfig,
-  Atom6 as LottieAtom,
-  config14 as LottieAtomConfig,
+  Atom7 as LottieAtom,
+  config16 as LottieAtomConfig,
   NextjsLogo,
   PanEffect,
   config4 as PanEffectConfig,
@@ -4445,19 +5954,21 @@ export {
   SceneFrame,
   ShakeEffect,
   config6 as ShakeEffectConfig,
-  Atom as ShapeAtom,
-  config9 as ShapeAtomConfig,
+  Atom2 as ShapeAtom,
+  config11 as ShapeAtomConfig,
   StretchEffect,
   config7 as StretchEffectConfig,
-  Atom3 as TextAtom,
-  config11 as TextAtomConfig,
+  Atom4 as TextAtom,
+  config13 as TextAtomConfig,
   TextFade,
   UniversalEffect,
   UniversalEffectProvider,
-  Atom4 as VideoAtom,
-  config12 as VideoAtomConfig,
+  Atom5 as VideoAtom,
+  config14 as VideoAtomConfig,
   Waveform,
   WaveformCircle,
+  WaveformEffect,
+  config8 as WaveformEffectConfig,
   WaveformHistogram,
   WaveformHistogramRanged,
   WaveformLine,