@microfox/remotion 1.2.2 → 1.2.5

package/dist/index.js

@@ -29,24 +29,32 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  AudioAtom: () => Atom5,
-  AudioAtomConfig: () => config13,
+  AudioAtom: () => Atom6,
+  AudioAtomConfig: () => config15,
   BaseLayout: () => Layout,
-  BaseLayoutConfig: () => config8,
+  BaseLayoutConfig: () => config10,
   BlurEffect: () => BlurEffect,
   BlurEffectConfig: () => config2,
+  CanvasAtom: () => Atom,
+  CanvasAtomConfig: () => config9,
+  CanvasContentAwareReveal: () => CanvasContentAwareReveal,
+  CanvasGlitchEffect: () => CanvasGlitchEffect,
+  CanvasParticleEffect: () => CanvasParticleEffect,
+  CanvasWipeReveal: () => CanvasWipeReveal,
   ComponentRenderer: () => ComponentRenderer,
   Composition: () => Composition,
   CompositionLayout: () => CompositionLayout,
   CompositionProvider: () => CompositionProvider,
   Frame: () => Frame,
   GenericEffectPresets: () => GenericEffectPresets,
-  ImageAtom: () => Atom2,
-  ImageAtomConfig: () => config10,
+  HTMLBlockAtom: () => Atom8,
+  HTMLBlockAtomConfig: () => config17,
+  ImageAtom: () => Atom3,
+  ImageAtomConfig: () => config12,
   LoopEffect: () => LoopEffect,
   LoopEffectConfig: () => config3,
-  LottieAtom: () => Atom6,
-  LottieAtomConfig: () => config14,
+  LottieAtom: () => Atom7,
+  LottieAtomConfig: () => config16,
   NextjsLogo: () => NextjsLogo,
   PanEffect: () => PanEffect,
   PanEffectConfig: () => config4,
@@ -56,19 +64,21 @@ __export(index_exports, {
   SceneFrame: () => SceneFrame,
   ShakeEffect: () => ShakeEffect,
   ShakeEffectConfig: () => config6,
-  ShapeAtom: () => Atom,
-  ShapeAtomConfig: () => config9,
+  ShapeAtom: () => Atom2,
+  ShapeAtomConfig: () => config11,
   StretchEffect: () => StretchEffect,
   StretchEffectConfig: () => config7,
-  TextAtom: () => Atom3,
-  TextAtomConfig: () => config11,
+  TextAtom: () => Atom4,
+  TextAtomConfig: () => config13,
   TextFade: () => TextFade,
   UniversalEffect: () => UniversalEffect,
   UniversalEffectProvider: () => UniversalEffectProvider,
-  VideoAtom: () => Atom4,
-  VideoAtomConfig: () => config12,
+  VideoAtom: () => Atom5,
+  VideoAtomConfig: () => config14,
   Waveform: () => Waveform,
   WaveformCircle: () => WaveformCircle,
+  WaveformEffect: () => WaveformEffect,
+  WaveformEffectConfig: () => config8,
   WaveformHistogram: () => WaveformHistogram,
   WaveformHistogramRanged: () => WaveformHistogramRanged,
   WaveformLine: () => WaveformLine,
@@ -135,21 +145,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
     );
   }
