https://mstudio.ai/build/assets/BlogPostPage.CRd15v4x.js

1import{r as S}from"./rolldown-runtime.C1f3BsDW.js";import{i as M,t as N}from"./inertia.BE4YqsTM.js";import"./http.DWpeO7Ui.js";import{Qr as F}from"./icons.ChOq_Y4q.js";import{t as R}from"./react-core.CAMe6Z4j.js";import"./utils.CgzVjNgC.js";import"./state.L8kQliOB.js";import{M as B,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 E}from"./SEO.gPDL2mFy.js";import{t as y}from"./CtaMicrocopy.D3zGPrw8.js";import{t as L}from"./useRoute.D5WEuP_a.js";import{t as H}from"./useStartCreatingHref.BVwqKiRT.js";import"./logo.7ZVhR9ER.js";import{t as D}from"./Footer.Ccp81B1O.js";import{t as q}from"./Header.C54sFzrK.js";import{n as U,t as w}from"./TopicNextStep.BeNxsr-x.js";var d=S(F(),1),e=S(R(),1),V=typeof window>"u"?d.useEffect:d.useLayoutEffect,K=new Intl.DateTimeFormat("en-US",{year:"numeric",month:"long",day:"numeric",timeZone:"Asia/Kolkata"}),X=new Intl.DateTimeFormat("en-US",{month:"short",day:"numeric",year:"numeric",timeZone:"Asia/Kolkata"}),k=(c,r=K)=>{const m=new Date(c);return Number.isNaN(m.getTime())?"":r.format(m)},Z=()=>{const c=L(),{post:r,posts:m,prev:x,next:u,reading_time:j,seo:s,blog_schema:_}=M().props,[p,T]=(0,d.useState)([]),[g,$]=(0,d.useState)(!1),o=(0,d.useRef)(null),C=H(),i=r.cta_link&&!/^https?:\/\/(www\.)?mstudio\.ai\/?$/.test(r.cta_link)&&r.cta_link!=="/"?r.cta_link:C;V(()=>{if(!o.current)return;const t=o.current.querySelectorAll("h2, h3, h4, h5, h6");t.forEach((n,a)=>{n.id||(n.id=`heading-${a}`)}),T(Array.from(t));const b=Array.from(o.current.querySelectorAll("h2"));if(b.length>=4&&!o.current.querySelector("[data-mid-cta]")){const n=b[Math.floor(b.length/2)],a=document.createElement("div");a.setAttribute("data-mid-cta","true"),a.className="not-prose my-12 overflow-hidden rounded-2xl border border-primary/30 bg-gradient-to-br from-primary/10 via-card/60 to-accent/10 p-6 sm:p-8",a.innerHTML=`
2        <div class="grid gap-5 sm:grid-cols-[1fr_auto] sm:items-center">
3          <div>
4            <p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-primary/80 mb-2">
5              Try this workflow yourself
6            </p>
7            <h3 class="text-xl font-bold leading-tight text-foreground sm:text-2xl">
8              First cut in one session.
9            </h3>
10            <p class="mt-2 text-sm leading-6 text-muted-foreground sm:text-base">
11              Paste a script or scene idea and get storyboard pictures, animatic timing, voice, music, and an MP4 export, all in one browser tab.
12            </p>
13            <p class="mt-3 text-xs text-muted-foreground">
14              Plans from $27/mo · 100% refund within 24h · Cancel anytime
15            </p>
16          </div>
17          <a href="${i.replace(/"/g,"&quot;")}" class="${B({size:"lg"})} flex-none">
18            Start now
19          </a>
20        </div>
21      `,n.parentNode?.insertBefore(a,n)}},[i]);const I=(r.body??"").includes("/features/ai-storyboard-generator"),f=`/blog/${r.category?.slug}/${r.slug}`,h=!!U[f],A=k(r.created_at),P=s.canonical,v=encodeURIComponent(P),z=encodeURIComponent(r.title);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(E,{title:s.title,description:s.description,keywords:s.keywords,ogImage:s.image,ogType:"article",canonical:s.canonical,structuredData:_,article:{publishedTime:s.published_time,modifiedTime:s.modified_time,author:s.author_name,section:s.section}}),(0,e.jsx)(q,{}),(0,e.jsx)("main",{className:"min-h-screen bg-background",children:(0,e.jsxs)("div",{className:"mx-auto max-w-7xl px-4 py-36 sm:px-6 lg:px-8",children:[(0,e.jsx)("nav",{"aria-label":"breadcrumb",className:"mb-8",children:(0,e.jsxs)("ol",{className:"flex items-center gap-2 text-sm text-muted-foreground",children:[(0,e.jsx)("li",{children:(0,e.jsx)("a",{href:"/",className:"transition-colors hover:text-foreground",children:"Home"})}),(0,e.jsx)("li",{children:"›"}),(0,e.jsx)("li",{children:(0,e.jsx)("a",{href:c("blog.index"),className:"transition-colors hover:text-foreground",children:"Blog"})}),(0,e.jsx)("li",{children:"›"}),(0,e.jsx)("li",{className:"truncate text-foreground",children:r.title})]})}),(0,e.jsxs)("div",{className:"mb-12 grid grid-cols-1 gap-8 lg:grid-cols-2",children:[(0,e.jsxs)("div",{className:"flex flex-col justify-center gap-4",children:[r.category?.name&&(0,e.jsx)("span",{className:"w-fit text-xs font-semibold uppercase tracking-wider text-muted-foreground",children:r.category.name}),(0,e.jsx)("h1",{className:"text-3xl font-bold leading-tight text-foreground lg:text-4xl",children:r.title}),(0,e.jsxs)("div",{className:"flex flex-wrap items-center gap-3 text-sm text-muted-foreground",children:[r.user?.avatar&&(0,e.jsx)("img",{src:r.user.avatar,alt:r.user.name??"",className:"size-7 rounded-full object-cover"}),r.user?.name&&(0,e.jsx)("span",{className:"font-medium text-foreground",children:r.user.name}),r.user?.name&&(0,e.jsx)("span",{className:"text-border",children:"|"}),(0,e.jsx)("time",{dateTime:r.created_at,children:A}),j>0&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("span",{className:"text-border",children:"|"}),(0,e.jsxs)("span",{children:[j," min read"]})]})]})]}),r.thumbnail&&(0,e.jsx)("figure",{className:"hidden overflow-hidden rounded-xl lg:block",children:(0,e.jsx)("img",{src:r.thumbnail,alt:r.title,className:"aspect-video w-full object-cover"})})]}),(0,e.jsxs)("div",{className:"grid grid-cols-1 gap-8 lg:grid-cols-4",children:[(0,e.jsxs)("div",{className:"col-span-full lg:col-span-3",children:[h&&(0,e.jsx)(w,{path:f,className:"mb-10"}),r.cta_link&&!h&&(0,e.jsxs)("div",{className:"relative mb-10 overflow-hidden rounded-2xl border border-primary/25 bg-gradient-to-br from-primary/10 via-card/60 to-accent/10 p-6 sm:p-8",children:[(0,e.jsxs)("div",{className:"absolute inset-0 pointer-events-none","aria-hidden":"true",children:[(0,e.jsx)("div",{className:"absolute -top-20 -left-16 h-[220px] w-[220px] rounded-full bg-primary/15 blur-[110px]"}),(0,e.jsx)("div",{className:"absolute -bottom-20 -right-12 h-[200px] w-[200px] rounded-full bg-accent/15 blur-[100px]"})]}),(0,e.jsxs)("div",{className:"relative grid gap-6 sm:grid-cols-[1.25fr_1fr] sm:items-center",children:[(0,e.jsxs)("div",{children:[(0,e.jsx)("p",{className:"text-[11px] font-semibold uppercase tracking-[0.22em] text-primary/80",children:"Try M Studio now"}),(0,e.jsxs)("h2",{className:"mt-4 text-2xl font-bold leading-tight text-foreground sm:text-3xl",children:["Turn this idea into a storyboard"," ",(0,e.jsx)("span",{className:"bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent",children:"in one session."})]}),(0,e.jsx)("p",{className:"mt-3 max-w-xl text-sm leading-6 text-muted-foreground sm:text-base",children:"Paste a script, generate shot-by-shot frames with AI, layer voice and sound, and export a client-ready animatic — all in one browser tab."}),(0,e.jsxs)("div",{className:"mt-6 flex flex-col gap-3 sm:flex-row sm:items-center",children:[(0,e.jsx)(l,{asChild:!0,size:"lg",children:(0,e.jsxs)("a",{href:i,children:["Start now",(0,e.jsx)("span",{"aria-hidden":"true",children:"→"})]})}),(0,e.jsx)(l,{asChild:!0,variant:"outline",size:"lg",children:(0,e.jsx)("a",{href:"/features/ai-storyboard-generator",children:"See features"})})]}),(0,e.jsx)(y,{className:"mt-4 justify-start"})]}),(0,e.jsx)("ul",{className:"grid gap-2.5 rounded-xl border border-border/60 bg-background/50 p-4 text-sm sm:p-5",children:["Script → storyboard → animatic","AI image + video in one timeline","Voice, music & SFX built in","Client-ready MP4 exports"].map(t=>(0,e.jsxs)("li",{className:"flex items-start gap-2.5 leading-6 text-muted-foreground",children:[(0,e.jsx)("span",{className:"mt-1 flex size-4 flex-none items-center justify-center rounded-full bg-primary/15 text-primary",children:(0,e.jsx)("svg",{viewBox:"0 0 20 20",fill:"currentColor",className:"size-3","aria-hidden":"true",children:(0,e.jsx)("path",{fillRule:"evenodd",d:"M16.704 5.29a1 1 0 010 1.42l-7.5 7.5a1 1 0 01-1.42 0l-3.5-3.5a1 1 0 011.42-1.42L8.5 12.08l6.79-6.79a1 1 0 011.414 0z",clipRule:"evenodd"})})}

21),(0,e.jsx)("span",{className:"text-foreground/90",children:t})]},t))})]})]}),r.thumbnail&&(0,e.jsx)("figure",{className:"mb-10 overflow-hidden rounded-xl lg:hidden",children:(0,e.jsx)("img",{src:r.thumbnail,alt:r.title,loading:"lazy",className:"aspect-video w-full object-cover"})}),p.length>0&&(0,e.jsxs)(l,{onClick:()=>$(!g),variant:"outline",className:"mb-4",children:[g?"▲":"▼"," Table of Contents"]}),g&&p.length>0&&(0,e.jsx)("nav",{className:"mb-8 rounded-xl border border-border bg-card/50 p-5",children:(0,e.jsx)("ul",{className:"space-y-2 pl-4",children:p.map(t=>(0,e.jsx)("li",{style:{paddingLeft:`${(parseInt(t.tagName[1])-2)*16}px`},children:(0,e.jsx)("button",{onClick:()=>document.getElementById(t.id)?.scrollIntoView({behavior:"smooth",block:"center"}),className:"rounded-md text-left text-sm text-muted-foreground transition-colors hover:text-foreground outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",children:t.textContent})},t.id))})}),(0,e.jsx)("article",{ref:o,className:"blog-prose prose prose-invert max-w-none",dangerouslySetInnerHTML:{__html:r.body??""}}),!I&&(0,e.jsxs)("p",{className:"mt-10 flex flex-wrap items-center gap-x-2 gap-y-1 rounded-xl border border-border bg-card/50 px-4 py-3 text-sm text-muted-foreground",children:[(0,e.jsx)("span",{className:"text-[11px] font-semibold uppercase tracking-[0.22em] text-primary/80",children:"Related feature"}),(0,e.jsxs)("span",{children:["Turn a script into a storyboard with the"," ",(0,e.jsx)(N,{href:"/features/ai-storyboard-generator",className:"font-medium text-foreground underline decoration-primary/50 underline-offset-4 transition-colors hover:text-primary",children:"AI storyboard generator"}),", or see"," ",(0,e.jsx)(N,{href:c("pricing"),className:"font-medium text-foreground underline decoration-primary/50 underline-offset-4 transition-colors hover:text-primary",children:"plans and pricing"}),"."]})]}),h&&(0,e.jsx)(w,{path:f,className:"mt-12"}),r.cta_link&&!h&&(0,e.jsx)("div",{className:"mt-12 overflow-hidden rounded-2xl border border-border bg-card/50 p-6 sm:p-8",children:(0,e.jsxs)("div",{className:"flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between",children:[(0,e.jsxs)("div",{className:"max-w-xl",children:[(0,e.jsx)("p",{className:"text-[11px] font-semibold uppercase tracking-[0.22em] text-primary/80",children:"Ready when you are"}),(0,e.jsx)("h3",{className:"mt-2 text-xl font-bold text-foreground sm:text-2xl",children:"Put what you just read into practice."}),(0,e.jsx)("p",{className:"mt-2 text-sm leading-6 text-muted-foreground",children:"Make your first AI storyboard in M Studio and see the whole workflow end to end. Full refund within 24 hours if it's not right."})]}),(0,e.jsx)(l,{asChild:!0,size:"lg",children:(0,e.jsxs)("a",{href:i,className:"flex-none",children:["Start now",(0,e.jsx)("span",{"aria-hidden":"true",children:"→"})]})})]})}),(0,e.jsxs)("div",{className:"mt-8 flex items-center gap-3 border-y border-border py-4",children:[(0,e.jsx)("span",{className:"text-sm font-medium text-muted-foreground",children:"Share:"}),(0,e.jsx)("a",{href:`https://twitter.com/intent/tweet?url=${v}&text=${z}`,target:"_blank",rel:"noopener noreferrer",className:"rounded-md border border-border p-2 text-muted-foreground transition-colors hover:border-border/60 hover:text-foreground","aria-label":"Share on X",children:"𝕏"}),(0,e.jsx)("a",{href:`https://www.linkedin.com/sharing/share-offsite/?url=${v}`,target:"_blank",rel:"noopener noreferrer",className:"rounded-md border border-border p-2 text-muted-foreground transition-colors hover:border-border/60 hover:text-foreground","aria-label":"Share on LinkedIn",children:"in"})]}),r.user&&(0,e.jsxs)("div",{className:"mt-8 flex items-start gap-4 roun

21ded-xl border border-border bg-card/50 p-6",children:[r.user.avatar&&(0,e.jsx)("img",{src:r.user.avatar,alt:r.user.name??"",className:"size-14 flex-none rounded-full object-cover"}),(0,e.jsxs)("div",{children:[(0,e.jsx)("p",{className:"text-sm text-muted-foreground",children:"Written by"}),(0,e.jsx)("p",{className:"text-lg font-bold text-foreground",children:r.user.name})]})]}),(0,e.jsxs)("div",{className:"mt-12 flex justify-between gap-4",children:[x?(0,e.jsxs)("a",{href:`/blog/${x.category?.slug}/${x.slug}`,className:"w-full max-w-xs space-y-2 rounded-xl border border-border bg-card/50 p-4 transition-colors hover:border-border/60 hover:bg-card",children:[(0,e.jsx)("div",{className:"text-sm font-medium text-foreground",children:"← Previous"}),(0,e.jsx)("div",{className:"line-clamp-2 text-xs text-muted-foreground",children:x.title})]}):(0,e.jsx)("div",{}),u&&(0,e.jsxs)("a",{href:`/blog/${u.category?.slug}/${u.slug}`,className:"w-full max-w-xs space-y-2 rounded-xl border border-border bg-card/50 p-4 text-right transition-colors hover:border-border/60 hover:bg-card",children:[(0,e.jsx)("div",{className:"text-sm font-medium text-foreground",children:"Next →"}),(0,e.jsx)("div",{className:"line-clamp-2 text-xs text-muted-foreground",children:u.title})]})]})]}),(0,e.jsx)("aside",{className:"col-span-1",children:(0,e.jsxs)("div",{className:"sticky top-8",children:[(0,e.jsxs)("div",{className:"mb-6 rounded-2xl border border-primary/30 bg-gradient-to-br from-primary/10 via-card/60 to-accent/10 p-5",children:[(0,e.jsx)("h3",{className:"text-base font-semibold text-foreground",children:"Storyboard your next video with AI"}),(0,e.jsx)("p",{className:"mt-2 text-sm leading-6 text-muted-foreground",children:"Script, frames, voice, and final cut — one session."}),(0,e.jsx)(l,{asChild:!0,size:"lg",children:(0,e.jsxs)("a",{href:i,className:"mt-4 w-full",children:["Start now",(0,e.jsx)("span",{"aria-hidden":"true",children:"→"})]})}),(0,e.jsx)(y,{className:"mt-3"})]}),(0,e.jsx)("h3",{className:"mb-4 text-lg font-semibold text-foreground",children:"Recent posts"}),(0,e.jsx)("div",{className:"space-y-4",children:m.slice(0,8).map(t=>(0,e.jsxs)("a",{href:`/blog/${t.category?.slug}/${t.slug}`,className:"flex gap-3 rounded-lg border border-border bg-card/50 p-3 transition-colors hover:border-border/60 hover:bg-card",children:[t.thumbnail&&(0,e.jsx)("img",{src:t.thumbnail,alt:t.title,className:"size-16 flex-none rounded-md object-cover"}),(0,e.jsxs)("div",{className:"min-w-0",children:[(0,e.jsx)("p",{className:"line-clamp-2 text-sm font-medium text-foreground",children:t.title}),(0,e.jsx)("p",{className:"mt-1 text-xs text-muted-foreground",children:k(t.created_at,X)})]})]},t.id))})]})})]})]})}),(0,e.jsx)(D,{})]})},be=Z;export{be as default};