@devmotion/cli 0.6.3 → 0.8.0

package/studio/server/chunks/_page.svelte-DgqoNyxe.js

@@ -0,0 +1,1732 @@
+import './async-lVJA8xJZ.js';
+import { f as bind_props, l as attr_style, o as stringify, h as derived, z as async_derived, w as attr_class, c as clsx, i as escape_html, d as spread_props, e as ensure_array_like, t as attr } from './index9-D9BBZH26.js';
+import { S as Seo_head, a as PUBLIC_S3_URL } from './seo-head-Bx-uKR1E.js';
+import { c as cn, B as Button } from './button-EIkCOf5j.js';
+import { r as resolve } from './server2-vs5lBcGY.js';
+import { P as Project_viewport, a as Player_controls, L as Layout_template } from './layout-template-BhL4-5tM.js';
+import { d as Copy, a as watch, f as SvelteSet } from './copy-gHAQZ-hc.js';
+import { C as Check, bk as Terminal, U as Users, aO as Zap, bd as Video, v as Apply_font, b4 as Smartphone, a9 as Square, bl as Package, bm as Server, b6 as Captions, b5 as Languages, u as Sparkles, bn as Pointer } from './editor.svelte-Bdv5LaOt.js';
+import { a7 as DYNAMIC_VARIANTS, t as isDynamic } from './animation-sOd5R1cE.js';
+import { I as IsMobile } from './is-mobile.svelte-zA7Ppfff.js';
+import './auth-client-Cpf930Sw.js';
+import './client3-6wS0pbKv.js';
+import './root-DjEsp22s.js';
+import './exports-5qhW9hr2.js';
+import { PLANS } from './plans-BAwNKt6H.js';
+import './auth.remote-DgcD7hjY.js';
+import { codeToHtml } from 'shiki';
+import { h as html } from './arrow-right-Ba81Wr45.js';
+import { a as projectDataToFsLayers, p as parseSceneHtml, h as fsProjectToProject } from './html-parser-t3Ydy25K.js';
+import { w as writeSceneHtml } from './html-writer-D8dOWi0D.js';
+import { C as Clapperboard } from './clapperboard-Clfr4atP.js';
+import { I as Icon } from './Icon-DbEXclx7.js';
+import { G as Globe, C as Chevron_down } from './x-dSB6BXUp.js';
+import { e as Monitor, f as Scissors } from './registry2-DJC1cBxe.js';
+import { g as getDefaultProject } from './default-project-DZyH--y0.js';
+import './index11-D0KEeryD.js';
+import './routing-Up9X2RDi.js';
+import './event-DmhHnWT5.js';
+import './input-C1z0Nn4U.js';
+import './_commonjsHelpers-D6la_xYv.js';
+import './watermark-DJiyRHwX.js';
+import './base-qepI6vHK.js';
+import 'zod';
+import 'bezier-easing';
+import './branding-5rLT-BvK.js';
+import './presets-CU-ej2J9.js';
+import 'nanoid';
+import 'colord';
+import './social-auth-buttons-C7WiSzwd.js';
+import './stores-DM9_zZZ3.js';
+import './find-stock-image-Cwkwf5gV.js';
+import './media-v9Bq2kuR.js';
+import './apply-result-DUy8ya08.js';
+import 'dompurify';
+import './house-BuExdk93.js';
+import './arrow-left-CP_W5MWC.js';
+import './project-layer-yZ50OnjM.js';
+import './shared-server-hNytdPP9.js';
+import './desktop-mode-Bkebx7Vx.js';
+import './index-Dp2_pJiZ.js';
+import './shared-hgBL35K7.js';
+import './query-D9bdUhU3.js';
+import './index10-DB2myPI4.js';
+import './api-Do--xZ9M.js';
+import 'drizzle-orm/pg-core';
+import 'drizzle-orm';
+import './posthog-kZp2zKvY.js';
+import './optional-services-BGRY7tmz.js';
+import './env-AoZ3P0fg.js';
+import './remote-functions-C4V-TgoU.js';
+import './attribute-protocol-DQ-1julf.js';
+import './upload.remote-Bhhj6ZvH.js';
+import './command-7H4QNUwk.js';
+import './index6-BwFC1GDh.js';
+import '@aws-sdk/client-s3';
+import '@aws-sdk/s3-request-presigner';
+import './filename-sanitizer-yQZjRxRx.js';
+import './upload-service-Boi3a_IC.js';
+import 'fluent-ffmpeg';
+import './adapter-XtQVoo_l.js';
+import './subscription-limits-kr9leRdz.js';
+import './subscription-BC4gCTG6.js';
+import './ui.svelte-FJio-gZM.js';
+import './tooltip.svelte-DRe72lD-.js';
+import './lummi.remote-BMN4XopC.js';
+import './lummi-Cu3Js7rz.js';
+import './assets.remote-CX2FvnlZ.js';
+import './refresh-cw-2Dwais_j.js';
+import './media-analysis.remote-BVdRHeP8.js';
+import './media-analysis-DXUN3NUM.js';
+import 'ai';
+import '@openrouter/ai-sdk-provider';
+import './ai-access-bDlOKhrS.js';
+
+function Player($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      project,
+      currentTime = 0,
+      isPlaying = false,
+      autoplay = false,
+      showControls = true,
+      showWatermark = true,
+      globalVolume = 100,
+      selectedLayerId = null,
+      onTimeUpdate
+    } = $$props;
+    let canvasContainer = void 0;
+    let containerWidth = 1;
+    let containerHeight = 1;
+    const VIEWPORT_PADDING = 0.95;
+    const projectAspectRatio = derived(() => project.width / project.height);
+    const containerAspectRatio = derived(() => containerWidth / containerHeight);
+    const fitScale = derived(() => containerAspectRatio() > projectAspectRatio() ? containerHeight * VIEWPORT_PADDING / project.height : containerWidth * VIEWPORT_PADDING / project.width);
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      $$renderer3.push(`<div class="relative h-full w-full"><div class="absolute inset-0 flex items-center justify-center" role="presentation"><div class="relative"${attr_style("", {
+        width: `${stringify(project.width * fitScale())}px`,
+        height: `${stringify(project.height * fitScale())}px`
+      })}>`);
+      Project_viewport($$renderer3, {
+        project,
+        currentTime,
+        isPlaying,
+        globalVolume,
+        selectedLayerId,
+        disableSelection: true,
+        showWatermark,
+        class: "absolute top-0 left-0 cursor-pointer shadow-2xl",
+        style: `transform: scale(${stringify(fitScale())}); transform-origin: top left;`,
+        children: ($$renderer4) => {
+          if (showControls) {
+            $$renderer4.push("<!--[0-->");
+            Player_controls($$renderer4, {
+              duration: project.duration,
+              canvasContainer,
+              onTimeChange: onTimeUpdate,
+              get isPlaying() {
+                return isPlaying;
+              },
+              set isPlaying($$value) {
+                isPlaying = $$value;
+                $$settled = false;
+              },
+              get currentTime() {
+                return currentTime;
+              },
+              set currentTime($$value) {
+                currentTime = $$value;
+                $$settled = false;
+              },
+              get globalVolume() {
+                return globalVolume;
+              },
+              set globalVolume($$value) {
+                globalVolume = $$value;
+                $$settled = false;
+              }
+            });
+          } else {
+            $$renderer4.push("<!--[-1-->");
+          }
+          $$renderer4.push(`<!--]-->`);
+        }
+      });
+      $$renderer3.push(`<!----></div></div></div>`);
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+    bind_props($$props, { currentTime, isPlaying, globalVolume });
+  });
+}
+
+function Code_block($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { code, lang, title, class: className, contentClass } = $$props;
+    async function copy() {
+      copied = true;
+      await navigator.clipboard.writeText(code);
+      setTimeout(() => copied = false, 2e3);
+    }
+    var html$1, copied;
+    var $$promises = $$renderer2.run([
+      async () => html$1 = await async_derived(() => codeToHtml(code, { lang, theme: "github-dark-default" })),
+      () => copied = false
+    ]);
+    if (title) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div${attr_class(clsx(cn("not-prose overflow-hidden rounded-lg border text-sm", className)), "svelte-13xpxzd")}><div class="flex items-center justify-between border-b bg-muted/50 px-4 py-2"><span class="font-mono text-xs text-muted-foreground">${escape_html(title)}</span> `);
+      $$renderer2.async_block([$$promises[1], $$promises[1]], ($$renderer3) => {
+        Button($$renderer3, {
+          variant: "ghost",
+          size: "icon-sm",
+          onclick: copy,
+          class: cn("shrink-0", { "text-green-400!": copied, "text-muted-foreground": !copied }),
+          "aria-label": "Copy code",
+          icon: copied ? Check : Copy
+        });
+      });
+      $$renderer2.push(`</div> <div${attr_class(clsx(cn("overflow-x-auto bg-[#0d1117] text-left [&>pre]:m-0 [&>pre]:min-w-max [&>pre]:rounded-none [&>pre]:p-4", contentClass)), "svelte-13xpxzd")}>`);
+      $$renderer2.async_block([$$promises[0]], ($$renderer3) => {
+        $$renderer3.push(html(html$1()));
+      });
+      $$renderer2.push(`</div></div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`<div${attr_class(clsx(cn("not-prose code-block group relative overflow-x-auto rounded-lg bg-[#0d1117] text-sm [&>pre]:min-w-max [&>pre]:p-4", className, contentClass)), "svelte-13xpxzd")}>`);
+      $$renderer2.async_block([$$promises[0]], ($$renderer3) => {
+        $$renderer3.push(html(html$1()));
+      });
+      $$renderer2.push(` `);
+      $$renderer2.async_block([$$promises[1], $$promises[1]], ($$renderer3) => {
+        Button($$renderer3, {
+          variant: "ghost",
+          size: "icon-sm",
+          onclick: copy,
+          class: cn("absolute top-2 right-2 opacity-0 transition-opacity group-hover:opacity-100", { "text-green-400!": copied, "text-muted-foreground": !copied }),
+          "aria-label": "Copy code",
+          icon: copied ? Check : Copy
+        });
+      });
+      $$renderer2.push(`</div>`);
+    }
+    $$renderer2.push(`<!--]-->`);
+  });
+}
+
+function Bot($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { $$slots, $$events, ...props } = $$props;
+    const iconNode = [
+      ["path", { "d": "M12 8V4H8" }],
+      [
+        "rect",
+        { "width": "16", "height": "12", "x": "4", "y": "8", "rx": "2" }
+      ],
+      ["path", { "d": "M2 14h2" }],
+      ["path", { "d": "M20 14h2" }],
+      ["path", { "d": "M15 13v2" }],
+      ["path", { "d": "M9 13v2" }]
+    ];
+    Icon($$renderer2, spread_props([
+      { name: "bot" },
+      /**
+       * @component @name Bot
+       * @description Lucide SVG icon component, renders SVG Element with children.
+       *
+       * @preview ![img](data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iIzAwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmZmY7IGJvcmRlci1yYWRpdXM6IDJweCIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMTIgOFY0SDgiIC8+CiAgPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjEyIiB4PSI0IiB5PSI4IiByeD0iMiIgLz4KICA8cGF0aCBkPSJNMiAxNGgyIiAvPgogIDxwYXRoIGQ9Ik0yMCAxNGgyIiAvPgogIDxwYXRoIGQ9Ik0xNSAxM3YyIiAvPgogIDxwYXRoIGQ9Ik05IDEzdjIiIC8+Cjwvc3ZnPgo=) - https://lucide.dev/icons/bot
+       * @see https://lucide.dev/guide/packages/lucide-svelte - Documentation
+       *
+       * @param {Object} props - Lucide icons props and any valid SVG attribute
+       * @returns {FunctionalComponent} Svelte component
+       *
+       */
+      props,
+      {
+        iconNode,
+        children: ($$renderer3) => {
+          props.children?.($$renderer3);
+          $$renderer3.push(`<!---->`);
+        },
+        $$slots: { default: true }
+      }
+    ]));
+  });
+}
+
+function Cpu($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { $$slots, $$events, ...props } = $$props;
+    const iconNode = [
+      ["path", { "d": "M12 20v2" }],
+      ["path", { "d": "M12 2v2" }],
+      ["path", { "d": "M17 20v2" }],
+      ["path", { "d": "M17 2v2" }],
+      ["path", { "d": "M2 12h2" }],
+      ["path", { "d": "M2 17h2" }],
+      ["path", { "d": "M2 7h2" }],
+      ["path", { "d": "M20 12h2" }],
+      ["path", { "d": "M20 17h2" }],
+      ["path", { "d": "M20 7h2" }],
+      ["path", { "d": "M7 20v2" }],
+      ["path", { "d": "M7 2v2" }],
+      [
+        "rect",
+        { "x": "4", "y": "4", "width": "16", "height": "16", "rx": "2" }
+      ],
+      [
+        "rect",
+        { "x": "8", "y": "8", "width": "8", "height": "8", "rx": "1" }
+      ]
+    ];
+    Icon($$renderer2, spread_props([
+      { name: "cpu" },
+      /**
+       * @component @name Cpu
+       * @description Lucide SVG icon component, renders SVG Element with children.
+       *
+       * @preview ![img](data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iIzAwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmZmY7IGJvcmRlci1yYWRpdXM6IDJweCIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMTIgMjB2MiIgLz4KICA8cGF0aCBkPSJNMTIgMnYyIiAvPgogIDxwYXRoIGQ9Ik0xNyAyMHYyIiAvPgogIDxwYXRoIGQ9Ik0xNyAydjIiIC8+CiAgPHBhdGggZD0iTTIgMTJoMiIgLz4KICA8cGF0aCBkPSJNMiAxN2gyIiAvPgogIDxwYXRoIGQ9Ik0yIDdoMiIgLz4KICA8cGF0aCBkPSJNMjAgMTJoMiIgLz4KICA8cGF0aCBkPSJNMjAgMTdoMiIgLz4KICA8cGF0aCBkPSJNMjAgN2gyIiAvPgogIDxwYXRoIGQ9Ik03IDIwdjIiIC8+CiAgPHBhdGggZD0iTTcgMnYyIiAvPgogIDxyZWN0IHg9IjQiIHk9IjQiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcng9IjIiIC8+CiAgPHJlY3QgeD0iOCIgeT0iOCIgd2lkdGg9IjgiIGhlaWdodD0iOCIgcng9IjEiIC8+Cjwvc3ZnPgo=) - https://lucide.dev/icons/cpu
+       * @see https://lucide.dev/guide/packages/lucide-svelte - Documentation
+       *
+       * @param {Object} props - Lucide icons props and any valid SVG attribute
+       * @returns {FunctionalComponent} Svelte component
+       *
+       */
+      props,
+      {
+        iconNode,
+        children: ($$renderer3) => {
+          props.children?.($$renderer3);
+          $$renderer3.push(`<!---->`);
+        },
+        $$slots: { default: true }
+      }
+    ]));
+  });
+}
+function Credit_card($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { $$slots, $$events, ...props } = $$props;
+    const iconNode = [
+      [
+        "rect",
+        { "width": "20", "height": "14", "x": "2", "y": "5", "rx": "2" }
+      ],
+      ["line", { "x1": "2", "x2": "22", "y1": "10", "y2": "10" }]
+    ];
+    Icon($$renderer2, spread_props([
+      { name: "credit-card" },
+      /**
+       * @component @name CreditCard
+       * @description Lucide SVG icon component, renders SVG Element with children.
+       *
+       * @preview ![img](data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iIzAwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmZmY7IGJvcmRlci1yYWRpdXM6IDJweCIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMTQiIHg9IjIiIHk9IjUiIHJ4PSIyIiAvPgogIDxsaW5lIHgxPSIyIiB4Mj0iMjIiIHkxPSIxMCIgeTI9IjEwIiAvPgo8L3N2Zz4K) - https://lucide.dev/icons/credit-card
+       * @see https://lucide.dev/guide/packages/lucide-svelte - Documentation
+       *
+       * @param {Object} props - Lucide icons props and any valid SVG attribute
+       * @returns {FunctionalComponent} Svelte component
+       *
+       */
+      props,
+      {
+        iconNode,
+        children: ($$renderer3) => {
+          props.children?.($$renderer3);
+          $$renderer3.push(`<!---->`);
+        },
+        $$slots: { default: true }
+      }
+    ]));
+  });
+}
+function File_code($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { $$slots, $$events, ...props } = $$props;
+    const iconNode = [
+      [
+        "path",
+        {
+          "d": "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+        }
+      ],
+      ["path", { "d": "M14 2v5a1 1 0 0 0 1 1h5" }],
+      ["path", { "d": "M10 12.5 8 15l2 2.5" }],
+      ["path", { "d": "m14 12.5 2 2.5-2 2.5" }]
+    ];
+    Icon($$renderer2, spread_props([
+      { name: "file-code" },
+      /**
+       * @component @name FileCode
+       * @description Lucide SVG icon component, renders SVG Element with children.
+       *
+       * @preview ![img](data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iIzAwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmZmY7IGJvcmRlci1yYWRpdXM6IDJweCIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNNiAyMmEyIDIgMCAwIDEtMi0yVjRhMiAyIDAgMCAxIDItMmg4YTIuNCAyLjQgMCAwIDEgMS43MDQuNzA2bDMuNTg4IDMuNTg4QTIuNCAyLjQgMCAwIDEgMjAgOHYxMmEyIDIgMCAwIDEtMiAyeiIgLz4KICA8cGF0aCBkPSJNMTQgMnY1YTEgMSAwIDAgMCAxIDFoNSIgLz4KICA8cGF0aCBkPSJNMTAgMTIuNSA4IDE1bDIgMi41IiAvPgogIDxwYXRoIGQ9Im0xNCAxMi41IDIgMi41LTIgMi41IiAvPgo8L3N2Zz4K) - https://lucide.dev/icons/file-code
+       * @see https://lucide.dev/guide/packages/lucide-svelte - Documentation
+       *
+       * @param {Object} props - Lucide icons props and any valid SVG attribute
+       * @returns {FunctionalComponent} Svelte component
+       *
+       */
+      props,
+      {
+        iconNode,
+        children: ($$renderer3) => {
+          props.children?.($$renderer3);
+          $$renderer3.push(`<!---->`);
+        },
+        $$slots: { default: true }
+      }
+    ]));
+  });
+}
+function Git_branch($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { $$slots, $$events, ...props } = $$props;
+    const iconNode = [
+      ["path", { "d": "M15 6a9 9 0 0 0-9 9V3" }],
+      ["circle", { "cx": "18", "cy": "6", "r": "3" }],
+      ["circle", { "cx": "6", "cy": "18", "r": "3" }]
+    ];
+    Icon($$renderer2, spread_props([
+      { name: "git-branch" },
+      /**
+       * @component @name GitBranch
+       * @description Lucide SVG icon component, renders SVG Element with children.
+       *
+       * @preview ![img](data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iIzAwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmZmY7IGJvcmRlci1yYWRpdXM6IDJweCIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJNMTUgNmE5IDkgMCAwIDAtOSA5VjMiIC8+CiAgPGNpcmNsZSBjeD0iMTgiIGN5PSI2IiByPSIzIiAvPgogIDxjaXJjbGUgY3g9IjYiIGN5PSIxOCIgcj0iMyIgLz4KPC9zdmc+Cg==) - https://lucide.dev/icons/git-branch
+       * @see https://lucide.dev/guide/packages/lucide-svelte - Documentation
+       *
+       * @param {Object} props - Lucide icons props and any valid SVG attribute
+       * @returns {FunctionalComponent} Svelte component
+       *
+       */
+      props,
+      {
+        iconNode,
+        children: ($$renderer3) => {
+          props.children?.($$renderer3);
+          $$renderer3.push(`<!---->`);
+        },
+        $$slots: { default: true }
+      }
+    ]));
+  });
+}
+function Monitor_up($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { $$slots, $$events, ...props } = $$props;
+    const iconNode = [
+      ["path", { "d": "m9 10 3-3 3 3" }],
+      ["path", { "d": "M12 13V7" }],
+      [
+        "rect",
+        { "width": "20", "height": "14", "x": "2", "y": "3", "rx": "2" }
+      ],
+      ["path", { "d": "M12 17v4" }],
+      ["path", { "d": "M8 21h8" }]
+    ];
+    Icon($$renderer2, spread_props([
+      { name: "monitor-up" },
+      /**
+       * @component @name MonitorUp
+       * @description Lucide SVG icon component, renders SVG Element with children.
+       *
+       * @preview ![img](data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iIzAwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmZmY7IGJvcmRlci1yYWRpdXM6IDJweCIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cGF0aCBkPSJtOSAxMCAzLTMgMyAzIiAvPgogIDxwYXRoIGQ9Ik0xMiAxM1Y3IiAvPgogIDxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIxNCIgeD0iMiIgeT0iMyIgcng9IjIiIC8+CiAgPHBhdGggZD0iTTEyIDE3djQiIC8+CiAgPHBhdGggZD0iTTggMjFoOCIgLz4KPC9zdmc+Cg==) - https://lucide.dev/icons/monitor-up
+       * @see https://lucide.dev/guide/packages/lucide-svelte - Documentation
+       *
+       * @param {Object} props - Lucide icons props and any valid SVG attribute
+       * @returns {FunctionalComponent} Svelte component
+       *
+       */
+      props,
+      {
+        iconNode,
+        children: ($$renderer3) => {
+          props.children?.($$renderer3);
+          $$renderer3.push(`<!---->`);
+        },
+        $$slots: { default: true }
+      }
+    ]));
+  });
+}
+function Workflow($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { $$slots, $$events, ...props } = $$props;
+    const iconNode = [
+      [
+        "rect",
+        { "width": "8", "height": "8", "x": "3", "y": "3", "rx": "2" }
+      ],
+      ["path", { "d": "M7 11v4a2 2 0 0 0 2 2h4" }],
+      [
+        "rect",
+        { "width": "8", "height": "8", "x": "13", "y": "13", "rx": "2" }
+      ]
+    ];
+    Icon($$renderer2, spread_props([
+      { name: "workflow" },
+      /**
+       * @component @name Workflow
+       * @description Lucide SVG icon component, renders SVG Element with children.
+       *
+       * @preview ![img](data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHN0cm9rZT0iIzAwMCIgc3R5bGU9ImJhY2tncm91bmQtY29sb3I6ICNmZmY7IGJvcmRlci1yYWRpdXM6IDJweCIKICBzdHJva2Utd2lkdGg9IjIiCiAgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgogIHN0cm9rZS1saW5lam9pbj0icm91bmQiCj4KICA8cmVjdCB3aWR0aD0iOCIgaGVpZ2h0PSI4IiB4PSIzIiB5PSIzIiByeD0iMiIgLz4KICA8cGF0aCBkPSJNNyAxMXY0YTIgMiAwIDAgMCAyIDJoNCIgLz4KICA8cmVjdCB3aWR0aD0iOCIgaGVpZ2h0PSI4IiB4PSIxMyIgeT0iMTMiIHJ4PSIyIiAvPgo8L3N2Zz4K) - https://lucide.dev/icons/workflow
+       * @see https://lucide.dev/guide/packages/lucide-svelte - Documentation
+       *
+       * @param {Object} props - Lucide icons props and any valid SVG attribute
+       * @returns {FunctionalComponent} Svelte component
+       *
+       */
+      props,
+      {
+        iconNode,
+        children: ($$renderer3) => {
+          props.children?.($$renderer3);
+          $$renderer3.push(`<!---->`);
+        },
+        $$slots: { default: true }
+      }
+    ]));
+  });
+}
+function Arrow($$renderer) {
+  $$renderer.push(`<svg fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 375.01 375.01" xml:space="preserve" class="h-full w-full"><g><g><path d="M330.254,210.966c-56.916,1.224-110.16,25.704-167.076,28.764c-16.524,0.612-33.048-1.224-45.9-8.568
+			c23.256-4.283,45.288-12.239,61.812-27.54c17.749-15.911,19.584-45.287,8.568-66.095c-10.404-19.584-36.72-20.196-55.08-15.3
+			C89.125,132.63,59.75,184.65,84.229,221.369c-26.928,1.836-53.856,0-80.172,1.225c-5.508,0.611-5.508,8.567,0.612,8.567
+			c26.928,1.836,59.364,4.284,91.188,2.448c1.836,1.225,3.672,3.061,5.508,4.284c64.872,45.288,159.732-11.628,229.5-13.464
+			C338.821,223.817,338.821,210.354,330.254,210.966z M89.737,196.277c-6.732-25.091,15.3-46.511,35.496-56.916
+			c20.196-10.404,48.96-10.404,55.692,15.912c7.956,30.6-18.36,48.959-43.452,56.916c-11.628,3.672-22.644,6.12-34.272,7.344
+			C96.47,213.413,92.186,206.069,89.737,196.277z"></path><path d="M371.869,211.577c-8.567-5.508-16.523-11.016-24.479-16.523c-6.732-4.896-13.464-10.404-21.42-12.24
+			c-6.12-1.836-12.24,7.344-6.732,11.627c6.732,4.896,14.076,9.18,20.809,13.464c4.896,3.061,9.792,6.732,14.075,9.792
+			c-4.896,2.448-9.792,4.284-14.688,6.732c-3.672,1.836-7.956,3.672-11.628,5.508c-1.224,0.612-2.448,1.836-3.061,3.06
+			c-1.836,2.448-0.611,1.225,0,0.612c-2.447,1.836-2.447,7.956,1.837,7.344l0,0c1.224,0.612,2.447,0.612,4.283,0.612
+			c4.284-1.224,9.181-3.06,13.464-4.896c9.181-3.673,18.36-7.345,26.929-12.24C376.153,220.758,376.153,214.025,371.869,211.577z"></path></g></g></svg>`);
+}
+function Section_header($$renderer, $$props) {
+  let { title, subtitle, badge, gradient = false } = $$props;
+  $$renderer.push(`<div class="mb-16 space-y-4 text-center">`);
+  if (badge) {
+    $$renderer.push("<!--[0-->");
+    $$renderer.push(`<span class="inline-block rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold tracking-wider text-primary uppercase">${escape_html(badge)}</span>`);
+  } else {
+    $$renderer.push("<!--[-1-->");
+  }
+  $$renderer.push(`<!--]--> <h2${attr_class(`text-3xl font-extrabold tracking-tight md:text-4xl ${stringify(gradient ? "bg-linear-to-r from-primary to-purple-400 bg-clip-text text-transparent" : "text-foreground")}`)}>${escape_html(title)}</h2> `);
+  if (subtitle) {
+    $$renderer.push("<!--[0-->");
+    $$renderer.push(`<p class="mx-auto max-w-2xl text-lg text-muted-foreground">${escape_html(subtitle)}</p>`);
+  } else {
+    $$renderer.push("<!--[-1-->");
+  }
+  $$renderer.push(`<!--]--></div>`);
+}
+function Feature_card($$renderer, $$props) {
+  let {
+    icon: Icon2,
+    title,
+    description,
+    badge = null,
+    size = "default"
+  } = $$props;
+  $$renderer.push(`<div${attr_class(`group relative rounded-2xl border border-border/50 bg-card/50 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-primary/30 hover:shadow-2xl hover:shadow-primary/10 ${stringify(size === "compact" ? "rounded-xl p-6" : "p-8")}`)}>`);
+  if (badge) {
+    $$renderer.push("<!--[0-->");
+    $$renderer.push(`<span class="absolute top-4 right-4 rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary">${escape_html(badge)}</span>`);
+  } else {
+    $$renderer.push("<!--[-1-->");
+  }
+  $$renderer.push(`<!--]--> <div${attr_class(`flex items-center justify-center rounded-xl bg-linear-to-br from-(--brand-blue)/10 to-(--brand-purple)/10 transition-colors duration-300 group-hover:from-(--brand-blue)/20 group-hover:to-(--brand-purple)/20 ${stringify(size === "compact" ? "mb-3 h-10 w-10 rounded-lg" : "mb-4 h-12 w-12")}`)}>`);
+  if (Icon2) {
+    $$renderer.push("<!--[-->");
+    Icon2($$renderer, {
+      class: `text-primary transition-transform duration-300 group-hover:scale-110
+      ${stringify(size === "compact" ? "h-5 w-5" : "h-6 w-6")}`
+    });
+    $$renderer.push("<!--]-->");
+  } else {
+    $$renderer.push("<!--[!-->");
+    $$renderer.push("<!--]-->");
+  }
+  $$renderer.push(`</div> <h3${attr_class(`font-semibold text-foreground ${stringify(size === "compact" ? "mb-1" : "mb-2 text-lg")}`)}>${escape_html(title)}</h3> <p class="text-sm leading-relaxed text-muted-foreground">${escape_html(description)}</p></div>`);
+}
+function Pill($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { icon: Icon2, class: className, children } = $$props;
+    $$renderer2.push(`<span${attr_class(clsx(cn("inline-flex items-center gap-1.5 rounded-full border border-primary/30 bg-primary/10 px-3 py-1 text-xs font-medium text-primary", className)))}>`);
+    if (Icon2) {
+      $$renderer2.push("<!--[0-->");
+      if (Icon2) {
+        $$renderer2.push("<!--[-->");
+        Icon2($$renderer2, { class: "h-3 w-3" });
+        $$renderer2.push("<!--]-->");
+      } else {
+        $$renderer2.push("<!--[!-->");
+        $$renderer2.push("<!--]-->");
+      }
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    children($$renderer2);
+    $$renderer2.push(`<!----></span>`);
+  });
+}
+let videoElements = new SvelteSet();
+if (typeof window !== "undefined") {
+  window.addEventListener("pagehide", () => {
+    videoElements.forEach((v) => v.pause());
+  });
+}
+function Before_after($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      beforeLabel = "Before",
+      afterLabel = "After",
+      before,
+      after,
+      beforeThumb,
+      afterThumb
+    } = $$props;
+    function isSnippet(v) {
+      return typeof v === "function";
+    }
+    function isVideo(src) {
+      return /\.(mp4|webm|ogg)(\?.*)?$/i.test(src);
+    }
+    let beforeHovered = false;
+    let afterHovered = false;
+    function panel($$renderer3, content, label, borderClass, labelClass, thumb, onenter, onleave, hovered) {
+      $$renderer3.push(`<button class="group flex flex-col gap-1.5"><div${attr_class(clsx(cn("overflow-hidden rounded-lg border bg-muted/30", borderClass)))}>`);
+      if (isSnippet(content)) {
+        $$renderer3.push("<!--[0-->");
+        content($$renderer3);
+        $$renderer3.push(`<!---->`);
+      } else if (content && isVideo(content)) {
+        $$renderer3.push("<!--[1-->");
+        $$renderer3.push(`<div class="relative aspect-video">`);
+        if (thumb) {
+          $$renderer3.push("<!--[0-->");
+          $$renderer3.push(`<img${attr("src", thumb)}${attr("alt", label)}${attr_class("absolute inset-0 z-0 h-full w-full object-cover transition-opacity duration-200", void 0, { "opacity-0": hovered })}/> <div${attr_class("pointer-events-none absolute inset-0 flex items-center justify-center transition-opacity duration-200", void 0, { "opacity-0": hovered })}><div class="rounded-full bg-black/50 p-2.5 backdrop-blur-sm">`);
+          {
+            $$renderer3.push("<!--[-1-->");
+            Pointer($$renderer3, { class: "h-5 w-5 text-white" });
+          }
+          $$renderer3.push(`<!--]--></div></div>`);
+        } else {
+          $$renderer3.push("<!--[-1-->");
+        }
+        $$renderer3.push(`<!--]--> <video${attr("src", content)} loop="" preload="auto"${attr_class("z-10 h-full w-full object-cover opacity-0 transition-opacity duration-200", void 0, { "opacity-100": hovered })}></video></div>`);
+      } else if (content) {
+        $$renderer3.push("<!--[2-->");
+        $$renderer3.push(`<img${attr("src", content)}${attr("alt", label)} class="h-full w-full object-cover" loading="lazy"/>`);
+      } else {
+        $$renderer3.push("<!--[-1-->");
+      }
+      $$renderer3.push(`<!--]--></div> <span${attr_class(clsx(cn("text-center text-[10px] font-semibold tracking-wider uppercase", labelClass)))}>${escape_html(label)}</span></button>`);
+    }
+    $$renderer2.push(`<div class="mt-4 grid grid-cols-2 gap-3">`);
+    panel($$renderer2, before, beforeLabel, "border-border/50", "text-red-500", beforeThumb, () => beforeHovered = true, () => beforeHovered = false, beforeHovered);
+    $$renderer2.push(`<!----> `);
+    panel($$renderer2, after, afterLabel, "border-primary/30", "text-green-500", afterThumb, () => afterHovered = true, () => afterHovered = false, afterHovered);
+    $$renderer2.push(`<!----></div>`);
+  });
+}
+function Prompt_mockup($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let displayed = "";
+    $$renderer2.push(`<div class="flex aspect-video items-center overflow-hidden bg-[#0f0f11] p-5"><p class="font-mono text-xs leading-relaxed text-white/80">${escape_html(displayed)}<span class="animate-pulse text-purple-400">|</span></p></div>`);
+  });
+}
+function parseSceneToProject(html2, config) {
+  try {
+    const scene = parseSceneHtml(html2, config.duration);
+    const duration = config.duration ?? scene.duration;
+    const fsProject = {
+      id: config.id ?? "scene",
+      name: config.name ?? "Scene",
+      width: config.width,
+      height: config.height,
+      fps: config.fps ?? 30,
+      duration,
+      // background is applied below (FsProject only models solid/gradient/image);
+      // we keep the richer Player background by overriding after the map.
+      layers: scene.layers.map((l) => ({
+        ...l,
+        globalEnterTime: l.enterTime,
+        globalExitTime: l.exitTime,
+        sceneId: "scene"
+      })),
+      scenes: [
+        {
+          id: "scene",
+          file: "scene.html",
+          start: 0,
+          duration,
+          layers: scene.layers,
+          scripts: scene.scripts
+        }
+      ]
+    };
+    const project = fsProjectToProject(fsProject);
+    return {
+      project: {
+        ...project,
+        // Project-level styling that HTML doesn't encode.
+        background: config.background ?? project.background,
+        fontFamily: config.fontFamily ?? project.fontFamily
+      },
+      error: null
+    };
+  } catch (e) {
+    return { project: null, error: e instanceof Error ? e.message : String(e) };
+  }
+}
+function projectToSceneHtml(project) {
+  const stub = {
+    name: project.name,
+    width: project.width,
+    height: project.height,
+    fps: project.fps,
+    duration: project.duration,
+    layers: [],
+    scenes: [
+      {
+        id: "scene",
+        file: "scene.html",
+        start: 0,
+        duration: project.duration,
+        layers: [],
+        scripts: []
+      }
+    ]
+  };
+  const fsLayers = projectDataToFsLayers(project, stub);
+  const full = writeSceneHtml(fsLayers, { duration: project.duration });
+  const bodyMatch = full.match(/<body>([\s\S]*?)<\/body>/i);
+  return formatSceneHtml((bodyMatch ? bodyMatch[1] : full).trim());
+}
+function formatSceneHtml(html2) {
+  const elementRe = /<([a-zA-Z][\w-]*)((?:\s+[^<>]*?)?)>([\s\S]*?)<\/\1>/g;
+  const blocks = [];
+  let m;
+  while ((m = elementRe.exec(html2)) !== null) {
+    const [, tag, rawAttrs, inner] = m;
+    blocks.push(formatElement(tag, rawAttrs, inner));
+  }
+  if (blocks.length === 0) return html2.trim();
+  return blocks.join("\n\n");
+}
+function formatElement(tag, rawAttrs, inner) {
+  const attrRe = /([^\s=]+)(?:=("[^"]*"|'[^']*'|\S+))?/g;
+  const attrs = [];
+  let a;
+  while ((a = attrRe.exec(rawAttrs.trim())) !== null) {
+    if (!a[0].trim()) continue;
+    attrs.push(a[2] !== void 0 ? `${a[1]}=${a[2]}` : a[1]);
+  }
+  const text = inner.trim();
+  if (attrs.length === 0) {
+    return text ? `<${tag}>${text}</${tag}>` : `<${tag}></${tag}>`;
+  }
+  const open = [`<${tag}`, ...attrs.map((at) => `  ${at}`)].join("\n") + "\n>";
+  return text ? `${open}
+  ${text}
+</${tag}>` : `${open}
+</${tag}>`;
+}
+function Code_editor($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      value = void 0,
+      lang = "html",
+      class: className,
+      highlightDelay = 120
+    } = $$props;
+    let highlighted = "";
+    $$renderer2.push(`<div${attr_class(clsx(cn("code-editor relative overflow-hidden rounded-lg border bg-[#0d1117]", className)), "svelte-1yh3v8a")}><div class="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true"><div${attr_style("", {
+      transform: `translate(${stringify(-0)}px, ${stringify(-0)}px)`
+    })}>${html(highlighted)}</div></div> <textarea spellcheck="false" autocapitalize="off" autocomplete="off" class="code-editor-textarea relative h-full w-full resize-none overflow-x-hidden overflow-y-auto bg-transparent text-transparent caret-white focus:outline-none svelte-1yh3v8a">`);
+    const $$body = escape_html(value);
+    if ($$body) {
+      $$renderer2.push(`${$$body}`);
+    }
+    $$renderer2.push(`</textarea></div>`);
+    bind_props($$props, { value });
+  });
+}
+function promptMockupSnippet($$renderer) {
+  Prompt_mockup($$renderer);
+}
+function _page($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    const { data } = $$props;
+    const pillars = [
+      {
+        icon: File_code,
+        title: "It’s just HTML",
+        description: "Every project is plain HTML with `data-dm-*` attributes. Diff it, review it, version it in Git. No proprietary binary format, no lock-in."
+      },
+      {
+        icon: Layout_template,
+        title: "Visual editor included",
+        description: "Run `devmotion preview` and the full Studio opens locally — timeline, keyframes, 17+ layer types. Code-only tools can’t do this."
+      },
+      {
+        icon: Bot,
+        title: "Agent-native",
+        description: "A built-in MCP server lets Claude Code, Cursor, or Windsurf scaffold and edit video projects, then render through the CLI. The HTML protocol is built for LLMs."
+      }
+    ];
+    const devFeatures = [
+      {
+        icon: Terminal,
+        title: "CLI-first workflow",
+        description: "Scaffold, preview, and render from the terminal. `devmotion init`, `devmotion preview`, `devmotion render`. No GUI required."
+      },
+      {
+        icon: File_code,
+        title: "HTML as source of truth",
+        description: "Layers are elements with `data-dm-*` attributes. Edit them in any editor, generate them from data, or build them by hand."
+      },
+      {
+        icon: Package,
+        title: "Svelte 5 runtime",
+        description: "The renderer runs Svelte 5 components with runes. If you know Svelte, you can extend every layer type — no black box."
+      },
+      {
+        icon: Git_branch,
+        title: "Git-friendly",
+        description: "Projects are folders of HTML + JSON. Branch, merge, review. No binary blobs. Generate video from PRs in CI/CD."
+      }
+    ];
+    const agentFeatures = [
+      {
+        icon: Bot,
+        title: "Built-in MCP server",
+        description: "Any MCP client can create and edit projects through real tools: layers, keyframes, presets, groups, and project settings. Render locally with `devmotion render`."
+      },
+      {
+        icon: Cpu,
+        title: "Claude Code skills",
+        description: "Slash commands like `/devmotion-add-layer` and `/devmotion-render`. One `devmotion setup` and agents know the whole protocol."
+      },
+      {
+        icon: Workflow,
+        title: "Agent-first protocol",
+        description: "The `data-dm-*` vocabulary is predictable, flat, and attribute-based — designed for LLMs. No JSX, no imperative API calls."
+      },
+      {
+        icon: Server,
+        title: "Headless rendering",
+        description: "Playwright + ffmpeg with a virtualized clock for deterministic frame capture. Render on servers, in CI, or from agent workflows."
+      }
+    ];
+    const aiFeatures = [
+      {
+        icon: Captions,
+        title: "Auto Captions",
+        description: "Upload a video, get perfectly synced captions in seconds. Word-level timing. Style and animate them however you want.",
+        badge: "Most popular",
+        beforeAfter: {
+          beforeLabel: "Raw video, no text",
+          afterLabel: "Perfectly timed animated captions",
+          before: `${PUBLIC_S3_URL}/demo/demo.mp4`,
+          after: `${PUBLIC_S3_URL}/demo/demo-caption.mp4`,
+          beforeThumb: `${PUBLIC_S3_URL}/demo/thumb-demo.jpg`,
+          afterThumb: `${PUBLIC_S3_URL}/demo/thumb-demo-caption.jpg`
+        }
+      },
+      {
+        icon: Languages,
+        title: "AI Dubbing",
+        description: "Translate your video into any language with AI voice cloning. Same voice, different language. Reach a global audience instantly.",
+        badge: null,
+        beforeAfter: {
+          beforeLabel: "Original voice in English",
+          afterLabel: "Same voice dubbed in Spanish/Italian/French",
+          before: `${PUBLIC_S3_URL}/demo/demo.mp4`,
+          after: `${PUBLIC_S3_URL}/demo/demo-dub.mp4`,
+          beforeThumb: `${PUBLIC_S3_URL}/demo/thumb-demo.jpg`,
+          afterThumb: `${PUBLIC_S3_URL}/demo/thumb-demo-dub.jpg`
+        }
+      },
+      {
+        icon: Scissors,
+        title: "AutoCut",
+        description: "AI detects and removes silences, filler words, and dead air from your recordings. Hours of editing done in one click.",
+        badge: null,
+        beforeAfter: {
+          beforeLabel: 'Raw recording with pauses & "uhms"',
+          afterLabel: "Clean, tight edit — 30% shorter",
+          before: `${PUBLIC_S3_URL}/demo/demo-long.mp4`,
+          after: `${PUBLIC_S3_URL}/demo/demo-cut.mp4`,
+          beforeThumb: `${PUBLIC_S3_URL}/demo/thumb-demo-long.jpg`,
+          afterThumb: `${PUBLIC_S3_URL}/demo/thumb-demo-cut.jpg`
+        }
+      },
+      {
+        icon: Sparkles,
+        title: "AI Video Generator",
+        description: "Type a prompt and watch a video appear. Seedance 2.0 generates cinematic footage with synchronized audio — drop it straight into your timeline.",
+        badge: "New",
+        beforeAfter: {
+          beforeLabel: "Text prompt",
+          afterLabel: "Generated video with audio",
+          before: promptMockupSnippet,
+          after: `${PUBLIC_S3_URL}/demo/demo-gen.mp4`,
+          afterThumb: `${PUBLIC_S3_URL}/demo/thumb-demo-gen.jpg`
+        }
+      }
+    ];
+    const comparisons = [
+      {
+        label: "DevMotion",
+        highlight: true,
+        approach: "HTML + CLI",
+        visualEditor: true,
+        agentNative: true,
+        gitFriendly: true,
+        license: "Free personal / Commercial",
+        pricing: "Free local / Cloud Pro"
+      },
+      {
+        label: "Remotion",
+        highlight: false,
+        approach: "React + code",
+        visualEditor: false,
+        agentNative: false,
+        gitFriendly: true,
+        license: "Free personal / Commercial",
+        pricing: "Free / $270+/seat"
+      },
+      {
+        label: "Hyperframes",
+        highlight: false,
+        approach: "HTML + CLI",
+        visualEditor: false,
+        agentNative: true,
+        gitFriendly: true,
+        license: "Apache 2.0",
+        pricing: "Free / Cloud Pro"
+      },
+      {
+        label: "Jitter",
+        highlight: false,
+        approach: "GUI editor",
+        visualEditor: true,
+        agentNative: false,
+        gitFriendly: false,
+        license: "Proprietary",
+        pricing: "Free / $19/mo"
+      }
+    ];
+    const faqs = [
+      {
+        question: "What is DevMotion?",
+        answer: "DevMotion is a video tool where projects are plain HTML files with `data-dm-*` attributes. Edit them in any text editor, version them with Git, render them from the CLI, or let AI agents build them over MCP — and drop into a full visual Studio whenever you want. Free for personal use; commercial license for companies."
+      },
+      {
+        question: "How is this different from Remotion or Jitter?",
+        answer: "Remotion and Hyperframes are code-only — there’s no visual editor. Jitter is GUI-only — no code, Git, or agents. DevMotion is the only one that gives you both: write HTML and edit visually in the same tool. It’s free for personal use; companies need a commercial license. See the comparison above."
+      },
+      {
+        question: "Do I need to install anything to try it?",
+        answer: "No. You can open the editor in your browser right now at devmotion.app. To work locally and render from the terminal, install the CLI: `npm i -g @devmotion/cli`."
+      },
+      {
+        question: "Is it free?",
+        answer: `The CLI (\`@devmotion/cli\`) and the bundled Studio are free for personal and non-commercial use — render locally with no limits. Companies need a commercial license. The cloud Studio has a free tier with ${PLANS.free.limits.exportsPerMonth} exports/month; paid plans ($${PLANS.creator.price}–${PLANS.pro.price}/mo) add AI features (captions, dubbing, autocut, generation), higher resolution, and heavy/batch rendering.`
+      },
+      {
+        question: "What happens to my work if I cancel?",
+        answer: "Nothing — you keep it. Every project is plain HTML with `data-dm-*` attributes, sitting on your own disk and in your own Git history. Cancel any time and your work stays fully usable: open it, edit it, and render it locally with the free CLI. There’s no proprietary format to hold your videos hostage."
+      },
+      {
+        question: "What can the visual editor do?",
+        answer: "Everything the code can express, and vice versa. Timeline, keyframes, bezier easing, 17+ layer types (text, shape, image, video, captions, browser/laptop/phone mockups, code blocks, terminals, and more). The local Studio (`devmotion preview`) has parity with the cloud editor — the cloud adds the AI features."
+      },
+      {
+        question: "How do I connect Claude Code or Cursor?",
+        answer: 'Run `npx @devmotion/cli setup` in your project — no install needed. It drops the Claude Code skills into `.claude/skills/` and registers the local stdio MCP server in `.claude/settings.local.json`. For Cursor/Windsurf, use the same stdio config: `command: "npx"`, `args: ["@devmotion/cli", "mcp"]`. Use `npx @devmotion/cli mcp --print-config` to print the snippet.'
+      },
+      {
+        question: "Do I need to know Svelte?",
+        answer: "No. The HTML format works standalone — just `data-dm-*` attributes on plain elements. Svelte is only needed if you want to build custom layer types or extend the runtime."
+      },
+      {
+        question: "Can I render on my own servers?",
+        answer: "Yes. The headless pipeline (Playwright + ffmpeg + virtualized clock) runs anywhere. `devmotion render` produces MP4 locally, and the same pipeline works in Docker — no GUI, no display server needed."
+      },
+      {
+        question: "What export formats and resolutions?",
+        answer: "MP4 (H.264) at 720p, 1080p, or 4K. Aspect ratios: 16:9 (YouTube), 9:16 (TikTok/Reels), 1:1 (Instagram). Switch aspect ratios instantly from the same project."
+      }
+    ];
+    const aspectRatios = [
+      {
+        value: "landscape",
+        label: "16:9",
+        icon: Monitor,
+        width: 1280,
+        height: 720,
+        desc: "Landscape"
+      },
+      {
+        value: "portrait",
+        label: "9:16",
+        icon: Smartphone,
+        width: 720,
+        height: 1280,
+        desc: "Portrait"
+      },
+      {
+        value: "square",
+        label: "1:1",
+        icon: Square,
+        width: 720,
+        height: 720,
+        desc: "Square"
+      }
+    ];
+    const mediaQuery = new IsMobile();
+    const isMobile = derived(() => mediaQuery.current);
+    let selectedAspectRatio = derived(() => isMobile() ? "portrait" : "landscape");
+    const defaultVariantId = derived(() => {
+      const bg = data.projectSnapshot?.background;
+      return isDynamic(bg) ? bg.variant : "silk";
+    });
+    let selectedVariantId = derived(defaultVariantId);
+    const projectData = derived(() => {
+      if (!data.projectSnapshot) {
+        return getDefaultProject();
+      }
+      const baseProject = data.projectSnapshot;
+      const selectedRatio = aspectRatios.find((r) => r.value === selectedAspectRatio());
+      const bg = baseProject.background;
+      return {
+        ...baseProject,
+        ...selectedRatio ? { width: selectedRatio.width, height: selectedRatio.height } : {},
+        background: isDynamic(bg) ? { ...bg, variant: selectedVariantId() } : bg
+      };
+    });
+    const masterProject = {
+      id: "marketing-html-canvas-showcase",
+      name: "Showcase",
+      width: 360,
+      height: 640,
+      duration: 5.2,
+      fps: 30,
+      background: { type: "dynamic", variant: "silk", speed: 1, intensity: 0.7 },
+      fontFamily: "Poppins",
+      layers: [
+        {
+          id: "showcase-title",
+          name: "DevMotion",
+          visible: true,
+          locked: false,
+          type: "text",
+          transform: {
+            position: { x: 0, y: -1, z: 0 },
+            rotation: { x: 0, y: 0, z: 0 },
+            scale: { x: 1, y: 1 },
+            anchor: "center",
+            positionOrigin: "center"
+          },
+          style: {
+            opacity: 1,
+            blur: 0,
+            brightness: 1,
+            contrast: 1,
+            saturate: 1,
+            dropShadowX: 0,
+            dropShadowY: 0,
+            dropShadowBlur: 0,
+            dropShadowColor: "transparent"
+          },
+          keyframes: [
+            {
+              id: "title-content-empty",
+              time: 0.15,
+              property: "props.content",
+              value: "",
+              interpolation: { family: "text", strategy: "char-reveal" }
+            },
+            {
+              id: "title-content-full",
+              time: 0.95,
+              property: "props.content",
+              value: "DevMotion",
+              interpolation: { family: "text", strategy: "char-reveal" }
+            },
+            {
+              id: "title-y-base",
+              time: 0,
+              property: "position.y",
+              value: -1,
+              interpolation: { family: "discrete", strategy: "step-start" }
+            },
+            {
+              id: "title-opacity-start",
+              time: 0.15,
+              property: "opacity",
+              value: 0,
+              interpolation: { family: "continuous", strategy: "ease-out" }
+            },
+            {
+              id: "title-scale-x-start",
+              time: 0.15,
+              property: "scale.x",
+              value: 0.85,
+              interpolation: { family: "continuous", strategy: "ease-out" }
+            },
+            {
+              id: "title-scale-y-start",
+              time: 0.15,
+              property: "scale.y",
+              value: 0.85,
+              interpolation: { family: "continuous", strategy: "ease-out" }
+            },
+            {
+              id: "title-x-start",
+              time: 0.15,
+              property: "position.x",
+              value: 20,
+              interpolation: { family: "continuous", strategy: "ease-out-quad" }
+            },
+            {
+              id: "title-opacity-in",
+              time: 0.95,
+              property: "opacity",
+              value: 1,
+              interpolation: { family: "continuous", strategy: "ease-in" }
+            },
+            {
+              id: "title-scale-x-in",
+              time: 0.95,
+              property: "scale.x",
+              value: 1,
+              interpolation: { family: "continuous", strategy: "ease-in" }
+            },
+            {
+              id: "title-scale-y-in",
+              time: 0.95,
+              property: "scale.y",
+              value: 1,
+              interpolation: { family: "continuous", strategy: "ease-in" }
+            },
+            {
+              id: "title-x-in",
+              time: 1,
+              property: "position.x",
+              value: 0,
+              interpolation: { family: "continuous", strategy: "linear" }
+            },
+            {
+              id: "title-opacity-out",
+              time: 4.4,
+              property: "opacity",
+              value: 0,
+              interpolation: { family: "continuous", strategy: "linear" }
+            },
+            {
+              id: "title-y-out",
+              time: 4.55,
+              property: "position.y",
+              value: -4,
+              interpolation: { family: "continuous", strategy: "ease-in-out" }
+            },
+            {
+              id: "title-scale-x-out",
+              time: 4.65,
+              property: "scale.x",
+              value: 0.8,
+              interpolation: { family: "continuous", strategy: "linear" }
+            },
+            {
+              id: "title-scale-y-out",
+              time: 4.65,
+              property: "scale.y",
+              value: 0.8,
+              interpolation: { family: "continuous", strategy: "linear" }
+            }
+          ],
+          props: {
+            color: "#ffffff",
+            width: 31,
+            content: "DevMotion",
+            fontSize: 14,
+            autoWidth: true,
+            textAlign: "center",
+            fontFamily: "Poppins",
+            fontWeight: "bold",
+            lineHeight: 1.4,
+            letterSpacing: 0,
+            transitionEffects: ["scale", "fade", "slide-left"],
+            transitionDuration: 50,
+            transitionEasing: "ease-out",
+            slideDistance: 1.875,
+            scaleFrom: 0.5,
+            blurAmount: 0.78
+          },
+          enterTime: 0,
+          exitTime: 5.2
+        },
+        {
+          id: "showcase-subtitle",
+          name: "Subtitle",
+          visible: true,
+          locked: false,
+          type: "text",
+          transform: {
+            position: { x: 0, y: 10, z: 0 },
+            rotation: { x: 0, y: 0, z: 0 },
+            scale: { x: 1, y: 1 },
+            anchor: "center",
+            positionOrigin: "center"
+          },
+          style: {
+            opacity: 1,
+            blur: 0,
+            brightness: 1,
+            contrast: 1,
+            saturate: 1,
+            dropShadowX: 0,
+            dropShadowY: 0,
+            dropShadowBlur: 0,
+            dropShadowColor: "transparent"
+          },
+          keyframes: [
+            {
+              id: "subtitle-y-base",
+              time: 0,
+              property: "position.y",
+              value: 10,
+              interpolation: { family: "discrete", strategy: "step-start" }
+            },
+            {
+              id: "subtitle-content-empty",
+              time: 1.05,
+              property: "props.content",
+              value: "",
+              interpolation: { family: "text", strategy: "word-reveal", separator: " " }
+            },
+            {
+              id: "subtitle-content-full",
+              time: 2.35,
+              property: "props.content",
+              value: "a prompt away from being a producer",
+              interpolation: { family: "text", strategy: "word-reveal", separator: " " }
+            },
+            {
+              id: "subtitle-opacity-hold",
+              time: 4.25,
+              property: "opacity",
+              value: 1,
+              interpolation: { family: "continuous", strategy: "ease-in" }
+            },
+            {
+              id: "subtitle-opacity-out",
+              time: 5,
+              property: "opacity",
+              value: 0,
+              interpolation: { family: "continuous", strategy: "linear" }
+            }
+          ],
+          props: {
+            color: "#ffffff",
+            width: 55,
+            content: "",
+            fontSize: 2.6,
+            autoWidth: false,
+            textAlign: "left",
+            fontFamily: "Raleway",
+            fontWeight: "200",
+            lineHeight: 1.4,
+            letterSpacing: 0.3,
+            transitionEffects: ["fade", "slide-up", "blur"],
+            transitionDuration: 350,
+            transitionEasing: "ease-in-quad",
+            slideDistance: 2.7,
+            blurAmount: 0.78
+          },
+          enterTime: 0,
+          exitTime: 5.2
+        }
+      ]
+    };
+    let heroHtml = projectToSceneHtml(masterProject);
+    const heroConfig = {
+      id: masterProject.id,
+      name: masterProject.name,
+      width: masterProject.width,
+      height: masterProject.height,
+      fps: masterProject.fps,
+      duration: masterProject.duration,
+      background: masterProject.background,
+      fontFamily: masterProject.fontFamily
+    };
+    let lastGoodHeroProject = null;
+    const heroResult = derived(() => parseSceneToProject(heroHtml, heroConfig));
+    const showcaseProject = derived(() => heroResult().project ?? lastGoodHeroProject);
+    const heroError = derived(() => heroResult().project ? null : heroResult().error);
+    let heroTime = 2;
+    const HERO_PREVIEW_TIME = 2;
+    watch(() => heroHtml, () => {
+      if (heroResult().project) heroTime = HERO_PREVIEW_TIME;
+    });
+    let $$settled = true;
+    let $$inner_renderer;
+    function $$render_inner($$renderer3) {
+      Seo_head($$renderer3, {
+        title: "DevMotion — Code your videos. Edit them visually too.",
+        description: "The HTML-first video toolkit for developers and AI agents — with a full visual editor built in. Write HTML, version it in Git, render from the CLI, or let Claude Code build it. Free for personal use, and zero lock-in: every project is plain HTML you own forever.",
+        keywords: "devmotion, video cli, html video, mcp video, svelte video, agent video, programmatic video, headless video rendering, code-driven video, visual video editor, claude code video"
+      });
+      $$renderer3.push(`<!----> <section class="relative overflow-hidden svelte-skv6c4"><div class="pointer-events-none absolute inset-0 overflow-hidden svelte-skv6c4" aria-hidden="true"><div class="animate-float absolute -top-40 -left-40 h-96 w-96 rounded-full bg-(--brand-blue)/20 blur-3xl svelte-skv6c4"></div> <div class="animate-float-delayed absolute -right-40 -bottom-40 h-96 w-96 rounded-full bg-(--brand-purple)/20 blur-3xl svelte-skv6c4"></div> <div class="animate-float-slow absolute top-1/2 left-1/2 h-64 w-64 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/10 blur-3xl svelte-skv6c4"></div></div> <div class="container mx-auto px-4 py-24 sm:px-6 md:py-32 lg:px-8 lg:py-40 svelte-skv6c4"><div class="relative z-10 mx-auto max-w-4xl text-center svelte-skv6c4"><div class="mb-6 flex justify-center svelte-skv6c4">`);
+      Pill($$renderer3, {
+        icon: Terminal,
+        children: ($$renderer4) => {
+          $$renderer4.push(`<!---->npm i -g @devmotion/cli`);
+        }
+      });
+      $$renderer3.push(`<!----></div> <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl svelte-skv6c4"><span class="text-foreground svelte-skv6c4">Code your videos.</span> <br class="svelte-skv6c4"/> <span class="bg-linear-to-r from-(--brand-blue) to-(--brand-purple) bg-clip-text text-transparent svelte-skv6c4">Edit them visually too.</span></h1> <p class="mx-auto mt-6 max-w-2xl text-lg text-muted-foreground md:text-xl svelte-skv6c4">The video toolkit for developers and AI agents. Projects are plain <span class="font-semibold text-foreground svelte-skv6c4">HTML</span> — version them in Git, render from
+        the CLI, or let Claude Code build them. And unlike code-only tools, a <span class="font-semibold text-foreground svelte-skv6c4">full visual editor ships in the box</span>.</p> <div class="mx-auto mt-8 max-w-lg svelte-skv6c4">`);
+      Code_block($$renderer3, {
+        title: "Terminal",
+        lang: "bash",
+        code: `npm i -g @devmotion/cli
+devmotion init my-demo
+cd my-demo
+# Edit scenes/intro.html — it's just HTML
+devmotion preview       # Open the visual Studio
+devmotion render        # Export MP4`
+      });
+      $$renderer3.push(`<!----></div> <div class="mt-8 flex flex-col items-center justify-center gap-4 sm:flex-row svelte-skv6c4">`);
+      Button($$renderer3, {
+        size: "lg",
+        href: resolve("/(app)/editor"),
+        icon: Clapperboard,
+        children: ($$renderer4) => {
+          $$renderer4.push(`<!---->Start creating — free`);
+        },
+        $$slots: { default: true }
+      });
+      $$renderer3.push(`<!----> `);
+      Button($$renderer3, {
+        variant: "outline",
+        size: "lg",
+        href: resolve("/(marketing)/docs"),
+        icon: Terminal,
+        children: ($$renderer4) => {
+          $$renderer4.push(`<!---->Get the CLI`);
+        },
+        $$slots: { default: true }
+      });
+      $$renderer3.push(`<!----></div> <p class="mt-3 text-xs text-muted-foreground svelte-skv6c4">Runs in your browser — free to start, no card required.</p> <div class="mt-8 flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-xs text-muted-foreground svelte-skv6c4"><span class="flex items-center gap-1 svelte-skv6c4">`);
+      Credit_card($$renderer3, { class: "h-3 w-3" });
+      $$renderer3.push(`<!---->Free for personal use</span> <span class="hidden sm:inline svelte-skv6c4" aria-hidden="true">·</span> <span class="flex items-center gap-1 svelte-skv6c4">`);
+      Monitor_up($$renderer3, { class: "h-3 w-3" });
+      $$renderer3.push(`<!---->Export up to 4K</span> <span class="hidden sm:inline svelte-skv6c4" aria-hidden="true">·</span> <span class="flex items-center gap-1 svelte-skv6c4">`);
+      File_code($$renderer3, { class: "h-3 w-3" });
+      $$renderer3.push(`<!---->No lock-in — it’s just HTML</span> <span class="hidden sm:inline svelte-skv6c4" aria-hidden="true">·</span> <span class="flex items-center gap-1 svelte-skv6c4">`);
+      Globe($$renderer3, { class: "h-3 w-3" });
+      $$renderer3.push(`<!---->Runs fully local</span></div> <div class="mt-6 flex flex-wrap items-center justify-center gap-6 text-sm text-muted-foreground svelte-skv6c4"><div class="flex items-center gap-2 svelte-skv6c4">`);
+      Users($$renderer3, { class: "h-4 w-4" });
+      $$renderer3.push(`<!----> <span class="svelte-skv6c4"><span class="font-semibold text-foreground svelte-skv6c4">${escape_html(data.stats.totalUsers.toLocaleString())}+</span> developers &amp; creators</span></div> <div class="flex items-center gap-2 svelte-skv6c4">`);
+      Zap($$renderer3, { class: "h-4 w-4" });
+      $$renderer3.push(`<!----> <span class="svelte-skv6c4"><span class="font-semibold text-foreground svelte-skv6c4">${escape_html(data.stats.totalProjects.toLocaleString())}+</span> videos created</span></div></div></div></div></section> <section class="relative border-t border-border/40 bg-muted/30 svelte-skv6c4"><div class="container mx-auto px-4 py-24 sm:px-6 lg:px-8 svelte-skv6c4">`);
+      Section_header($$renderer3, {
+        title: "Code when you want. Canvas when you don’t.",
+        subtitle: "The same project, two ways to work — plus agents that can do it for you."
+      });
+      $$renderer3.push(`<!----> <div class="mx-auto grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-3 svelte-skv6c4"><!--[-->`);
+      const each_array = ensure_array_like(pillars);
+      for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
+        let pillar = each_array[$$index];
+        Feature_card($$renderer3, {
+          icon: pillar.icon,
+          title: pillar.title,
+          description: pillar.description
+        });
+      }
+      $$renderer3.push(`<!--]--></div></div></section> <section class="relative border-t border-border/40 svelte-skv6c4"><div class="container mx-auto px-4 py-24 sm:px-6 lg:px-8 svelte-skv6c4">`);
+      Section_header($$renderer3, {
+        badge: "The DevMotion difference",
+        title: "Same project. HTML and canvas, side by side.",
+        subtitle: "The HTML on the left is the source — edit it and the canvas re-renders live as you type. No duplicate, no screenshot. The full Studio adds the timeline and visual editing.",
+        gradient: true
+      });
+      $$renderer3.push(`<!----> <div class="mx-auto grid max-w-5xl grid-cols-1 items-stretch gap-6 lg:grid-cols-2 svelte-skv6c4"><div class="flex flex-col gap-3 svelte-skv6c4"><div class="flex items-center justify-between gap-2 text-sm font-medium svelte-skv6c4"><span class="flex items-center gap-2 text-muted-foreground svelte-skv6c4">`);
+      File_code($$renderer3, { class: "h-4 w-4" });
+      $$renderer3.push(`<!----> scenes/intro.html</span> <span class="text-xs text-muted-foreground/70 svelte-skv6c4">editable — type to update →</span></div> `);
+      Code_editor($$renderer3, {
+        lang: "html",
+        class: "h-[560px] max-h-[70vh] min-h-96 focus-within:ring-2 focus-within:ring-primary",
+        get value() {
+          return heroHtml;
+        },
+        set value($$value) {
+          heroHtml = $$value;
+          $$settled = false;
+        }
+      });
+      $$renderer3.push(`<!----> `);
+      if (heroError()) {
+        $$renderer3.push("<!--[0-->");
+        $$renderer3.push(`<p class="font-mono text-xs text-amber-500 svelte-skv6c4">⚠ ${escape_html(heroError())}</p>`);
+      } else {
+        $$renderer3.push("<!--[-1-->");
+      }
+      $$renderer3.push(`<!--]--></div> <div class="flex flex-col gap-3 svelte-skv6c4"><div class="flex items-center gap-2 text-sm font-medium text-muted-foreground svelte-skv6c4">`);
+      Layout_template($$renderer3, { class: "h-4 w-4" });
+      $$renderer3.push(`<!----> Live canvas</div> <div class="mx-auto aspect-[9/16] h-[560px] max-h-[70vh] min-h-96 overflow-hidden svelte-skv6c4">`);
+      if (showcaseProject()) {
+        $$renderer3.push("<!--[0-->");
+        Player($$renderer3, {
+          project: showcaseProject(),
+          mode: "simple",
+          autoplay: true,
+          get currentTime() {
+            return heroTime;
+          },
+          set currentTime($$value) {
+            heroTime = $$value;
+            $$settled = false;
+          }
+        });
+      } else {
+        $$renderer3.push("<!--[-1-->");
+      }
+      $$renderer3.push(`<!--]--></div></div></div> <div class="mt-8 flex justify-center svelte-skv6c4">`);
+      Button($$renderer3, {
+        variant: "outline",
+        href: resolve("/(app)/editor"),
+        icon: Clapperboard,
+        children: ($$renderer4) => {
+          $$renderer4.push(`<!---->Open the editor online`);
+        },
+        $$slots: { default: true }
+      });
+      $$renderer3.push(`<!----></div></div></section> <section class="relative border-t border-border/40 bg-muted/30 svelte-skv6c4"><div class="container mx-auto px-4 py-24 sm:px-6 lg:px-8 svelte-skv6c4">`);
+      Section_header($$renderer3, {
+        title: "From terminal to MP4 in three steps",
+        subtitle: "No proprietary format. Just HTML, a CLI, and a render pipeline you can inspect."
+      });
+      $$renderer3.push(`<!----> <div class="mx-auto grid max-w-4xl grid-cols-1 gap-8 md:grid-cols-3 svelte-skv6c4"><div class="flex flex-col items-center text-center svelte-skv6c4"><div class="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-linear-to-br from-(--brand-blue)/20 to-(--brand-purple)/20 svelte-skv6c4">`);
+      Terminal($$renderer3, { class: "h-7 w-7 text-primary" });
+      $$renderer3.push(`<!----></div> <h3 class="mb-2 font-semibold text-foreground svelte-skv6c4">1. Scaffold</h3> <p class="text-sm text-muted-foreground svelte-skv6c4"><code class="rounded bg-muted px-1 py-0.5 text-xs svelte-skv6c4">devmotion init</code> creates a project folder
+          with HTML scenes, a config, and an assets directory.</p></div> <div class="flex flex-col items-center text-center svelte-skv6c4"><div class="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-linear-to-br from-(--brand-blue)/20 to-(--brand-purple)/20 svelte-skv6c4">`);
+      File_code($$renderer3, { class: "h-7 w-7 text-primary" });
+      $$renderer3.push(`<!----></div> <h3 class="mb-2 font-semibold text-foreground svelte-skv6c4">2. Edit</h3> <p class="text-sm text-muted-foreground svelte-skv6c4">Add <code class="rounded bg-muted px-1 py-0.5 text-xs svelte-skv6c4">data-dm-*</code> attributes in any
+          editor, open the visual Studio with <code class="rounded bg-muted px-1 py-0.5 text-xs svelte-skv6c4">devmotion preview</code>, or let an
+          agent do it.</p></div> <div class="flex flex-col items-center text-center svelte-skv6c4"><div class="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-linear-to-br from-(--brand-blue)/20 to-(--brand-purple)/20 svelte-skv6c4">`);
+      Video($$renderer3, { class: "h-7 w-7 text-primary" });
+      $$renderer3.push(`<!----></div> <h3 class="mb-2 font-semibold text-foreground svelte-skv6c4">3. Render</h3> <p class="text-sm text-muted-foreground svelte-skv6c4"><code class="rounded bg-muted px-1 py-0.5 text-xs svelte-skv6c4">devmotion render</code> produces MP4 via
+          headless Chromium + ffmpeg. Same pipeline locally, in CI, or on servers.</p></div></div></div></section> <section id="demo" class="relative border-t border-border/40 svelte-skv6c4"><div class="relative w-full py-12 svelte-skv6c4"><div class="container mx-auto px-4 sm:px-6 lg:px-8 svelte-skv6c4"><div class="flex flex-col items-center justify-between gap-6 sm:flex-row sm:gap-4 svelte-skv6c4"><div class="text-center sm:text-left svelte-skv6c4"><h2 class="text-xl font-bold text-foreground md:text-2xl svelte-skv6c4"><span class="block sm:inline svelte-skv6c4">One Project,</span> <span class="block sm:ml-1 sm:inline svelte-skv6c4">Every Platform</span></h2> <p class="mt-1 text-sm text-muted-foreground svelte-skv6c4">Export for YouTube, Instagram, TikTok. Switch formats instantly.</p></div> <div class="flex flex-wrap items-center gap-3 svelte-skv6c4"><div class="flex flex-row items-center justify-center gap-2 svelte-skv6c4" aria-hidden="true"><span class="mt-3 text-2xl font-medium whitespace-nowrap text-muted-foreground svelte-skv6c4">`);
+      Apply_font($$renderer3, {
+        fontFamily: "Indie Flower",
+        children: ($$renderer4) => {
+          $$renderer4.push(`<!---->Try it!`);
+        }
+      });
+      $$renderer3.push(`<!----></span> <div class="w-20 text-primary svelte-skv6c4">`);
+      Arrow($$renderer3);
+      $$renderer3.push(`<!----></div></div> <div class="flex items-center gap-2 rounded-lg border border-border bg-background p-1 svelte-skv6c4"><!--[-->`);
+      const each_array_1 = ensure_array_like(aspectRatios);
+      for (let $$index_1 = 0, $$length = each_array_1.length; $$index_1 < $$length; $$index_1++) {
+        let ratio = each_array_1[$$index_1];
+        const Icon2 = ratio.icon;
+        $$renderer3.push(`<button${attr_class(
+          `group relative flex min-w-20 flex-col items-center gap-1.5 rounded-md px-4 py-2.5 transition-all duration-200 ${stringify(selectedAspectRatio() === ratio.value ? "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90" : "hover:bg-muted/50")}`,
+          "svelte-skv6c4"
+        )}${attr("aria-label", `Switch to ${stringify(ratio.desc)} format`)}${attr("aria-pressed", selectedAspectRatio() === ratio.value)}>`);
+        if (Icon2) {
+          $$renderer3.push("<!--[-->");
+          Icon2($$renderer3, { class: "h-4 w-4" });
+          $$renderer3.push("<!--]-->");
+        } else {
+          $$renderer3.push("<!--[!-->");
+          $$renderer3.push("<!--]-->");
+        }
+        $$renderer3.push(` <span class="text-xs font-medium svelte-skv6c4">${escape_html(ratio.label)}</span> <span class="text-[10px] opacity-70 svelte-skv6c4">${escape_html(ratio.desc)}</span></button>`);
+      }
+      $$renderer3.push(`<!--]--></div></div></div></div> <div class="relative w-full overflow-hidden py-8 svelte-skv6c4"><div class="relative h-128 w-full svelte-skv6c4">`);
+      if (projectData()) {
+        $$renderer3.push("<!--[0-->");
+        Player($$renderer3, { project: projectData(), mode: "simple", autoplay: true });
+      } else {
+        $$renderer3.push("<!--[-1-->");
+      }
+      $$renderer3.push(`<!--]--></div></div> <div class="flex flex-col items-center gap-3 pb-10 svelte-skv6c4"><div class="flex flex-wrap items-center justify-center gap-1.5 svelte-skv6c4"><span class="mr-1 text-xs text-muted-foreground svelte-skv6c4">Background:</span> <!--[-->`);
+      const each_array_2 = ensure_array_like(DYNAMIC_VARIANTS.filter((v) => [
+        "aurora",
+        "silk",
+        "topographic",
+        "aurora-borealis",
+        "data-stream"
+      ].includes(v.id)));
+      for (let $$index_2 = 0, $$length = each_array_2.length; $$index_2 < $$length; $$index_2++) {
+        let variant = each_array_2[$$index_2];
+        $$renderer3.push(`<button${attr_class(
+          `rounded-full border px-3 py-1 text-xs font-medium transition-all duration-200 ${stringify(selectedVariantId() === variant.id ? "border-primary bg-primary text-primary-foreground" : "border-border bg-background text-muted-foreground hover:border-primary/50 hover:text-foreground")}`,
+          "svelte-skv6c4"
+        )}${attr("title", variant.description)}>${escape_html(variant.label)}</button>`);
+      }
+      $$renderer3.push(`<!--]--></div></div></div></section> <section class="relative border-t border-border/40 bg-muted/30 svelte-skv6c4"><div class="container mx-auto px-4 py-24 sm:px-6 lg:px-8 svelte-skv6c4">`);
+      Section_header($$renderer3, {
+        badge: "For Developers",
+        title: "Video as code, finally",
+        subtitle: "The CLI, the HTML format, and the render pipeline run entirely on your machine. Edit in VS Code. Version in Git. Render in CI."
+      });
+      $$renderer3.push(`<!----> <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4 svelte-skv6c4"><!--[-->`);
+      const each_array_3 = ensure_array_like(devFeatures);
+      for (let $$index_3 = 0, $$length = each_array_3.length; $$index_3 < $$length; $$index_3++) {
+        let feature = each_array_3[$$index_3];
+        Feature_card($$renderer3, {
+          icon: feature.icon,
+          title: feature.title,
+          description: feature.description
+        });
+      }
+      $$renderer3.push(`<!--]--></div></div></section> <section class="relative border-t border-border/40 svelte-skv6c4"><div class="container mx-auto px-4 py-24 sm:px-6 lg:px-8 svelte-skv6c4">`);
+      Section_header($$renderer3, {
+        badge: "For Agent Builders",
+        title: "AI agents can write video",
+        subtitle: "MCP server, Claude Code skills, and an LLM-friendly HTML protocol. Agents scaffold and edit projects, then render through the CLI."
+      });
+      $$renderer3.push(`<!----> <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4 svelte-skv6c4"><!--[-->`);
+      const each_array_4 = ensure_array_like(agentFeatures);
+      for (let $$index_4 = 0, $$length = each_array_4.length; $$index_4 < $$length; $$index_4++) {
+        let feature = each_array_4[$$index_4];
+        Feature_card($$renderer3, {
+          icon: feature.icon,
+          title: feature.title,
+          description: feature.description
+        });
+      }
+      $$renderer3.push(`<!--]--></div> <div class="mx-auto mt-10 max-w-lg space-y-4 svelte-skv6c4">`);
+      Code_block($$renderer3, {
+        title: "One-command setup — no install needed",
+        lang: "bash",
+        code: "npx @devmotion/cli setup"
+      });
+      $$renderer3.push(`<!----> <p class="text-center text-sm text-muted-foreground svelte-skv6c4">Drops three Claude Code skills into <code class="rounded bg-muted px-1 py-0.5 text-xs svelte-skv6c4">.claude/skills/</code> (<code class="rounded bg-muted px-1 py-0.5 text-xs svelte-skv6c4">/devmotion-init</code>, <code class="rounded bg-muted px-1 py-0.5 text-xs svelte-skv6c4">/devmotion-add-layer</code>, <code class="rounded bg-muted px-1 py-0.5 text-xs svelte-skv6c4">/devmotion-render</code>) and registers
+        the MCP server in <code class="rounded bg-muted px-1 py-0.5 text-xs svelte-skv6c4">.claude/settings.local.json</code>. From
+        then on Claude Code knows the HTML protocol and can scaffold, edit, and render a video on
+        its own.</p> <div class="flex justify-center gap-3 svelte-skv6c4">`);
+      Button($$renderer3, {
+        href: resolve("/(marketing)/docs/mcp"),
+        variant: "default",
+        size: "sm",
+        children: ($$renderer4) => {
+          $$renderer4.push(`<!---->MCP Docs`);
+        },
+        $$slots: { default: true }
+      });
+      $$renderer3.push(`<!----> `);
+      Button($$renderer3, {
+        href: resolve("/(marketing)/docs"),
+        variant: "outline",
+        size: "sm",
+        children: ($$renderer4) => {
+          $$renderer4.push(`<!---->All Docs`);
+        },
+        $$slots: { default: true }
+      });
+      $$renderer3.push(`<!----></div></div></div></section> <section class="relative border-t border-border/40 bg-muted/30 svelte-skv6c4"><div class="container mx-auto px-4 py-24 sm:px-6 lg:px-8 svelte-skv6c4">`);
+      Section_header($$renderer3, {
+        title: "Code or canvas — you don’t have to choose",
+        subtitle: "Code-driven tools make you live in code. GUI tools lock you out of it. DevMotion is the only one that gives you both."
+      });
+      $$renderer3.push(`<!----> <div class="mx-auto max-w-4xl overflow-x-auto svelte-skv6c4"><table class="w-full text-left text-sm svelte-skv6c4"><thead class="svelte-skv6c4"><tr class="border-b border-border svelte-skv6c4"><th class="py-3 pr-4 font-semibold text-foreground svelte-skv6c4"></th><th class="px-4 py-3 font-semibold text-foreground svelte-skv6c4">Approach</th><th class="px-4 py-3 font-semibold text-foreground svelte-skv6c4">Visual editor</th><th class="px-4 py-3 font-semibold text-foreground svelte-skv6c4">Agent-native</th><th class="px-4 py-3 font-semibold text-foreground svelte-skv6c4">Git-friendly</th><th class="px-4 py-3 font-semibold text-foreground svelte-skv6c4">License</th><th class="py-3 pl-4 font-semibold text-foreground svelte-skv6c4">Pricing</th></tr></thead><tbody class="svelte-skv6c4"><!--[-->`);
+      const each_array_5 = ensure_array_like(comparisons);
+      for (let $$index_5 = 0, $$length = each_array_5.length; $$index_5 < $$length; $$index_5++) {
+        let row = each_array_5[$$index_5];
+        $$renderer3.push(`<tr${attr_class(`border-b border-border/40 transition-colors hover:bg-muted/30 ${stringify(row.highlight ? "bg-primary/5" : "")}`, "svelte-skv6c4")}><td class="py-3 pr-4 svelte-skv6c4"><span${attr_class(`font-semibold ${stringify(row.highlight ? "text-primary" : "text-foreground")}`, "svelte-skv6c4")}>${escape_html(row.label)} `);
+        if (row.highlight) {
+          $$renderer3.push("<!--[0-->");
+          $$renderer3.push(`<span class="ml-1.5 rounded bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary svelte-skv6c4">you</span>`);
+        } else {
+          $$renderer3.push("<!--[-1-->");
+        }
+        $$renderer3.push(`<!--]--></span></td><td class="px-4 py-3 text-muted-foreground svelte-skv6c4">${escape_html(row.approach)}</td><td class="px-4 py-3 svelte-skv6c4">`);
+        if (row.visualEditor) {
+          $$renderer3.push("<!--[0-->");
+          $$renderer3.push(`<span class="text-green-500 svelte-skv6c4">✓</span>`);
+        } else {
+          $$renderer3.push("<!--[-1-->");
+          $$renderer3.push(`<span class="text-muted-foreground/40 svelte-skv6c4">—</span>`);
+        }
+        $$renderer3.push(`<!--]--></td><td class="px-4 py-3 svelte-skv6c4">`);
+        if (row.agentNative) {
+          $$renderer3.push("<!--[0-->");
+          $$renderer3.push(`<span class="text-green-500 svelte-skv6c4">✓</span>`);
+        } else {
+          $$renderer3.push("<!--[-1-->");
+          $$renderer3.push(`<span class="text-muted-foreground/40 svelte-skv6c4">—</span>`);
+        }
+        $$renderer3.push(`<!--]--></td><td class="px-4 py-3 svelte-skv6c4">`);
+        if (row.gitFriendly) {
+          $$renderer3.push("<!--[0-->");
+          $$renderer3.push(`<span class="text-green-500 svelte-skv6c4">✓</span>`);
+        } else {
+          $$renderer3.push("<!--[-1-->");
+          $$renderer3.push(`<span class="text-muted-foreground/40 svelte-skv6c4">—</span>`);
+        }
+        $$renderer3.push(`<!--]--></td><td class="px-4 py-3 text-muted-foreground svelte-skv6c4">${escape_html(row.license)}</td><td class="py-3 pl-4 text-muted-foreground svelte-skv6c4">${escape_html(row.pricing)}</td></tr>`);
+      }
+      $$renderer3.push(`<!--]--></tbody></table></div> <p class="mt-6 text-center text-xs text-muted-foreground svelte-skv6c4">Remotion and Hyperframes are code-only — DevMotion bundles a full visual editor in the same
+      CLI, so you can drop into a timeline whenever code isn’t the right tool. GUI tools like Jitter
+      give you that editor but lock you out of code, Git, and agents. DevMotion is the only one that
+      does both.</p></div></section> <section class="relative border-t border-border/40 svelte-skv6c4"><div class="container mx-auto px-4 py-24 sm:px-6 lg:px-8 svelte-skv6c4">`);
+      Section_header($$renderer3, {
+        badge: "AI-Powered · Cloud",
+        title: "Hours of editing, done in seconds",
+        subtitle: "The cloud Studio adds AI on top of everything above — captions, dubbing, autocut, and generation. The local editor and CLI stay free.",
+        gradient: true
+      });
+      $$renderer3.push(`<!----> <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 svelte-skv6c4"><!--[-->`);
+      const each_array_6 = ensure_array_like(aiFeatures);
+      for (let $$index_6 = 0, $$length = each_array_6.length; $$index_6 < $$length; $$index_6++) {
+        let feature = each_array_6[$$index_6];
+        $$renderer3.push(`<div class="group relative rounded-2xl border border-border/50 bg-card/50 p-8 backdrop-blur-sm transition-all duration-300 hover:-translate-y-1 hover:border-primary/30 hover:shadow-2xl hover:shadow-primary/10 svelte-skv6c4">`);
+        if (feature.badge) {
+          $$renderer3.push("<!--[0-->");
+          $$renderer3.push(`<span class="absolute top-4 right-4 rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary svelte-skv6c4">${escape_html(feature.badge)}</span>`);
+        } else {
+          $$renderer3.push("<!--[-1-->");
+        }
+        $$renderer3.push(`<!--]--> <div class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-linear-to-br from-(--brand-blue)/10 to-(--brand-purple)/10 transition-colors duration-300 group-hover:from-(--brand-blue)/20 group-hover:to-(--brand-purple)/20 svelte-skv6c4">`);
+        if (feature.icon) {
+          $$renderer3.push("<!--[-->");
+          feature.icon($$renderer3, {
+            class: "h-6 w-6 text-primary transition-transform duration-300 group-hover:scale-110"
+          });
+          $$renderer3.push("<!--]-->");
+        } else {
+          $$renderer3.push("<!--[!-->");
+          $$renderer3.push("<!--]-->");
+        }
+        $$renderer3.push(`</div> <h3 class="mb-2 text-lg font-semibold text-foreground svelte-skv6c4">${escape_html(feature.title)}</h3> <p class="text-sm leading-relaxed text-muted-foreground svelte-skv6c4">${escape_html(feature.description)}</p> `);
+        if (feature.beforeAfter) {
+          $$renderer3.push("<!--[0-->");
+          Before_after($$renderer3, {
+            beforeLabel: feature.beforeAfter.beforeLabel,
+            afterLabel: feature.beforeAfter.afterLabel,
+            before: feature.beforeAfter.before,
+            after: feature.beforeAfter.after,
+            beforeThumb: feature.beforeAfter.beforeThumb,
+            afterThumb: feature.beforeAfter.afterThumb
+          });
+        } else {
+          $$renderer3.push("<!--[-1-->");
+        }
+        $$renderer3.push(`<!--]--></div>`);
+      }
+      $$renderer3.push(`<!--]--></div></div></section> `);
+      {
+        $$renderer3.push("<!--[-1-->");
+        $$renderer3.push(`<section class="relative border-t border-border/40 bg-muted/30 svelte-skv6c4"><div class="container mx-auto px-4 py-24 sm:px-6 lg:px-8 svelte-skv6c4"><div class="mx-auto max-w-2xl text-center svelte-skv6c4">`);
+        Pill($$renderer3, {
+          icon: Sparkles,
+          class: "mb-6",
+          children: ($$renderer4) => {
+            $$renderer4.push(`<!---->Just launched`);
+          }
+        });
+        $$renderer3.push(`<!----> <h2 class="text-3xl font-extrabold tracking-tight text-foreground md:text-4xl svelte-skv6c4">Get in while it’s early</h2> <p class="mx-auto mt-4 max-w-xl text-lg text-muted-foreground svelte-skv6c4">DevMotion is brand new and free for personal use. The people who shape it now are the ones
+          whose feedback lands straight in the roadmap. Open the editor, build something, and tell
+          us what you need next.</p> <div class="mt-6 flex flex-col items-center justify-center gap-4 sm:flex-row svelte-skv6c4">`);
+        {
+          $$renderer3.push("<!--[-1-->");
+          Button($$renderer3, {
+            size: "lg",
+            href: resolve("/(app)/editor"),
+            icon: Clapperboard,
+            children: ($$renderer4) => {
+              $$renderer4.push(`<!---->Start creating — free`);
+            },
+            $$slots: { default: true }
+          });
+          $$renderer3.push(`<!----> `);
+          Button($$renderer3, {
+            variant: "outline",
+            size: "lg",
+            href: resolve("/(marketing)/docs"),
+            icon: Terminal,
+            children: ($$renderer4) => {
+              $$renderer4.push(`<!---->Read the docs`);
+            },
+            $$slots: { default: true }
+          });
+          $$renderer3.push(`<!---->`);
+        }
+        $$renderer3.push(`<!--]--></div></div></div></section>`);
+      }
+      $$renderer3.push(`<!--]--> `);
+      $$renderer3.push(`<!--[!-->`);
+      {
+        $$renderer3.push(`<div class="flex items-center justify-center py-12 svelte-skv6c4"><div class="h-8 w-8 animate-spin rounded-full border-b-2 border-primary svelte-skv6c4"></div></div>`);
+      }
+      $$renderer3.push(`<!--]-->`);
+      $$renderer3.push(` <section class="relative bg-muted/30 svelte-skv6c4"><div class="container mx-auto px-4 py-24 sm:px-6 lg:px-8 svelte-skv6c4">`);
+      Section_header($$renderer3, { title: "Frequently Asked Questions" });
+      $$renderer3.push(`<!----> <div class="mx-auto max-w-3xl space-y-4 svelte-skv6c4"><!--[-->`);
+      const each_array_8 = ensure_array_like(faqs);
+      for (let $$index_8 = 0, $$length = each_array_8.length; $$index_8 < $$length; $$index_8++) {
+        let faq = each_array_8[$$index_8];
+        $$renderer3.push(`<details class="group rounded-xl border border-border/50 bg-card/50 backdrop-blur-sm transition-all duration-200 hover:border-primary/30 svelte-skv6c4"><summary class="flex cursor-pointer items-center justify-between p-6 font-semibold text-foreground transition-colors hover:text-primary svelte-skv6c4"><span class="svelte-skv6c4">${escape_html(faq.question)}</span> `);
+        Chevron_down($$renderer3, {
+          class: "h-5 w-5 transition-transform duration-200 group-open:rotate-180"
+        });
+        $$renderer3.push(`<!----></summary> <div class="border-t border-border/30 px-6 py-4 text-sm leading-relaxed text-muted-foreground svelte-skv6c4">${escape_html(faq.answer)}</div></details>`);
+      }
+      $$renderer3.push(`<!--]--></div></div></section> <section class="relative overflow-hidden svelte-skv6c4"><div class="pointer-events-none absolute inset-0 bg-linear-to-b from-transparent via-primary/5 to-transparent svelte-skv6c4" aria-hidden="true"></div> <div class="container mx-auto px-4 py-24 sm:px-6 lg:px-8 svelte-skv6c4"><div class="relative z-10 mx-auto max-w-2xl text-center svelte-skv6c4"><h2 class="text-3xl font-extrabold tracking-tight text-foreground md:text-4xl svelte-skv6c4">Your next video is one command away.</h2> <p class="mt-4 text-lg text-muted-foreground svelte-skv6c4">Open the editor in your browser, or scaffold a project from the terminal. Free for personal
+        use, fully local, and yours to keep — it’s just HTML.</p> <div class="mx-auto mt-6 max-w-sm svelte-skv6c4">`);
+      Code_block($$renderer3, {
+        title: "Terminal",
+        lang: "bash",
+        code: `npm i -g @devmotion/cli
+devmotion init my-first-video`
+      });
+      $$renderer3.push(`<!----></div> <div class="mt-6 flex flex-col items-center justify-center gap-4 sm:flex-row svelte-skv6c4">`);
+      Button($$renderer3, {
+        size: "lg",
+        href: resolve("/(app)/editor"),
+        icon: Clapperboard,
+        class: "text-base",
+        children: ($$renderer4) => {
+          $$renderer4.push(`<!---->Start creating — free`);
+        },
+        $$slots: { default: true }
+      });
+      $$renderer3.push(`<!----> `);
+      Button($$renderer3, {
+        variant: "outline",
+        size: "lg",
+        href: resolve("/(marketing)/docs"),
+        icon: Terminal,
+        class: "text-base",
+        children: ($$renderer4) => {
+          $$renderer4.push(`<!---->Read the docs`);
+        },
+        $$slots: { default: true }
+      });
+      $$renderer3.push(`<!----></div> <p class="mt-3 text-xs text-muted-foreground svelte-skv6c4">Free to start · No card required · Cancel any time</p></div></div></section> <div class="flex justify-end px-6 py-4 opacity-60 transition-opacity hover:opacity-100 svelte-skv6c4"><div class="flex flex-wrap items-center gap-3 svelte-skv6c4"><a href="https://startupfa.me/s/devmotion?utm_source=devmotion.app" target="_blank" rel="noopener" class="svelte-skv6c4"><img src="https://startupfa.me/badges/featured/dark-small-rounded.webp" alt="DevMotion - Featured on Startup Fame" class="h-8 w-auto svelte-skv6c4"/></a> <a href="https://fazier.com/launches/devmotion.app" target="_blank" rel="noopener" class="svelte-skv6c4"><img src="https://fazier.com/api/v1//public/badges/launch_badges.svg?badge_type=featured&amp;theme=dark" alt="Featured on Fazier" class="h-8 w-auto svelte-skv6c4"/></a> <a href="https://www.producthunt.com/products/devmotion-ai-video-editor?embed=true&amp;utm_source=badge-featured&amp;utm_medium=badge&amp;utm_campaign=badge-devmotion-ai-video-editor" target="_blank" rel="noopener noreferrer" class="svelte-skv6c4"><img alt="DevMotion — AI Video Editor - Prompt, record, caption, dub, export in 4K — no install | Product Hunt" width="250" height="54" src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1131044&amp;theme=dark&amp;t=1777053015964" class="h-8 w-auto svelte-skv6c4"/></a></div></div>`);
+    }
+    do {
+      $$settled = true;
+      $$inner_renderer = $$renderer2.copy();
+      $$render_inner($$inner_renderer);
+    } while (!$$settled);
+    $$renderer2.subsume($$inner_renderer);
+  });
+}
+
+export { _page as default };
+//# sourceMappingURL=_page.svelte-DgqoNyxe.js.map