@devmotion/cli 0.6.0 → 0.6.1

package/studio/client/_app/immutable/nodes/{20.CIMlHVKg.js → 20.DXvj9EYW.js}

@@ -1,4 +1,4 @@
-import"../chunks/Ct_92ewg.js";import{p as _e,j as Ye,k as be,o as oe,b as C,e as Ae,b1 as Pr,s as A,c as Q,f as m,g as k,r as h,i as E,q as Y,h as H,aH as z,x as Ma,n as P,bz as yr,bA as kr,bD as Mr,aS as Br,t as me}from"../chunks/BH1rZqH0.js";import{s as G,d as Ba,a as Bt,j as La,b as Hr}from"../chunks/BKx7aQex.js";import{i as V}from"../chunks/l6_YgvJu.js";import{e as Pe}from"../chunks/BwzC7gXw.js";import{c as Ht,b as Fr}from"../chunks/CjJOx53h.js";import{b as re,d as Ft,f as wr,s as He,c as Ur}from"../chunks/DItp427M.js";import{S as Yr}from"../chunks/DUvwbcGL.js";import{B as Re}from"../chunks/BQhvHIBL.js";import{r as Ee}from"../chunks/BgrSU1kg.js";import{P as Ju}from"../chunks/CPRt510s.js";import"../chunks/CRSvvRTA.js";import{b as it,r as nt,p as we}from"../chunks/C8kSHBGW.js";import{s as Ge}from"../chunks/Be-ZWJwN.js";import{c as wt}from"../chunks/BAPsSsPy.js";import{F as Gr,H as Wr,G as Qr,z as qr,I as Kr,E as Vr,J as Xr,K as Ut,P as jr,M as $r,N as Aa,O as Zu,Q as zr,T as ut,U as Jr,Z as Zr,R as ei,A as ti,W as ai,X as ui,Y as si,_ as ri,$ as ii,a0 as ni,u as es,a as oi}from"../chunks/DkL6aOyN.js";import{_ as Ha,E as ci,K as di,u as As,b as B,s as F,o as pe,c as Yt,d as Ue,l as li,r as ga,e as fi,h as hi,i as mi,Z as Ei,j as Ti,k as bi,n as yt,m as pi,p as _i,q as Ai,D as gi,t as ts}from"../chunks/BKaOgHuv.js";import{I as Ii,L as as}from"../chunks/B022MJ5t.js";import{a as us}from"../chunks/95fvlwry.js";import{g as Ni,c as vi,P as Ia}from"../chunks/Cdg3o65X.js";import{g as Ci}from"../chunks/Dq1Bw6bH.js";import{g as Si}from"../chunks/BvSfBzuV.js";import{I as ot}from"../chunks/CVY1v_NI.js";import{R as xi}from"../chunks/CLfnefMs.js";import{c as Li,C as Na}from"../chunks/B3TZrMGu.js";import{a as ie}from"../chunks/CbADTDuG.js";import{w as Oi}from"../chunks/CsYc-nV1.js";import{h as Di}from"../chunks/B0CGBs-v.js";import{a as Ri}from"../chunks/CfEkJfal.js";import{C as Rt}from"../chunks/DovQv5Ja.js";import{G as Pi,C as yi}from"../chunks/DhUtLNbU.js";import{B as ss}from"../chunks/Ce2r_KzS.js";import{M as ki,S as Mi}from"../chunks/D-QT1x8R.js";function Bi(e,t){_e(t,!0);let u=nt(t,["$$slots","$$events","$$legacy"]);const s=[["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"}]];ot(e,it({name:"cpu"},()=>u,{get iconNode(){return s},children:(n,c)=>{var l=Ye(),b=be(l);Ge(b,()=>t.children??oe),C(n,l)},$$slots:{default:!0}})),Ae()}function gs(e,t){_e(t,!0);let u=nt(t,["$$slots","$$events","$$legacy"]);const s=[["rect",{width:"20",height:"14",x:"2",y:"5",rx:"2"}],["line",{x1:"2",x2:"22",y1:"10",y2:"10"}]];ot(e,it({name:"credit-card"},()=>u,{get iconNode(){return s},children:(n,c)=>{var l=Ye(),b=be(l);Ge(b,()=>t.children??oe),C(n,l)},$$slots:{default:!0}})),Ae()}function st(e,t){_e(t,!0);let u=nt(t,["$$slots","$$events","$$legacy"]);const s=[["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"}]];ot(e,it({name:"file-code"},()=>u,{get iconNode(){return s},children:(n,c)=>{var l=Ye(),b=be(l);Ge(b,()=>t.children??oe),C(n,l)},$$slots:{default:!0}})),Ae()}function Hi(e,t){_e(t,!0);let u=nt(t,["$$slots","$$events","$$legacy"]);const s=[["path",{d:"M15 6a9 9 0 0 0-9 9V3"}],["circle",{cx:"18",cy:"6",r:"3"}],["circle",{cx:"6",cy:"18",r:"3"}]];ot(e,it({name:"git-branch"},()=>u,{get iconNode(){return s},children:(n,c)=>{var l=Ye(),b=be(l);Ge(b,()=>t.children??oe),C(n,l)},$$slots:{default:!0}})),Ae()}function Fi(e,t){_e(t,!0);let u=nt(t,["$$slots","$$events","$$legacy"]);const s=[["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"}]];ot(e,it({name:"monitor-up"},()=>u,{get iconNode(){return s},children:(n,c)=>{var l=Ye(),b=be(l);Ge(b,()=>t.children??oe),C(n,l)},$$slots:{default:!0}})),Ae()}function wi(e,t){_e(t,!0);let u=nt(t,["$$slots","$$events","$$legacy"]);const s=[["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"}]];ot(e,it({name:"workflow"},()=>u,{get iconNode(){return s},children:(n,c)=>{var l=Ye(),b=be(l);Ge(b,()=>t.children??oe),C(n,l)},$$slots:{default:!0}})),Ae()}var Ui=Pr(`<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
+import"../chunks/Ct_92ewg.js";import{p as _e,j as Ye,k as be,o as oe,b as C,e as Ae,b1 as Pr,s as A,c as Q,f as m,g as k,r as h,i as E,q as Y,h as H,aH as z,x as Ma,n as P,bz as yr,bA as kr,bD as Mr,aS as Br,t as me}from"../chunks/BH1rZqH0.js";import{s as G,d as Ba,a as Bt,j as La,b as Hr}from"../chunks/BKx7aQex.js";import{i as V}from"../chunks/l6_YgvJu.js";import{e as Pe}from"../chunks/BwzC7gXw.js";import{c as Ht,b as Fr}from"../chunks/CjJOx53h.js";import{b as re,d as Ft,f as wr,s as He,c as Ur}from"../chunks/DItp427M.js";import{S as Yr}from"../chunks/BD1Q_3Tu.js";import{B as Re}from"../chunks/BQhvHIBL.js";import{r as Ee}from"../chunks/DmhMUf0A.js";import{P as Ju}from"../chunks/hBOeOFig.js";import"../chunks/CRSvvRTA.js";import{b as it,r as nt,p as we}from"../chunks/C8kSHBGW.js";import{s as Ge}from"../chunks/Be-ZWJwN.js";import{c as wt}from"../chunks/BAPsSsPy.js";import{F as Gr,H as Wr,G as Qr,z as qr,I as Kr,E as Vr,J as Xr,K as Ut,P as jr,M as $r,N as Aa,O as Zu,Q as zr,T as ut,U as Jr,Z as Zr,R as ei,A as ti,W as ai,X as ui,Y as si,_ as ri,$ as ii,a0 as ni,u as es,a as oi}from"../chunks/BmyLmh6r.js";import{_ as Ha,E as ci,K as di,u as As,b as B,s as F,o as pe,c as Yt,d as Ue,l as li,r as ga,e as fi,h as hi,i as mi,Z as Ei,j as Ti,k as bi,n as yt,m as pi,p as _i,q as Ai,D as gi,t as ts}from"../chunks/BKaOgHuv.js";import{I as Ii,L as as}from"../chunks/B022MJ5t.js";import{a as us}from"../chunks/95fvlwry.js";import{g as Ni,c as vi,P as Ia}from"../chunks/BZ5m9NAb.js";import{g as Ci}from"../chunks/CpZPBLUC.js";import{g as Si}from"../chunks/P0Tv_tIw.js";import{I as ot}from"../chunks/CVY1v_NI.js";import{R as xi}from"../chunks/CLfnefMs.js";import{c as Li,C as Na}from"../chunks/B3TZrMGu.js";import{a as ie}from"../chunks/CbADTDuG.js";import{w as Oi}from"../chunks/CsYc-nV1.js";import{h as Di}from"../chunks/B0CGBs-v.js";import{a as Ri}from"../chunks/CfEkJfal.js";import{C as Rt}from"../chunks/DovQv5Ja.js";import{G as Pi,C as yi}from"../chunks/uVN-AobW.js";import{B as ss}from"../chunks/Ce2r_KzS.js";import{M as ki,S as Mi}from"../chunks/ChWA6krs.js";function Bi(e,t){_e(t,!0);let u=nt(t,["$$slots","$$events","$$legacy"]);const s=[["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"}]];ot(e,it({name:"cpu"},()=>u,{get iconNode(){return s},children:(n,c)=>{var l=Ye(),b=be(l);Ge(b,()=>t.children??oe),C(n,l)},$$slots:{default:!0}})),Ae()}function gs(e,t){_e(t,!0);let u=nt(t,["$$slots","$$events","$$legacy"]);const s=[["rect",{width:"20",height:"14",x:"2",y:"5",rx:"2"}],["line",{x1:"2",x2:"22",y1:"10",y2:"10"}]];ot(e,it({name:"credit-card"},()=>u,{get iconNode(){return s},children:(n,c)=>{var l=Ye(),b=be(l);Ge(b,()=>t.children??oe),C(n,l)},$$slots:{default:!0}})),Ae()}function st(e,t){_e(t,!0);let u=nt(t,["$$slots","$$events","$$legacy"]);const s=[["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"}]];ot(e,it({name:"file-code"},()=>u,{get iconNode(){return s},children:(n,c)=>{var l=Ye(),b=be(l);Ge(b,()=>t.children??oe),C(n,l)},$$slots:{default:!0}})),Ae()}function Hi(e,t){_e(t,!0);let u=nt(t,["$$slots","$$events","$$legacy"]);const s=[["path",{d:"M15 6a9 9 0 0 0-9 9V3"}],["circle",{cx:"18",cy:"6",r:"3"}],["circle",{cx:"6",cy:"18",r:"3"}]];ot(e,it({name:"git-branch"},()=>u,{get iconNode(){return s},children:(n,c)=>{var l=Ye(),b=be(l);Ge(b,()=>t.children??oe),C(n,l)},$$slots:{default:!0}})),Ae()}function Fi(e,t){_e(t,!0);let u=nt(t,["$$slots","$$events","$$legacy"]);const s=[["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"}]];ot(e,it({name:"monitor-up"},()=>u,{get iconNode(){return s},children:(n,c)=>{var l=Ye(),b=be(l);Ge(b,()=>t.children??oe),C(n,l)},$$slots:{default:!0}})),Ae()}function wi(e,t){_e(t,!0);let u=nt(t,["$$slots","$$events","$$legacy"]);const s=[["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"}]];ot(e,it({name:"workflow"},()=>u,{get iconNode(){return s},children:(n,c)=>{var l=Ye(),b=be(l);Ge(b,()=>t.children??oe),C(n,l)},$$slots:{default:!0}})),Ae()}var Ui=Pr(`<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
@@ -36,10 +36,10 @@ import"../chunks/Ct_92ewg.js";import{p as _e,j as Ye,k as be,o as oe,b as C,e as
       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"><!> <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 svelte-skv6c4"></div></div></section> <!> <!> <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"><!> <div class="mx-auto max-w-3xl space-y-4 svelte-skv6c4"></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"><!></div> <div class="mt-6 flex flex-col items-center justify-center gap-4 sm:flex-row svelte-skv6c4"><!> <!></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>`,1);function vd(e,t){_e(t,!0);const u=[{icon:st,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:as,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:ss,title:"Agent-native",description:"A built-in MCP server lets Claude Code, Cursor, or Windsurf scaffold, edit, and render video autonomously. The HTML protocol is built for LLMs."}],s=[{icon:ut,title:"CLI-first workflow",description:"Scaffold, preview, and render from the terminal. `devmotion init`, `devmotion preview`, `devmotion render`. No GUI required."},{icon:st,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:si,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:Hi,title:"Git-friendly",description:"Projects are folders of HTML + JSON. Branch, merge, review. No binary blobs. Generate video from PRs in CI/CD."}],n=[{icon:ss,title:"Built-in MCP server",description:"Any MCP client can create, edit, and render video. Full tool surface: layers, keyframes, presets, export."},{icon:Bi,title:"Claude Code skills",description:"Slash commands like `/devmotion-add-layer` and `/devmotion-render`. One `devmotion setup` and agents know the whole protocol."},{icon:wi,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:ri,title:"Headless rendering",description:"Playwright + ffmpeg with a virtualized clock for deterministic frame capture. Render on servers, in CI, or from agent workflows."}],c=[{icon:ii,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:`${ie}/demo/demo.mp4`,after:`${ie}/demo/demo-caption.mp4`,beforeThumb:`${ie}/demo/thumb-demo.jpg`,afterThumb:`${ie}/demo/thumb-demo-caption.jpg`}},{icon:ni,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:`${ie}/demo/demo.mp4`,after:`${ie}/demo/demo-dub.mp4`,beforeThumb:`${ie}/demo/thumb-demo.jpg`,afterThumb:`${ie}/demo/thumb-demo-dub.jpg`}},{icon:Mi,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:`${ie}/demo/demo-long.mp4`,after:`${ie}/demo/demo-cut.mp4`,beforeThumb:`${ie}/demo/thumb-demo-long.jpg`,afterThumb:`${ie}/demo/thumb-demo-cut.jpg`}},{icon:es,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:S0,after:`${ie}/demo/demo-gen.mp4`,afterThumb:`${ie}/demo/thumb-demo-gen.jpg`}}],l=[{label:"DevMotion",highlight:!0,approach:"HTML + CLI",visualEditor:!0,agentNative:!0,gitFriendly:!0,license:"Free personal / Commercial",pricing:"Free local / Cloud Pro"},{label:"Remotion",highlight:!1,approach:"React + code",visualEditor:!1,agentNative:!1,gitFriendly:!0,license:"Free personal / Commercial",pricing:"Free / $270+/seat"},{label:"Hyperframes",highlight:!1,approach:"HTML + CLI",visualEditor:!1,agentNative:!0,gitFriendly:!0,license:"Apache 2.0",pricing:"Free / Cloud Pro"},{label:"Jitter",highlight:!1,approach:"GUI editor",visualEditor:!0,agentNative:!1,gitFriendly:!1,license:"Proprietary",pricing:"Free / $19/mo"}],b=[{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 ${Ia.free.limits.exportsPerMonth} exports/month; paid plans ($${Ia.creator.price}–${Ia.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 MCP server in `.claude/settings.local.json`. Or wire it manually with `claude mcp add --transport http devmotion http://localhost:5173/mcp`, then run `npx @devmotion/cli preview`. For Cursor/Windsurf, `npx @devmotion/cli mcp` prints the config 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."}],I=[{value:"landscape",label:"16:9",icon:ki,width:1280,height:720,desc:"Landscape"},{value:"portrait",label:"9:16",icon:ai,width:720,height:1280,desc:"Portrait"},{value:"square",label:"1:1",icon:ui,width:720,height:720,desc:"Square"}],N=new Ii,v=Y(()=>N.current);let L=Y(()=>E(v)?"portrait":"landscape");const x=Y(()=>{const g=t.data.projectSnapshot?.background;return ts(g)?g.variant:"silk"});let S=Y(()=>E(x));const R=Y(()=>{if(!t.data.projectSnapshot)return oi();const g=t.data.projectSnapshot,_=I.find(D=>D.value===E(L)),O=g.background;return{...g,..._?{width:_.width,height:_.height}:{},background:ts(O)?{...O,variant:E(S)}:O}}),M={id:"marketing-html-canvas-showcase",name:"Showcase",width:360,height:640,duration:5.2,fps:30,background:{type:"dynamic",variant:"silk",speed:1,intensity:.7},fontFamily:"Poppins",layers:[{id:"showcase-title",name:"DevMotion",visible:!0,locked:!1,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:.15,property:"props.content",value:"",interpolation:{family:"text",strategy:"char-reveal"}},{id:"title-content-full",time:.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:.15,property:"opacity",value:0,interpolation:{family:"continuous",strategy:"ease-out"}},{id:"title-scale-x-start",time:.15,property:"scale.x",value:.85,interpolation:{family:"continuous",strategy:"ease-out"}},{id:"title-scale-y-start",time:.15,property:"scale.y",value:.85,interpolation:{family:"continuous",strategy:"ease-out"}},{id:"title-x-start",time:.15,property:"position.x",value:20,interpolation:{family:"continuous",strategy:"ease-out-quad"}},{id:"title-opacity-in",time:.95,property:"opacity",value:1,interpolation:{family:"continuous",strategy:"ease-in"}},{id:"title-scale-x-in",time:.95,property:"scale.x",value:1,interpolation:{family:"continuous",strategy:"ease-in"}},{id:"title-scale-y-in",time:.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:.8,interpolation:{family:"continuous",strategy:"linear"}},{id:"title-scale-y-out",time:4.65,property:"scale.y",value:.8,interpolation:{family:"continuous",strategy:"linear"}}],props:{color:"#ffffff",width:31,content:"DevMotion",fontSize:14,autoWidth:!0,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:.5,blurAmount:.78},enterTime:0,exitTime:5.2},{id:"showcase-subtitle",name:"Subtitle",visible:!0,locked:!1,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:!1,textAlign:"left",fontFamily:"Raleway",fontWeight:"200",lineHeight:1.4,letterSpacing:.3,transitionEffects:["fade","slide-up","blur"],transitionDuration:350,transitionEasing:"ease-in-quad",slideDistance:2.7,blurAmount:.78},enterTime:0,exitTime:5.2}]};let q=z(Br(g0(M)));const j={id:M.id,name:M.name,width:M.width,height:M.height,fps:M.fps,duration:M.duration,background:M.background,fontFamily:M.fontFamily};let Ce=z(null);const Z=Y(()=>A0(E(q),j));Ma(()=>{E(Z).project&&H(Ce,E(Z).project,!0)});const $e=Y(()=>E(Z).project??E(Ce)),Se=Y(()=>E(Z).project?null:E(Z).error);let fe=z(2);const Le=2;Oi(()=>E(q),()=>{E(Z).project&&H(fe,Le)});var W=Q0(),ge=be(W);Yr(ge,{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"});var We=A(ge,2),ze=A(m(We),2),Je=m(ze),ct=m(Je),dt=m(ct);rs(dt,{get icon(){return ut},children:(g,_)=>{P();var O=me("npm i -g @devmotion/cli");C(g,O)},$$slots:{default:!0}}),h(ct);var lt=A(ct,6),ee=m(lt);Na(ee,{title:"Terminal",lang:"bash",code:`npm i -g @devmotion/cli
+        use, fully local, and yours to keep — it’s just HTML.</p> <div class="mx-auto mt-6 max-w-sm svelte-skv6c4"><!></div> <div class="mt-6 flex flex-col items-center justify-center gap-4 sm:flex-row svelte-skv6c4"><!> <!></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>`,1);function vd(e,t){_e(t,!0);const u=[{icon:st,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:as,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:ss,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."}],s=[{icon:ut,title:"CLI-first workflow",description:"Scaffold, preview, and render from the terminal. `devmotion init`, `devmotion preview`, `devmotion render`. No GUI required."},{icon:st,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:si,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:Hi,title:"Git-friendly",description:"Projects are folders of HTML + JSON. Branch, merge, review. No binary blobs. Generate video from PRs in CI/CD."}],n=[{icon:ss,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:Bi,title:"Claude Code skills",description:"Slash commands like `/devmotion-add-layer` and `/devmotion-render`. One `devmotion setup` and agents know the whole protocol."},{icon:wi,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:ri,title:"Headless rendering",description:"Playwright + ffmpeg with a virtualized clock for deterministic frame capture. Render on servers, in CI, or from agent workflows."}],c=[{icon:ii,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:`${ie}/demo/demo.mp4`,after:`${ie}/demo/demo-caption.mp4`,beforeThumb:`${ie}/demo/thumb-demo.jpg`,afterThumb:`${ie}/demo/thumb-demo-caption.jpg`}},{icon:ni,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:`${ie}/demo/demo.mp4`,after:`${ie}/demo/demo-dub.mp4`,beforeThumb:`${ie}/demo/thumb-demo.jpg`,afterThumb:`${ie}/demo/thumb-demo-dub.jpg`}},{icon:Mi,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:`${ie}/demo/demo-long.mp4`,after:`${ie}/demo/demo-cut.mp4`,beforeThumb:`${ie}/demo/thumb-demo-long.jpg`,afterThumb:`${ie}/demo/thumb-demo-cut.jpg`}},{icon:es,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:S0,after:`${ie}/demo/demo-gen.mp4`,afterThumb:`${ie}/demo/thumb-demo-gen.jpg`}}],l=[{label:"DevMotion",highlight:!0,approach:"HTML + CLI",visualEditor:!0,agentNative:!0,gitFriendly:!0,license:"Free personal / Commercial",pricing:"Free local / Cloud Pro"},{label:"Remotion",highlight:!1,approach:"React + code",visualEditor:!1,agentNative:!1,gitFriendly:!0,license:"Free personal / Commercial",pricing:"Free / $270+/seat"},{label:"Hyperframes",highlight:!1,approach:"HTML + CLI",visualEditor:!1,agentNative:!0,gitFriendly:!0,license:"Apache 2.0",pricing:"Free / Cloud Pro"},{label:"Jitter",highlight:!1,approach:"GUI editor",visualEditor:!0,agentNative:!1,gitFriendly:!1,license:"Proprietary",pricing:"Free / $19/mo"}],b=[{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 ${Ia.free.limits.exportsPerMonth} exports/month; paid plans ($${Ia.creator.price}–${Ia.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."}],I=[{value:"landscape",label:"16:9",icon:ki,width:1280,height:720,desc:"Landscape"},{value:"portrait",label:"9:16",icon:ai,width:720,height:1280,desc:"Portrait"},{value:"square",label:"1:1",icon:ui,width:720,height:720,desc:"Square"}],N=new Ii,v=Y(()=>N.current);let L=Y(()=>E(v)?"portrait":"landscape");const x=Y(()=>{const g=t.data.projectSnapshot?.background;return ts(g)?g.variant:"silk"});let S=Y(()=>E(x));const R=Y(()=>{if(!t.data.projectSnapshot)return oi();const g=t.data.projectSnapshot,_=I.find(D=>D.value===E(L)),O=g.background;return{...g,..._?{width:_.width,height:_.height}:{},background:ts(O)?{...O,variant:E(S)}:O}}),M={id:"marketing-html-canvas-showcase",name:"Showcase",width:360,height:640,duration:5.2,fps:30,background:{type:"dynamic",variant:"silk",speed:1,intensity:.7},fontFamily:"Poppins",layers:[{id:"showcase-title",name:"DevMotion",visible:!0,locked:!1,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:.15,property:"props.content",value:"",interpolation:{family:"text",strategy:"char-reveal"}},{id:"title-content-full",time:.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:.15,property:"opacity",value:0,interpolation:{family:"continuous",strategy:"ease-out"}},{id:"title-scale-x-start",time:.15,property:"scale.x",value:.85,interpolation:{family:"continuous",strategy:"ease-out"}},{id:"title-scale-y-start",time:.15,property:"scale.y",value:.85,interpolation:{family:"continuous",strategy:"ease-out"}},{id:"title-x-start",time:.15,property:"position.x",value:20,interpolation:{family:"continuous",strategy:"ease-out-quad"}},{id:"title-opacity-in",time:.95,property:"opacity",value:1,interpolation:{family:"continuous",strategy:"ease-in"}},{id:"title-scale-x-in",time:.95,property:"scale.x",value:1,interpolation:{family:"continuous",strategy:"ease-in"}},{id:"title-scale-y-in",time:.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:.8,interpolation:{family:"continuous",strategy:"linear"}},{id:"title-scale-y-out",time:4.65,property:"scale.y",value:.8,interpolation:{family:"continuous",strategy:"linear"}}],props:{color:"#ffffff",width:31,content:"DevMotion",fontSize:14,autoWidth:!0,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:.5,blurAmount:.78},enterTime:0,exitTime:5.2},{id:"showcase-subtitle",name:"Subtitle",visible:!0,locked:!1,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:!1,textAlign:"left",fontFamily:"Raleway",fontWeight:"200",lineHeight:1.4,letterSpacing:.3,transitionEffects:["fade","slide-up","blur"],transitionDuration:350,transitionEasing:"ease-in-quad",slideDistance:2.7,blurAmount:.78},enterTime:0,exitTime:5.2}]};let q=z(Br(g0(M)));const j={id:M.id,name:M.name,width:M.width,height:M.height,fps:M.fps,duration:M.duration,background:M.background,fontFamily:M.fontFamily};let Ce=z(null);const Z=Y(()=>A0(E(q),j));Ma(()=>{E(Z).project&&H(Ce,E(Z).project,!0)});const $e=Y(()=>E(Z).project??E(Ce)),Se=Y(()=>E(Z).project?null:E(Z).error);let fe=z(2);const Le=2;Oi(()=>E(q),()=>{E(Z).project&&H(fe,Le)});var W=Q0(),ge=be(W);Yr(ge,{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"});var We=A(ge,2),ze=A(m(We),2),Je=m(ze),ct=m(Je),dt=m(ct);rs(dt,{get icon(){return ut},children:(g,_)=>{P();var O=me("npm i -g @devmotion/cli");C(g,O)},$$slots:{default:!0}}),h(ct);var lt=A(ct,6),ee=m(lt);Na(ee,{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`}),h(lt);var $=A(lt,2),Qe=m($);{let g=Y(()=>Ee("/(app)/editor"));Re(Qe,{size:"lg",get href(){return E(g)},get icon(){return Rt},children:(_,O)=>{P();var D=me("Start creating — free");C(_,D)},$$slots:{default:!0}})}var $t=A(Qe,2);{let g=Y(()=>Ee("/(marketing)/docs"));Re($t,{variant:"outline",size:"lg",get href(){return E(g)},get icon(){return ut},children:(_,O)=>{P();var D=me("Get the CLI");C(_,D)},$$slots:{default:!0}})}h($);var qe=A($,4),Ze=m(qe),ft=m(Ze);gs(ft,{class:"h-3 w-3"}),P(),h(Ze);var et=A(Ze,4),tt=m(et);Fi(tt,{class:"h-3 w-3"}),P(),h(et);var at=A(et,4),ht=m(at);st(ht,{class:"h-3 w-3"}),P(),h(at);var mt=A(at,4),Lt=m(mt);Pi(Lt,{class:"h-3 w-3"}),P(),h(mt),h(qe);var Ot=A(qe,2),Et=m(Ot),Dt=m(Et);Jr(Dt,{class:"h-4 w-4"});var Oe=A(Dt,2),Xa=m(Oe),sr=m(Xa);h(Xa),P(),h(Oe),h(Et);var ja=A(Et,2),$a=m(ja);Zr($a,{class:"h-4 w-4"});var za=A($a,2),Ja=m(za),rr=m(Ja);h(Ja),P(),h(za),h(ja),h(Ot),h(Je),h(ze),h(We);var zt=A(We,2),Za=m(zt),eu=m(Za);ke(eu,{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."});var tu=A(eu,2);Pe(tu,21,()=>u,g=>g.title,(g,_)=>{va(g,{get icon(){return E(_).icon},get title(){return E(_).title},get description(){return E(_).description}})}),h(tu),h(Za),h(zt);var Jt=A(zt,2),au=m(Jt),uu=m(au);ke(uu,{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:!0});var Zt=A(uu,2),ea=m(Zt),ta=m(ea),su=m(ta),ir=m(su);st(ir,{class:"h-4 w-4"}),P(),h(su),P(2),h(ta);var ru=A(ta,2);C0(ru,{lang:"html",class:"h-[560px] max-h-[70vh] min-h-96 focus-within:ring-2 focus-within:ring-primary",get value(){return E(q)},set value(g){H(q,g,!0)}});var nr=A(ru,2);{var or=g=>{var _=x0(),O=m(_);h(_),Q(()=>G(O,`⚠ ${E(Se)??""}`)),C(g,_)};V(nr,g=>{E(Se)&&g(or)})}h(ea);var iu=A(ea,2),aa=m(iu),cr=m(aa);as(cr,{class:"h-4 w-4"}),P(),h(aa);var nu=A(aa,2),dr=m(nu);{var lr=g=>{Ju(g,{get project(){return E($e)},mode:"simple",autoplay:!0,get currentTime(){return E(fe)},set currentTime(_){H(fe,_,!0)}})};V(dr,g=>{E($e)&&g(lr)})}h(nu),h(iu),h(Zt);var ou=A(Zt,2),fr=m(ou);{let g=Y(()=>Ee("/(app)/editor"));Re(fr,{variant:"outline",get href(){return E(g)},get icon(){return Rt},children:(_,O)=>{P();var D=me("Open the editor online");C(_,D)},$$slots:{default:!0}})}h(ou),h(au),h(Jt);var ua=A(Jt,2),cu=m(ua),du=m(cu);ke(du,{title:"From terminal to MP4 in three steps",subtitle:"No proprietary format. Just HTML, a CLI, and a render pipeline you can inspect."});var lu=A(du,2),sa=m(lu),fu=m(sa),hr=m(fu);ut(hr,{class:"h-7 w-7 text-primary"}),h(fu),P(4),h(sa);var ra=A(sa,2),hu=m(ra),mr=m(hu);st(mr,{class:"h-7 w-7 text-primary"}),h(hu),P(4),h(ra);var mu=A(ra,2),Eu=m(mu),Er=m(Eu);ei(Er,{class:"h-7 w-7 text-primary"}),h(Eu),P(4),h(mu),h(lu),h(cu),h(ua);var ia=A(ua,2),Tu=m(ia),na=m(Tu),bu=m(na),pu=A(m(bu),2),oa=m(pu),ca=m(oa),Tr=m(ca);ti(Tr,{fontFamily:"Indie Flower",children:(g,_)=>{P();var O=me("Try it!");C(g,O)},$$slots:{default:!0}}),h(ca);var _u=A(ca,2),br=m(_u);Yi(br),h(_u),h(oa);var Au=A(oa,2);Pe(Au,21,()=>I,g=>g.value,(g,_)=>{const O=Y(()=>E(_).icon);var D=L0(),te=m(D);Ht(te,()=>E(O),(Ie,he)=>{he(Ie,{class:"h-4 w-4"})});var ae=A(te,2),De=m(ae,!0);h(ae);var de=A(ae,2),ue=m(de,!0);h(de),h(D),Q(()=>{re(D,1,`group relative flex min-w-20 flex-col items-center gap-1.5 rounded-md px-4 py-2.5 transition-all duration-200 ${E(L)===E(_).value?"bg-primary text-primary-foreground shadow-sm hover:bg-primary/90":"hover:bg-muted/50"}`,"svelte-skv6c4"),He(D,"aria-label",`Switch to ${E(_).desc??""} format`),He(D,"aria-pressed",E(L)===E(_).value),G(De,E(_).label),G(ue,E(_).desc)}),Bt("click",D,()=>H(L,E(_).value)),C(g,D)}),h(Au),h(pu),h(bu),h(na);var da=A(na,2),gu=m(da),pr=m(gu);{var _r=g=>{Ju(g,{get project(){return E(R)},mode:"simple",autoplay:!0})};V(pr,g=>{E(R)&&g(_r)})}h(gu),h(da);var Iu=A(da,2),Nu=m(Iu),Ar=A(m(Nu),2);Pe(Ar,17,()=>gi.filter(g=>["aurora","silk","topographic","aurora-borealis","data-stream"].includes(g.id)),g=>g.id,(g,_)=>{var O=O0(),D=m(O,!0);h(O),Q(()=>{re(O,1,`rounded-full border px-3 py-1 text-xs font-medium transition-all duration-200 ${E(S)===E(_).id?"border-primary bg-primary text-primary-foreground":"border-border bg-background text-muted-foreground hover:border-primary/50 hover:text-foreground"}`,"svelte-skv6c4"),He(O,"title",E(_).description),G(D,E(_).label)}),Bt("click",O,()=>H(S,E(_).id)),C(g,O)}),h(Nu),h(Iu),h(Tu),h(ia);var la=A(ia,2),vu=m(la),Cu=m(vu);ke(Cu,{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."});var Su=A(Cu,2);Pe(Su,21,()=>s,g=>g.title,(g,_)=>{va(g,{get icon(){return E(_).icon},get title(){return E(_).title},get description(){return E(_).description}})}),h(Su),h(vu),h(la);var fa=A(la,2),xu=m(fa),Lu=m(xu);ke(Lu,{badge:"For Agent Builders",title:"AI agents can write video",subtitle:"MCP server, Claude Code skills, and an LLM-friendly HTML protocol. Agents scaffold, edit, and render — autonomously."});var ha=A(Lu,2);Pe(ha,21,()=>n,g=>g.title,(g,_)=>{va(g,{get icon(){return E(_).icon},get title(){return E(_).title},get description(){return E(_).description}})}),h(ha);var Ou=A(ha,2),Du=m(Ou);Na(Du,{title:"One-command setup — no install needed",lang:"bash",code:"npx @devmotion/cli setup"});var Ru=A(Du,4),Pu=m(Ru);{let g=Y(()=>Ee("/(marketing)/docs/mcp"));Re(Pu,{get href(){return E(g)},variant:"default",size:"sm",children:(_,O)=>{P();var D=me("MCP Docs");C(_,D)},$$slots:{default:!0}})}var gr=A(Pu,2);{let g=Y(()=>Ee("/(marketing)/docs"));Re(gr,{get href(){return E(g)},variant:"outline",size:"sm",children:(_,O)=>{P();var D=me("All Docs");C(_,D)},$$slots:{default:!0}})}h(Ru),h(Ou),h(xu),h(fa);var ma=A(fa,2),yu=m(ma),ku=m(yu);ke(ku,{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."});var Mu=A(ku,2),Bu=m(Mu),Hu=A(m(Bu));Pe(Hu,21,()=>l,g=>g.label,(g,_)=>{var O=H0(),D=m(O),te=m(D),ae=m(te),De=A(ae);{var de=w=>{var le=D0();C(w,le)};V(De,w=>{E(_).highlight&&w(de)})}h(te),h(D);var ue=A(D),Ie=m(ue,!0);h(ue);var he=A(ue),Tt=m(he);{var Ke=w=>{var le=R0();C(w,le)},se=w=>{var le=P0();C(w,le)};V(Tt,w=>{E(_).visualEditor?w(Ke):w(se,-1)})}h(he);var Ne=A(he),Ve=m(Ne);{var Cr=w=>{var le=y0();C(w,le)},Sr=w=>{var le=k0();C(w,le)};V(Ve,w=>{E(_).agentNative?w(Cr):w(Sr,-1)})}h(Ne);var pa=A(Ne),xr=m(pa);{var Lr=w=>{var le=M0();C(w,le)},Or=w=>{var le=B0();C(w,le)};V(xr,w=>{E(_).gitFriendly?w(Lr):w(Or,-1)})}h(pa);var _a=A(pa),Dr=m(_a,!0);h(_a);var zu=A(_a),Rr=m(zu,!0);h(zu),h(O),Q(()=>{re(O,1,`border-b border-border/40 transition-colors hover:bg-muted/30 ${E(_).highlight?"bg-primary/5":""}`,"svelte-skv6c4"),re(te,1,`font-semibold ${E(_).highlight?"text-primary":"text-foreground"}`,"svelte-skv6c4"),G(ae,`${E(_).label??""} `),G(Ie,E(_).approach),G(Dr,E(_).license),G(Rr,E(_).pricing)}),C(g,O)}),h(Hu),h(Bu),h(Mu),P(2),h(yu),h(ma);var Ea=A(ma,2),Fu=m(Ea),wu=m(Fu);ke(wu,{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:!0});var Uu=A(wu,2);Pe(Uu,21,()=>c,g=>g.title,(g,_)=>{var O=w0(),D=m(O);{var te=se=>{var Ne=F0(),Ve=m(Ne,!0);h(Ne),Q(()=>G(Ve,E(_).badge)),C(se,Ne)};V(D,se=>{E(_).badge&&se(te)})}var ae=A(D,2),De=m(ae);Ht(De,()=>E(_).icon,(se,Ne)=>{Ne(se,{class:"h-6 w-6 text-primary transition-transform duration-300 group-hover:scale-110"})}),h(ae);var de=A(ae,2),ue=m(de,!0);h(de);var Ie=A(de,2),he=m(Ie,!0);h(Ie);var Tt=A(Ie,2);{var Ke=se=>{Zi(se,{get beforeLabel(){return E(_).beforeAfter.beforeLabel},get afterLabel(){return E(_).beforeAfter.afterLabel},get before(){return E(_).beforeAfter.before},get after(){return E(_).beforeAfter.after},get beforeThumb(){return E(_).beforeAfter.beforeThumb},get afterThumb(){return E(_).beforeAfter.afterThumb}})};V(Tt,se=>{E(_).beforeAfter&&se(Ke)})}h(O),Q(()=>{G(ue,E(_).title),G(he,E(_).description)}),C(g,O)}),h(Uu),h(Fu),h(Ea);var Yu=A(Ea,2);{var Ir=g=>{var _=Y0(),O=m(_),D=m(O),te=m(D);rs(te,{get icon(){return es},class:"mb-6",children:(ue,Ie)=>{P();var he=me("Just launched");C(ue,he)},$$slots:{default:!0}});var ae=A(te,6),De=m(ae);{var de=ue=>{var Ie=U0(),he=be(Ie);{let Ke=Y(()=>Ee("/(app)/editor"));Re(he,{size:"lg",get href(){return E(Ke)},get icon(){return Rt},children:(se,Ne)=>{P();var Ve=me("Start creating — free");C(se,Ve)},$$slots:{default:!0}})}var Tt=A(he,2);{let Ke=Y(()=>Ee("/(marketing)/docs"));Re(Tt,{variant:"outline",size:"lg",get href(){return E(Ke)},get icon(){return ut},children:(se,Ne)=>{P();var Ve=me("Read the docs");C(se,Ve)},$$slots:{default:!0}})}C(ue,Ie)};V(De,ue=>{ue(de,-1)})}h(ae),h(D),h(O),h(_),C(g,_)};V(Yu,g=>{g(Ir,-1)})}var Gu=A(Yu,2);Hr(Gu,{pending:_=>{var O=G0();C(_,O)}},_=>{un(_,{})});var Ta=A(Gu,2),Wu=m(Ta),Qu=m(Wu);ke(Qu,{title:"Frequently Asked Questions"});var qu=A(Qu,2);Pe(qu,21,()=>b,g=>g.question,(g,_)=>{var O=W0(),D=m(O),te=m(D),ae=m(te,!0);h(te);var De=A(te,2);yi(De,{class:"h-5 w-5 transition-transform duration-200 group-open:rotate-180"}),h(D);var de=A(D,2),ue=m(de,!0);h(de),h(O),Q(()=>{G(ae,E(_).question),G(ue,E(_).answer)}),C(g,O)}),h(qu),h(Wu),h(Ta);var Ku=A(Ta,2),Vu=A(m(Ku),2),Xu=m(Vu),ba=A(m(Xu),4),Nr=m(ba);Na(Nr,{title:"Terminal",lang:"bash",code:`npm i -g @devmotion/cli
+devmotion render        # Export MP4`}),h(lt);var $=A(lt,2),Qe=m($);{let g=Y(()=>Ee("/(app)/editor"));Re(Qe,{size:"lg",get href(){return E(g)},get icon(){return Rt},children:(_,O)=>{P();var D=me("Start creating — free");C(_,D)},$$slots:{default:!0}})}var $t=A(Qe,2);{let g=Y(()=>Ee("/(marketing)/docs"));Re($t,{variant:"outline",size:"lg",get href(){return E(g)},get icon(){return ut},children:(_,O)=>{P();var D=me("Get the CLI");C(_,D)},$$slots:{default:!0}})}h($);var qe=A($,4),Ze=m(qe),ft=m(Ze);gs(ft,{class:"h-3 w-3"}),P(),h(Ze);var et=A(Ze,4),tt=m(et);Fi(tt,{class:"h-3 w-3"}),P(),h(et);var at=A(et,4),ht=m(at);st(ht,{class:"h-3 w-3"}),P(),h(at);var mt=A(at,4),Lt=m(mt);Pi(Lt,{class:"h-3 w-3"}),P(),h(mt),h(qe);var Ot=A(qe,2),Et=m(Ot),Dt=m(Et);Jr(Dt,{class:"h-4 w-4"});var Oe=A(Dt,2),Xa=m(Oe),sr=m(Xa);h(Xa),P(),h(Oe),h(Et);var ja=A(Et,2),$a=m(ja);Zr($a,{class:"h-4 w-4"});var za=A($a,2),Ja=m(za),rr=m(Ja);h(Ja),P(),h(za),h(ja),h(Ot),h(Je),h(ze),h(We);var zt=A(We,2),Za=m(zt),eu=m(Za);ke(eu,{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."});var tu=A(eu,2);Pe(tu,21,()=>u,g=>g.title,(g,_)=>{va(g,{get icon(){return E(_).icon},get title(){return E(_).title},get description(){return E(_).description}})}),h(tu),h(Za),h(zt);var Jt=A(zt,2),au=m(Jt),uu=m(au);ke(uu,{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:!0});var Zt=A(uu,2),ea=m(Zt),ta=m(ea),su=m(ta),ir=m(su);st(ir,{class:"h-4 w-4"}),P(),h(su),P(2),h(ta);var ru=A(ta,2);C0(ru,{lang:"html",class:"h-[560px] max-h-[70vh] min-h-96 focus-within:ring-2 focus-within:ring-primary",get value(){return E(q)},set value(g){H(q,g,!0)}});var nr=A(ru,2);{var or=g=>{var _=x0(),O=m(_);h(_),Q(()=>G(O,`⚠ ${E(Se)??""}`)),C(g,_)};V(nr,g=>{E(Se)&&g(or)})}h(ea);var iu=A(ea,2),aa=m(iu),cr=m(aa);as(cr,{class:"h-4 w-4"}),P(),h(aa);var nu=A(aa,2),dr=m(nu);{var lr=g=>{Ju(g,{get project(){return E($e)},mode:"simple",autoplay:!0,get currentTime(){return E(fe)},set currentTime(_){H(fe,_,!0)}})};V(dr,g=>{E($e)&&g(lr)})}h(nu),h(iu),h(Zt);var ou=A(Zt,2),fr=m(ou);{let g=Y(()=>Ee("/(app)/editor"));Re(fr,{variant:"outline",get href(){return E(g)},get icon(){return Rt},children:(_,O)=>{P();var D=me("Open the editor online");C(_,D)},$$slots:{default:!0}})}h(ou),h(au),h(Jt);var ua=A(Jt,2),cu=m(ua),du=m(cu);ke(du,{title:"From terminal to MP4 in three steps",subtitle:"No proprietary format. Just HTML, a CLI, and a render pipeline you can inspect."});var lu=A(du,2),sa=m(lu),fu=m(sa),hr=m(fu);ut(hr,{class:"h-7 w-7 text-primary"}),h(fu),P(4),h(sa);var ra=A(sa,2),hu=m(ra),mr=m(hu);st(mr,{class:"h-7 w-7 text-primary"}),h(hu),P(4),h(ra);var mu=A(ra,2),Eu=m(mu),Er=m(Eu);ei(Er,{class:"h-7 w-7 text-primary"}),h(Eu),P(4),h(mu),h(lu),h(cu),h(ua);var ia=A(ua,2),Tu=m(ia),na=m(Tu),bu=m(na),pu=A(m(bu),2),oa=m(pu),ca=m(oa),Tr=m(ca);ti(Tr,{fontFamily:"Indie Flower",children:(g,_)=>{P();var O=me("Try it!");C(g,O)},$$slots:{default:!0}}),h(ca);var _u=A(ca,2),br=m(_u);Yi(br),h(_u),h(oa);var Au=A(oa,2);Pe(Au,21,()=>I,g=>g.value,(g,_)=>{const O=Y(()=>E(_).icon);var D=L0(),te=m(D);Ht(te,()=>E(O),(Ie,he)=>{he(Ie,{class:"h-4 w-4"})});var ae=A(te,2),De=m(ae,!0);h(ae);var de=A(ae,2),ue=m(de,!0);h(de),h(D),Q(()=>{re(D,1,`group relative flex min-w-20 flex-col items-center gap-1.5 rounded-md px-4 py-2.5 transition-all duration-200 ${E(L)===E(_).value?"bg-primary text-primary-foreground shadow-sm hover:bg-primary/90":"hover:bg-muted/50"}`,"svelte-skv6c4"),He(D,"aria-label",`Switch to ${E(_).desc??""} format`),He(D,"aria-pressed",E(L)===E(_).value),G(De,E(_).label),G(ue,E(_).desc)}),Bt("click",D,()=>H(L,E(_).value)),C(g,D)}),h(Au),h(pu),h(bu),h(na);var da=A(na,2),gu=m(da),pr=m(gu);{var _r=g=>{Ju(g,{get project(){return E(R)},mode:"simple",autoplay:!0})};V(pr,g=>{E(R)&&g(_r)})}h(gu),h(da);var Iu=A(da,2),Nu=m(Iu),Ar=A(m(Nu),2);Pe(Ar,17,()=>gi.filter(g=>["aurora","silk","topographic","aurora-borealis","data-stream"].includes(g.id)),g=>g.id,(g,_)=>{var O=O0(),D=m(O,!0);h(O),Q(()=>{re(O,1,`rounded-full border px-3 py-1 text-xs font-medium transition-all duration-200 ${E(S)===E(_).id?"border-primary bg-primary text-primary-foreground":"border-border bg-background text-muted-foreground hover:border-primary/50 hover:text-foreground"}`,"svelte-skv6c4"),He(O,"title",E(_).description),G(D,E(_).label)}),Bt("click",O,()=>H(S,E(_).id)),C(g,O)}),h(Nu),h(Iu),h(Tu),h(ia);var la=A(ia,2),vu=m(la),Cu=m(vu);ke(Cu,{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."});var Su=A(Cu,2);Pe(Su,21,()=>s,g=>g.title,(g,_)=>{va(g,{get icon(){return E(_).icon},get title(){return E(_).title},get description(){return E(_).description}})}),h(Su),h(vu),h(la);var fa=A(la,2),xu=m(fa),Lu=m(xu);ke(Lu,{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."});var ha=A(Lu,2);Pe(ha,21,()=>n,g=>g.title,(g,_)=>{va(g,{get icon(){return E(_).icon},get title(){return E(_).title},get description(){return E(_).description}})}),h(ha);var Ou=A(ha,2),Du=m(Ou);Na(Du,{title:"One-command setup — no install needed",lang:"bash",code:"npx @devmotion/cli setup"});var Ru=A(Du,4),Pu=m(Ru);{let g=Y(()=>Ee("/(marketing)/docs/mcp"));Re(Pu,{get href(){return E(g)},variant:"default",size:"sm",children:(_,O)=>{P();var D=me("MCP Docs");C(_,D)},$$slots:{default:!0}})}var gr=A(Pu,2);{let g=Y(()=>Ee("/(marketing)/docs"));Re(gr,{get href(){return E(g)},variant:"outline",size:"sm",children:(_,O)=>{P();var D=me("All Docs");C(_,D)},$$slots:{default:!0}})}h(Ru),h(Ou),h(xu),h(fa);var ma=A(fa,2),yu=m(ma),ku=m(yu);ke(ku,{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."});var Mu=A(ku,2),Bu=m(Mu),Hu=A(m(Bu));Pe(Hu,21,()=>l,g=>g.label,(g,_)=>{var O=H0(),D=m(O),te=m(D),ae=m(te),De=A(ae);{var de=w=>{var le=D0();C(w,le)};V(De,w=>{E(_).highlight&&w(de)})}h(te),h(D);var ue=A(D),Ie=m(ue,!0);h(ue);var he=A(ue),Tt=m(he);{var Ke=w=>{var le=R0();C(w,le)},se=w=>{var le=P0();C(w,le)};V(Tt,w=>{E(_).visualEditor?w(Ke):w(se,-1)})}h(he);var Ne=A(he),Ve=m(Ne);{var Cr=w=>{var le=y0();C(w,le)},Sr=w=>{var le=k0();C(w,le)};V(Ve,w=>{E(_).agentNative?w(Cr):w(Sr,-1)})}h(Ne);var pa=A(Ne),xr=m(pa);{var Lr=w=>{var le=M0();C(w,le)},Or=w=>{var le=B0();C(w,le)};V(xr,w=>{E(_).gitFriendly?w(Lr):w(Or,-1)})}h(pa);var _a=A(pa),Dr=m(_a,!0);h(_a);var zu=A(_a),Rr=m(zu,!0);h(zu),h(O),Q(()=>{re(O,1,`border-b border-border/40 transition-colors hover:bg-muted/30 ${E(_).highlight?"bg-primary/5":""}`,"svelte-skv6c4"),re(te,1,`font-semibold ${E(_).highlight?"text-primary":"text-foreground"}`,"svelte-skv6c4"),G(ae,`${E(_).label??""} `),G(Ie,E(_).approach),G(Dr,E(_).license),G(Rr,E(_).pricing)}),C(g,O)}),h(Hu),h(Bu),h(Mu),P(2),h(yu),h(ma);var Ea=A(ma,2),Fu=m(Ea),wu=m(Fu);ke(wu,{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:!0});var Uu=A(wu,2);Pe(Uu,21,()=>c,g=>g.title,(g,_)=>{var O=w0(),D=m(O);{var te=se=>{var Ne=F0(),Ve=m(Ne,!0);h(Ne),Q(()=>G(Ve,E(_).badge)),C(se,Ne)};V(D,se=>{E(_).badge&&se(te)})}var ae=A(D,2),De=m(ae);Ht(De,()=>E(_).icon,(se,Ne)=>{Ne(se,{class:"h-6 w-6 text-primary transition-transform duration-300 group-hover:scale-110"})}),h(ae);var de=A(ae,2),ue=m(de,!0);h(de);var Ie=A(de,2),he=m(Ie,!0);h(Ie);var Tt=A(Ie,2);{var Ke=se=>{Zi(se,{get beforeLabel(){return E(_).beforeAfter.beforeLabel},get afterLabel(){return E(_).beforeAfter.afterLabel},get before(){return E(_).beforeAfter.before},get after(){return E(_).beforeAfter.after},get beforeThumb(){return E(_).beforeAfter.beforeThumb},get afterThumb(){return E(_).beforeAfter.afterThumb}})};V(Tt,se=>{E(_).beforeAfter&&se(Ke)})}h(O),Q(()=>{G(ue,E(_).title),G(he,E(_).description)}),C(g,O)}),h(Uu),h(Fu),h(Ea);var Yu=A(Ea,2);{var Ir=g=>{var _=Y0(),O=m(_),D=m(O),te=m(D);rs(te,{get icon(){return es},class:"mb-6",children:(ue,Ie)=>{P();var he=me("Just launched");C(ue,he)},$$slots:{default:!0}});var ae=A(te,6),De=m(ae);{var de=ue=>{var Ie=U0(),he=be(Ie);{let Ke=Y(()=>Ee("/(app)/editor"));Re(he,{size:"lg",get href(){return E(Ke)},get icon(){return Rt},children:(se,Ne)=>{P();var Ve=me("Start creating — free");C(se,Ve)},$$slots:{default:!0}})}var Tt=A(he,2);{let Ke=Y(()=>Ee("/(marketing)/docs"));Re(Tt,{variant:"outline",size:"lg",get href(){return E(Ke)},get icon(){return ut},children:(se,Ne)=>{P();var Ve=me("Read the docs");C(se,Ve)},$$slots:{default:!0}})}C(ue,Ie)};V(De,ue=>{ue(de,-1)})}h(ae),h(D),h(O),h(_),C(g,_)};V(Yu,g=>{g(Ir,-1)})}var Gu=A(Yu,2);Hr(Gu,{pending:_=>{var O=G0();C(_,O)}},_=>{un(_,{})});var Ta=A(Gu,2),Wu=m(Ta),Qu=m(Wu);ke(Qu,{title:"Frequently Asked Questions"});var qu=A(Qu,2);Pe(qu,21,()=>b,g=>g.question,(g,_)=>{var O=W0(),D=m(O),te=m(D),ae=m(te,!0);h(te);var De=A(te,2);yi(De,{class:"h-5 w-5 transition-transform duration-200 group-open:rotate-180"}),h(D);var de=A(D,2),ue=m(de,!0);h(de),h(O),Q(()=>{G(ae,E(_).question),G(ue,E(_).answer)}),C(g,O)}),h(qu),h(Wu),h(Ta);var Ku=A(Ta,2),Vu=A(m(Ku),2),Xu=m(Vu),ba=A(m(Xu),4),Nr=m(ba);Na(Nr,{title:"Terminal",lang:"bash",code:`npm i -g @devmotion/cli
 devmotion init my-first-video`}),h(ba);var ju=A(ba,2),$u=m(ju);{let g=Y(()=>Ee("/(app)/editor"));Re($u,{size:"lg",get href(){return E(g)},get icon(){return Rt},class:"text-base",children:(_,O)=>{P();var D=me("Start creating — free");C(_,D)},$$slots:{default:!0}})}var vr=A($u,2);{let g=Y(()=>Ee("/(marketing)/docs"));Re(vr,{variant:"outline",size:"lg",get href(){return E(g)},get icon(){return ut},class:"text-base",children:(_,O)=>{P();var D=me("Read the docs");C(_,D)},$$slots:{default:!0}})}h(ju),P(2),h(Xu),h(Vu),h(Ku),P(2),Q((g,_)=>{G(sr,`${g??""}+`),G(rr,`${_??""}+`)},[()=>t.data.stats.totalUsers.toLocaleString(),()=>t.data.stats.totalProjects.toLocaleString()]),C(e,W),Ae()}Ba(["click"]);export{vd as component};

package/studio/client/_app/immutable/nodes/{21.CqSlHdIO.js → 21.BeF6Us05.js}

@@ -1,4 +1,4 @@
-import"../chunks/Ct_92ewg.js";import"../chunks/CRSvvRTA.js";import{p as O,j as le,k as G,o as me,b,e as V,aK as De,$ as Le,s as o,f as t,c as ne,g as W,r as e,n as i,i as c,a7 as Te}from"../chunks/BH1rZqH0.js";import{s as C}from"../chunks/BKx7aQex.js";import{e as je}from"../chunks/BwzC7gXw.js";import{h as He}from"../chunks/DVwuKx4e.js";import{s as p}from"../chunks/DItp427M.js";import{i as Ne}from"../chunks/DVkCj0xi.js";import{r as u}from"../chunks/BgrSU1kg.js";import{C as de}from"../chunks/B3TZrMGu.js";import{C as Re}from"../chunks/DovQv5Ja.js";import{B as F}from"../chunks/Ce2r_KzS.js";import{D as Be,C as Fe,a as Oe}from"../chunks/B-qm-b0r.js";import{s as ce}from"../chunks/Be-ZWJwN.js";import{b as pe,r as ue}from"../chunks/C8kSHBGW.js";import{I as ve}from"../chunks/CVY1v_NI.js";import{M as Ge}from"../chunks/v923JPRk.js";import{F as Ve}from"../chunks/CeJ1Fkyc.js";import{A as M}from"../chunks/DGHx_OMD.js";function We(v,r){O(r,!0);let f=ue(r,["$$slots","$$events","$$legacy"]);const l=[["path",{d:"M12 10v6"}],["path",{d:"M9 13h6"}],["path",{d:"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"}]];ve(v,pe({name:"folder-plus"},()=>f,{get iconNode(){return l},children:(s,g)=>{var n=le(),m=G(n);ce(m,()=>r.children??me),b(s,n)},$$slots:{default:!0}})),V()}function ie(v,r){O(r,!0);let f=ue(r,["$$slots","$$events","$$legacy"]);const l=[["path",{d:"M12 22v-5"}],["path",{d:"M15 8V2"}],["path",{d:"M17 8a1 1 0 0 1 1 1v4a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1z"}],["path",{d:"M9 8V2"}]];ve(v,pe({name:"plug"},()=>f,{get iconNode(){return l},children:(s,g)=>{var n=le(),m=G(n);ce(m,()=>r.children??me),b(s,n)},$$slots:{default:!0}})),V()}var Ee=W('<meta name="description" content="Get started with DevMotion in under a minute. Install the CLI, scaffold a project, edit it in the visual Studio or let an AI agent build it over MCP, and render an MP4 — all locally."/>'),qe=W('<div class="rounded-lg border border-border/60 bg-card/40 p-5"><div class="flex items-center gap-3"><span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary"><!></span> <div class="flex items-baseline gap-2"><span class="text-xs font-semibold text-muted-foreground"> </span> <h3 class="text-lg font-bold text-foreground"> </h3></div></div> <code class="mt-4 block rounded-md bg-muted px-3 py-2 font-mono text-xs text-foreground"> </code> <p class="mt-3 text-sm leading-6 text-muted-foreground"> </p></div>'),ze=W(`<section class="not-prose"><p class="mb-3 text-sm font-medium text-primary">DevMotion Docs</p> <h1 class="text-4xl font-extrabold tracking-tight text-foreground">Your first video, in four commands</h1> <p class="mt-4 max-w-2xl text-lg text-muted-foreground">DevMotion is HTML-first. Scaffold a project, edit it in the visual Studio or let an AI agent
+import"../chunks/Ct_92ewg.js";import"../chunks/CRSvvRTA.js";import{p as O,j as le,k as G,o as me,b,e as V,aK as De,$ as Le,s as o,f as t,c as ne,g as W,r as e,n as i,i as c,a7 as Te}from"../chunks/BH1rZqH0.js";import{s as C}from"../chunks/BKx7aQex.js";import{e as je}from"../chunks/BwzC7gXw.js";import{h as He}from"../chunks/DVwuKx4e.js";import{s as p}from"../chunks/DItp427M.js";import{i as Ne}from"../chunks/DVkCj0xi.js";import{r as u}from"../chunks/DmhMUf0A.js";import{C as de}from"../chunks/B3TZrMGu.js";import{C as Re}from"../chunks/DovQv5Ja.js";import{B as F}from"../chunks/Ce2r_KzS.js";import{D as Be,C as Fe,a as Oe}from"../chunks/B-qm-b0r.js";import{s as ce}from"../chunks/Be-ZWJwN.js";import{b as pe,r as ue}from"../chunks/C8kSHBGW.js";import{I as ve}from"../chunks/CVY1v_NI.js";import{M as Ge}from"../chunks/v923JPRk.js";import{F as Ve}from"../chunks/CeJ1Fkyc.js";import{A as M}from"../chunks/DGHx_OMD.js";function We(v,r){O(r,!0);let f=ue(r,["$$slots","$$events","$$legacy"]);const l=[["path",{d:"M12 10v6"}],["path",{d:"M9 13h6"}],["path",{d:"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"}]];ve(v,pe({name:"folder-plus"},()=>f,{get iconNode(){return l},children:(s,g)=>{var n=le(),m=G(n);ce(m,()=>r.children??me),b(s,n)},$$slots:{default:!0}})),V()}function ie(v,r){O(r,!0);let f=ue(r,["$$slots","$$events","$$legacy"]);const l=[["path",{d:"M12 22v-5"}],["path",{d:"M15 8V2"}],["path",{d:"M17 8a1 1 0 0 1 1 1v4a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1z"}],["path",{d:"M9 8V2"}]];ve(v,pe({name:"plug"},()=>f,{get iconNode(){return l},children:(s,g)=>{var n=le(),m=G(n);ce(m,()=>r.children??me),b(s,n)},$$slots:{default:!0}})),V()}var Ee=W('<meta name="description" content="Get started with DevMotion in under a minute. Install the CLI, scaffold a project, edit it in the visual Studio or let an AI agent build it over MCP, and render an MP4 — all locally."/>'),qe=W('<div class="rounded-lg border border-border/60 bg-card/40 p-5"><div class="flex items-center gap-3"><span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary"><!></span> <div class="flex items-baseline gap-2"><span class="text-xs font-semibold text-muted-foreground"> </span> <h3 class="text-lg font-bold text-foreground"> </h3></div></div> <code class="mt-4 block rounded-md bg-muted px-3 py-2 font-mono text-xs text-foreground"> </code> <p class="mt-3 text-sm leading-6 text-muted-foreground"> </p></div>'),ze=W(`<section class="not-prose"><p class="mb-3 text-sm font-medium text-primary">DevMotion Docs</p> <h1 class="text-4xl font-extrabold tracking-tight text-foreground">Your first video, in four commands</h1> <p class="mt-4 max-w-2xl text-lg text-muted-foreground">DevMotion is HTML-first. Scaffold a project, edit it in the visual Studio or let an AI agent
     build it for you, and render an MP4 — all on your machine. Copy this and go:</p> <div class="mt-6 max-w-2xl"><!></div> <div class="mt-4 flex flex-wrap gap-3"><a class="inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90"><!> Or try the Studio online</a> <a href="#agents" class="inline-flex items-center gap-2 rounded-lg border border-border px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent"><!> Let an AI agent build it</a></div></section> <section class="not-prose mt-16"><h2 class="text-2xl font-bold text-foreground">What each command does</h2> <div class="mt-6 grid gap-4 sm:grid-cols-2"></div> <p class="mt-4 text-sm text-muted-foreground">Stuck? Run <code class="rounded bg-muted px-1 py-0.5 text-xs">devmotion doctor</code> to verify ffmpeg
     and Chromium are wired up.</p></section> <section id="agents" class="not-prose mt-16 scroll-mt-24"><div class="rounded-xl border border-border/60 bg-card/40 p-6 sm:p-8"><div class="flex items-center gap-3"><span class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary"><!></span> <h2 class="text-2xl font-bold text-foreground">Let an AI agent build the video</h2></div> <p class="mt-4 max-w-2xl text-muted-foreground">DevMotion ships a built-in <span class="font-medium text-foreground">MCP server</span>, so
       Claude Code, Cursor, or Windsurf can scaffold, edit, and render video for you. One command

package/studio/client/_app/immutable/nodes/28.BG6e1lUz.js

@@ -0,0 +1,8 @@
+import"../chunks/Ct_92ewg.js";import"../chunks/CRSvvRTA.js";import{s as o,k as a,b as i,g as d,n as c}from"../chunks/BH1rZqH0.js";import{C as r}from"../chunks/B3TZrMGu.js";var l=d('<h1 id="devmotion-mcp-server">DevMotion MCP Server</h1> <p>Let AI assistants build DevMotion videos for you — create projects, add layers, animate, and then render through the CLI or hosted Studio.</p> <p>There are two ways to connect, and <strong>local comes first</strong>:</p> <ul><li><strong>Local (stdio) — the default for devs & agents.</strong> The MCP server runs from the CLI, right inside your project. No account, no network, no tokens. This is what <code>devmotion setup</code> wires up, and it edits your HTML files directly.</li> <li><strong>Remote (cloud HTTP) — optional.</strong> Point any MCP client at the hosted server when you’d rather work against cloud projects in the hosted Studio.</li></ul> <hr/> <h2 id="what-is-mcp">What is MCP?</h2> <p>The <a href="https://modelcontextprotocol.io" rel="nofollow">Model Context Protocol</a> (MCP) is an open standard that lets AI clients interact with external tools and services. By connecting your AI client to DevMotion’s MCP server, the AI can create and edit animation projects on your behalf.</p> <hr/> <h2 id="quick-start-local">Quick start (local)</h2> <p>Inside a DevMotion project (run <code>devmotion init my-video</code> first), run:</p> <!> <p>This installs the Claude Code skills and registers a <strong>local, stdio</strong> MCP server in <code>.claude/settings.local.json</code>:</p> <!> <p>Open your agent and ask it to build a video. The AI calls <code>create_layer</code>, <code>edit_layer</code>, and friends, and every change is written straight back to your HTML files. See <a href="/docs/mcp/setup">AI Coding Assistants</a> for Cursor, Windsurf, and manual config.</p> <blockquote><p>No account, no API key, no quota — the local server runs entirely on your machine.</p></blockquote> <hr/> <h2 id="prefer-the-cloud-remote-http">Prefer the cloud? (remote HTTP)</h2> <p>If you’d rather work against cloud projects in the hosted Studio, connect to the remote endpoint instead:</p> <p><strong>MCP Endpoint:</strong> <code>https://devmotion.app/mcp</code></p> <p>Interactive clients (Claude, Cursor, Windsurf) handle OAuth automatically; programmatic clients use a bearer token from your <a href="/profile">profile page</a>. See <a href="/docs/mcp/setup">AI Coding Assistants</a> for client configs and <a href="/docs/mcp/integrations">Enterprise & Automation</a> for no-code platforms and agent frameworks.</p> <hr/> <h2 id="which-one-should-i-use">Which one should I use?</h2> <table><thead><tr><th>You want to…</th><th>Use</th></tr></thead><tbody><tr><td>Build locally with Claude Code, Cursor, or Windsurf</td><td><strong>Local (stdio)</strong> — <a href="/docs/mcp/setup">AI Coding Assistants →</a></td></tr><tr><td>Work offline, in CI, or with no account</td><td><strong>Local (stdio)</strong> — <a href="/docs/mcp/setup">AI Coding Assistants →</a></td></tr><tr><td>Drive the hosted Studio from your agent</td><td><strong>Remote (HTTP)</strong> — <a href="/docs/mcp/setup">AI Coding Assistants →</a></td></tr><tr><td>Automate from n8n, Make, LangChain, CrewAI, etc.</td><td><strong>Remote (HTTP)</strong> — <a href="/docs/mcp/integrations">Enterprise & Automation →</a></td></tr></tbody></table> <hr/> <h2 id="how-it-works">How it works</h2> <p><strong>1. Connect</strong> — point your client at the local stdio server (<code>npx @devmotion/cli mcp</code>) or the remote endpoint. The AI discovers available tools automatically.</p> <p><strong>2. Create</strong> — ask the AI to build an animation in plain language:</p> <blockquote><p><em>“Create a 1080×1920 TikTok intro with a bold title that slides in and a pulsing accent shape in the background.”</em></p></blockquote> <p><strong>3. Render</strong> — locally with <code>devmotion render</code>, or via the hosted Studio when using the remote server. See the full <a href="/docs/mcp/reference">tool reference</a>.</p>',1);function g(n){var t=l(),e=o(a(t),20);r(e,{title:"Terminal",lang:"bash",code:"npx @devmotion/cli setup"});var s=o(e,4);r(s,{title:".claude/settings.local.json",lang:"json",code:`{
+  "mcpServers": {
+    "devmotion": {
+      "command": "npx",
+      "args": ["@devmotion/cli", "mcp"]
+    }
+  }
+}`}),c(32),i(n,t)}export{g as component};

package/studio/client/_app/immutable/nodes/{3.C68UMDpf.js → 3.67JEtVr_.js}

@@ -1 +1 @@
-import"../chunks/Ct_92ewg.js";import"../chunks/CRSvvRTA.js";import{p as U,l as j,a as Y,d as z,s as i,t as y,b as p,c as P,e as C,h as k,i as e,$ as K,u as d,f as t,g as H,m as R,r,n as A}from"../chunks/BH1rZqH0.js";import{s as Q,a as V}from"../chunks/C8kSHBGW.js";import{s as m}from"../chunks/BKx7aQex.js";import{i as W}from"../chunks/l6_YgvJu.js";import{h as X}from"../chunks/DVwuKx4e.js";import{i as Z}from"../chunks/DVkCj0xi.js";import{p as ee}from"../chunks/Dw0S4s6I.js";import{A as te}from"../chunks/BW3LFrce.js";import{B as D}from"../chunks/BQhvHIBL.js";import{H as re}from"../chunks/bsfLFPc3.js";import{R as oe}from"../chunks/CLfnefMs.js";var se=H('<details class="mt-8 max-w-2xl"><summary class="cursor-pointer text-sm text-muted-foreground hover:text-foreground">Debug Information</summary> <pre class="mt-4 overflow-auto rounded-lg bg-muted p-4 text-xs"> </pre></details>'),ae=H('<div class="flex h-screen w-full flex-col bg-background"><!> <div class="flex flex-1 flex-col items-center justify-center gap-6 p-6"><div class="text-center"><h1 class="text-9xl font-bold text-muted-foreground/20"> </h1></div> <div class="max-w-md space-y-2 text-center"><h2 class="text-2xl font-semibold tracking-tight"> </h2> <p class="text-muted-foreground"> </p></div> <div class="flex items-center gap-3"><!> <!></div> <!></div></div>');function _e(B,F){U(F,!1);const s=()=>V(ee,"$page",I),[I,L]=Q(),n=R(),a=R(),M={404:{title:"Project Not Found",description:"The project you're looking for doesn't exist or has been deleted."},500:{title:"Failed to Load Project",description:"Something went wrong while loading the project. Please try again later."},403:{title:"Access Denied",description:"You don't have permission to view this project."},401:{title:"Login Required",description:"Please log in to access this project."}};j(()=>s(),()=>{k(n,s().status)}),j(()=>(e(n),s()),()=>{k(a,M[e(n)]||{title:"Project Error",description:s().error?.message||"Unable to load the project."})}),Y(),Z();var f=ae();X("f69r50",o=>{z(()=>{K.title=`${e(n)??""} - ${e(a),d(()=>e(a).title)??""} | DevMotion`})});var h=t(f);te(h,{});var _=i(h,2),u=t(_),$=t(u),N=t($,!0);r($),r(u);var v=i(u,2),g=t(v),S=t(g,!0);r(g);var b=i(g,2),q=t(b,!0);r(b),r(v);var x=i(v,2),w=t(x);D(w,{href:"/",get icon(){return re},children:(o,c)=>{A();var l=y("Go Home");p(o,l)},$$slots:{default:!0}});var E=i(w,2);D(E,{variant:"outline",onclick:()=>window.location.reload(),get icon(){return oe},children:(o,c)=>{A();var l=y("Reload Page");p(o,l)},$$slots:{default:!0}}),r(x);var G=i(x,2);{var J=o=>{var c=se(),l=i(t(c),2),O=t(l,!0);r(l),r(c),P(T=>m(O,T),[()=>(s(),d(()=>JSON.stringify(s().error,null,2)))]),p(o,c)};W(G,o=>{s(),d(()=>!1)&&o(J)})}r(_),r(f),P(()=>{m(N,e(n)),m(S,(e(a),d(()=>e(a).title))),m(q,(e(a),d(()=>e(a).description)))}),p(B,f),C(),L()}export{_e as component};
+import"../chunks/Ct_92ewg.js";import"../chunks/CRSvvRTA.js";import{p as U,l as j,a as Y,d as z,s as i,t as y,b as p,c as P,e as C,h as k,i as e,$ as K,u as d,f as t,g as H,m as R,r,n as A}from"../chunks/BH1rZqH0.js";import{s as Q,a as V}from"../chunks/C8kSHBGW.js";import{s as m}from"../chunks/BKx7aQex.js";import{i as W}from"../chunks/l6_YgvJu.js";import{h as X}from"../chunks/DVwuKx4e.js";import{i as Z}from"../chunks/DVkCj0xi.js";import{p as ee}from"../chunks/B7-B7Rye.js";import{A as te}from"../chunks/N203W5Pg.js";import{B as D}from"../chunks/BQhvHIBL.js";import{H as re}from"../chunks/bsfLFPc3.js";import{R as oe}from"../chunks/CLfnefMs.js";var se=H('<details class="mt-8 max-w-2xl"><summary class="cursor-pointer text-sm text-muted-foreground hover:text-foreground">Debug Information</summary> <pre class="mt-4 overflow-auto rounded-lg bg-muted p-4 text-xs"> </pre></details>'),ae=H('<div class="flex h-screen w-full flex-col bg-background"><!> <div class="flex flex-1 flex-col items-center justify-center gap-6 p-6"><div class="text-center"><h1 class="text-9xl font-bold text-muted-foreground/20"> </h1></div> <div class="max-w-md space-y-2 text-center"><h2 class="text-2xl font-semibold tracking-tight"> </h2> <p class="text-muted-foreground"> </p></div> <div class="flex items-center gap-3"><!> <!></div> <!></div></div>');function _e(B,F){U(F,!1);const s=()=>V(ee,"$page",I),[I,L]=Q(),n=R(),a=R(),M={404:{title:"Project Not Found",description:"The project you're looking for doesn't exist or has been deleted."},500:{title:"Failed to Load Project",description:"Something went wrong while loading the project. Please try again later."},403:{title:"Access Denied",description:"You don't have permission to view this project."},401:{title:"Login Required",description:"Please log in to access this project."}};j(()=>s(),()=>{k(n,s().status)}),j(()=>(e(n),s()),()=>{k(a,M[e(n)]||{title:"Project Error",description:s().error?.message||"Unable to load the project."})}),Y(),Z();var f=ae();X("f69r50",o=>{z(()=>{K.title=`${e(n)??""} - ${e(a),d(()=>e(a).title)??""} | DevMotion`})});var h=t(f);te(h,{});var _=i(h,2),u=t(_),$=t(u),N=t($,!0);r($),r(u);var v=i(u,2),g=t(v),S=t(g,!0);r(g);var b=i(g,2),q=t(b,!0);r(b),r(v);var x=i(v,2),w=t(x);D(w,{href:"/",get icon(){return re},children:(o,c)=>{A();var l=y("Go Home");p(o,l)},$$slots:{default:!0}});var E=i(w,2);D(E,{variant:"outline",onclick:()=>window.location.reload(),get icon(){return oe},children:(o,c)=>{A();var l=y("Reload Page");p(o,l)},$$slots:{default:!0}}),r(x);var G=i(x,2);{var J=o=>{var c=se(),l=i(t(c),2),O=t(l,!0);r(l),r(c),P(T=>m(O,T),[()=>(s(),d(()=>JSON.stringify(s().error,null,2)))]),p(o,c)};W(G,o=>{s(),d(()=>!1)&&o(J)})}r(_),r(f),P(()=>{m(N,e(n)),m(S,(e(a),d(()=>e(a).title))),m(q,(e(a),d(()=>e(a).description)))}),p(B,f),C(),L()}export{_e as component};

package/studio/client/_app/immutable/nodes/38.B2-fgBHl.js

@@ -0,0 +1 @@
+import"../chunks/Ct_92ewg.js";import"../chunks/CRSvvRTA.js";import{p as U,s as r,k as V,f as t,c as H,b as N,e as z,g as B,r as e,n as g}from"../chunks/BH1rZqH0.js";import{s as o}from"../chunks/BKx7aQex.js";import{i as G}from"../chunks/DVkCj0xi.js";import{P as a}from"../chunks/BZ5m9NAb.js";var J=B('<h1 id="plans--limits">Plans & Limits</h1> <blockquote><p><strong>The local CLI MCP server is free.</strong> When the server runs from <code>npx @devmotion/cli mcp</code> on your machine (the default — see <a href="/docs/mcp/setup">AI Coding Assistants</a>), there’s no account, plan, or quota. Everything below applies to the <strong>cloud</strong> MCP server at <code>https://devmotion.app/mcp</code>.</p></blockquote> <p>Cloud MCP access requires a <strong>Creator or Pro plan</strong>. All cloud MCP operations run under your DevMotion account — the same limits apply as in the web editor.</p> <hr/> <h2 id="plan-comparison">Plan Comparison</h2> <table><thead><tr><th>Feature</th><th align="center">Free</th><th align="center"> </th><th align="center"> </th></tr></thead><tbody><tr><td>MCP Access</td><td align="center">—</td><td align="center">✓</td><td align="center">✓</td></tr><tr><td>Rate limit</td><td align="center">—</td><td align="center"> </td><td align="center"> </td></tr><tr><td>AI credits/month</td><td align="center">—</td><td align="center"> </td><td align="center"> </td></tr><tr><td>Cloud projects</td><td align="center">—</td><td align="center"> </td><td align="center">Unlimited</td></tr><tr><td>Video exports/month</td><td align="center">—</td><td align="center"> </td><td align="center"> </td></tr><tr><td>Max export res.</td><td align="center">—</td><td align="center"> </td><td align="center"> </td></tr><tr><td>Webhooks</td><td align="center">—</td><td align="center">✓</td><td align="center">✓</td></tr></tbody></table> <blockquote><p><strong>Video exports/month</strong> counts hosted exports across the web editor and REST API. The quota is shared.</p></blockquote> <hr/> <h2 id="how-credits-work">How credits work</h2> <p>AI credits are shared across the web editor and MCP. They are consumed <strong>only by server-side AI features</strong> — things like caption generation and dubbing that require DevMotion’s servers to run an AI model on your behalf.</p> <p>Regular MCP tool calls (<code>create_project</code>, <code>create_layer</code>, <code>edit_layer</code>, etc.) do <strong>not</strong> consume credits. When you use Claude, Cursor, or any other MCP client to build animations, the AI reasoning happens entirely on the client side — DevMotion only executes the resulting tool calls. Credits are only spent if the client invokes a server-side AI tool explicitly.</p> <hr/> <h2 id="account--quota">Account & quota</h2> <blockquote><p>Sign in with the <strong>same DevMotion account</strong> you use in the browser. Projects created via MCP appear in your editor and count toward your plan’s project quota. If you hit the project limit, <code>create_project</code> will return an error until you delete an existing project or upgrade your plan.</p></blockquote> <p><a href="/#pricing">Upgrade your plan →</a></p>',1);function tt(k,w){U(w,!1),G();var v=J(),_=r(V(v),10),n=t(_),x=t(n),i=r(t(x),2),I=t(i);e(i);var y=r(i),j=t(y);e(y),e(x),e(n);var b=r(n),d=r(t(b)),s=r(t(d),2),R=t(s);e(s);var P=r(s),$=t(P);e(P),e(d);var c=r(d),l=r(t(c),2),L=t(l,!0);e(l);var f=r(l),D=t(f,!0);e(f),e(c);var p=r(c),C=r(t(p),2),E=t(C,!0);e(C),g(),e(p);var h=r(p),u=r(t(h),2),T=t(u,!0);e(u);var M=r(u),S=t(M,!0);e(M),e(h);var q=r(h),m=r(t(q),2),W=t(m,!0);e(m);var A=r(m),F=t(A,!0);e(A),e(q),g(),e(b),e(_),g(18),H(()=>{o(I,`Creator ($${a.creator.price??""}/mo)`),o(j,`Pro ($${a.pro.price??""}/mo)`),o(R,`${a.creator.limits.apiRateLimit??""} req/min`),o($,`${a.pro.limits.apiRateLimit??""} req/min`),o(L,a.creator.limits.maxCostPerMonth*100),o(D,a.pro.limits.maxCostPerMonth*100),o(E,a.creator.limits.cloudProjects),o(T,a.creator.limits.exportsPerMonth),o(S,a.pro.limits.exportsPerMonth),o(W,a.creator.limits.maxExportResolution),o(F,a.pro.limits.maxExportResolution)}),N(k,v),z()}export{tt as component};

package/studio/client/_app/immutable/nodes/39.xOE6cIqx.js

@@ -0,0 +1,87 @@
+import"../chunks/Ct_92ewg.js";import"../chunks/CRSvvRTA.js";import{s as e,k as _,b as g,g as f,r as b,n as j}from"../chunks/BH1rZqH0.js";import{h as k}from"../chunks/B0CGBs-v.js";import{C as t}from"../chunks/B3TZrMGu.js";var v=f('<h1 id="tools--keyframes-reference">Tools & Keyframes Reference</h1> <p>Complete reference for all MCP tools exposed by DevMotion and the keyframe animation system.</p> <hr/> <h2 id="available-tools">Available Tools</h2> <table><thead><tr><th>Tool</th><th>Description</th></tr></thead><tbody><tr><td><code>create_project</code></td><td>Create a new animation project</td></tr><tr><td><code>get_project</code></td><td>Inspect project state, layers, and keyframes</td></tr><tr><td><code>create_layer</code></td><td>Add a layer with optional animations and keyframes</td></tr><tr><td><code>edit_layer</code></td><td>Patch an existing layer’s properties or keyframes</td></tr><tr><td><code>remove_layer</code></td><td>Delete a layer from the project</td></tr><tr><td><code>configure_project</code></td><td>Update project dimensions, duration, FPS, background</td></tr><tr><td><code>group_layers</code></td><td>Group multiple layers together</td></tr><tr><td><code>ungroup_layers</code></td><td>Ungroup a layer group</td></tr><tr><td><code>upload_media</code></td><td>Request a presigned upload URL (cloud only)</td></tr><tr><td><code>confirm_media_upload</code></td><td>Confirm a completed upload (cloud only)</td></tr><tr><td><code>import_media</code></td><td>Import media from a public URL (cloud only)</td></tr></tbody></table> <hr/> <h2 id="create_project">create_project</h2> <!> <p>Returns the project <code>id</code> and a preview URL. Use the <code>id</code> in every subsequent call.</p> <hr/> <h2 id="create_layer">create_layer</h2> <p>Creates a complete layer in a single call. The <code>layer</code> field is required and carries the type + props.</p> <!> <!> <h3 id="create_layer-fields">create_layer fields</h3> <table><thead><tr><th>Field</th><th>Type</th><th align="center">Required</th><th>Description</th></tr></thead><tbody><tr><td><code>projectId</code></td><td>string</td><td align="center">✓</td><td>Project to add the layer to</td></tr><tr><td><code>layer</code></td><td>object</td><td align="center">✓</td><td><code>&#123; type, props &#125;</code> — see Layer Types below</td></tr><tr><td><code>name</code></td><td>string</td><td align="center">—</td><td>Display name</td></tr><tr><td><code>transform</code></td><td>object</td><td align="center">—</td><td>Position, scale, rotation, anchor</td></tr><tr><td><code>style</code></td><td>object</td><td align="center">—</td><td>Opacity, blur, filters, drop shadow</td></tr><tr><td><code>enterTime</code></td><td>number</td><td align="center">—</td><td>When the layer appears (seconds, default 0)</td></tr><tr><td><code>exitTime</code></td><td>number</td><td align="center">—</td><td>When the layer disappears (seconds)</td></tr><tr><td><code>animation</code></td><td>object</td><td align="center">—</td><td><code>&#123; preset?, keyframes? &#125;</code> — can use both at once</td></tr></tbody></table> <hr/> <h2 id="edit_layer">edit_layer</h2> <p>Patch-style update — only the fields you provide are changed.</p> <!> <p><code>props</code> are merged with existing props. <code>transform</code> and <code>style</code> replace the entire section if provided.</p> <hr/> <h2 id="remove_layer">remove_layer</h2> <!> <p><code>layerId</code> accepts either the layer’s ID or its display name.</p> <hr/> <h2 id="configure_project">configure_project</h2> <!> <p>All fields are optional. <code>backgroundColor</code> is a hex string.</p> <hr/> <h2 id="group_layers--ungroup_layers">group_layers / ungroup_layers</h2> <!> <!> <hr/> <h2 id="cloud-media-tools">Cloud Media Tools</h2> <p>Local projects use files directly from <code>assets/</code>. The tools below are only available on the cloud MCP server at <code>https://devmotion.app/mcp</code>.</p> <h3 id="upload_media">upload_media</h3> <p>Request a presigned URL for direct upload.</p> <!> <p>Returns <code>upload_url</code>, <code>key</code>, <code>file_url</code>, and <code>asset_id</code>. Upload the file binary to <code>upload_url</code>, then call <code>confirm_media_upload</code>.</p> <h3 id="confirm_media_upload">confirm_media_upload</h3> <!> <p>Use the returned asset URL as <code>src</code> when creating an image, video, or audio layer.</p> <h3 id="import_media">import_media</h3> <!> <p>Imports a public media URL into your DevMotion assets and returns the asset URL to use in layer props.</p> <hr/> <h2 id="layer-types">Layer Types</h2> <table><thead><tr><th>Type</th><th>Key props</th></tr></thead><tbody><tr><td><code>text</code></td><td><code>content</code> (string), <code>fontSize</code>, <code>color</code>, <code>fontFamily</code>, <code>fontWeight</code></td></tr><tr><td><code>shape</code></td><td><code>shapeType</code> (<code>rectangle</code>/<code>ellipse</code>/<code>circle</code>/…), <code>background</code></td></tr><tr><td><code>image</code></td><td><code>src</code> (URL)</td></tr><tr><td><code>video</code></td><td><code>src</code> (URL)</td></tr><tr><td><code>group</code></td><td><em>(no props — use <code>group_layers</code> instead)</em></td></tr></tbody></table> <hr/> <h2 id="keyframe-animation">Keyframe Animation</h2> <p>Layers are animated by adding keyframes at specific times. DevMotion interpolates between them automatically using the easing curve you specify.</p> <p>Pass keyframes inside <code>animation.keyframes</code> when calling <code>create_layer</code>, or add them later with <code>edit_layer</code>.</p> <h3 id="animatable-properties">Animatable Properties</h3> <table><thead><tr><th>Property</th><th>Description</th></tr></thead><tbody><tr><td><code>position.x</code> / <code>position.y</code></td><td>Position in pixels</td></tr><tr><td><code>position.z</code></td><td>Z depth</td></tr><tr><td><code>scale.x</code> / <code>scale.y</code></td><td>Scale (1 = 100%)</td></tr><tr><td><code>rotation.x</code> / <code>rotation.y</code> / <code>rotation.z</code></td><td>Rotation in degrees</td></tr><tr><td><code>opacity</code></td><td>Transparency (0–1)</td></tr><tr><td><code>props.fontSize</code></td><td>Font size (text layers)</td></tr><tr><td><code>props.color</code></td><td>Text color (hex)</td></tr><tr><td><code>props.content</code></td><td>Text content (typewriter)</td></tr></tbody></table> <h3 id="keyframe-schema">Keyframe schema</h3> <p>Each keyframe requires an <code>id</code> (any unique string — DevMotion replaces it internally):</p> <pre class="language-json"></pre> <h3 id="easing-values">Easing Values</h3> <table><thead><tr><th>Value</th><th>Description</th></tr></thead><tbody><tr><td><code>linear</code></td><td>Constant speed</td></tr><tr><td><code>ease-in</code></td><td>Starts slow, ends fast</td></tr><tr><td><code>ease-out</code></td><td>Starts fast, ends slow</td></tr><tr><td><code>ease-in-out</code></td><td>Slow at both ends</td></tr><tr><td><code>bounce</code></td><td>Elastic bounce at end</td></tr></tbody></table> <hr/> <h2 id="example-prompts">Example Prompts</h2> <ul><li><em>“Create a 9:16 product showcase with a phone mockup image, a title, and a price tag that bounces in.”</em></li> <li><em>“Make a lower-third bar with white text on a semi-transparent dark background that slides in from the left.”</em></li> <li><em>“Build a 5-second countdown animation with a large number that scales up and fades out each second.”</em></li> <li><em>“Edit the ‘Headline’ layer to use yellow and add a shake animation.”</em></li></ul>',1);function U(u){var o=v(),d=e(_(o),14);t(d,{title:"create_project",lang:"json",code:`{
+  "name": "TikTok Intro",
+  "width": 1080,
+  "height": 1920
+}`});var a=e(d,10);t(a,{title:"create_layer — text layer with slide-in animation",lang:"json",code:`{
+  "projectId": "your_project_id",
+  "name": "Title",
+  "layer": {
+    "type": "text",
+    "props": {
+      "content": "Hello World",
+      "fontSize": 64,
+      "color": "#ffffff"
+    }
+  },
+  "transform": {
+    "position": { "x": 0, "y": -200 }
+  },
+  "animation": {
+    "keyframes": [
+      { "id": "kf1", "time": 0,   "property": "position.x", "value": -400, "easing": "ease-out" },
+      { "id": "kf2", "time": 0.5, "property": "position.x", "value": 0 }
+    ]
+  }
+}`});var r=e(a,2);t(r,{title:"create_layer — shape with preset animation",lang:"json",code:`{
+  "projectId": "your_project_id",
+  "name": "Accent Shape",
+  "layer": {
+    "type": "shape",
+    "props": {
+      "shapeType": "rectangle",
+      "background": { "type": "solid", "color": "#ff4455" }
+    }
+  },
+  "transform": {
+    "position": { "x": 0, "y": 300 },
+    "scale": { "x": 0.8, "y": 0.1 }
+  },
+  "animation": {
+    "preset": { "id": "fade-in", "startTime": 0.2, "duration": 0.4 }
+  }
+}`});var c=e(r,12);t(c,{title:"edit_layer — update position and color",lang:"json",code:`{
+  "projectId": "your_project_id",
+  "layerId": "layer_abc",
+  "transform": {
+    "position": { "x": 100, "y": -200 }
+  },
+  "props": {
+    "color": "#ffcc00"
+  }
+}`});var n=e(c,8);t(n,{title:"remove_layer",lang:"json",code:`{
+  "projectId": "your_project_id",
+  "layerId": "layer_abc"
+}`});var s=e(n,8);t(s,{title:"configure_project — resize to landscape",lang:"json",code:`{
+  "projectId": "your_project_id",
+  "width": 1920,
+  "height": 1080,
+  "duration": 10,
+  "backgroundColor": "#1a1a2e"
+}`});var i=e(s,8);t(i,{title:"group_layers",lang:"json",code:`{
+  "projectId": "your_project_id",
+  "layerIds": ["layer_abc", "layer_def"],
+  "name": "Background Group"
+}`});var p=e(i,2);t(p,{title:"ungroup_layers",lang:"json",code:`{
+  "projectId": "your_project_id",
+  "groupId": "group_xyz"
+}`});var l=e(p,12);t(l,{title:"upload_media",lang:"json",code:`{
+  "projectId": "your_project_id",
+  "file_name": "demo.mp4",
+  "mime_type": "video/mp4",
+  "file_size": 1234567,
+  "media_type": "video"
+}`});var m=e(l,6);t(m,{title:"confirm_media_upload",lang:"json",code:`{
+  "projectId": "your_project_id",
+  "asset_id": "asset_abc",
+  "key": "uploads/user/demo.mp4",
+  "file_url": "https://assets.devmotion.app/uploads/user/demo.mp4",
+  "original_name": "demo.mp4",
+  "mime_type": "video/mp4",
+  "media_type": "video",
+  "duration": 4.2
+}`});var h=e(m,6);t(h,{title:"import_media",lang:"json",code:`{
+  "projectId": "your_project_id",
+  "url": "https://example.com/demo.mp4",
+  "media_type": "video",
+  "file_name": "demo.mp4"
+}`});var y=e(h,26);k(y,()=>'<code class="language-json"><span class="token punctuation">&#123;</span> <span class="token property">"id"</span><span class="token operator">:</span> <span class="token string">"kf1"</span><span class="token punctuation">,</span> <span class="token property">"time"</span><span class="token operator">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span> <span class="token property">"property"</span><span class="token operator">:</span> <span class="token string">"position.y"</span><span class="token punctuation">,</span> <span class="token property">"value"</span><span class="token operator">:</span> <span class="token number">-200</span><span class="token punctuation">,</span> <span class="token property">"easing"</span><span class="token operator">:</span> <span class="token string">"ease-out"</span> <span class="token punctuation">&#125;</span></code>',!0),b(y),j(10),g(u,o)}export{U as component};

package/studio/client/_app/immutable/nodes/{4.BXcrgjpJ.js → 4.eLOMf6Qo.js}

@@ -1 +1 @@
-import"../chunks/Ct_92ewg.js";import{p as t,o as n,b as p,e as m,f,g as d,r as v}from"../chunks/BH1rZqH0.js";import{s as u}from"../chunks/Be-ZWJwN.js";import{b as c}from"../chunks/Dq1Bw6bH.js";import{i as h}from"../chunks/DkL6aOyN.js";var l=d('<div class="h-screen w-full"><!></div>');function C(e,a){t(a,!0);const r=h();c(({cancel:i})=>{r.hasUnsavedChanges&&(confirm("You have unsaved changes. Are you sure you want to leave?")||i())});var o=l(),s=f(o);u(s,()=>a.children??n),v(o),p(e,o),m()}export{C as component};
+import"../chunks/Ct_92ewg.js";import{p as t,o as n,b as p,e as m,f,g as d,r as v}from"../chunks/BH1rZqH0.js";import{s as u}from"../chunks/Be-ZWJwN.js";import{b as c}from"../chunks/CpZPBLUC.js";import{i as h}from"../chunks/BmyLmh6r.js";var l=d('<div class="h-screen w-full"><!></div>');function C(e,a){t(a,!0);const r=h();c(({cancel:i})=>{r.hasUnsavedChanges&&(confirm("You have unsaved changes. Are you sure you want to leave?")||i())});var o=l(),s=f(o);u(s,()=>a.children??n),v(o),p(e,o),m()}export{C as component};

package/studio/client/_app/immutable/nodes/40.G8LiPkFz.js

@@ -0,0 +1,15 @@
+import"../chunks/Ct_92ewg.js";import"../chunks/CRSvvRTA.js";import{s as e,k as s,b as a,g as l,n as u}from"../chunks/BH1rZqH0.js";import{C as o}from"../chunks/B3TZrMGu.js";var p=l('<h1 id="ai-coding-assistants">AI Coding Assistants</h1> <p>Connect Claude Code, Cursor, or Windsurf to DevMotion. The <strong>local</strong> server is the default — it runs from the CLI inside your project, needs no account, and edits your HTML files directly. Prefer the hosted Studio? Jump to <a href="#use-the-cloud-server-instead">Use the cloud server instead</a>.</p> <hr/> <h2 id="local-setup-recommended">Local setup (recommended)</h2> <h3 id="one-command">One command</h3> <p>Inside a DevMotion project (run <code>devmotion init my-video</code> first if you don’t have one), run:</p> <!> <p>This installs the Claude Code skills (<code>/devmotion-init</code>, <code>/devmotion-add-layer</code>, <code>/devmotion-render</code>) and registers a local <strong>stdio</strong> MCP server in <code>.claude/settings.local.json</code>. That’s it — open Claude Code in the project and ask it to build a video.</p> <h3 id="manual-config-claude-code-cursor-windsurf">Manual config (Claude Code, Cursor, Windsurf)</h3> <p>Every client uses the same local server: it spawns <code>npx @devmotion/cli mcp</code> over stdio. Add this to your client’s MCP config:</p> <!> <table><thead><tr><th>Client</th><th>Config file</th></tr></thead><tbody><tr><td>Claude Code</td><td><code>.claude/settings.json</code> (project)</td></tr><tr><td>Cursor</td><td><code>.cursor/mcp.json</code> (project) or <code>~/.cursor/mcp.json</code></td></tr><tr><td>Windsurf</td><td><code>~/.codeium/windsurf/mcp_config.json</code></td></tr></tbody></table> <blockquote><p>The local server works on the project in your current directory — no account, no API key, no quota. Run commands with <code>npx @devmotion/cli …</code>, or install once with <code>npm i -g @devmotion/cli</code> and drop the <code>npx</code>.</p></blockquote> <hr/> <h2 id="use-the-cloud-server-instead">Use the cloud server instead</h2> <p>Want your agent to drive <strong>cloud</strong> projects in the hosted Studio? Connect to the remote endpoint over HTTP. Authentication is handled via OAuth — no tokens to copy for interactive clients.</p> <h3 id="claude-code-cli">Claude Code (CLI)</h3> <!> <p>On first use, Claude Code prompts you to authenticate in the terminal. After that, DevMotion tools are available in every session.</p> <h3 id="claude-desktop--cursor--windsurf">Claude Desktop · Cursor · Windsurf</h3> <p>These clients reach the remote server through <code>mcp-remote</code>, which handles the OAuth handshake:</p> <!> <p>On first connection, a browser tab opens for the DevMotion login. The session is saved locally and renewed automatically.</p> <blockquote><p>The cloud server runs under your DevMotion account and counts toward your plan. See <a href="/docs/mcp/plans">Plans & Limits</a>.</p></blockquote> <hr/> <h2 id="troubleshooting">Troubleshooting</h2> <p><strong><code>devmotion</code> not found</strong> — use the <code>npx</code> config above, run it directly with <code>npx @devmotion/cli mcp</code>, or install once with <code>npm i -g @devmotion/cli</code>.</p> <p><strong>Local server not connecting</strong> — make sure you ran the client from inside a directory that contains a <code>devmotion.json</code>. The MCP server operates on the project in the current working directory.</p> <p><strong>(Cloud) Browser tab doesn’t open</strong> — run <code>npx mcp-remote https://devmotion.app/mcp</code> directly in your terminal to trigger the OAuth flow manually, then restart your client. Not needed for the Claude Code CLI.</p> <p><strong>(Cloud) “Unauthorized” after login</strong> — your token may have expired. Delete the <code>mcp-remote</code> cache at <code>~/.mcp-remote/</code> and reconnect.</p> <p><strong>(Cloud) Projects not visible in the editor</strong> — confirm you authenticated with the same DevMotion account you use in the browser.</p>',1);function f(c){var t=p(),n=e(s(t),12);o(n,{title:"Terminal",lang:"bash",code:"npx @devmotion/cli setup"});var d=e(n,8);o(d,{title:".claude/settings.json · .cursor/mcp.json · windsurf mcp_config.json",lang:"json",code:`{
+  "mcpServers": {
+    "devmotion": {
+      "command": "npx",
+      "args": ["@devmotion/cli", "mcp"]
+    }
+  }
+}`});var r=e(d,14);o(r,{title:"Terminal",lang:"bash",code:"claude mcp add --transport http devmotion https://devmotion.app/mcp"});var i=e(r,8);o(i,{title:"claude_desktop_config.json · .cursor/mcp.json · windsurf mcp_config.json",lang:"json",code:`{
+  "mcpServers": {
+    "devmotion": {
+      "command": "npx",
+      "args": ["-y", "mcp-remote", "https://devmotion.app/mcp"]
+    }
+  }
+}`}),u(18),a(c,t)}export{f as component};

package/studio/client/_app/immutable/nodes/{41.CnqWY7Jk.js → 41.Ch6s5Jij.js}

@@ -1 +1 @@
-import"../chunks/Ct_92ewg.js";import{p as _e,j as he,k as te,b as m,i as e,s as n,f as s,c as u,e as be,q as g,g as x,r,n as re}from"../chunks/BH1rZqH0.js";import{s as d}from"../chunks/BKx7aQex.js";import{i as b}from"../chunks/l6_YgvJu.js";import{e as f}from"../chunks/BwzC7gXw.js";import{h as ye}from"../chunks/DVwuKx4e.js";import{s as _}from"../chunks/DItp427M.js";import{e as we}from"../chunks/I5GezlI2.js";import{J as B}from"../chunks/BO8xux2v.js";import{S as ke}from"../chunks/DUvwbcGL.js";import{r as ae}from"../chunks/BgrSU1kg.js";var Ce=x('<meta property="og:locale:alternate"/>'),Me=x('<span class="mb-4 inline-block rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold tracking-wider text-primary uppercase"> </span>'),qe=x('<a class="inline-flex items-center gap-2 rounded-lg border px-6 py-3 text-sm font-semibold transition-colors hover:bg-muted"> </a>'),De=x('<div class="rounded-xl border bg-card p-5"><p class="mb-1 text-sm font-semibold"> </p> <p class="text-sm text-muted-foreground"> </p></div>'),Le=x('<li class="flex gap-4"><div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-sm font-bold text-primary-foreground"> </div> <div><p class="font-semibold"> </p> <p class="text-sm text-muted-foreground"> </p></div></li>'),$e=x('<div class="rounded-xl border bg-card p-5"><p class="mb-1 text-sm font-semibold"> </p> <p class="text-sm text-muted-foreground"> </p></div>'),Ae=x('<section class="mb-16"><h2 class="mb-8 text-center text-2xl font-bold">Who Uses This</h2> <div class="grid gap-5 sm:grid-cols-3"></div></section>'),Se=x('<details class="group rounded-xl border bg-card p-5"><summary class="cursor-pointer list-none text-sm font-semibold group-open:text-primary"> </summary> <p class="mt-3 text-sm leading-relaxed text-muted-foreground"> </p></details>'),je=x('<a class="rounded-xl border bg-card p-4 transition-all hover:border-primary/40 hover:shadow-sm"><p class="mb-1 text-sm font-semibold"> </p> <p class="text-xs text-muted-foreground"> </p></a>'),Ne=x('<span class="rounded-full bg-muted px-3 py-1 text-xs text-muted-foreground"> </span>'),Ue=x('<div class="mt-12 flex flex-wrap gap-2"></div>'),Be=x('<!>  <!> <!> <!> <div class="container mx-auto max-w-4xl px-4 py-16 sm:px-6 lg:px-8"><nav class="mb-10 flex items-center gap-1.5 text-xs text-muted-foreground"><a class="hover:text-foreground">Home</a> <span>/</span> <a class="hover:text-foreground">Video Translator</a> <span>/</span> <span class="text-foreground"> </span></nav> <div class="mb-16 text-center"><!> <h1 class="mb-5 text-4xl font-extrabold tracking-tight sm:text-5xl"> </h1> <p class="mx-auto mb-8 max-w-2xl text-lg text-muted-foreground"> </p> <div class="flex flex-wrap justify-center gap-3"><a class="inline-flex items-center gap-2 rounded-lg bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground transition-opacity hover:opacity-90"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></a> <!></div></div> <section class="mb-16"><h2 class="mb-8 text-center text-2xl font-bold"> </h2> <div class="grid gap-5 sm:grid-cols-2"></div></section> <section class="mb-16"><h2 class="mb-8 text-center text-2xl font-bold"> </h2> <ol class="space-y-6"></ol></section> <!> <section class="mb-16"><h2 class="mb-8 text-2xl font-bold">Frequently Asked Questions</h2> <div class="space-y-4"></div></section> <section class="mb-16"><h2 class="mb-6 text-xl font-bold">More Languages & Tools</h2> <div class="grid gap-4 sm:grid-cols-3"></div></section> <div class="rounded-2xl bg-primary/5 px-8 py-10 text-center"><h2 class="mb-2 text-xl font-bold"> </h2> <p class="mb-6 text-muted-foreground">Free to try. No install. No credit card required.</p> <a href="/tools/translate-video" class="inline-flex items-center gap-2 rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-primary-foreground transition-opacity hover:opacity-90">Dub my video <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></a></div> <!></div>',1);function ze(oe,I){_e(I,!0);const o=g(()=>I.data.page),T=we.PUBLIC_BASE_URL;var W=Be();ye("hle26n",t=>{var a=he(),i=te(a);{var l=v=>{var p=Ce();u(()=>_(p,"content",e(o).languageCode)),m(v,p)};b(i,v=>{e(o).languageCode&&v(l)})}m(t,a)});var E=te(W);{let t=g(()=>e(o).seo.keywords.join(", ")),a=g(()=>e(o).seo.og.image??void 0);ke(E,{get title(){return`${e(o).seo.title??""} — DevMotion`},get description(){return e(o).seo.description},get keywords(){return e(t)},get canonical(){return e(o).seo.canonical},get image(){return e(a)},get twitterTitle(){return e(o).seo.twitter.title},get twitterDescription(){return e(o).seo.twitter.description},get twitterCard(){return e(o).seo.twitter.card}})}var F=n(E,2);{let t=g(()=>({"@context":"https://schema.org","@type":"SoftwareApplication",name:e(o).seo.title,description:e(o).seo.description,url:e(o).seo.canonical,applicationCategory:"MultimediaApplication",operatingSystem:"Web",offers:{"@type":"Offer",price:"0",priceCurrency:"USD"},inLanguage:e(o).languageCode,author:{"@type":"Organization",name:"DevMotion",url:T}}));B(F,{get item(){return e(t)}})}var H=n(F,2);{let t=g(()=>({"@context":"https://schema.org","@type":"BreadcrumbList",itemListElement:[{"@type":"ListItem",position:1,name:"Home",item:T},{"@type":"ListItem",position:2,name:e(o).seo.title,item:e(o).seo.canonical}]}));B(H,{get item(){return e(t)}})}var P=n(H,2);{let t=g(()=>({"@context":"https://schema.org","@type":"FAQPage",mainEntity:e(o).faq.map(a=>({"@type":"Question",name:a.question,acceptedAnswer:{"@type":"Answer",text:a.answer}}))}));B(P,{get item(){return e(t)}})}var Q=n(P,2),w=s(Q),V=s(w),J=n(V,4),O=n(J,4),se=s(O,!0);r(O),r(w);var k=n(w,2),z=s(k);{var ie=t=>{var a=Me(),i=s(a,!0);r(a),u(()=>d(i,e(o).hero.badge)),m(t,a)};b(z,t=>{e(o).hero.badge&&t(ie)})}var C=n(z,2),ne=s(C,!0);r(C);var M=n(C,2),le=s(M,!0);r(M);var R=n(M,2),y=s(R),de=s(y);re(),r(y);var pe=n(y,2);{var ve=t=>{var a=qe(),i=s(a,!0);r(a),u(()=>{_(a,"href",e(o).hero.secondaryCta.href),d(i,e(o).hero.secondaryCta.text)}),m(t,a)};b(pe,t=>{e(o).hero.secondaryCta&&t(ve)})}r(R),r(k);var q=n(k,2),D=s(q),ce=s(D);r(D);var Y=n(D,2);f(Y,21,()=>e(o).features,t=>t.title,(t,a)=>{var i=De(),l=s(i),v=s(l,!0);r(l);var p=n(l,2),c=s(p,!0);r(p),r(i),u(()=>{d(v,e(a).title),d(c,e(a).description)}),m(t,i)}),r(Y),r(q);var L=n(q,2),$=s(L),me=s($);r($);var G=n($,2);f(G,21,()=>e(o).howItWorks,t=>t.step,(t,a)=>{var i=Le(),l=s(i),v=s(l,!0);r(l);var p=n(l,2),c=s(p),N=s(c,!0);r(c);var h=n(c,2),U=s(h,!0);r(h),r(p),r(i),u(()=>{d(v,e(a).step),d(N,e(a).name),d(U,e(a).text)}),m(t,i)}),r(G),r(L);var K=n(L,2);{var xe=t=>{var a=Ae(),i=n(s(a),2);f(i,21,()=>e(o).useCases,l=>l.title,(l,v)=>{var p=$e(),c=s(p),N=s(c,!0);r(c);var h=n(c,2),U=s(h,!0);r(h),r(p),u(()=>{d(N,e(v).title),d(U,e(v).description)}),m(l,p)}),r(i),r(a),m(t,a)};b(K,t=>{e(o).useCases&&e(o).useCases.length>0&&t(xe)})}var A=n(K,2),X=n(s(A),2);f(X,21,()=>e(o).faq,t=>t.question,(t,a)=>{var i=Se(),l=s(i),v=s(l,!0);r(l);var p=n(l,2),c=s(p,!0);r(p),r(i),u(()=>{d(v,e(a).question),d(c,e(a).answer)}),m(t,i)}),r(X),r(A);var S=n(A,2),Z=n(s(S),2);f(Z,21,()=>e(o).relatedPages,t=>t.href,(t,a)=>{var i=je(),l=s(i),v=s(l,!0);r(l);var p=n(l,2),c=s(p,!0);r(p),r(i),u(()=>{_(i,"href",e(a).href),d(v,e(a).title),d(c,e(a).description)}),m(t,i)}),r(Z),r(S);var j=n(S,2),ee=s(j),ue=s(ee);r(ee),re(4),r(j);var ge=n(j,2);{var fe=t=>{var a=Ue();f(a,20,()=>e(o).seo.keywords,i=>i,(i,l)=>{var v=Ne(),p=s(v,!0);r(v),u(()=>d(p,l)),m(i,v)}),r(a),m(t,a)};b(ge,t=>{e(o).seo.keywords.length&&t(fe)})}r(Q),u((t,a)=>{_(V,"href",t),_(J,"href",a),d(se,e(o).languageName),d(ne,e(o).hero.headline),d(le,e(o).hero.subheadline),_(y,"href",e(o).hero.cta.href),d(de,`${e(o).hero.cta.text??""} `),d(ce,`Why Use DevMotion to Dub Videos to ${e(o).languageName??""}`),d(me,`How to Dub Your Video to ${e(o).languageName??""}`),d(ue,`Start dubbing to ${e(o).languageName??""} now`)},[()=>ae("/"),()=>ae("/tools/translate-video")]),m(oe,W),be()}export{ze as component};
+import"../chunks/Ct_92ewg.js";import{p as _e,j as he,k as te,b as m,i as e,s as n,f as s,c as u,e as be,q as g,g as x,r,n as re}from"../chunks/BH1rZqH0.js";import{s as d}from"../chunks/BKx7aQex.js";import{i as b}from"../chunks/l6_YgvJu.js";import{e as f}from"../chunks/BwzC7gXw.js";import{h as ye}from"../chunks/DVwuKx4e.js";import{s as _}from"../chunks/DItp427M.js";import{e as we}from"../chunks/CXbT2p8d.js";import{J as B}from"../chunks/BO8xux2v.js";import{S as ke}from"../chunks/BD1Q_3Tu.js";import{r as ae}from"../chunks/DmhMUf0A.js";var Ce=x('<meta property="og:locale:alternate"/>'),Me=x('<span class="mb-4 inline-block rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold tracking-wider text-primary uppercase"> </span>'),qe=x('<a class="inline-flex items-center gap-2 rounded-lg border px-6 py-3 text-sm font-semibold transition-colors hover:bg-muted"> </a>'),De=x('<div class="rounded-xl border bg-card p-5"><p class="mb-1 text-sm font-semibold"> </p> <p class="text-sm text-muted-foreground"> </p></div>'),Le=x('<li class="flex gap-4"><div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-sm font-bold text-primary-foreground"> </div> <div><p class="font-semibold"> </p> <p class="text-sm text-muted-foreground"> </p></div></li>'),$e=x('<div class="rounded-xl border bg-card p-5"><p class="mb-1 text-sm font-semibold"> </p> <p class="text-sm text-muted-foreground"> </p></div>'),Ae=x('<section class="mb-16"><h2 class="mb-8 text-center text-2xl font-bold">Who Uses This</h2> <div class="grid gap-5 sm:grid-cols-3"></div></section>'),Se=x('<details class="group rounded-xl border bg-card p-5"><summary class="cursor-pointer list-none text-sm font-semibold group-open:text-primary"> </summary> <p class="mt-3 text-sm leading-relaxed text-muted-foreground"> </p></details>'),je=x('<a class="rounded-xl border bg-card p-4 transition-all hover:border-primary/40 hover:shadow-sm"><p class="mb-1 text-sm font-semibold"> </p> <p class="text-xs text-muted-foreground"> </p></a>'),Ne=x('<span class="rounded-full bg-muted px-3 py-1 text-xs text-muted-foreground"> </span>'),Ue=x('<div class="mt-12 flex flex-wrap gap-2"></div>'),Be=x('<!>  <!> <!> <!> <div class="container mx-auto max-w-4xl px-4 py-16 sm:px-6 lg:px-8"><nav class="mb-10 flex items-center gap-1.5 text-xs text-muted-foreground"><a class="hover:text-foreground">Home</a> <span>/</span> <a class="hover:text-foreground">Video Translator</a> <span>/</span> <span class="text-foreground"> </span></nav> <div class="mb-16 text-center"><!> <h1 class="mb-5 text-4xl font-extrabold tracking-tight sm:text-5xl"> </h1> <p class="mx-auto mb-8 max-w-2xl text-lg text-muted-foreground"> </p> <div class="flex flex-wrap justify-center gap-3"><a class="inline-flex items-center gap-2 rounded-lg bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground transition-opacity hover:opacity-90"> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></a> <!></div></div> <section class="mb-16"><h2 class="mb-8 text-center text-2xl font-bold"> </h2> <div class="grid gap-5 sm:grid-cols-2"></div></section> <section class="mb-16"><h2 class="mb-8 text-center text-2xl font-bold"> </h2> <ol class="space-y-6"></ol></section> <!> <section class="mb-16"><h2 class="mb-8 text-2xl font-bold">Frequently Asked Questions</h2> <div class="space-y-4"></div></section> <section class="mb-16"><h2 class="mb-6 text-xl font-bold">More Languages & Tools</h2> <div class="grid gap-4 sm:grid-cols-3"></div></section> <div class="rounded-2xl bg-primary/5 px-8 py-10 text-center"><h2 class="mb-2 text-xl font-bold"> </h2> <p class="mb-6 text-muted-foreground">Free to try. No install. No credit card required.</p> <a href="/tools/translate-video" class="inline-flex items-center gap-2 rounded-lg bg-primary px-5 py-2.5 text-sm font-semibold text-primary-foreground transition-opacity hover:opacity-90">Dub my video <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></a></div> <!></div>',1);function ze(oe,I){_e(I,!0);const o=g(()=>I.data.page),T=we.PUBLIC_BASE_URL;var W=Be();ye("hle26n",t=>{var a=he(),i=te(a);{var l=v=>{var p=Ce();u(()=>_(p,"content",e(o).languageCode)),m(v,p)};b(i,v=>{e(o).languageCode&&v(l)})}m(t,a)});var E=te(W);{let t=g(()=>e(o).seo.keywords.join(", ")),a=g(()=>e(o).seo.og.image??void 0);ke(E,{get title(){return`${e(o).seo.title??""} — DevMotion`},get description(){return e(o).seo.description},get keywords(){return e(t)},get canonical(){return e(o).seo.canonical},get image(){return e(a)},get twitterTitle(){return e(o).seo.twitter.title},get twitterDescription(){return e(o).seo.twitter.description},get twitterCard(){return e(o).seo.twitter.card}})}var F=n(E,2);{let t=g(()=>({"@context":"https://schema.org","@type":"SoftwareApplication",name:e(o).seo.title,description:e(o).seo.description,url:e(o).seo.canonical,applicationCategory:"MultimediaApplication",operatingSystem:"Web",offers:{"@type":"Offer",price:"0",priceCurrency:"USD"},inLanguage:e(o).languageCode,author:{"@type":"Organization",name:"DevMotion",url:T}}));B(F,{get item(){return e(t)}})}var H=n(F,2);{let t=g(()=>({"@context":"https://schema.org","@type":"BreadcrumbList",itemListElement:[{"@type":"ListItem",position:1,name:"Home",item:T},{"@type":"ListItem",position:2,name:e(o).seo.title,item:e(o).seo.canonical}]}));B(H,{get item(){return e(t)}})}var P=n(H,2);{let t=g(()=>({"@context":"https://schema.org","@type":"FAQPage",mainEntity:e(o).faq.map(a=>({"@type":"Question",name:a.question,acceptedAnswer:{"@type":"Answer",text:a.answer}}))}));B(P,{get item(){return e(t)}})}var Q=n(P,2),w=s(Q),V=s(w),J=n(V,4),O=n(J,4),se=s(O,!0);r(O),r(w);var k=n(w,2),z=s(k);{var ie=t=>{var a=Me(),i=s(a,!0);r(a),u(()=>d(i,e(o).hero.badge)),m(t,a)};b(z,t=>{e(o).hero.badge&&t(ie)})}var C=n(z,2),ne=s(C,!0);r(C);var M=n(C,2),le=s(M,!0);r(M);var R=n(M,2),y=s(R),de=s(y);re(),r(y);var pe=n(y,2);{var ve=t=>{var a=qe(),i=s(a,!0);r(a),u(()=>{_(a,"href",e(o).hero.secondaryCta.href),d(i,e(o).hero.secondaryCta.text)}),m(t,a)};b(pe,t=>{e(o).hero.secondaryCta&&t(ve)})}r(R),r(k);var q=n(k,2),D=s(q),ce=s(D);r(D);var Y=n(D,2);f(Y,21,()=>e(o).features,t=>t.title,(t,a)=>{var i=De(),l=s(i),v=s(l,!0);r(l);var p=n(l,2),c=s(p,!0);r(p),r(i),u(()=>{d(v,e(a).title),d(c,e(a).description)}),m(t,i)}),r(Y),r(q);var L=n(q,2),$=s(L),me=s($);r($);var G=n($,2);f(G,21,()=>e(o).howItWorks,t=>t.step,(t,a)=>{var i=Le(),l=s(i),v=s(l,!0);r(l);var p=n(l,2),c=s(p),N=s(c,!0);r(c);var h=n(c,2),U=s(h,!0);r(h),r(p),r(i),u(()=>{d(v,e(a).step),d(N,e(a).name),d(U,e(a).text)}),m(t,i)}),r(G),r(L);var K=n(L,2);{var xe=t=>{var a=Ae(),i=n(s(a),2);f(i,21,()=>e(o).useCases,l=>l.title,(l,v)=>{var p=$e(),c=s(p),N=s(c,!0);r(c);var h=n(c,2),U=s(h,!0);r(h),r(p),u(()=>{d(N,e(v).title),d(U,e(v).description)}),m(l,p)}),r(i),r(a),m(t,a)};b(K,t=>{e(o).useCases&&e(o).useCases.length>0&&t(xe)})}var A=n(K,2),X=n(s(A),2);f(X,21,()=>e(o).faq,t=>t.question,(t,a)=>{var i=Se(),l=s(i),v=s(l,!0);r(l);var p=n(l,2),c=s(p,!0);r(p),r(i),u(()=>{d(v,e(a).question),d(c,e(a).answer)}),m(t,i)}),r(X),r(A);var S=n(A,2),Z=n(s(S),2);f(Z,21,()=>e(o).relatedPages,t=>t.href,(t,a)=>{var i=je(),l=s(i),v=s(l,!0);r(l);var p=n(l,2),c=s(p,!0);r(p),r(i),u(()=>{_(i,"href",e(a).href),d(v,e(a).title),d(c,e(a).description)}),m(t,i)}),r(Z),r(S);var j=n(S,2),ee=s(j),ue=s(ee);r(ee),re(4),r(j);var ge=n(j,2);{var fe=t=>{var a=Ue();f(a,20,()=>e(o).seo.keywords,i=>i,(i,l)=>{var v=Ne(),p=s(v,!0);r(v),u(()=>d(p,l)),m(i,v)}),r(a),m(t,a)};b(ge,t=>{e(o).seo.keywords.length&&t(fe)})}r(Q),u((t,a)=>{_(V,"href",t),_(J,"href",a),d(se,e(o).languageName),d(ne,e(o).hero.headline),d(le,e(o).hero.subheadline),_(y,"href",e(o).hero.cta.href),d(de,`${e(o).hero.cta.text??""} `),d(ce,`Why Use DevMotion to Dub Videos to ${e(o).languageName??""}`),d(me,`How to Dub Your Video to ${e(o).languageName??""}`),d(ue,`Start dubbing to ${e(o).languageName??""} now`)},[()=>ae("/"),()=>ae("/tools/translate-video")]),m(oe,W),be()}export{ze as component};

package/studio/client/_app/immutable/nodes/{42.CReCUw0y.js → 42.BAbXjzhO.js}

@@ -1 +1 @@
-import"../chunks/Ct_92ewg.js";import{p as j,k as _,s as n,b as s,i as e,f as l,e as $,q as b,g as v,j as tt,c as y,r as i}from"../chunks/BH1rZqH0.js";import{s as et,a as at}from"../chunks/C8kSHBGW.js";import{s as P}from"../chunks/BKx7aQex.js";import{i as w}from"../chunks/l6_YgvJu.js";import{e as rt}from"../chunks/BwzC7gXw.js";import{h as ot}from"../chunks/DVwuKx4e.js";import{s as S}from"../chunks/DItp427M.js";import{p as it}from"../chunks/Dw0S4s6I.js";import{S as nt}from"../chunks/DUvwbcGL.js";import{J as st}from"../chunks/BO8xux2v.js";import{g as lt}from"../chunks/Dq1Bw6bH.js";import{P as mt,a as dt,b as ct}from"../chunks/C8EXIwcU.js";import{r as ut}from"../chunks/BgrSU1kg.js";import{e as gt}from"../chunks/I5GezlI2.js";import{a as vt,p as pt}from"../chunks/CvEPOTmC.js";var ft=v('<link rel="prev"/>'),xt=v('<link rel="prev"/>'),ht=v('<link rel="next"/>'),_t=v("<!> <!>",1),bt=v('<div class="rounded-3xl border border-dashed border-muted-foreground/20 bg-muted/10 py-20 text-center"><p class="text-2xl font-light text-muted-foreground">No projects found.</p> <p class="mt-2 text-sm text-muted-foreground">Check back later for new creations!</p></div>'),yt=v('<!> <div class="flex flex-1 flex-col gap-3 p-5"><h3 class="line-clamp-1 text-lg font-semibold tracking-tight text-foreground transition-colors group-hover:text-primary"> </h3> <div class="mt-auto flex items-center justify-between border-t border-border/40 pt-3 text-sm text-muted-foreground"><div class="flex items-center gap-2"><div class="flex h-6 w-6 items-center justify-center rounded-full bg-linear-to-tr from-indigo-500 to-purple-500 text-[10px] font-bold text-white"> </div> <span class="max-w-[100px] truncate"> </span></div> <span class="text-xs opacity-70"> </span></div></div>',1),Pt=v('<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"></div>'),wt=v('<!> <!> <div class="flex-1 bg-background text-foreground"><div class="container mx-auto px-4 py-16 sm:px-6 lg:px-8"><div class="mb-16 space-y-4 text-center"><h1 class="bg-linear-to-r from-primary to-purple-400 bg-clip-text text-4xl font-extrabold tracking-tight text-transparent md:text-5xl lg:text-6xl">Community Gallery</h1> <p class="mx-auto max-w-2xl text-xl text-muted-foreground">Discover motion graphics and animations built with DevMotion. All created in the browser.</p></div> <!> <!></div></div>',1);function qt(R,a){j(a,!0);const W=()=>at(it,"$page",q),[q,H]=et(),D=gt.PUBLIC_BASE_URL,p=b(()=>`${D}/gallery`),N=b(()=>a.data.currentPage===1?e(p):`${e(p)}?page=${a.data.currentPage}`);function T(r){if(r<1||r>a.data.pages)return;const t=new URL(W().url);t.searchParams.set("page",String(r)),lt(t.toString())}var I=wt();ot("9wb0xp",r=>{var t=_t(),m=_(t);{var o=d=>{var c=tt(),x=_(c);{var h=u=>{var g=ft();y(()=>S(g,"href",e(p))),s(u,g)},f=u=>{var g=xt();y(()=>S(g,"href",`${e(p)??""}?page=${a.data.currentPage-1}`)),s(u,g)};w(x,u=>{a.data.currentPage===2?u(h):u(f,-1)})}s(d,c)};w(m,d=>{a.data.currentPage>1&&d(o)})}var k=n(m,2);{var U=d=>{var c=ht();y(()=>S(c,"href",`${e(p)??""}?page=${a.data.currentPage+1}`)),s(d,c)};w(k,d=>{a.data.currentPage<a.data.pages&&d(U)})}s(r,t)});var M=_(I);nt(M,{title:"Community Gallery - Motion Graphics Showcase | DevMotion",get description(){return`Explore ${a.data.total??""} motion graphics and animations created with DevMotion. Browse professional projects from our community, get inspired, and see what's possible in your browser.`},get canonical(){return e(N)}});var A=n(M,2);{let r=b(()=>({"@context":"https://schema.org","@type":"CollectionPage",name:"DevMotion Community Gallery",description:"Showcase of motion graphics and animations created with DevMotion. Discover professional projects, creative animations, and inspiring visual content from our community.",url:e(p),mainEntity:{"@type":"ItemList",numberOfItems:a.data.total,itemListElement:a.data.projects.map((t,m)=>({"@type":"ListItem",position:(a.data.currentPage-1)*12+m+1,item:{"@type":"CreativeWork",name:t.name,url:pt(t.id),thumbnailUrl:t.thumbnailUrl||vt(t.id),author:{"@type":"Person",name:t.user?.name||"Anonymous Creator"},dateModified:new Date(t.updatedAt).toISOString(),interactionStatistic:{"@type":"InteractionCounter",interactionType:{"@type":"WatchAction"},userInteractionCount:t.views}}}))},breadcrumb:{"@type":"BreadcrumbList",itemListElement:[{"@type":"ListItem",position:1,name:"Home",item:D},{"@type":"ListItem",position:2,name:"Gallery",item:e(p)}]}}));st(A,{get item(){return e(r)}})}var E=n(A,2),G=l(E),B=n(l(G),2);{var z=r=>{var t=bt();s(r,t)},F=r=>{var t=Pt();rt(t,21,()=>a.data.projects,m=>m.id,(m,o)=>{{let k=b(()=>ut("/(app)/editor/p/[id]",{id:e(o).id}));dt(m,{get href(){return e(k)},children:(U,d)=>{var c=yt(),x=_(c);ct(x,{get thumbnailUrl(){return e(o).thumbnailUrl},get name(){return e(o).name},get views(){return e(o).views},get isMcp(){return e(o).isMcp},class:"rounded-none"});var h=n(x,2),f=l(h),u=l(f,!0);i(f);var g=n(f,2),C=l(g),L=l(C),Q=l(L,!0);i(L);var O=n(L,2),V=l(O,!0);i(O),i(C);var J=n(C,2),X=l(J,!0);i(J),i(g),i(h),y((Y,Z)=>{P(u,e(o).name),P(Q,Y),P(V,e(o).user?.name||"Anonymous"),P(X,Z)},[()=>(e(o).user?.name||"?")[0].toUpperCase(),()=>new Date(e(o).updatedAt).toLocaleDateString()]),s(U,c)},$$slots:{default:!0}})}}),i(t),s(r,t)};w(B,r=>{a.data.projects.length===0?r(z):r(F,-1)})}var K=n(B,2);mt(K,{get currentPage(){return a.data.currentPage},get totalPages(){return a.data.pages},onPageChange:T,variant:"full"}),i(G),i(E),s(R,I),$(),H()}export{qt as component};
+import"../chunks/Ct_92ewg.js";import{p as j,k as _,s as n,b as s,i as e,f as l,e as $,q as b,g as v,j as tt,c as y,r as i}from"../chunks/BH1rZqH0.js";import{s as et,a as at}from"../chunks/C8kSHBGW.js";import{s as P}from"../chunks/BKx7aQex.js";import{i as w}from"../chunks/l6_YgvJu.js";import{e as rt}from"../chunks/BwzC7gXw.js";import{h as ot}from"../chunks/DVwuKx4e.js";import{s as S}from"../chunks/DItp427M.js";import{p as it}from"../chunks/B7-B7Rye.js";import{S as nt}from"../chunks/BD1Q_3Tu.js";import{J as st}from"../chunks/BO8xux2v.js";import{g as lt}from"../chunks/CpZPBLUC.js";import{P as mt,a as dt,b as ct}from"../chunks/C8EXIwcU.js";import{r as ut}from"../chunks/DmhMUf0A.js";import{e as gt}from"../chunks/CXbT2p8d.js";import{a as vt,p as pt}from"../chunks/ovnFo7rR.js";var ft=v('<link rel="prev"/>'),xt=v('<link rel="prev"/>'),ht=v('<link rel="next"/>'),_t=v("<!> <!>",1),bt=v('<div class="rounded-3xl border border-dashed border-muted-foreground/20 bg-muted/10 py-20 text-center"><p class="text-2xl font-light text-muted-foreground">No projects found.</p> <p class="mt-2 text-sm text-muted-foreground">Check back later for new creations!</p></div>'),yt=v('<!> <div class="flex flex-1 flex-col gap-3 p-5"><h3 class="line-clamp-1 text-lg font-semibold tracking-tight text-foreground transition-colors group-hover:text-primary"> </h3> <div class="mt-auto flex items-center justify-between border-t border-border/40 pt-3 text-sm text-muted-foreground"><div class="flex items-center gap-2"><div class="flex h-6 w-6 items-center justify-center rounded-full bg-linear-to-tr from-indigo-500 to-purple-500 text-[10px] font-bold text-white"> </div> <span class="max-w-[100px] truncate"> </span></div> <span class="text-xs opacity-70"> </span></div></div>',1),Pt=v('<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"></div>'),wt=v('<!> <!> <div class="flex-1 bg-background text-foreground"><div class="container mx-auto px-4 py-16 sm:px-6 lg:px-8"><div class="mb-16 space-y-4 text-center"><h1 class="bg-linear-to-r from-primary to-purple-400 bg-clip-text text-4xl font-extrabold tracking-tight text-transparent md:text-5xl lg:text-6xl">Community Gallery</h1> <p class="mx-auto max-w-2xl text-xl text-muted-foreground">Discover motion graphics and animations built with DevMotion. All created in the browser.</p></div> <!> <!></div></div>',1);function qt(R,a){j(a,!0);const W=()=>at(it,"$page",q),[q,H]=et(),D=gt.PUBLIC_BASE_URL,p=b(()=>`${D}/gallery`),N=b(()=>a.data.currentPage===1?e(p):`${e(p)}?page=${a.data.currentPage}`);function T(r){if(r<1||r>a.data.pages)return;const t=new URL(W().url);t.searchParams.set("page",String(r)),lt(t.toString())}var I=wt();ot("9wb0xp",r=>{var t=_t(),m=_(t);{var o=d=>{var c=tt(),x=_(c);{var h=u=>{var g=ft();y(()=>S(g,"href",e(p))),s(u,g)},f=u=>{var g=xt();y(()=>S(g,"href",`${e(p)??""}?page=${a.data.currentPage-1}`)),s(u,g)};w(x,u=>{a.data.currentPage===2?u(h):u(f,-1)})}s(d,c)};w(m,d=>{a.data.currentPage>1&&d(o)})}var k=n(m,2);{var U=d=>{var c=ht();y(()=>S(c,"href",`${e(p)??""}?page=${a.data.currentPage+1}`)),s(d,c)};w(k,d=>{a.data.currentPage<a.data.pages&&d(U)})}s(r,t)});var M=_(I);nt(M,{title:"Community Gallery - Motion Graphics Showcase | DevMotion",get description(){return`Explore ${a.data.total??""} motion graphics and animations created with DevMotion. Browse professional projects from our community, get inspired, and see what's possible in your browser.`},get canonical(){return e(N)}});var A=n(M,2);{let r=b(()=>({"@context":"https://schema.org","@type":"CollectionPage",name:"DevMotion Community Gallery",description:"Showcase of motion graphics and animations created with DevMotion. Discover professional projects, creative animations, and inspiring visual content from our community.",url:e(p),mainEntity:{"@type":"ItemList",numberOfItems:a.data.total,itemListElement:a.data.projects.map((t,m)=>({"@type":"ListItem",position:(a.data.currentPage-1)*12+m+1,item:{"@type":"CreativeWork",name:t.name,url:pt(t.id),thumbnailUrl:t.thumbnailUrl||vt(t.id),author:{"@type":"Person",name:t.user?.name||"Anonymous Creator"},dateModified:new Date(t.updatedAt).toISOString(),interactionStatistic:{"@type":"InteractionCounter",interactionType:{"@type":"WatchAction"},userInteractionCount:t.views}}}))},breadcrumb:{"@type":"BreadcrumbList",itemListElement:[{"@type":"ListItem",position:1,name:"Home",item:D},{"@type":"ListItem",position:2,name:"Gallery",item:e(p)}]}}));st(A,{get item(){return e(r)}})}var E=n(A,2),G=l(E),B=n(l(G),2);{var z=r=>{var t=bt();s(r,t)},F=r=>{var t=Pt();rt(t,21,()=>a.data.projects,m=>m.id,(m,o)=>{{let k=b(()=>ut("/(app)/editor/p/[id]",{id:e(o).id}));dt(m,{get href(){return e(k)},children:(U,d)=>{var c=yt(),x=_(c);ct(x,{get thumbnailUrl(){return e(o).thumbnailUrl},get name(){return e(o).name},get views(){return e(o).views},get isMcp(){return e(o).isMcp},class:"rounded-none"});var h=n(x,2),f=l(h),u=l(f,!0);i(f);var g=n(f,2),C=l(g),L=l(C),Q=l(L,!0);i(L);var O=n(L,2),V=l(O,!0);i(O),i(C);var J=n(C,2),X=l(J,!0);i(J),i(g),i(h),y((Y,Z)=>{P(u,e(o).name),P(Q,Y),P(V,e(o).user?.name||"Anonymous"),P(X,Z)},[()=>(e(o).user?.name||"?")[0].toUpperCase(),()=>new Date(e(o).updatedAt).toLocaleDateString()]),s(U,c)},$$slots:{default:!0}})}}),i(t),s(r,t)};w(B,r=>{a.data.projects.length===0?r(z):r(F,-1)})}var K=n(B,2);mt(K,{get currentPage(){return a.data.currentPage},get totalPages(){return a.data.pages},onPageChange:T,variant:"full"}),i(G),i(E),s(R,I),$(),H()}export{qt as component};