https://mstudio.ai/build/assets/AfterEffectsPage.BEdN39x8.js

1import{r as m}from"./rolldown-runtime.C1f3BsDW.js";import"./inertia.BE4YqsTM.js";import{i as b}from"./http.DWpeO7Ui.js";import{Dn as h,Qn as u,Qr as f,St as w,W as v,Xt as p,r as y}from"./icons.ChOq_Y4q.js";import{t as N}from"./react-core.CAMe6Z4j.js";import"./utils.CgzVjNgC.js";import"./state.L8kQliOB.js";import{k as l}from"./entry-client.DX3aUoe5.js";import"./dist.CoNAZqlp.js";import"./dist.DxccqHSW.js";import"./dist.D4237Rk6.js";import"./dist.BhzTvz6X.js";import"./es2015.Cr2X04_P.js";import"./dist.C1cc-Zbw.js";import"./badge.CK53iWwP.js";import"./dropdown-menu.D1MnQ7U0.js";import{t as k}from"./SEO.gPDL2mFy.js";import"./useRoute.D5WEuP_a.js";import"./useStartCreatingHref.BVwqKiRT.js";import"./gsap.BxN_RF7A.js";import{t as i}from"./RevealOnScroll.Bzi3Q9FE.js";import"./logo.7ZVhR9ER.js";import{t as S}from"./Footer.Ccp81B1O.js";import{t as M}from"./Header.C54sFzrK.js";import{a as E,i as A,n as C,o as L,r as _,t as W}from"./MarketingHero.CGOgM9co.js";/* empty css                   */var n=m(f(),1),H=b.create({baseURL:"/api/v1",headers:{"Content-Type":"application/json",Accept:"application/json"},timeout:3e4,withCredentials:!0});const D={getLatestRelease:t=>H.get("/after-effects-release",{params:t?{platform:t}:void 0}).then(s=>s.data)};var e=m(N(),1),O=({downloadAsset:t,isLoading:s,platform:r})=>{const d=s?"Checking latest version…":t?`Download ${(r==="macos"?"macOS":r==="windows"?"Windows":r==="linux"?"Linux":"")||"latest"}`:"Download beta";return(0,e.jsxs)("section",{className:`${W} border-b border-border/50`,children:[(0,e.jsx)(A,{}),(0,e.jsxs)("div",{className:"relative z-10 mx-auto max-w-5xl text-center",children:[(0,e.jsx)(_,{children:"Compatible with After Effects 2024+"}),(0,e.jsx)(L,{accent:"Sync everywhere.",children:"Edit in After Effects."}),(0,e.jsx)(E,{className:"mx-auto",children:"M Studio Sync is a bidirectional After Effects plugin that brings your M Studio storyboards into AE with full compositing power. Edit, render, and sync changes back to the cloud."}),(0,e.jsxs)(C,{className:"justify-center",children:[(0,e.jsx)(l,{asChild:!0,variant:"default",size:"lg",className:"gap-2",disabled:s,children:(0,e.jsxs)("a",{href:s?"#":t?.browser_download_url??"https://github.com/ModelsLab/mstudio-AE-plugin/releases",target:"_blank",rel:"noopener noreferrer",className:s?"pointer-events-none opacity-50":"",children:[s?(0,e.jsx)(p,{className:"w-5 h-5 animate-spin"}):(0,e.jsx)(u,{className:"w-5 h-5"}),d]})}),(0,e.jsx)(l,{asChild:!0,variant:"outline",size:"lg",className:"gap-2 border-border/50",children:(0,e.jsxs)("a",{href:"https://github.com/ModelsLab/mstudio-AE-plugin",target:"_blank",rel:"noopener noreferrer",children:[(0,e.jsx)(h,{className:"w-5 h-5"}),"View on GitHub"]})})]}),(0,e.jsxs)("div",{className:"mt-6 flex flex-wrap justify-center gap-x-6 gap-y-2 text-xs text-muted-foreground",children:[(0,e.jsxs)("span",{className:"inline-flex items-center gap-2",children:[(0,e.jsx)(w,{className:"w-4 h-4 text-accent"})," Standalone installers"]}),(0,e.jsxs)("span",{className:"inline-flex items-center gap-2",children:[(0,e.jsx)(y,{className:"w-4 h-4 text-accent"})," macOS & Windows"]}),(0,e.jsxs)("span",{className:"inline-flex items-center gap-2",children:[(0,e.jsx)(v,{className:"w-4 h-4 text-accent"})," Open source"]})]})]})]})},P=[{title:"Two-way sync",description:"Pull film data from M Studio into AE, then push your edits back to the cloud. Changes flow both ways.",icon:t=>(0,e.jsxs)("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",...t,children:[(0,e.jsx)("path",{d:"M7 10h14"}),(0,e.jsx)("path",{d:"M21 6H7"}),(0,e.jsx)("path",{d:"M3 14v-4a4 4 0 0 1 4-4h14"}),(0,e.jsx)("path",{d:"M17 14h-14"}),(0,e.jsx)("path",{d:"M3 18h14"}),(0,e.jsx)("path",{d:"M21 10v4a4 4 0 0 1-4 4h-14"}),(0,e.jsx)("polyline",{points:"17 7 14 10 17 13"}),(0,e.jsx)("polyline",{points:"7 17 10 14 7 11"})]})},{title:"Delta sync",description:"Only transfer what changed. Incremental sync saves time and bandwidth by detecting and syncing just the changed shots and audio tracks.",icon:t=>(0,e.jsxs)("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",...t,children:[(0,e.jsx)("path",{d:"M12 2v4"}),(0,e.jsx)("path",{d:"m5 5 2.83 2.83"}),(0,e.jsx)("path",{d:"m19 5-2.83 2.83"}),(0,e.jsx)("path",{d:"M22 12h-4"}),(0,e.jsx)("path",{d:"m19 20-2.83-2.83"}),(0,e.jsx)("path",{d:"m5 20 2.83-2.83"}),(0,e.jsx)("path",{d:"M2 12h4"}),(0,e.jsx)("circle",{cx:"12",cy:"12",r:"3"})]})},{title:"Render on push",description:"When you push changes, the plugin automatically renders the affected frame region to video and uploads it for your team.",icon:t=>(0,e.jsxs)("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",...t,children:[(0,e.jsx)("rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",ry:"2"}),(0,e.jsx)("circle",{cx:"9",cy:"9",r:"2"}),(0,e.jsx)("path",{d:"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"}),(0,e.jsx)("path",{d:"M3 16l4-5a1 1 0 0 1 1.5 0l3 3.5"})]})},{title:"Conflict resolution",description:"Working on the same shot in AE and the browser? Choose per shot: keep server, keep local, or review manually.",icon:t=>(0,e.jsxs)("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",...t,children:[(0,e.jsx)("path",{d:"M3 16v-2a2 2 0 0 1 2-2h14"}),(0,e.jsx)("path",{d:"M18 14v3a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-2"}),(0,e.jsx)("path",{d:"M21 8v10h-3V5a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v3"})]})},{title:"Audio sync",description:"Voiceovers, music, and SFX tracks sync with their timing, volume, trim points, and fades preserved exactly between AE and M Studio.",icon:t=>(0,e.jsxs)("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",...t,children:[(0,e.jsx)("path",{d:"M2 10v3"}),(0,e.jsx)("path",{d:"M6 6v11"}),(0,e.jsx)("path",{d:"M10 3v18"}),(0,e.jsx)("path",{d:"M14 8v7"}),(0,e.jsx)("path",{d:"M18 5v13"}),(0,e.jsx)("path",{d:"M22 10v3"})]})}