@@ -164,8 +174,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) {
@@ -180,17 +190,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);
@@ -215,6 +225,13 @@ var useComposition = () => {
 
 // src/core/context/timing.ts
 var import_mediabunny = require("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) => {
@@ -257,34 +274,48 @@ var findMatchingComponentsByQuery = (childrenData, query) => {
 };
 var calculateComponentDuration = async (component) => {
   const src = component.data.src;
-  if (src.startsWith("http")) {
-    const audioInput = new import_mediabunny.Input({
-      formats: import_mediabunny.ALL_FORMATS,
-      source: new import_mediabunny.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 import_mediabunny.Input({
+        formats: import_mediabunny.ALL_FORMATS,
+        source: new import_mediabunny.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;
@@ -293,6 +324,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) {
@@ -304,12 +336,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: {
@@ -332,6 +367,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 = {
@@ -345,7 +382,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 || {},
@@ -356,9 +399,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
@@ -629,8 +672,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__ */ import_react3.default.createElement(RenderContext.Provider, { value: newContext }, /* @__PURE__ */ import_react3.default.createElement(ComponentClass, { ...props }, effects && effects.length > 0 ? /* @__PURE__ */ import_react3.default.createElement(EffectWrapper, { effects, context: newContext }, childrenData?.map((child) => /* @__PURE__ */ import_react3.default.createElement(ComponentRenderer, { key: child.id, ...child }))) : childrenData?.map((child) => /* @__PURE__ */ import_react3.default.createElement(ComponentRenderer, { key: child.id, ...child }))));
     }
@@ -673,8 +716,8 @@ var SceneFrame = ({ children }) => {
 };
 
 // src/components/layouts/BaseLayout.tsx
-var import_react13 = __toESM(require("react"));
-var import_remotion9 = require("remotion");
+var import_react20 = __toESM(require("react"));
+var import_remotion14 = require("remotion");
 
 // src/components/effects/BlurEffect.tsx
 var import_react7 = __toESM(require("react"));
@@ -688,10 +731,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;
 };
@@ -855,11 +933,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 };
@@ -873,14 +960,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 = {
@@ -889,7 +983,75 @@ var interpolateColors = (color1, color2, progress) => {
     b: (0, import_remotion4.interpolate)(progress, [0, 1], [parsedColor1.b, parsedColor2.b]),
     a: (0, import_remotion4.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);
@@ -925,6 +1087,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) {
@@ -973,7 +1140,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`;
@@ -1879,205 +2046,1713 @@ 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
+var import_react14 = __toESM(require("react"));
+
+// src/templates/waveform/hooks/useWaveformData.ts
+var import_react13 = require("react");
+var import_media_utils = require("@remotion/media-utils");
+var import_remotion9 = require("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 = (0, import_react13.useMemo)(() => {
+    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 } = (0, import_react13.useMemo)(() => {
+    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: (0, import_remotion9.staticFile)(audioSrc), audioStartsFrom: void 0 };
+  }, [audioSrc]);
+  const audioData = (0, import_media_utils.useAudioData)(source);
+  const adjustedFrame = (0, import_react13.useMemo)(() => {
+    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 = (0, import_react13.useMemo)(() => {
+    if (!audioData) return null;
+    try {
+      const baseSmoothingFrames = 3;
+      const smoothingFrames = smoothNormalisation > 0 ? Math.floor(smoothNormalisation * baseSmoothingFrames) : 0;
+      const samples = [];
+      if (smoothingFrames === 0) {
+        const waveform = (0, import_media_utils.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 = (0, import_media_utils.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 = (0, import_media_utils.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
+  } = (0, import_react13.useMemo)(() => {
+    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 = (0, import_media_utils.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 = (0, import_media_utils.visualizeAudio)({
+                fps,
+                frame: sampleFrame,
+                audioData,
+                numberOfSamples: validatedNumberOfSamples
+              });
+              if (freqData && freqData.length > 0) {
+                frequencySamples.push(freqData);
+              }
+            } catch (e) {
+            }
+          }
+        }
+        if (frequencySamples.length === 0) {
+          frequencyData2 = (0, import_media_utils.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 = (0, import_react14.useMemo)(() => {
+    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 = (0, import_react14.useMemo)(() => {
+    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 = (0, import_react14.useMemo)(() => {
+    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 = (0, import_react14.useMemo)(
+    () => ({
+      animatedStyles,
+      targetIds,
+      effectType: "waveform"
+    }),
+    [animatedStyles, targetIds]
+  );
+  if (mode === "provider") {
+    return /* @__PURE__ */ import_react14.default.createElement(UniversalEffectContext.Provider, { value: contextValue }, children);
+  }
+  return /* @__PURE__ */ import_react14.default.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
+var import_react16 = __toESM(require("react"));
+var import_remotion10 = require("remotion");
+var import_zod3 = require("zod");
+
+// src/components/atoms/CanvasAtom.tsx
+var import_react15 = __toESM(require("react"));
+var import_zod2 = require("zod");
+var CanvasAtomDataProps = import_zod2.z.object({
+  className: import_zod2.z.string().optional(),
+  style: import_zod2.z.record(import_zod2.z.string(), import_zod2.z.any()).optional()
+});
+var Atom = import_react15.default.forwardRef(({ data, id }, ref) => {
+  const { className, style } = data;
+  return /* @__PURE__ */ import_react15.default.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 = import_zod3.z.object({
+  imageUrl: import_zod3.z.string().url(),
+  revealDurationInFrames: import_zod3.z.number().min(1),
+  revealType: import_zod3.z.enum(["wipe", "radial"]).default("wipe"),
+  angle: import_zod3.z.number().default(0),
+  fit: import_zod3.z.enum(["cover", "contain"]).default("cover"),
+  edgeStyle: import_zod3.z.enum(["straight", "organic", "burn"]).default("straight"),
+  edgeWaviness: import_zod3.z.number().default(30),
+  edgeFrequency: import_zod3.z.number().default(4),
+  backgroundColor: import_zod3.z.string().default("rgba(0,0,0,0)"),
+  burnGlow: import_zod3.z.boolean().default(true),
+  burnGlowColor: import_zod3.z.string().default("#ff6600"),
+  burnGlowIntensity: import_zod3.z.number().default(1),
+  organicRandomAmplitude: import_zod3.z.boolean().default(true),
+  organicRandomWavelength: import_zod3.z.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 = (0, import_remotion10.useCurrentFrame)();
+  const { width, height } = (0, import_remotion10.useVideoConfig)();
+  const canvasRef = (0, import_react16.useRef)(null);
+  const [image, setImage] = (0, import_react16.useState)(null);
+  (0, import_react16.useEffect)(() => {
+    const img = new window.Image();
+    img.crossOrigin = "Anonymous";
+    img.src = imageUrl;
+    img.onload = () => setImage(img);
+  }, [imageUrl]);
+  (0, import_react16.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__ */ import_react16.default.createElement(Atom, { ref: canvasRef, data: { className: "w-full h-full" }, id });
+};
+
+// src/components/effects/CanvasContentAwareReveal.tsx
+var import_react17 = __toESM(require("react"));
+var import_remotion11 = require("remotion");
+var import_zod4 = require("zod");
+var CanvasContentAwareRevealProps = import_zod4.z.object({
+  imageUrl: import_zod4.z.string().url(),
+  revealDurationInFrames: import_zod4.z.number().min(1),
+  fit: import_zod4.z.enum(["cover", "contain"]).default("cover"),
+  backgroundColor: import_zod4.z.string().default("rgba(0,0,0,0)"),
+  burnColorOrder: import_zod4.z.enum(["vibgyor", "luminance", "random"]).default("vibgyor"),
+  revealMode: import_zod4.z.enum(["color", "direction", "combined"]).default("combined").describe("Reveal mode: color-only, direction-only, or combined"),
+  direction: import_zod4.z.enum(["horizontal", "vertical", "diagonal-down", "diagonal-up", "top-to-bottom"]).default("top-to-bottom"),
+  directionLayers: import_zod4.z.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 = (0, import_remotion11.useCurrentFrame)();
+  const { width, height } = (0, import_remotion11.useVideoConfig)();
+  const canvasRef = (0, import_react17.useRef)(null);
+  const [image, setImage] = (0, import_react17.useState)(null);
+  const [pixelBurnMap, setPixelBurnMap] = (0, import_react17.useState)(null);
+  const [isProcessing, setIsProcessing] = (0, import_react17.useState)(false);
+  const burnMapGeneratedRef = (0, import_react17.useRef)(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;
+  };
+  (0, import_react17.useEffect)(() => {
+    const img = new window.Image();
+    img.crossOrigin = "Anonymous";
+    img.src = imageUrl;
+    img.onload = () => {
+      setImage(img);
+      burnMapGeneratedRef.current = false;
+    };
+  }, [imageUrl]);
+  (0, import_react17.useEffect)(() => {
+    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
+  ]);
+  (0, import_react17.useEffect)(() => {
+    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__ */ import_react17.default.createElement(Atom, { ref: canvasRef, data: { className: "w-full h-full" }, id });
+};
+
+// src/components/effects/CanvasGlitchEffect.tsx
+var import_react18 = __toESM(require("react"));
+var import_remotion12 = require("remotion");
+var import_zod5 = require("zod");
+var CanvasGlitchEffectProps = import_zod5.z.object({
+  imageUrl: import_zod5.z.string().url(),
+  durationInFrames: import_zod5.z.number().min(1),
+  fit: import_zod5.z.enum(["cover", "contain"]).default("cover"),
+  backgroundColor: import_zod5.z.string().default("rgba(0,0,0,0)"),
+  glitchType: import_zod5.z.enum(["rgb-shift", "slice", "corrupt", "static", "scan"]).default("rgb-shift"),
+  intensity: import_zod5.z.number().default(10).describe("Intensity of glitch effect"),
+  frequency: import_zod5.z.number().default(0.3).describe("How often glitches occur (0-1)"),
+  continuous: import_zod5.z.boolean().default(false).describe("Continuous glitch vs periodic"),
+  glitchStartFrame: import_zod5.z.number().default(0).describe("Frame to start glitching"),
+  glitchEndFrame: import_zod5.z.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 = (0, import_remotion12.useCurrentFrame)();
+  const { width, height } = (0, import_remotion12.useVideoConfig)();
+  const canvasRef = (0, import_react18.useRef)(null);
+  const [image, setImage] = (0, import_react18.useState)(null);
+  (0, import_react18.useEffect)(() => {
+    const img = new window.Image();
+    img.crossOrigin = "Anonymous";
+    img.src = imageUrl;
+    img.onload = () => setImage(img);
+  }, [imageUrl]);
+  (0, import_react18.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 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__ */ import_react18.default.createElement(Atom, { ref: canvasRef, data: { className: "w-full h-full" }, id });
+};
+
+// src/components/effects/CanvasParticleEffect.tsx
+var import_react19 = __toESM(require("react"));
+var import_remotion13 = require("remotion");
+var import_zod6 = require("zod");
+var CanvasParticleEffectProps = import_zod6.z.object({
+  imageUrl: import_zod6.z.string().url(),
+  revealDurationInFrames: import_zod6.z.number().min(1),
+  fit: import_zod6.z.enum(["cover", "contain"]).default("cover"),
+  backgroundColor: import_zod6.z.string().default("rgba(0,0,0,0)"),
+  particleCount: import_zod6.z.number().default(2e3).describe("Number of particles"),
+  particleSize: import_zod6.z.number().default(3).describe("Size of each particle"),
+  particleEffect: import_zod6.z.enum(["assemble", "disassemble", "explode", "pixelate"]).default("assemble"),
+  assembleFrom: import_zod6.z.enum(["center", "edges", "random", "bottom"]).default("random"),
+  speed: import_zod6.z.number().default(1).describe("Animation speed multiplier"),
+  rotation: import_zod6.z.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 = (0, import_remotion13.useCurrentFrame)();
+  const { width, height } = (0, import_remotion13.useVideoConfig)();
+  const canvasRef = (0, import_react19.useRef)(null);
+  const [image, setImage] = (0, import_react19.useState)(null);
+  const [particles, setParticles] = (0, import_react19.useState)(null);
+  (0, import_react19.useEffect)(() => {
+    const img = new window.Image();
+    img.crossOrigin = "Anonymous";
+    img.src = imageUrl;
+    img.onload = () => setImage(img);
+  }, [imageUrl]);
+  (0, import_react19.useEffect)(() => {
+    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]);
+  (0, import_react19.useEffect)(() => {
+    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__ */ import_react19.default.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
@@ -2092,13 +3767,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 = import_react13.Children.toArray(children);
-  const enhancedStyle = (0, import_react13.useMemo)(
+  const childrenArray = import_react20.Children.toArray(children);
+  const enhancedStyle = (0, import_react20.useMemo)(
     () => ({
       ...!context?.boundaries?.reset ? context?.boundaries : {},
       ...containerProps.style,
@@ -2112,8 +3796,8 @@ var Layout = ({ id, children, data, context }) => {
   );
   if (Object.keys(repeatChildrenProps).length <= 0 && childrenProps.length <= 0) {
     if (data.isAbsoluteFill) {
-      return /* @__PURE__ */ import_react13.default.createElement(
-        import_remotion9.AbsoluteFill,
+      return /* @__PURE__ */ import_react20.default.createElement(
+        import_remotion14.AbsoluteFill,
         {
           ...containerProps,
           style: enhancedStyle
@@ -2121,25 +3805,25 @@ var Layout = ({ id, children, data, context }) => {
         childrenArray
       );
     }
-    return /* @__PURE__ */ import_react13.default.createElement(
+    return /* @__PURE__ */ import_react20.default.createElement(
       "div",
       {
         id,
         ...containerProps,
         style: enhancedStyle
       },
-      childrenArray.map((child, index) => /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, { key: index }, child))
+      childrenArray.map((child, index) => /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, { key: index }, child))
     );
   }
   if (data.isAbsoluteFill) {
-    return /* @__PURE__ */ import_react13.default.createElement(
-      import_remotion9.AbsoluteFill,
+    return /* @__PURE__ */ import_react20.default.createElement(
+      import_remotion14.AbsoluteFill,
       {
         id,
         ...containerProps,
         style: enhancedStyle
       },
-      childrenArray.map((child, index) => /* @__PURE__ */ import_react13.default.createElement(
+      childrenArray.map((child, index) => /* @__PURE__ */ import_react20.default.createElement(
         "div",
         {
           key: index,
@@ -2149,14 +3833,14 @@ var Layout = ({ id, children, data, context }) => {
       ))
     );
   }
-  return /* @__PURE__ */ import_react13.default.createElement(
+  return /* @__PURE__ */ import_react20.default.createElement(
     "div",
     {
       id,
       ...containerProps,
       style: enhancedStyle
     },
-    childrenArray.map((child, index) => /* @__PURE__ */ import_react13.default.createElement(
+    childrenArray.map((child, index) => /* @__PURE__ */ import_react20.default.createElement(
       "div",
       {
         key: index,
@@ -2166,7 +3850,7 @@ var Layout = ({ id, children, data, context }) => {
     ))
   );
 };
-var config8 = {
+var config10 = {
   displayName: "BaseLayout",
   type: "layout",
   isInnerSequence: false
@@ -2174,27 +3858,27 @@ var config8 = {
 
 // src/components/layouts/index.ts
 registerComponent(
-  config8.displayName,
+  config10.displayName,
   Layout,
   "layout",
-  config8
+  config10
 );
 
 // src/components/atoms/ShapeAtom.tsx
-var import_react14 = __toESM(require("react"));
-var import_remotion10 = require("remotion");
-var Atom = ({ data }) => {
-  const frame = (0, import_remotion10.useCurrentFrame)();
+var import_react21 = __toESM(require("react"));
+var import_remotion15 = require("remotion");
+var Atom2 = ({ data }) => {
+  const frame = (0, import_remotion15.useCurrentFrame)();
   const { shape, color, rotation, style } = data;
   const rotationStyle = rotation ? {
-    transform: `rotate(${(0, import_remotion10.interpolate)(
+    transform: `rotate(${(0, import_remotion15.interpolate)(
       frame % rotation.duration,
       [0, rotation.duration],
       [0, 360],
       {
         extrapolateLeft: "clamp",
         extrapolateRight: "clamp",
-        easing: import_remotion10.Easing.linear
+        easing: import_remotion15.Easing.linear
       }
     )}deg)`
   } : {};
@@ -2206,22 +3890,22 @@ var Atom = ({ data }) => {
   };
   switch (shape) {
     case "circle":
-      return /* @__PURE__ */ import_react14.default.createElement("div", { style: { ...baseStyle, backgroundColor: color, borderRadius: "50%" } });
+      return /* @__PURE__ */ import_react21.default.createElement("div", { style: { ...baseStyle, backgroundColor: color, borderRadius: "50%" } });
     case "rectangle":
-      return /* @__PURE__ */ import_react14.default.createElement("div", { style: { ...baseStyle, backgroundColor: color } });
+      return /* @__PURE__ */ import_react21.default.createElement("div", { style: { ...baseStyle, backgroundColor: color } });
     default:
       return null;
   }
 };
-var config9 = {
+var config11 = {
   displayName: "ShapeAtom",
   type: "atom",
   isInnerSequence: false
 };
 
 // src/components/atoms/ImageAtom.tsx
-var import_react15 = __toESM(require("react"));
-var import_remotion11 = require("remotion");
+var import_react22 = __toESM(require("react"));
+var import_remotion16 = require("remotion");
 var CORS_PROXIES = [
   "https://thingproxy.freeboard.io/fetch/",
   "https://api.allorigins.win/raw?url=",
@@ -2231,14 +3915,14 @@ var getCorsProxyUrl = (url) => {
   return `${CORS_PROXIES[0]}${encodeURIComponent(url)}`;
 };
 var useImageSource = (src, proxySrc) => {
-  const [imageSource, setImageSource] = (0, import_react15.useState)(src);
-  const [isLoading, setIsLoading] = (0, import_react15.useState)(false);
-  const [hasError, setHasError] = (0, import_react15.useState)(false);
-  const [handle] = (0, import_react15.useState)(() => (0, import_remotion11.delayRender)("Loading image"));
-  (0, import_react15.useEffect)(() => {
+  const [imageSource, setImageSource] = (0, import_react22.useState)(src);
+  const [isLoading, setIsLoading] = (0, import_react22.useState)(false);
+  const [hasError, setHasError] = (0, import_react22.useState)(false);
+  const [handle] = (0, import_react22.useState)(() => (0, import_remotion16.delayRender)("Loading image"));
+  (0, import_react22.useEffect)(() => {
     if (!src.startsWith("http")) {
       setImageSource(src);
-      (0, import_remotion11.continueRender)(handle);
+      (0, import_remotion16.continueRender)(handle);
       return;
     }
     setIsLoading(true);
@@ -2248,7 +3932,7 @@ var useImageSource = (src, proxySrc) => {
     const handleSuccess = () => {
       setImageSource(src);
       setIsLoading(false);
-      (0, import_remotion11.continueRender)(handle);
+      (0, import_remotion16.continueRender)(handle);
     };
     const handleError = () => {
       let proxyUrl;
@@ -2259,7 +3943,7 @@ var useImageSource = (src, proxySrc) => {
       }
       setImageSource(proxyUrl);
       setIsLoading(false);
-      (0, import_remotion11.continueRender)(handle);
+      (0, import_remotion16.continueRender)(handle);
     };
     testImage.onload = handleSuccess;
     testImage.onerror = handleError;
@@ -2271,21 +3955,21 @@ 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 = (0, import_react15.useMemo)(() => {
+  const source = (0, import_react22.useMemo)(() => {
     if (data.src.startsWith("http")) {
       return imageSource;
     }
-    return (0, import_remotion11.staticFile)(data.src);
+    return (0, import_remotion16.staticFile)(data.src);
   }, [data.src, imageSource]);
-  const enhancedStyle = (0, import_react15.useMemo)(() => ({
+  const enhancedStyle = (0, import_react22.useMemo)(() => ({
     ...data.style,
     ...overrideStyles
   }), [data.style, overrideStyles, isLoading, hasError]);
-  return /* @__PURE__ */ import_react15.default.createElement(
-    import_remotion11.Img,
+  return /* @__PURE__ */ import_react22.default.createElement(
+    import_remotion16.Img,
     {
       className: data.className,
       src: source,
@@ -2298,19 +3982,19 @@ var Atom2 = ({ data, id }) => {
     }
   );
 };
-var config10 = {
+var config12 = {
   displayName: "ImageAtom",
   type: "atom",
   isInnerSequence: false
 };
 
 // src/components/atoms/TextAtom.tsx
-var import_react17 = __toESM(require("react"));
-var import_remotion13 = require("remotion");
+var import_react24 = __toESM(require("react"));
+var import_remotion18 = require("remotion");
 
 // src/hooks/useFontLoader.ts
-var import_react16 = require("react");
-var import_remotion12 = require("remotion");
+var import_react23 = require("react");
+var import_remotion17 = require("remotion");
 
 // src/utils/fontUtils.ts
 var fontUtils = __toESM(require("@remotion/google-fonts"));
@@ -2451,12 +4135,12 @@ var getNormalizedFontName = (fontFamily) => {
 
 // src/hooks/useFontLoader.ts
 var useFontLoader = (options = {}) => {
-  const [state, setState] = (0, import_react16.useState)({
+  const [state, setState] = (0, import_react23.useState)({
     loadedFonts: /* @__PURE__ */ new Map(),
     loadingFonts: /* @__PURE__ */ new Set(),
     errorFonts: /* @__PURE__ */ new Map()
   });
-  const loadFont = (0, import_react16.useCallback)(
+  const loadFont = (0, import_react23.useCallback)(
     async (fontFamily, fontOptions = {}) => {
       const fontKey = `${fontFamily}-${JSON.stringify(fontOptions)}`;
       if (state.loadedFonts.has(fontKey) || state.loadingFonts.has(fontFamily)) {
@@ -2499,7 +4183,7 @@ var useFontLoader = (options = {}) => {
     },
     [state.loadedFonts, state.loadingFonts, options]
   );
-  const loadMultipleFonts2 = (0, import_react16.useCallback)(
+  const loadMultipleFonts2 = (0, import_react23.useCallback)(
     async (fonts) => {
       const fontsToLoad = fonts.filter(({ family, options: options2 = {} }) => {
         const fontKey = `${family}-${JSON.stringify(options2)}`;
@@ -2558,14 +4242,14 @@ var useFontLoader = (options = {}) => {
     },
     [state.loadedFonts, state.loadingFonts, options]
   );
-  const isFontReady = (0, import_react16.useCallback)(
+  const isFontReady = (0, import_react23.useCallback)(
     (fontFamily, options2 = {}) => {
       const fontKey = `${fontFamily}-${JSON.stringify(options2)}`;
       return state.loadedFonts.has(fontKey);
     },
     [state.loadedFonts]
   );
-  const areFontsReady = (0, import_react16.useCallback)(
+  const areFontsReady = (0, import_react23.useCallback)(
     (fontFamilies) => {
       return fontFamilies.every(({ family, options: options2 = {} }) => {
         const fontKey = `${family}-${JSON.stringify(options2)}`;
@@ -2574,20 +4258,20 @@ var useFontLoader = (options = {}) => {
     },
     [state.loadedFonts]
   );
-  const getFontFamily = (0, import_react16.useCallback)(
+  const getFontFamily = (0, import_react23.useCallback)(
     (fontFamily, options2 = {}) => {
       const fontKey = `${fontFamily}-${JSON.stringify(options2)}`;
       return state.loadedFonts.get(fontKey);
     },
     [state.loadedFonts]
   );
-  const getFontError = (0, import_react16.useCallback)(
+  const getFontError = (0, import_react23.useCallback)(
     (fontFamily) => {
       return state.errorFonts.get(fontFamily);
     },
     [state.errorFonts]
   );
-  const clearErrors = (0, import_react16.useCallback)(() => {
+  const clearErrors = (0, import_react23.useCallback)(() => {
     setState((prev) => ({
       ...prev,
       errorFonts: /* @__PURE__ */ new Map()
@@ -2610,25 +4294,25 @@ var useFontLoader = (options = {}) => {
 };
 var useFont = (fontFamily, options = {}) => {
   const { loadFont, isFontReady, getFontFamily, getFontError, ...rest } = useFontLoader(options);
-  const [isLoaded, setIsLoaded] = (0, import_react16.useState)(false);
-  const [error, setError] = (0, import_react16.useState)(null);
-  const [renderHandle] = (0, import_react16.useState)(
-    () => (0, import_remotion12.delayRender)(`Loading font: ${fontFamily}`)
+  const [isLoaded, setIsLoaded] = (0, import_react23.useState)(false);
+  const [error, setError] = (0, import_react23.useState)(null);
+  const [renderHandle] = (0, import_react23.useState)(
+    () => (0, import_remotion17.delayRender)(`Loading font: ${fontFamily}`)
   );
   const initialFontFamily = getFontFamily(fontFamily, options) || `"${fontFamily}", sans-serif`;
-  const [fontFamilyValue, setFontFamilyValue] = (0, import_react16.useState)(initialFontFamily);
-  (0, import_react16.useEffect)(() => {
+  const [fontFamilyValue, setFontFamilyValue] = (0, import_react23.useState)(initialFontFamily);
+  (0, import_react23.useEffect)(() => {
     const loadFontAsync = async () => {
       try {
         const cssValue = await loadFont(fontFamily, options);
         setFontFamilyValue(cssValue);
         setIsLoaded(true);
         setError(null);
-        (0, import_remotion12.continueRender)(renderHandle);
+        (0, import_remotion17.continueRender)(renderHandle);
       } catch (err) {
         setError(err instanceof Error ? err : new Error(String(err)));
         setIsLoaded(false);
-        (0, import_remotion12.continueRender)(renderHandle);
+        (0, import_remotion17.continueRender)(renderHandle);
       }
     };
     if (!isFontReady(fontFamily, options)) {
@@ -2639,7 +4323,7 @@ var useFont = (fontFamily, options = {}) => {
         setFontFamilyValue(cachedValue);
       }
       setIsLoaded(true);
-      (0, import_remotion12.continueRender)(renderHandle);
+      (0, import_remotion17.continueRender)(renderHandle);
     }
   }, [fontFamily, loadFont, isFontReady, getFontFamily, options, renderHandle]);
   return {
@@ -2652,11 +4336,11 @@ var useFont = (fontFamily, options = {}) => {
 };
 
 // src/components/atoms/TextAtom.tsx
-var Atom3 = ({ id, data }) => {
+var Atom4 = ({ id, data }) => {
   const overrideStyles = useAnimatedStyles(id);
-  const [isFontLoading, setIsFontLoading] = (0, import_react17.useState)(false);
-  const [renderHandle] = (0, import_react17.useState)(
-    () => (0, import_remotion13.delayRender)(`Loading font: ${data.font?.family}`)
+  const [isFontLoading, setIsFontLoading] = (0, import_react24.useState)(false);
+  const [renderHandle] = (0, import_react24.useState)(
+    () => (0, import_remotion18.delayRender)(`Loading font: ${data.font?.family}`)
   );
   const { isLoaded, error, isReady, fontFamily } = useFont(
     data.font?.family || "Inter",
@@ -2667,15 +4351,15 @@ var Atom3 = ({ id, data }) => {
       preload: data.font?.preload !== false,
       onLoad: (family, cssValue) => {
         setIsFontLoading(false);
-        (0, import_remotion13.continueRender)(renderHandle);
+        (0, import_remotion18.continueRender)(renderHandle);
       },
       onError: (family, error2) => {
         setIsFontLoading(false);
-        (0, import_remotion13.continueRender)(renderHandle);
+        (0, import_remotion18.continueRender)(renderHandle);
       }
     }
   );
-  (0, import_react17.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (data.font?.family) {
       if (isReady || isLoaded) {
         setIsFontLoading(false);
@@ -2684,7 +4368,7 @@ var Atom3 = ({ id, data }) => {
       }
     }
   }, [data.font, isReady, isLoaded, error]);
-  const enhancedStyle = (0, import_react17.useMemo)(() => {
+  const enhancedStyle = (0, import_react24.useMemo)(() => {
     const baseStyle = {
       fontFamily,
       ...data.style
@@ -2705,12 +4389,12 @@ var Atom3 = ({ id, data }) => {
     };
   }, [fontFamily, data.style, data.gradient, overrideStyles]);
   if (isFontLoading && data.loadingState?.showLoadingIndicator) {
-    return /* @__PURE__ */ import_react17.default.createElement("div", { style: enhancedStyle, className: data.className }, /* @__PURE__ */ import_react17.default.createElement("span", { style: data.loadingState.loadingStyle }, data.loadingState.loadingText || "Loading..."));
+    return /* @__PURE__ */ import_react24.default.createElement("div", { style: enhancedStyle, className: data.className }, /* @__PURE__ */ import_react24.default.createElement("span", { style: data.loadingState.loadingStyle }, data.loadingState.loadingText || "Loading..."));
   }
   if (error && data.errorState?.showErrorIndicator) {
-    return /* @__PURE__ */ import_react17.default.createElement("div", { style: enhancedStyle, className: data.className }, /* @__PURE__ */ import_react17.default.createElement("span", { style: data.errorState.errorStyle }, data.errorState.errorText || data.text));
+    return /* @__PURE__ */ import_react24.default.createElement("div", { style: enhancedStyle, className: data.className }, /* @__PURE__ */ import_react24.default.createElement("span", { style: data.errorState.errorStyle }, data.errorState.errorText || data.text));
   }
-  return /* @__PURE__ */ import_react17.default.createElement(
+  return /* @__PURE__ */ import_react24.default.createElement(
     "div",
     {
       style: enhancedStyle,
@@ -2723,60 +4407,60 @@ var Atom3 = ({ id, data }) => {
     data.text
   );
 };
-var config11 = {
+var config13 = {
   displayName: "TextAtom",
   type: "atom",
   isInnerSequence: false
 };
 
 // src/components/atoms/VideoAtom.tsx
-var import_react18 = __toESM(require("react"));
-var import_remotion14 = require("remotion");
-var import_zod2 = require("zod");
-var VideoAtomDataProps = import_zod2.z.object({
-  src: import_zod2.z.string(),
+var import_react25 = __toESM(require("react"));
+var import_remotion19 = require("remotion");
+var import_zod7 = require("zod");
+var VideoAtomDataProps = import_zod7.z.object({
+  src: import_zod7.z.string(),
   // Video source URL
-  srcDuration: import_zod2.z.number().optional(),
+  srcDuration: import_zod7.z.number().optional(),
   // Video duration in seconds (or to say it more accurately, each iteration duration in a loop))
-  style: import_zod2.z.record(import_zod2.z.string(), import_zod2.z.any()).optional(),
+  style: import_zod7.z.record(import_zod7.z.string(), import_zod7.z.any()).optional(),
   // CSS styles object
-  containerClassName: import_zod2.z.string().optional(),
+  containerClassName: import_zod7.z.string().optional(),
   // CSS class names
-  className: import_zod2.z.string().optional(),
+  className: import_zod7.z.string().optional(),
   // CSS class names
-  startFrom: import_zod2.z.number().optional(),
+  startFrom: import_zod7.z.number().optional(),
   // Start playback from this time (seconds)
-  endAt: import_zod2.z.number().optional(),
+  endAt: import_zod7.z.number().optional(),
   // End playback at this time (seconds)
-  playbackRate: import_zod2.z.number().optional(),
+  playbackRate: import_zod7.z.number().optional(),
   // Playback speed multiplier
-  volume: import_zod2.z.number().optional(),
+  volume: import_zod7.z.number().optional(),
   // Volume level (0-1)
-  muted: import_zod2.z.boolean().optional(),
+  muted: import_zod7.z.boolean().optional(),
   // Mute video audio
-  loop: import_zod2.z.boolean().optional(),
+  loop: import_zod7.z.boolean().optional(),
   // Whether to loop the video
-  fit: import_zod2.z.enum(["contain", "cover", "fill", "none", "scale-down"]).optional()
+  fit: import_zod7.z.enum(["contain", "cover", "fill", "none", "scale-down"]).optional()
   // Object fit style
 });
-var Atom4 = ({ data, id, context }) => {
-  const { fps } = (0, import_remotion14.useVideoConfig)();
+var Atom5 = ({ data, id, context }) => {
+  const { fps } = (0, import_remotion19.useVideoConfig)();
   const overrideStyles = useAnimatedStyles(id);
-  const frame = (0, import_remotion14.useCurrentFrame)();
-  const source = (0, import_react18.useMemo)(() => {
+  const frame = (0, import_remotion19.useCurrentFrame)();
+  const source = (0, import_react25.useMemo)(() => {
     if (data.src.startsWith("http")) {
       return data.src;
     }
-    return (0, import_remotion14.staticFile)(data.src);
+    return (0, import_remotion19.staticFile)(data.src);
   }, [data.src]);
-  const trimBefore = (0, import_react18.useMemo)(() => {
+  const trimBefore = (0, import_react25.useMemo)(() => {
     return data.startFrom ? data.startFrom * fps : void 0;
   }, [data.startFrom, fps]);
-  const trimAfter = (0, import_react18.useMemo)(() => {
+  const trimAfter = (0, import_react25.useMemo)(() => {
     return data.endAt ? data.endAt * fps : void 0;
   }, [data.endAt, fps]);
-  const videoComponent = /* @__PURE__ */ import_react18.default.createElement(
-    import_remotion14.OffthreadVideo,
+  const videoComponent = /* @__PURE__ */ import_react25.default.createElement(
+    import_remotion19.OffthreadVideo,
     {
       className: data.className,
       src: source,
@@ -2788,8 +4472,8 @@ var Atom4 = ({ data, id, context }) => {
       muted: data.muted
     }
   );
-  const videoWithStyles = data.containerClassName ? videoComponent : /* @__PURE__ */ import_react18.default.createElement(
-    import_remotion14.OffthreadVideo,
+  const videoWithStyles = data.containerClassName ? videoComponent : /* @__PURE__ */ import_react25.default.createElement(
+    import_remotion19.OffthreadVideo,
     {
       className: data.className,
       src: source,
@@ -2802,53 +4486,53 @@ var Atom4 = ({ data, id, context }) => {
     }
   );
   if (data.loop) {
-    return /* @__PURE__ */ import_react18.default.createElement(import_remotion14.Loop, { times: Infinity, durationInFrames: data.srcDuration ? data.srcDuration * fps : context.timing?.durationInFrames, layout: "none" }, data.containerClassName ? /* @__PURE__ */ import_react18.default.createElement("div", { className: data.containerClassName, style: overrideStyles }, videoComponent) : videoWithStyles);
+    return /* @__PURE__ */ import_react25.default.createElement(import_remotion19.Loop, { times: Infinity, durationInFrames: data.srcDuration ? data.srcDuration * fps : context.timing?.durationInFrames, layout: "none" }, data.containerClassName ? /* @__PURE__ */ import_react25.default.createElement("div", { className: data.containerClassName, style: overrideStyles }, videoComponent) : videoWithStyles);
   }
-  return data.containerClassName ? /* @__PURE__ */ import_react18.default.createElement("div", { className: data.containerClassName, style: overrideStyles }, videoComponent) : videoWithStyles;
+  return data.containerClassName ? /* @__PURE__ */ import_react25.default.createElement("div", { className: data.containerClassName, style: overrideStyles }, videoComponent) : videoWithStyles;
 };
-var config12 = {
+var config14 = {
   displayName: "VideoAtom",
   type: "atom",
   isInnerSequence: false
 };
 
 // src/components/atoms/AudioAtom.tsx
-var import_react19 = __toESM(require("react"));
-var import_remotion15 = require("remotion");
-var import_zod3 = require("zod");
-var AudioAtomMutedRangeProps = import_zod3.z.object({
-  type: import_zod3.z.literal("range"),
-  values: import_zod3.z.array(import_zod3.z.object({
-    start: import_zod3.z.number(),
+var import_react26 = __toESM(require("react"));
+var import_remotion20 = require("remotion");
+var import_zod8 = require("zod");
+var AudioAtomMutedRangeProps = import_zod8.z.object({
+  type: import_zod8.z.literal("range"),
+  values: import_zod8.z.array(import_zod8.z.object({
+    start: import_zod8.z.number(),
     // Start time in seconds
-    end: import_zod3.z.number()
+    end: import_zod8.z.number()
     // End time in seconds
   }))
 });
-var AudioAtomMutedFullProps = import_zod3.z.object({
-  type: import_zod3.z.literal("full"),
-  value: import_zod3.z.boolean()
+var AudioAtomMutedFullProps = import_zod8.z.object({
+  type: import_zod8.z.literal("full"),
+  value: import_zod8.z.boolean()
   // true = muted, false = unmuted
 });
-var AudioAtomDataProps = import_zod3.z.object({
-  src: import_zod3.z.string(),
+var AudioAtomDataProps = import_zod8.z.object({
+  src: import_zod8.z.string(),
   // Audio source URL
-  startFrom: import_zod3.z.number().optional(),
+  startFrom: import_zod8.z.number().optional(),
   // Start playback from this time (seconds)
-  endAt: import_zod3.z.number().optional(),
+  endAt: import_zod8.z.number().optional(),
   // End playback at this time (seconds)
-  volume: import_zod3.z.number().optional(),
+  volume: import_zod8.z.number().optional(),
   // Volume level (0-1)
-  playbackRate: import_zod3.z.number().optional(),
+  playbackRate: import_zod8.z.number().optional(),
   // Playback speed multiplier
-  muted: import_zod3.z.union([AudioAtomMutedFullProps, AudioAtomMutedRangeProps]).optional()
+  muted: import_zod8.z.union([AudioAtomMutedFullProps, AudioAtomMutedRangeProps]).optional()
   // Mute configuration
 });
-var Atom5 = ({ data }) => {
-  const { fps } = (0, import_remotion15.useVideoConfig)();
+var Atom6 = ({ data }) => {
+  const { fps } = (0, import_remotion20.useVideoConfig)();
   const { muted } = data;
-  const frame = (0, import_remotion15.useCurrentFrame)();
-  const isMuted = (0, import_react19.useMemo)(() => {
+  const frame = (0, import_remotion20.useCurrentFrame)();
+  const isMuted = (0, import_react26.useMemo)(() => {
     if (muted?.type === "full") {
       return muted.value;
     }
@@ -2859,16 +4543,16 @@ var Atom5 = ({ data }) => {
     }
     return false;
   }, [muted, frame, fps]);
-  const source = (0, import_react19.useMemo)(() => {
+  const source = (0, import_react26.useMemo)(() => {
     if (data.src.startsWith("http")) {
       return data.src;
     }
-    return (0, import_remotion15.staticFile)(data.src);
+    return (0, import_remotion20.staticFile)(data.src);
   }, [data.src]);
   return (
     // @ts-ignore
-    /* @__PURE__ */ import_react19.default.createElement(
-      import_remotion15.Audio,
+    /* @__PURE__ */ import_react26.default.createElement(
+      import_remotion20.Audio,
       {
         src: source,
         trimBefore: data.startFrom ? data.startFrom * fps : void 0,
@@ -2880,47 +4564,47 @@ var Atom5 = ({ data }) => {
     )
   );
 };
-var config13 = {
+var config15 = {
   displayName: "AudioAtom",
   type: "atom",
   isInnerSequence: false
 };
 
 // src/components/atoms/LottieAtom.tsx
-var import_react20 = __toESM(require("react"));
-var import_remotion16 = require("remotion");
+var import_react27 = __toESM(require("react"));
+var import_remotion21 = require("remotion");
 var import_lottie = require("@remotion/lottie");
-var import_zod4 = require("zod");
-var LottieAtomDataProps = import_zod4.z.object({
-  src: import_zod4.z.string(),
+var import_zod9 = require("zod");
+var LottieAtomDataProps = import_zod9.z.object({
+  src: import_zod9.z.string(),
   // Lottie JSON source URL or local path
-  style: import_zod4.z.record(import_zod4.z.string(), import_zod4.z.any()).optional(),
+  style: import_zod9.z.record(import_zod9.z.string(), import_zod9.z.any()).optional(),
   // CSS styles object
-  className: import_zod4.z.string().optional(),
+  className: import_zod9.z.string().optional(),
   // CSS class names
-  loop: import_zod4.z.boolean().optional(),
+  loop: import_zod9.z.boolean().optional(),
   // Whether to loop the animation (handled by Remotion timeline)
-  playbackRate: import_zod4.z.number().optional(),
+  playbackRate: import_zod9.z.number().optional(),
   // Playback speed multiplier (default: 1)
-  direction: import_zod4.z.enum(["forward", "reverse"]).optional()
+  direction: import_zod9.z.enum(["forward", "reverse"]).optional()
   // Animation direction
 });
 var useLottieData = (src) => {
-  const [animationData, setAnimationData] = (0, import_react20.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react20.useState)(true);
-  const [hasError, setHasError] = (0, import_react20.useState)(false);
-  const [handle] = (0, import_react20.useState)(() => (0, import_remotion16.delayRender)("Loading Lottie animation"));
-  (0, import_react20.useEffect)(() => {
+  const [animationData, setAnimationData] = (0, import_react27.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react27.useState)(true);
+  const [hasError, setHasError] = (0, import_react27.useState)(false);
+  const [handle] = (0, import_react27.useState)(() => (0, import_remotion21.delayRender)("Loading Lottie animation"));
+  (0, import_react27.useEffect)(() => {
     if (!src) {
       console.error("LottieAtom: No source provided");
       setHasError(true);
       setIsLoading(false);
-      (0, import_remotion16.continueRender)(handle);
+      (0, import_remotion21.continueRender)(handle);
       return;
     }
     setIsLoading(true);
     setHasError(false);
-    const sourceUrl = src.startsWith("http") ? src : (0, import_remotion16.staticFile)(src);
+    const sourceUrl = src.startsWith("http") ? src : (0, import_remotion21.staticFile)(src);
     fetch(sourceUrl, {
       mode: "cors",
       credentials: "omit"
@@ -2935,24 +4619,24 @@ var useLottieData = (src) => {
       }
       setAnimationData(json);
       setIsLoading(false);
-      (0, import_remotion16.continueRender)(handle);
+      (0, import_remotion21.continueRender)(handle);
     }).catch((error) => {
       console.error(`Failed to load Lottie animation from ${sourceUrl}:`, error.message || error);
       setHasError(true);
       setIsLoading(false);
-      (0, import_remotion16.continueRender)(handle);
+      (0, import_remotion21.continueRender)(handle);
     });
     return () => {
     };
   }, [src, handle]);
   return { animationData, isLoading, hasError };
 };
-var Atom6 = ({ data, id }) => {
-  const { fps } = (0, import_remotion16.useVideoConfig)();
-  const frame = (0, import_remotion16.useCurrentFrame)();
+var Atom7 = ({ data, id }) => {
+  const { fps } = (0, import_remotion21.useVideoConfig)();
+  const frame = (0, import_remotion21.useCurrentFrame)();
   const overrideStyles = useAnimatedStyles(id);
   const { animationData, isLoading, hasError } = useLottieData(data.src);
-  const effectiveFrame = (0, import_react20.useMemo)(() => {
+  const effectiveFrame = (0, import_react27.useMemo)(() => {
     const playbackRate = data.playbackRate || 1;
     const direction = data.direction || "forward";
     if (direction === "reverse") {
@@ -2960,12 +4644,12 @@ var Atom6 = ({ data, id }) => {
     }
     return frame * playbackRate;
   }, [frame, data.playbackRate, data.direction]);
-  const enhancedStyle = (0, import_react20.useMemo)(() => ({
+  const enhancedStyle = (0, import_react27.useMemo)(() => ({
     ...data.style,
     ...overrideStyles
   }), [data.style, overrideStyles]);
   if (isLoading) {
-    return /* @__PURE__ */ import_react20.default.createElement(
+    return /* @__PURE__ */ import_react27.default.createElement(
       "div",
       {
         className: data.className,
@@ -2981,7 +4665,7 @@ var Atom6 = ({ data, id }) => {
   }
   if (hasError || !animationData) {
     console.warn(`LottieAtom: Failed to render animation from ${data.src}`);
-    return /* @__PURE__ */ import_react20.default.createElement(
+    return /* @__PURE__ */ import_react27.default.createElement(
       "div",
       {
         className: data.className,
@@ -3001,58 +4685,93 @@ var Atom6 = ({ data, id }) => {
       "\u26A0\uFE0F Lottie Error"
     );
   }
-  return /* @__PURE__ */ import_react20.default.createElement(
+  return /* @__PURE__ */ import_react27.default.createElement(
     import_lottie.Lottie,
     {
-      animationData,
-      style: enhancedStyle,
-      className: data.className
+      animationData,
+      style: enhancedStyle,
+      className: data.className
+    }
+  );
+};
+var config16 = {
+  displayName: "LottieAtom",
+  type: "atom",
+  isInnerSequence: false
+};
+
+// src/components/atoms/HTMLBlockAtom.tsx
+var import_react28 = __toESM(require("react"));
+var Atom8 = ({ id, data }) => {
+  const overrideStyles = useAnimatedStyles(id);
+  const combinedStyle = {
+    ...data.style,
+    ...overrideStyles
+  };
+  return /* @__PURE__ */ import_react28.default.createElement(
+    "div",
+    {
+      className: data.className,
+      style: combinedStyle,
+      dangerouslySetInnerHTML: { __html: data.html }
     }
   );
 };
-var config14 = {
-  displayName: "LottieAtom",
+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
-var import_react21 = require("react");
+var import_react29 = require("react");
 var useComponentRegistry = () => {
-  return (0, import_react21.useMemo)(() => {
+  return (0, import_react29.useMemo)(() => {
     return {
       registerComponent: componentRegistry.registerComponent.bind(componentRegistry),
       registerPackage: componentRegistry.registerPackage.bind(componentRegistry),
@@ -3063,13 +4782,13 @@ var useComponentRegistry = () => {
 };
 
 // src/hooks/useBoundaryCalculation.ts
-var import_react22 = require("react");
+var import_react30 = require("react");
 var useBoundaryCalculation = ({
   parentBoundaries,
   constraints,
   layout
 }) => {
-  return (0, import_react22.useMemo)(() => {
+  return (0, import_react30.useMemo)(() => {
     const { x, y, width, height } = parentBoundaries;
     const calculatedX = typeof constraints.x === "number" ? constraints.x : x;
     const calculatedY = typeof constraints.y === "number" ? constraints.y : y;
@@ -3086,16 +4805,16 @@ var useBoundaryCalculation = ({
 };
 
 // src/hooks/buildTransitionHook.ts
-var import_react24 = require("react");
+var import_react32 = require("react");
 
 // src/core/types/transition.types.ts
-var import_react23 = require("react");
-var LayoutContext = (0, import_react23.createContext)(null);
+var import_react31 = require("react");
+var LayoutContext = (0, import_react31.createContext)(null);
 
 // src/hooks/buildTransitionHook.ts
 function buildLayoutHook(schema, defaultValue) {
   return () => {
-    const context = (0, import_react24.useContext)(LayoutContext);
+    const context = (0, import_react32.useContext)(LayoutContext);
     if (!context) {
       return defaultValue;
     }
@@ -3180,16 +4899,16 @@ var needsProxying = (url) => {
 
 // src/templates/rings/NextjsLogo.tsx
 var import_paths = require("@remotion/paths");
-var import_react26 = __toESM(require("react"));
-var import_remotion18 = require("remotion");
+var import_react34 = __toESM(require("react"));
+var import_remotion23 = require("remotion");
 
 // src/templates/rings/RippleOutLayout.tsx
-var import_react25 = __toESM(require("react"));
-var import_remotion17 = require("remotion");
-var import_zod5 = require("zod");
-var RippleOutTransitionSchema = import_zod5.z.object({
-  progress: import_zod5.z.number().min(0).max(1),
-  logoOut: import_zod5.z.number().min(0).max(1)
+var import_react33 = __toESM(require("react"));
+var import_remotion22 = require("remotion");
+var import_zod10 = require("zod");
+var RippleOutTransitionSchema = import_zod10.z.object({
+  progress: import_zod10.z.number().min(0).max(1),
+  logoOut: import_zod10.z.number().min(0).max(1)
 });
 var defaultRippleOutData = {
   progress: 0,
@@ -3207,10 +4926,10 @@ var RippleOutLayout = ({ data, context, children }) => {
     transitionStart,
     transitionDuration
   } = data || { transitionStart: 2, transitionDuration: 1 };
-  const frame = (0, import_remotion17.useCurrentFrame)();
-  const { fps } = (0, import_remotion17.useVideoConfig)();
+  const frame = (0, import_remotion22.useCurrentFrame)();
+  const { fps } = (0, import_remotion22.useVideoConfig)();
   const { hierarchy } = useRenderContext();
-  import_react25.default.useEffect(() => {
+  import_react33.default.useEffect(() => {
     loadGoogleFont("Inter", {
       subsets: ["latin"],
       weights: ["400", "700"]
@@ -3218,7 +4937,7 @@ var RippleOutLayout = ({ data, context, children }) => {
   }, []);
   const transitionStartFrame = transitionStart * fps;
   const transitionDurationFrames = transitionDuration * fps;
-  const logoOut = (0, import_remotion17.spring)({
+  const logoOut = (0, import_remotion22.spring)({
     fps,
     frame,
     config: {
@@ -3231,14 +4950,14 @@ var RippleOutLayout = ({ data, context, children }) => {
     progress: logoOut,
     logoOut
   };
-  const childrenArray = import_react25.default.Children.toArray(children).filter(
-    (child) => import_react25.default.isValidElement(child)
+  const childrenArray = import_react33.default.Children.toArray(children).filter(
+    (child) => import_react33.default.isValidElement(child)
   );
   const [from, to] = childrenArray;
-  return /* @__PURE__ */ import_react25.default.createElement(LayoutContext.Provider, { value: transitionData }, /* @__PURE__ */ import_react25.default.createElement(import_remotion17.AbsoluteFill, { style: {
+  return /* @__PURE__ */ import_react33.default.createElement(LayoutContext.Provider, { value: transitionData }, /* @__PURE__ */ import_react33.default.createElement(import_remotion22.AbsoluteFill, { style: {
     ...container,
     ...context?.boundaries
-  } }, /* @__PURE__ */ import_react25.default.createElement(import_remotion17.Sequence, { name: from.props.componentId + " - " + from.props.id, from: 0, durationInFrames: transitionStartFrame + transitionDurationFrames }, from), /* @__PURE__ */ import_react25.default.createElement(import_remotion17.Sequence, { name: to.props.componentId + " - " + to.props.id, from: transitionStartFrame + transitionDurationFrames / 2 }, to)));
+  } }, /* @__PURE__ */ import_react33.default.createElement(import_remotion22.Sequence, { name: from.props.componentId + " - " + from.props.id, from: 0, durationInFrames: transitionStartFrame + transitionDurationFrames }, from), /* @__PURE__ */ import_react33.default.createElement(import_remotion22.Sequence, { name: to.props.componentId + " - " + to.props.id, from: transitionStartFrame + transitionDurationFrames / 2 }, to)));
 };
 var rippleOutLayoutConfig = {
   displayName: "RippleOutLayout",
@@ -3254,23 +4973,23 @@ var nStroke = "M149.508 157.52L69.142 54H54V125.97H66.1136V69.3836L139.999 164.8
 var NextjsLogo = () => {
   const { logoOut } = useRippleOutLayout();
   const outProgress = logoOut;
-  const { fps } = (0, import_remotion18.useVideoConfig)();
-  const frame = (0, import_remotion18.useCurrentFrame)();
-  const evolve1 = (0, import_remotion18.spring)({
+  const { fps } = (0, import_remotion23.useVideoConfig)();
+  const frame = (0, import_remotion23.useCurrentFrame)();
+  const evolve1 = (0, import_remotion23.spring)({
     fps,
     frame,
     config: {
       damping: 200
     }
   });
-  const evolve2 = (0, import_remotion18.spring)({
+  const evolve2 = (0, import_remotion23.spring)({
     fps,
     frame: frame - 15,
     config: {
       damping: 200
     }
   });
-  const evolve3 = (0, import_remotion18.spring)({
+  const evolve3 = (0, import_remotion23.spring)({
     fps,
     frame: frame - 30,
     config: {
@@ -3279,7 +4998,7 @@ var NextjsLogo = () => {
     },
     durationInFrames: 30
   });
-  const style = (0, import_react26.useMemo)(() => {
+  const style = (0, import_react34.useMemo)(() => {
     return {
       height: 140,
       borderRadius: 70,
@@ -3292,10 +5011,10 @@ var NextjsLogo = () => {
   const evolution1 = (0, import_paths.evolvePath)(evolve1, firstPath);
   const evolution2 = (0, import_paths.evolvePath)(evolve2, secondPath);
   const evolution3 = (0, import_paths.evolvePath)(
-    (0, import_remotion18.interpolate)(evolve3, [0, 1], [0, 0.7]),
+    (0, import_remotion23.interpolate)(evolve3, [0, 1], [0, 0.7]),
     thirdPath
   );
-  return /* @__PURE__ */ import_react26.default.createElement("svg", { style, fill: "none", viewBox: "0 0 180 180" }, /* @__PURE__ */ import_react26.default.createElement("mask", { height: "180", id: "mask", style: mask, width: "180", x: "0", y: "0" }, /* @__PURE__ */ import_react26.default.createElement("circle", { cx: "90", cy: "90", fill: "black", r: "90" })), /* @__PURE__ */ import_react26.default.createElement("mask", { id: "n-mask", style: mask }, /* @__PURE__ */ import_react26.default.createElement("path", { d: nStroke, fill: "black" })), /* @__PURE__ */ import_react26.default.createElement("g", { mask: "url(#mask)" }, /* @__PURE__ */ import_react26.default.createElement("circle", { cx: "90", cy: "90", fill: "black", r: "90" }), /* @__PURE__ */ import_react26.default.createElement("g", { stroke: "url(#gradient0)", mask: "url(#n-mask)" }, /* @__PURE__ */ import_react26.default.createElement(
+  return /* @__PURE__ */ import_react34.default.createElement("svg", { style, fill: "none", viewBox: "0 0 180 180" }, /* @__PURE__ */ import_react34.default.createElement("mask", { height: "180", id: "mask", style: mask, width: "180", x: "0", y: "0" }, /* @__PURE__ */ import_react34.default.createElement("circle", { cx: "90", cy: "90", fill: "black", r: "90" })), /* @__PURE__ */ import_react34.default.createElement("mask", { id: "n-mask", style: mask }, /* @__PURE__ */ import_react34.default.createElement("path", { d: nStroke, fill: "black" })), /* @__PURE__ */ import_react34.default.createElement("g", { mask: "url(#mask)" }, /* @__PURE__ */ import_react34.default.createElement("circle", { cx: "90", cy: "90", fill: "black", r: "90" }), /* @__PURE__ */ import_react34.default.createElement("g", { stroke: "url(#gradient0)", mask: "url(#n-mask)" }, /* @__PURE__ */ import_react34.default.createElement(
     "path",
     {
       strokeWidth: "12.1136",
@@ -3303,7 +5022,7 @@ var NextjsLogo = () => {
       strokeDasharray: evolution1.strokeDasharray,
       strokeDashoffset: evolution1.strokeDashoffset
     }
-  ), /* @__PURE__ */ import_react26.default.createElement(
+  ), /* @__PURE__ */ import_react34.default.createElement(
     "path",
     {
       strokeWidth: 12.1136,
@@ -3311,7 +5030,7 @@ var NextjsLogo = () => {
       strokeDasharray: evolution2.strokeDasharray,
       strokeDashoffset: evolution2.strokeDashoffset
     }
-  )), /* @__PURE__ */ import_react26.default.createElement(
+  )), /* @__PURE__ */ import_react34.default.createElement(
     "path",
     {
       stroke: "url(#gradient1)",
@@ -3320,7 +5039,7 @@ var NextjsLogo = () => {
       strokeDashoffset: evolution3.strokeDashoffset,
       strokeWidth: "12"
     }
-  )), /* @__PURE__ */ import_react26.default.createElement("defs", null, /* @__PURE__ */ import_react26.default.createElement(
+  )), /* @__PURE__ */ import_react34.default.createElement("defs", null, /* @__PURE__ */ import_react34.default.createElement(
     "linearGradient",
     {
       gradientUnits: "userSpaceOnUse",
@@ -3330,9 +5049,9 @@ var NextjsLogo = () => {
       y1: "116.5",
       y2: "160.5"
     },
-    /* @__PURE__ */ import_react26.default.createElement("stop", { stopColor: "white" }),
-    /* @__PURE__ */ import_react26.default.createElement("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
-  ), /* @__PURE__ */ import_react26.default.createElement(
+    /* @__PURE__ */ import_react34.default.createElement("stop", { stopColor: "white" }),
+    /* @__PURE__ */ import_react34.default.createElement("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
+  ), /* @__PURE__ */ import_react34.default.createElement(
     "linearGradient",
     {
       gradientUnits: "userSpaceOnUse",
@@ -3342,8 +5061,8 @@ var NextjsLogo = () => {
       y1: "54",
       y2: "106.875"
     },
-    /* @__PURE__ */ import_react26.default.createElement("stop", { stopColor: "white" }),
-    /* @__PURE__ */ import_react26.default.createElement("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
+    /* @__PURE__ */ import_react34.default.createElement("stop", { stopColor: "white" }),
+    /* @__PURE__ */ import_react34.default.createElement("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
   )));
 };
 var nextjsLogoConfig = {
@@ -3353,22 +5072,22 @@ var nextjsLogoConfig = {
 };
 
 // src/templates/rings/Rings.tsx
-var import_react27 = __toESM(require("react"));
-var import_remotion19 = require("remotion");
+var import_react35 = __toESM(require("react"));
+var import_remotion24 = require("remotion");
 var RadialGradient = ({ radius, color }) => {
   const height = radius * 2;
   const width = radius * 2;
   return (
     // @ts-ignore
-    /* @__PURE__ */ import_react27.default.createElement(
-      import_remotion19.AbsoluteFill,
+    /* @__PURE__ */ import_react35.default.createElement(
+      import_remotion24.AbsoluteFill,
       {
         style: {
           justifyContent: "center",
           alignItems: "center"
         }
       },
-      /* @__PURE__ */ import_react27.default.createElement(
+      /* @__PURE__ */ import_react35.default.createElement(
         "div",
         {
           style: {
@@ -3388,11 +5107,11 @@ var Rings = ({ context, data }) => {
   const { logoOut } = useRippleOutLayout();
   const outProgress = logoOut;
   const scale = 1 / (1 - outProgress);
-  const { height } = (0, import_remotion19.useVideoConfig)();
+  const { height } = (0, import_remotion24.useVideoConfig)();
   return (
     // @ts-ignore
-    /* @__PURE__ */ import_react27.default.createElement(
-      import_remotion19.AbsoluteFill,
+    /* @__PURE__ */ import_react35.default.createElement(
+      import_remotion24.AbsoluteFill,
       {
         style: {
           transform: `scale(${scale})`,
@@ -3400,12 +5119,12 @@ var Rings = ({ context, data }) => {
         }
       },
       new Array(5).fill(true).map((_, i) => {
-        return /* @__PURE__ */ import_react27.default.createElement(
+        return /* @__PURE__ */ import_react35.default.createElement(
           RadialGradient,
           {
             key: i,
             radius: height * 0.3 * i,
-            color: (0, import_remotion19.interpolateColors)(i, [0, 4], ["#fff", "#fff"])
+            color: (0, import_remotion24.interpolateColors)(i, [0, 4], ["#fff", "#fff"])
           }
         );
       }).reverse()
@@ -3419,8 +5138,8 @@ var ringsConfig = {
 };
 
 // src/templates/rings/TextFade.tsx
-var import_react28 = __toESM(require("react"));
-var import_remotion20 = require("remotion");
+var import_react36 = __toESM(require("react"));
+var import_remotion25 = require("remotion");
 var TextFade = (props) => {
   const { children, context, data } = props;
   const { animation } = data || {
@@ -3428,9 +5147,9 @@ var TextFade = (props) => {
       duration: 1
     }
   };
-  const { fps } = (0, import_remotion20.useVideoConfig)();
-  const frame = (0, import_remotion20.useCurrentFrame)();
-  const progress = (0, import_remotion20.spring)({
+  const { fps } = (0, import_remotion25.useVideoConfig)();
+  const frame = (0, import_remotion25.useCurrentFrame)();
+  const progress = (0, import_remotion25.spring)({
     fps,
     frame,
     config: {
@@ -3438,10 +5157,10 @@ var TextFade = (props) => {
     },
     durationInFrames: animation.duration * fps
   });
-  const rightStop = (0, import_remotion20.interpolate)(progress, [0, 1], [200, 0]);
+  const rightStop = (0, import_remotion25.interpolate)(progress, [0, 1], [200, 0]);
   const leftStop = Math.max(0, rightStop - 60);
   const maskImage = `linear-gradient(-45deg, transparent ${leftStop}%, black ${rightStop}%)`;
-  const container2 = (0, import_react28.useMemo)(() => {
+  const container2 = (0, import_react36.useMemo)(() => {
     return {
       width: "100%",
       height: "100%",
@@ -3449,7 +5168,7 @@ var TextFade = (props) => {
       alignItems: "center"
     };
   }, []);
-  const content = (0, import_react28.useMemo)(() => {
+  const content = (0, import_react36.useMemo)(() => {
     return {
       ...context?.boundaries,
       maskImage,
@@ -3461,7 +5180,7 @@ var TextFade = (props) => {
   }, [maskImage]);
   return (
     // @ts-ignore
-    /* @__PURE__ */ import_react28.default.createElement(import_remotion20.AbsoluteFill, { style: container2 }, /* @__PURE__ */ import_react28.default.createElement("div", { style: content }, children))
+    /* @__PURE__ */ import_react36.default.createElement(import_remotion25.AbsoluteFill, { style: container2 }, /* @__PURE__ */ import_react36.default.createElement("div", { style: content }, children))
   );
 };
 var textFadeConfig = {
@@ -3492,259 +5211,41 @@ registerComponent(
 );
 
 // src/templates/waveform/components/WaveformCircle.tsx
-var import_react31 = __toESM(require("react"));
-
-// src/templates/waveform/Waveform.tsx
-var import_react30 = __toESM(require("react"));
-var import_remotion22 = require("remotion");
-
-// src/templates/waveform/hooks/useWaveformData.ts
-var import_react29 = require("react");
-var import_media_utils = require("@remotion/media-utils");
-var import_remotion21 = require("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 = (0, import_react29.useMemo)(() => {
-    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 } = (0, import_react29.useMemo)(() => {
-    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: (0, import_remotion21.staticFile)(audioSrc), audioStartsFrom: void 0 };
-  }, [audioSrc]);
-  const audioData = (0, import_media_utils.useAudioData)(source);
-  const adjustedFrame = (0, import_react29.useMemo)(() => {
-    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 = (0, import_react29.useMemo)(() => {
-    if (!audioData) return null;
-    try {
-      const waveform = (0, import_media_utils.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
-  } = (0, import_react29.useMemo)(() => {
-    if (!audioData || !includeFrequencyData) {
-      return {
-        frequencyData: null,
-        amplitudes: null,
-        bass: null,
-        mid: null,
-        treble: null,
-        bassValues: null,
-        midValues: null,
-        trebleValues: null
-      };
-    }
-    try {
-      const frequencyData2 = (0, import_media_utils.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
-  };
-};
+var import_react38 = __toESM(require("react"));
 
 // src/templates/waveform/Waveform.tsx
-var WaveformContext = (0, import_react30.createContext)(null);
+var import_react37 = __toESM(require("react"));
+var import_remotion26 = require("remotion");
+var WaveformContext = (0, import_react37.createContext)(null);
 var useWaveformContext = () => {
-  const context = (0, import_react30.useContext)(WaveformContext);
+  const context = (0, import_react37.useContext)(WaveformContext);
   if (!context) {
     throw new Error("useWaveformContext must be used within a Waveform component");
   }
   return context;
 };
 var Waveform = ({
-  config: config15,
+  config: config18,
   children,
   className = "",
   style = {}
 }) => {
-  const frame = (0, import_remotion22.useCurrentFrame)();
-  const { width: videoWidth, height: videoHeight, fps } = (0, import_remotion22.useVideoConfig)();
+  const frame = (0, import_remotion26.useCurrentFrame)();
+  const { width: videoWidth, height: videoHeight, fps } = (0, import_remotion26.useVideoConfig)();
   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,
@@ -3752,7 +5253,7 @@ var Waveform = ({
     audioData,
     frame,
     fps,
-    config: config15,
+    config: config18,
     width,
     height,
     bass,
@@ -3762,7 +5263,7 @@ var Waveform = ({
     midValues,
     trebleValues
   };
-  return /* @__PURE__ */ import_react30.default.createElement(WaveformContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react30.default.createElement(
+  return /* @__PURE__ */ import_react37.default.createElement(WaveformContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react37.default.createElement(
     "div",
     {
       className: `relative ${className}`,
@@ -3770,7 +5271,7 @@ var Waveform = ({
         width,
         height,
         position: "relative",
-        backgroundColor: config15.backgroundColor || "transparent",
+        backgroundColor: config18.backgroundColor || "transparent",
         ...style
       }
     },
@@ -3781,7 +5282,7 @@ var Waveform = ({
 // src/templates/waveform/components/WaveformCircle.tsx
 var WaveformCircle = ({ data }) => {
   const {
-    config: config15,
+    config: config18,
     className = "",
     style = {},
     strokeColor = "#FF6B6B",
@@ -3798,7 +5299,7 @@ var WaveformCircle = ({ data }) => {
     gradientStartColor,
     gradientEndColor
   } = data;
-  return /* @__PURE__ */ import_react31.default.createElement(Waveform, { config: config15, className, style }, /* @__PURE__ */ import_react31.default.createElement(
+  return /* @__PURE__ */ import_react38.default.createElement(Waveform, { config: config18, className, style }, /* @__PURE__ */ import_react38.default.createElement(
     WaveformCircleContent,
     {
       strokeColor,
@@ -3837,7 +5338,7 @@ var WaveformCircleContent = ({
   const circleCenterX = width * (centerX || 50) / 100;
   const circleCenterY = height * (centerY || 50) / 100;
   const rotation = frame * (rotationSpeed || 0) % 360;
-  const circularPath = (0, import_react31.useMemo)(() => {
+  const circularPath = (0, import_react38.useMemo)(() => {
     if (!waveformData) return "";
     const totalAngle = (endAngle || 360) - (startAngle || 0);
     const angleStep = totalAngle / waveformData.length;
@@ -3859,11 +5360,11 @@ var WaveformCircleContent = ({
     return path;
   }, [waveformData, circleRadius, circleCenterX, circleCenterY, startAngle, endAngle, rotation, amplitude]);
   if (!waveformData) {
-    return /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex items-center justify-center w-full h-full text-gray-500" }, "Loading circular waveform...");
+    return /* @__PURE__ */ import_react38.default.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__ */ import_react31.default.createElement(
+  return /* @__PURE__ */ import_react38.default.createElement(
     "svg",
     {
       width,
@@ -3871,8 +5372,8 @@ var WaveformCircleContent = ({
       className: "absolute inset-0",
       style: { pointerEvents: "none" }
     },
-    hasGradient && /* @__PURE__ */ import_react31.default.createElement("defs", null, /* @__PURE__ */ import_react31.default.createElement("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%" }, /* @__PURE__ */ import_react31.default.createElement("stop", { offset: "0%", stopColor: gradientStartColor }), /* @__PURE__ */ import_react31.default.createElement("stop", { offset: "100%", stopColor: gradientEndColor }))),
-    /* @__PURE__ */ import_react31.default.createElement(
+    hasGradient && /* @__PURE__ */ import_react38.default.createElement("defs", null, /* @__PURE__ */ import_react38.default.createElement("linearGradient", { id: gradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%" }, /* @__PURE__ */ import_react38.default.createElement("stop", { offset: "0%", stopColor: gradientStartColor }), /* @__PURE__ */ import_react38.default.createElement("stop", { offset: "100%", stopColor: gradientEndColor }))),
+    /* @__PURE__ */ import_react38.default.createElement(
       "path",
       {
         d: circularPath,
@@ -3888,10 +5389,10 @@ var WaveformCircleContent = ({
 };
 
 // src/templates/waveform/components/WaveformHistogram.tsx
-var import_react32 = __toESM(require("react"));
+var import_react39 = __toESM(require("react"));
 var WaveformHistogram = ({ data }) => {
   const {
-    config: config15,
+    config: config18,
     className = "",
     style = {},
     barColor = "#FF6B6B",
@@ -3904,13 +5405,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__ */ import_react32.default.createElement(Waveform, { config: config15, className, style }, /* @__PURE__ */ import_react32.default.createElement(
+  return /* @__PURE__ */ import_react39.default.createElement(Waveform, { config: config18, className, style }, /* @__PURE__ */ import_react39.default.createElement(
     WaveformHistogramContent,
     {
       barColor,
@@ -3927,7 +5429,8 @@ var WaveformHistogram = ({ data }) => {
       gradientDirection,
       multiplier,
       gradientStyle,
-      waveDirection
+      waveDirection,
+      barSlant
     }
   ));
 };
@@ -3946,12 +5449,13 @@ var WaveformHistogramContent = ({
   gradientDirection,
   multiplier,
   gradientStyle,
-  waveDirection
+  waveDirection,
+  barSlant
 }) => {
   const { waveformData, frequencyData, amplitudes, width, height } = useWaveformContext();
   const dataToUse = amplitudes || waveformData;
   if (!dataToUse) {
-    return /* @__PURE__ */ import_react32.default.createElement("div", { className: "flex items-center justify-center w-full h-full text-gray-500" }, "Loading histogram...");
+    return /* @__PURE__ */ import_react39.default.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();
@@ -3975,7 +5479,7 @@ var WaveformHistogramContent = ({
       },
       opacity: gradientStyle === "mirrored" && !growUpwards ? 0.25 : 1
     };
-    return /* @__PURE__ */ import_react32.default.createElement("div", { style: containerStyle2 }, frequencies.map((value, index) => /* @__PURE__ */ import_react32.default.createElement(
+    return /* @__PURE__ */ import_react39.default.createElement("div", { style: containerStyle2 }, frequencies.map((value, index) => /* @__PURE__ */ import_react39.default.createElement(
       "div",
       {
         key: index,
@@ -3987,7 +5491,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"
         }
       }
     )));
@@ -4007,7 +5513,7 @@ var WaveformHistogramContent = ({
       width: "100%",
       left: 0
     };
-    return /* @__PURE__ */ import_react32.default.createElement(import_react32.default.Fragment, null, /* @__PURE__ */ import_react32.default.createElement("div", { style: topHalfStyle }, /* @__PURE__ */ import_react32.default.createElement(Bars, { growUpwards: true })), /* @__PURE__ */ import_react32.default.createElement("div", { style: bottomHalfStyle }, /* @__PURE__ */ import_react32.default.createElement(Bars, { growUpwards: false })));
+    return /* @__PURE__ */ import_react39.default.createElement(import_react39.default.Fragment, null, /* @__PURE__ */ import_react39.default.createElement("div", { style: topHalfStyle }, /* @__PURE__ */ import_react39.default.createElement(Bars, { growUpwards: true })), /* @__PURE__ */ import_react39.default.createElement("div", { style: bottomHalfStyle }, /* @__PURE__ */ import_react39.default.createElement(Bars, { growUpwards: false })));
   }
   const containerStyle = {
     width: "100%",
@@ -4016,14 +5522,14 @@ var WaveformHistogramContent = ({
     height: `${height / 2}px`,
     left: 0
   };
-  return /* @__PURE__ */ import_react32.default.createElement("div", { style: containerStyle }, /* @__PURE__ */ import_react32.default.createElement(Bars, { growUpwards: true }));
+  return /* @__PURE__ */ import_react39.default.createElement("div", { style: containerStyle }, /* @__PURE__ */ import_react39.default.createElement(Bars, { growUpwards: true }));
 };
 
 // src/templates/waveform/components/WaveformHistogramRanged.tsx
-var import_react33 = __toESM(require("react"));
+var import_react40 = __toESM(require("react"));
 var WaveformHistogramRanged = ({ data }) => {
   const {
-    config: config15,
+    config: config18,
     className = "",
     style = {},
     barColor = "#FF6B6B",
@@ -4045,9 +5551,10 @@ var WaveformHistogramRanged = ({ data }) => {
     gradientDirection = "vertical",
     gradientStyle = "normal",
     horizontalSymmetry = false,
-    waveDirection = "right-to-left"
+    waveDirection = "right-to-left",
+    barSlant = 0
   } = data;
-  return /* @__PURE__ */ import_react33.default.createElement(Waveform, { config: config15, className, style }, /* @__PURE__ */ import_react33.default.createElement(
+  return /* @__PURE__ */ import_react40.default.createElement(Waveform, { config: config18, className, style }, /* @__PURE__ */ import_react40.default.createElement(
     WaveformHistogramRangedContent,
     {
       barColor,
@@ -4069,7 +5576,8 @@ var WaveformHistogramRanged = ({ data }) => {
       gradientDirection,
       gradientStyle,
       horizontalSymmetry,
-      waveDirection
+      waveDirection,
+      barSlant
     }
   ));
 };
@@ -4093,11 +5601,12 @@ var WaveformHistogramRangedContent = ({
   gradientDirection,
   gradientStyle,
   horizontalSymmetry,
-  waveDirection
+  waveDirection,
+  barSlant
 }) => {
   const { amplitudes, bassValues, midValues, trebleValues, height } = useWaveformContext();
   if (!amplitudes || !bassValues || !midValues || !trebleValues) {
-    return /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex items-center justify-center w-full h-full text-gray-500" }, "Loading frequency data...");
+    return /* @__PURE__ */ import_react40.default.createElement("div", { className: "flex items-center justify-center w-full h-full text-gray-500" }, "Loading frequency data...");
   }
   const bassFrequencies = bassValues;
   const midFrequencies = midValues;
@@ -4121,12 +5630,12 @@ var WaveformHistogramRangedContent = ({
       },
       opacity: gradientStyle === "mirrored" && !growUpwards ? 0.25 : 1
     };
-    return /* @__PURE__ */ import_react33.default.createElement("div", { style: containerStyle2 }, unifiedWaveform.map((value, index) => {
+    return /* @__PURE__ */ import_react40.default.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__ */ import_react33.default.createElement(
+      return /* @__PURE__ */ import_react40.default.createElement(
         "div",
         {
           key: index,
@@ -4140,11 +5649,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__ */ import_react33.default.createElement("div", { style: {
+        rangeLabels && /* @__PURE__ */ import_react40.default.createElement("div", { style: {
           position: "absolute",
           bottom: growUpwards ? "-20px" : "auto",
           top: growUpwards ? "auto" : "-20px",
@@ -4172,7 +5683,7 @@ var WaveformHistogramRangedContent = ({
       width: "100%",
       left: 0
     };
-    return /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement("div", { style: topHalfStyle }, /* @__PURE__ */ import_react33.default.createElement(Bars, { growUpwards: true })), /* @__PURE__ */ import_react33.default.createElement("div", { style: bottomHalfStyle }, /* @__PURE__ */ import_react33.default.createElement(Bars, { growUpwards: false })));
+    return /* @__PURE__ */ import_react40.default.createElement(import_react40.default.Fragment, null, /* @__PURE__ */ import_react40.default.createElement("div", { style: topHalfStyle }, /* @__PURE__ */ import_react40.default.createElement(Bars, { growUpwards: true })), /* @__PURE__ */ import_react40.default.createElement("div", { style: bottomHalfStyle }, /* @__PURE__ */ import_react40.default.createElement(Bars, { growUpwards: false })));
   }
   const containerStyle = {
     width: "100%",
@@ -4181,13 +5692,13 @@ var WaveformHistogramRangedContent = ({
     height: `${height / 2}px`,
     left: 0
   };
-  return /* @__PURE__ */ import_react33.default.createElement("div", { style: containerStyle }, /* @__PURE__ */ import_react33.default.createElement(Bars, { growUpwards: true }));
+  return /* @__PURE__ */ import_react40.default.createElement("div", { style: containerStyle }, /* @__PURE__ */ import_react40.default.createElement(Bars, { growUpwards: true }));
 };
 
 // src/templates/waveform/components/WaveformLine.tsx
-var import_react34 = __toESM(require("react"));
+var import_react41 = __toESM(require("react"));
 var import_media_utils2 = require("@remotion/media-utils");
-var import_remotion23 = require("remotion");
+var import_remotion27 = require("remotion");
 var detectBeat = (frequencyData, amplitudes, threshold = 0.7, bpm, frame = 0, fps = 30) => {
   if (!frequencyData || !amplitudes || frequencyData.length === 0) return false;
   if (bpm) {
@@ -4219,7 +5730,7 @@ var easingFunctions = {
 };
 var WaveformLine = ({ data }) => {
   const {
-    config: config15,
+    config: config18,
     className = "",
     style = {},
     strokeColor = "#FF6B6B",
@@ -4247,7 +5758,7 @@ var WaveformLine = ({ data }) => {
     pulseColor = "#FFD700",
     pulseScale = 1.2
   } = data;
-  return /* @__PURE__ */ import_react34.default.createElement(Waveform, { config: config15, className, style }, /* @__PURE__ */ import_react34.default.createElement(
+  return /* @__PURE__ */ import_react41.default.createElement(Waveform, { config: config18, className, style }, /* @__PURE__ */ import_react41.default.createElement(
     WaveformLineContent,
     {
       strokeColor,
@@ -4303,14 +5814,14 @@ var WaveformLineContent = ({
   pulseColor,
   pulseScale
 }) => {
-  const { waveformData, frequencyData, amplitudes, width, height, config: config15, frame, fps } = useWaveformContext();
-  const currentFrame = (0, import_remotion23.useCurrentFrame)();
-  const videoConfig = (0, import_remotion23.useVideoConfig)();
-  const isBeat = (0, import_react34.useMemo)(() => {
+  const { waveformData, frequencyData, amplitudes, width, height, config: config18, frame, fps } = useWaveformContext();
+  const currentFrame = (0, import_remotion27.useCurrentFrame)();
+  const videoConfig = (0, import_remotion27.useVideoConfig)();
+  const isBeat = (0, import_react41.useMemo)(() => {
     if (!beatSync || !frequencyData || !amplitudes) return false;
     return detectBeat(frequencyData, amplitudes, beatThreshold, bpm, currentFrame, fps);
   }, [beatSync, frequencyData, amplitudes, beatThreshold, bpm, currentFrame, fps]);
-  const beatProgress = (0, import_react34.useMemo)(() => {
+  const beatProgress = (0, import_react41.useMemo)(() => {
     if (!isBeat || !beatAnimationDuration) return 0;
     const beatStartFrame = Math.floor(currentFrame / beatAnimationDuration) * beatAnimationDuration;
     const progress = (currentFrame - beatStartFrame) / beatAnimationDuration;
@@ -4320,19 +5831,19 @@ var WaveformLineContent = ({
     }
     return clampedProgress;
   }, [isBeat, currentFrame, beatAnimationDuration, smoothAnimation]);
-  const currentBeatMultiplier = (0, import_react34.useMemo)(() => {
+  const currentBeatMultiplier = (0, import_react41.useMemo)(() => {
     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 = (0, import_react34.useMemo)(() => {
+  const smoothFactor = (0, import_react41.useMemo)(() => {
     if (!beatSync) {
       return 0.3;
     }
     return smoothAnimation ? 0.7 : 1;
   }, [beatSync, smoothAnimation]);
-  const waveformPaths = (0, import_react34.useMemo)(() => {
+  const waveformPaths = (0, import_react41.useMemo)(() => {
     if (!waveformData) return [];
     const paths = [];
     const segments = waveSegments || 1;
@@ -4348,8 +5859,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;
@@ -4359,11 +5870,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__ */ import_react34.default.createElement("div", { className: "flex items-center justify-center w-full h-full text-gray-500" }, "Loading waveform...");
+    return /* @__PURE__ */ import_react41.default.createElement("div", { className: "flex items-center justify-center w-full h-full text-gray-500" }, "Loading waveform...");
   }
-  return /* @__PURE__ */ import_react34.default.createElement(
+  return /* @__PURE__ */ import_react41.default.createElement(
     "svg",
     {
       width,
@@ -4371,7 +5882,7 @@ var WaveformLineContent = ({
       className: "absolute inset-0",
       style: { pointerEvents: "none" }
     },
-    centerLine && /* @__PURE__ */ import_react34.default.createElement(
+    centerLine && /* @__PURE__ */ import_react41.default.createElement(
       "line",
       {
         x1: waveDirection === "horizontal" ? 0 : width / 2,
@@ -4383,7 +5894,7 @@ var WaveformLineContent = ({
         opacity: 0.3
       }
     ),
-    waveformPaths.map(({ path, segmentIndex }) => /* @__PURE__ */ import_react34.default.createElement("g", { key: segmentIndex }, pulseOnBeat && isBeat && /* @__PURE__ */ import_react34.default.createElement(
+    waveformPaths.map(({ path, segmentIndex }) => /* @__PURE__ */ import_react41.default.createElement("g", { key: segmentIndex }, pulseOnBeat && isBeat && /* @__PURE__ */ import_react41.default.createElement(
       "path",
       {
         d: path,
@@ -4394,7 +5905,7 @@ var WaveformLineContent = ({
         fill: "none",
         opacity: (opacity || 1) * (1 - beatProgress)
       }
-    ), /* @__PURE__ */ import_react34.default.createElement(
+    ), /* @__PURE__ */ import_react41.default.createElement(
       "path",
       {
         d: path,
@@ -4455,19 +5966,19 @@ registerComponent("WaveformCircle", WaveformCircle, "atom", {
 
 // src/components/Composition.tsx
 var import_player = require("@remotion/player");
-var import_react35 = __toESM(require("react"));
-var import_remotion24 = require("remotion");
-var import_zod6 = __toESM(require("zod"));
-var CompositionLayout = ({ childrenData, style, config: config15 }) => {
-  return /* @__PURE__ */ import_react35.default.createElement(
+var import_react42 = __toESM(require("react"));
+var import_remotion28 = require("remotion");
+var import_zod11 = __toESM(require("zod"));
+var CompositionLayout = ({ childrenData, style, config: config18 }) => {
+  return /* @__PURE__ */ import_react42.default.createElement(
     CompositionProvider,
     {
       value: {
         root: childrenData,
-        duration: config15.duration
+        duration: config18.duration
       }
     },
-    /* @__PURE__ */ import_react35.default.createElement(import_remotion24.AbsoluteFill, { style }, childrenData?.map((component) => /* @__PURE__ */ import_react35.default.createElement(
+    /* @__PURE__ */ import_react42.default.createElement(import_remotion28.AbsoluteFill, { style }, childrenData?.map((component) => /* @__PURE__ */ import_react42.default.createElement(
       ComponentRenderer,
       {
         key: component.id,
@@ -4507,26 +6018,26 @@ var calculateCompositionLayoutMetadata = async ({ props, defaultProps, abortSign
 var Composition = ({
   id,
   childrenData,
-  config: config15,
+  config: config18,
   style
 }) => {
-  return /* @__PURE__ */ import_react35.default.createElement(
-    import_remotion24.Composition,
+  return /* @__PURE__ */ import_react42.default.createElement(
+    import_remotion28.Composition,
     {
       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: import_zod6.default.object({})
+      schema: import_zod11.default.object({})
     }
   );
 };
 var Player = (props) => {
-  return /* @__PURE__ */ import_react35.default.createElement(
+  return /* @__PURE__ */ import_react42.default.createElement(
     import_player.Player,
     {
       component: CompositionLayout,
@@ -4546,12 +6057,20 @@ var Player = (props) => {
   BaseLayoutConfig,
   BlurEffect,
   BlurEffectConfig,
+  CanvasAtom,
+  CanvasAtomConfig,
+  CanvasContentAwareReveal,
+  CanvasGlitchEffect,
+  CanvasParticleEffect,
+  CanvasWipeReveal,
   ComponentRenderer,
   Composition,
   CompositionLayout,
   CompositionProvider,
   Frame,
   GenericEffectPresets,
+  HTMLBlockAtom,
+  HTMLBlockAtomConfig,
   ImageAtom,
   ImageAtomConfig,
   LoopEffect,
@@ -4580,6 +6099,8 @@ var Player = (props) => {
   VideoAtomConfig,
   Waveform,
   WaveformCircle,
+  WaveformEffect,
+  WaveformEffectConfig,
   WaveformHistogram,
   WaveformHistogramRanged,
   WaveformLine,