1,{title:"Standalone installers",description:"No Node.js, npm, or build tools required. Download a native installer for macOS or Windows and start syncing.",icon:t=>(0,e.jsxs)("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",...t,children:[(0,e.jsx)("path",{d:"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"}),(0,e.jsx)("polyline",{points:"7 10 12 15 17 10"}),(0,e.jsx)("line",{x1:"12",x2:"12",y1:"15",y2:"3"})]})}],F=()=>(0,e.jsx)("section",{id:"features",className:"py-24 sm:py-32 border-b border-border/50",children:(0,e.jsxs)("div",{className:"max-w-6xl mx-auto px-4 sm:px-6",children:[(0,e.jsx)(i,{children:(0,e.jsxs)("div",{className:"text-center mb-16 sm:mb-20",children:[(0,e.jsx)("p",{className:"mb-6 text-xs font-semibold uppercase tracking-wider text-accent",children:"Features"}),(0,e.jsx)("h2",{className:"text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-foreground mb-4",children:"Everything you need to sync"}),(0,e.jsx)("p",{className:"text-base sm:text-lg text-muted-foreground max-w-2xl mx-auto",children:"Designed for motion designers who need to move fast between storyboarding and compositing."})]})}),(0,e.jsx)("div",{className:"grid gap-6 sm:grid-cols-2 lg:grid-cols-3",children:P.map((t,s)=>(0,e.jsx)(i,{delay:s*120,children:(0,e.jsxs)("div",{className:"group relative p-6 sm:p-8 rounded-2xl border border-border/50 bg-card hover:border-accent/40 hover:bg-secondary/80 transition-all duration-500",children:[(0,e.jsx)("div",{className:"w-12 h-12 rounded-xl bg-secondary border border-border/50 flex items-center justify-center text-accent mb-5 group-hover:border-accent/30 group-hover:bg-secondary transition-colors",children:(0,e.jsx)(t.icon,{className:"w-6 h-6"})}),(0,e.jsx)("h3",{className:"text-lg font-semibold text-foreground mb-2",children:t.title}),(0,e.jsx)("p",{className:"text-sm text-muted-foreground leading-relaxed",children:t.description})]})},t.title))})]})}),x=[{number:"01",title:"Download the installer",description:"Grab a standalone installer for macOS or Windows from the latest GitHub release — no Node.js required."},{number:"02",title:"Run the installer",description:"Double-click the installer to enable CEP debug mode, copy the required scripts, and register the plugin with After Effects."},{number:"03",title:"Open AE and connect",description:"Restart AE, open Window → Extensions → M Studio Sync. Paste your M Studio API key, click Test Connection, and choose a film."},{number:"04",title:"Start syncing",description:"Hit Full Sync to pull your storyboard into AE as compositions, layers, and markers. Edit freely. Push changes anytime."}],R=()=>(0,e.jsx)("section",{id:"how-it-works",className:"py-24 sm:py-32 border-b border-border/50",children:(0,e.jsxs)("div",{className:"max-w-5xl mx-auto px-4 sm:px-6",children:[(0,e.jsx)(i,{children:(0,e.jsxs)("div",{className:"text-center mb-16 sm:mb-20",children:[(0,e.jsx)("p",{className:"mb-6 text-xs font-semibold uppercase tracking-wider text-accent",children:"Get started"}),(0,e.jsx)("h2",{className:"text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-foreground mb-4",children:"Four steps to your first sync"}),(0,e.jsx)("p",{className:"text-base sm:text-lg text-muted-foreground max-w-2xl mx-auto",children:"From download to first sync, step by step."})]})}),(0,e.jsx)("div",{className:"grid gap-8 sm:grid-cols-2 lg:grid-cols-4",children:x.map((t,s)=>(0,e.jsx)(i,{delay:s*150,children:(0,e.jsxs)("div",{className:"relative",children:[(0,e.jsx)("div",{className:"mb-5",children:(0,e.jsx)("span",{className:"text-4xl sm:text-5xl font-black text-border",children:t.number})}),(0,e.jsx)("h3",{className:"text-lg font-semibold text-foreground mb-2",children:t.title}),(0,e.jsx)("p",{className:"text-sm text-muted-foreground leading-relaxed",children:t.description}),s<x.length-1&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{className:"hidden lg:block absolute top-8 right-0 w-[calc(100%-3rem)] h-px bg-border"}),(0,e.jsx)("div",{className:"hidden lg:block absolute -right-3 top-6 w-5 h-5 border-t border-r border-border rotate-45"})]})]})},t.number))})]})}),B=()=>

1{const[t,s]=(0,n.useState)(null),[r,d]=(0,n.useState)(!0),[g,j]=(0,n.useState)("unknown"),c=(0,n.useCallback)(()=>{const a=navigator.userAgent;return a.includes("Mac")?"macos":a.includes("Win")?"windows":a.includes("Linux")?"linux":"unknown"},[]);return(0,n.useEffect)(()=>{const a=c();j(a),D.getLatestRelease(a).then(o=>{o.success&&o.data?.download&&s(o.data.download)}).catch(o=>{console.error("Failed to fetch AE plugin release:",o)}).finally(()=>{d(!1)})},[c]),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(k,{title:"M Studio Sync — After Effects plugin",description:"M Studio Sync: two-way sync between M Studio and Adobe After Effects. Edit storyboards in AE, sync to the cloud.",canonical:"/features/ae-plugin"}),(0,e.jsx)(M,{}),(0,e.jsxs)("main",{className:"dark",children:[(0,e.jsx)(O,{downloadAsset:t,isLoading:r,platform:g}),(0,e.jsx)(F,{}),(0,e.jsx)(R,{}),(0,e.jsx)("section",{className:"py-24 sm:py-32 border-b border-border/50",children:(0,e.jsx)("div",{className:"max-w-4xl mx-auto px-4 sm:px-6 text-center",children:(0,e.jsxs)(i,{children:[(0,e.jsx)("h2",{className:"text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-foreground mb-6",children:"Ready to bridge AE and M Studio?"}),(0,e.jsx)("p",{className:"text-lg text-muted-foreground max-w-2xl mx-auto mb-10",children:"Install the plugin, connect your M Studio account, and start editing storyboards with full compositing power inside After Effects."}),(0,e.jsxs)("div",{className:"flex flex-col sm:flex-row items-center justify-center gap-4",children:[(0,e.jsx)(l,{asChild:!0,variant:"default",size:"lg",className:"gap-2",disabled:r,children:(0,e.jsxs)("a",{href:r?"#":t?.browser_download_url??"https://github.com/ModelsLab/mstudio-AE-plugin/releases",target:"_blank",rel:"noopener noreferrer",className:r?"pointer-events-none opacity-50":"",children:[r?(0,e.jsx)(p,{className:"w-5 h-5 animate-spin"}):(0,e.jsx)(u,{className:"w-5 h-5"}),r?"Checking version…":t?"Download latest":"Download"]})}),(0,e.jsx)(l,{asChild:!0,variant:"outline",size:"lg",className:"gap-2 border-border/50",children:(0,e.jsxs)("a",{href:"https://github.com/ModelsLab/mstudio-AE-plugin",target:"_blank",rel:"noopener noreferrer",children:[(0,e.jsx)(h,{className:"w-5 h-5"}),"Documentation"]})})]})]})})})]}),(0,e.jsx)(S,{})]})},me=B;export{me as default};