Generate a short video with Magic Hour and add it as a native Framer video component.
Select an image or start from a creative brief, generate a short LTX 2.5 video, preview it, and add it to your Framer project. Image inputs keep their source aspect ratio. The inserted video plays muted and loops; seamless visual looping is not guaranteed.
This is a development integration. Actual Framer installation, publisher registration, and
marketplace review remain required.
Build and install
Build with the official Framer Vite tooling and follow the development-plugin setup instructions.
The API key stays in session memory. Generating uploads only the chosen image and prompt to Magic Hour and consumes API credits. Add video to design copies the completed MP4 into Framer as a native file asset and adds a Video component. It keeps the source image.Accepted project IDs are saved before polling. Stop waiting leaves the server job running; Resume generation retrieves the saved ID without another paid generation. Insertion refreshes the download URL so a temporary media link is not the lasting result.Live Magic Hour generation and browser preview passed. Editor upload/insertion was tested with simulated Framer APIs; this does not establish installation in a real Framer project. See the validation record.
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"Magic Hour API Docs","description":"Easily generate videos, images, and audio using Magic Hour's API. Follow our documentation to seamlessly integrate AI content creation into your applications.","colors":{"primary":"#3b82f6","light":"#0564ff","dark":"#3b82f6"},"logo":{"light":"https://mintcdn.com/magichour/5sgGJpuuipkw5s5v/icons/logo-light.svg?fit=max\u0026auto=format\u0026n=5sgGJpuuipkw5s5v\u0026q=85\u0026s=1f167e30baf11927bc2e0932411e455b","dark":"https://mintcdn.com/magichour/5sgGJpuuipkw5s5v/icons/logo-dark.svg?fit=max\u0026auto=format\u0026n=5sgGJpuuipkw5s5v\u0026q=85\u0026s=15c8bda28931ac4e1e2fab2c0ba6f0d5"},"favicon":"https://mintcdn.com/magichour/kbUwXh9ksnVyRSci/icons/favicon.png?fit=max\u0026auto=format\u0026n=kbUwXh9ksnVyRSci\u0026q=85\u0026s=c4fda903b24dd7067dadd1bb75508987","appearance":{"default":"dark","strict":false},"background":{"decoration":"gradient"},"navbar":{"links":[{"href":"mailto:support@magichour.ai","label":"Support"}],"primary":{"type":"button","label":"Get API key","href":"https://magichour.ai/developer?tab=api-keys\u0026ref=docs-navbar\u0026utm_source=docs\u0026utm_medium=referral\u0026utm_campaign=navbar"}},"footer":{"socials":{"website":"https://magichour.ai/?utm_source=docs\u0026utm_medium=referral\u0026utm_campaign=footer","x":"https://x.com/magichourai","github":"https://github.com/magichourhq","linkedin":"https://linkedin.com/company/magichour","instagram":"https://instagram.com/magichourai","youtube":"https://youtube.com/@magichourai"}},"seo":{"metatags":{"og:image":"https://d28dkohlqf5vwj.cloudfront.net/open-graph/logo-social-noisy-spectrum.jpg","twitter:image":"https://d28dkohlqf5vwj.cloudfront.net/open-graph/logo-social-noisy-spectrum.jpg"}},"integrations":{"ga4":{"measurementId":"G-CZ9Q9NBZB3"},"posthog":{"apiKey":"phc_EmzSy2RU0TOPhpouazMzxFedNdMyhze8HakyjffW2Wr","apiHost":"https://us.i.posthog.com"}},"contextual":{"options":["chatgpt","claude","perplexity","mcp","cursor","vscode","copy","view"],"display":"header"},"styling":{"latex":true},"navigation":{"global":{"anchors":[{"anchor":"API quickstart","icon":"forward-fast","href":"/get-started/quick-start"},{"anchor":"API pricing","icon":"credit-card","href":"/billing/overview"},{"anchor":"Community","icon":"discord","href":"https://discord.com/invite/JX5rgsZaJp"},{"anchor":"Status","icon":"wave-pulse","href":"https://status.magichour.ai"}]},"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"magichour","hasAudioNarration":false,"actualSubdomain":"magichour","customDomains":["docs.magichour.ai"],"gitSource":{"type":"github","owner":"magichourhq","repo":"docs","deployBranch":"main","contentDirectory":"","isPrivate":false,"mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6ad971caf66b56274e024824","collectionId":"e0110a94-d502-4f9f-b39e-177bdc0b9500","schemaVersion":"v3","latestBuiltDeploymentHistoryId":"6ad971caf66b56274e024824"},"feedback":{"thumbs":true,"issues":true,"edits":true},"entitlements":{"AI_CHAT":{"status":"DISABLED"}},"buildId":"6ad98762acddaec3e1584dda","clientVersion":"0.0.3926","searchFilterCounts":[{"language":"default","tag":"Documentation","count":62},{"language":"default","tag":"API Reference","count":42},{"language":"default","tag":"Tools","count":30},{"language":"default","tag":"Integration","count":21},{"language":"default","tag":"Image Projects","count":16},{"language":"default","tag":"Images","count":15},{"language":"default","tag":"Video Projects","count":14},{"language":"default","tag":"Video","count":12},{"language":"default","tag":"Webhook Reference","count":10},{"language":"default","tag":"Get Started","count":7}]},"assistantConfig":{},"hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-v7-file-tree","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"pause-universal-search-reconcile","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"per-site-search-delta","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-private-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-nav-generations","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"vite-origin","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"byok-sep-25","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-agent-model-picker","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"isAtlas":false,"googleFontsInlined":false},"customCss":[{"filePath":"style.css","content":"#sidebar,#table-of-contents-content{scrollbar-width:thin;scrollbar-gutter:none;scrollbar-color:gray transparent}"},{"filePath":"examples/design-video/shared/style.css","content":".panel,.panel label{display:flex;flex-direction:column}.panel{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#202333;background:#fff;font-synthesis:none;font-size:13px;max-width:440px;padding:22px;margin:auto;gap:14px}*{box-sizing:border-box}body{margin:0}.panel .brand{font-size:10px;font-weight:800;letter-spacing:.16em;color:#4158d8}.panel h1{font-size:22px;line-height:1.2;margin:9px 0}.panel p{margin:0;line-height:1.5}.panel header p{color:#666879}.panel label{gap:7px;font-weight:600}.panel input,.panel select,.panel textarea{font:inherit;width:100%;padding:10px;border:1px solid #d6d8e2;border-radius:7px;background:#fff;color:inherit}.panel textarea{resize:vertical}.panel button{font:inherit;font-weight:650;border:0;padding:11px 13px;border-radius:7px;background:#4255d6;color:#fff;cursor:pointer;width:100%}.panel button:disabled{opacity:.45;cursor:default}.panel .secondary{background:#f0f1f8;color:#303a8a;border:1px solid #d8dcee}.panel .quiet{padding:5px;background:0 0;color:#4556bf;width:auto;text-align:left}.panel .hint{font-size:11px;color:#666879;line-height:1.5}.panel section{display:flex;flex-direction:column;gap:11px}.panel .file-label{font-size:12px;color:#666879}.panel .file-label input,.panel footer{font-size:11px}.panel #source-preview{width:100%;max-height:170px;object-fit:contain;border-radius:6px;background:#f5f5f8}.panel #source-name,.panel #status{font-size:11px;overflow-wrap:anywhere}.panel .fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.panel video{display:block;width:100%;max-height:280px;background:#111;border-radius:8px}.panel #status{padding:11px;border-radius:7px;background:#f2f4fb;font-size:12px}.panel #status.error{color:#8c2430;background:#fff1f2}.panel summary{cursor:pointer;font-size:12px;font-weight:600}.panel details label{margin-top:10px}.panel details button{margin:8px 0}.panel footer{display:flex;flex-wrap:wrap;gap:12px}.panel a{color:#4556bf}.panel button:focus-visible,.panel input:focus-visible,.panel select:focus-visible,.panel textarea:focus-visible{outline:2px solid #4255d6;outline-offset:2px}.panel [hidden]{display:none!important}@media (max-width:280px){.panel{padding:12px}.panel .fields{grid-template-columns:1fr}}"}],"page":{"pagePath":"integration/framer","slug":"/integration/framer","pageMetadata":{"title":"Framer plugin","description":"Generate a short video with Magic Hour and add it as a native Framer video component.","href":"/integration/framer"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Generate a short video with Magic Hour and add it as a native Framer video component.\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={a:`a`,p:`p`,strong:`strong`,..._provideComponents(),...props.components},{Card,Note}=_components;if(!Card)_missingMdxReference(`Card`,true);if(!Note)_missingMdxReference(`Note`,true);return _jsxs(_Fragment,{children:[_jsx(_components.p,{children:`Select an image or start from a creative brief, generate a short LTX 2.5 video, preview it, and add it to your Framer project. Image inputs keep their source aspect ratio. The inserted video plays muted and loops; seamless visual looping is not guaranteed.`}),`\n`,_jsx(Note,{children:_jsx(_components.p,{children:`This is a development integration. Actual Framer installation, publisher registration, and\nmarketplace review remain required.`})}),`\n`,_jsx(Card,{title:`Build and install`,icon:`code`,href:`https://github.com/magichourhq/docs/tree/main/examples/design-video/framer`,children:_jsx(_components.p,{children:`Build with the official Framer Vite tooling and follow the development-plugin setup instructions.`})}),`\n`,_jsxs(_components.p,{children:[`The API key stays in session memory. Generating uploads only the chosen image and prompt to Magic Hour and consumes API credits. `,_jsx(_components.strong,{children:`Add video to design`}),` copies the completed MP4 into Framer as a native file asset and adds a Video component. It keeps the source image.`]}),`\n`,_jsxs(_components.p,{children:[`Accepted project IDs are saved before polling. `,_jsx(_components.strong,{children:`Stop waiting`}),` leaves the server job running; `,_jsx(_components.strong,{children:`Resume generation`}),` retrieves the saved ID without another paid generation. Insertion refreshes the download URL so a temporary media link is not the lasting result.`]}),`\n`,_jsxs(_components.p,{children:[`Live Magic Hour generation and browser preview passed. Editor upload/insertion was tested with simulated Framer APIs; this does not establish installation in a real Framer project. See the `,_jsx(_components.a,{href:`/integration/design-video-integrations-validation`,children:`validation record`}),`.`]})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Framer plugin","description":"Generate a short video with Magic Hour and add it as a native Framer video component.","href":"/integration/framer"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[],"codeExamples":{}},"jsLinks":["/_mintlify/custom/magichour/9e4c7e0fbd98c441/cleanup-deprecated-fields.js"],"subdomain":"magichour","siteName":"Magic Hour API Docs","title":"Framer plugin - Magic Hour API Docs","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-10-22T03:48:01.210Z","originalFileLocation":"integration/framer.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"dark\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Generate a short video with Magic Hour and add it as a native Framer video component.\">\u003cmeta data-mint-head name=\"application-name\" content=\"Magic Hour API Docs\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/magichour/pV2W72GIHTaiOFzk/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/magichour/pV2W72GIHTaiOFzk/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/magichour/pV2W72GIHTaiOFzk/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/magichour/pV2W72GIHTaiOFzk/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/magichour/pV2W72GIHTaiOFzk/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/magichour/pV2W72GIHTaiOFzk/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/magichour/pV2W72GIHTaiOFzk/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/magichour/pV2W72GIHTaiOFzk/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/magichour/pV2W72GIHTaiOFzk/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Framer plugin - Magic Hour API Docs\">\u003cmeta data-mint-head property=\"og:description\" content=\"Generate a short video with Magic Hour and add it as a native Framer video component.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Magic Hour API Docs\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.magichour.ai/integration/framer\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://d28dkohlqf5vwj.cloudfront.net/open-graph/logo-social-noisy-spectrum.jpg\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Framer plugin - Magic Hour API Docs\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Generate a short video with Magic Hour and add it as a native Framer video component.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://d28dkohlqf5vwj.cloudfront.net/open-graph/logo-social-noisy-spectrum.jpg\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/magichour/pV2W72GIHTaiOFzk/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Magic Hour API Docs\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#3b82f6\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.magichour.ai/integration/framer\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/integration/framer.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.magichour.ai/#organization\",\"name\":\"Magic Hour API Docs\",\"url\":\"https://docs.magichour.ai\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/magichour/5sgGJpuuipkw5s5v/icons/logo-light.svg?fit=max\u0026auto=format\u0026n=5sgGJpuuipkw5s5v\u0026q=85\u0026s=1f167e30baf11927bc2e0932411e455b\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.magichour.ai#website\",\"name\":\"Magic Hour API Docs\",\"url\":\"https://docs.magichour.ai\",\"publisher\":{\"@id\":\"https://docs.magichour.ai/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.magichour.ai/integration/framer#webpage\",\"url\":\"https://docs.magichour.ai/integration/framer\",\"name\":\"Framer plugin\",\"description\":\"Generate a short video with Magic Hour and add it as a native Framer video component.\",\"dateModified\":\"2026-10-22T03:48:01.210Z\",\"isPartOf\":{\"@id\":\"https://docs.magichour.ai#website\"},\"breadcrumb\":{\"@id\":\"https://docs.magichour.ai/integration/framer#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.magichour.ai/integration/framer#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Integration\",\"item\":\"https://docs.magichour.ai/integration/overview\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Framer plugin\",\"item\":\"https://docs.magichour.ai/integration/framer\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.magichour.ai/integration/framer#article\",\"headline\":\"Framer plugin\",\"name\":\"Framer plugin\",\"description\":\"Generate a short video with Magic Hour and add it as a native Framer video component.\",\"url\":\"https://docs.magichour.ai/integration/framer\",\"mainEntityOfPage\":{\"@id\":\"https://docs.magichour.ai/integration/framer#webpage\"},\"image\":\"https://d28dkohlqf5vwj.cloudfront.net/open-graph/logo-social-noisy-spectrum.jpg\",\"dateModified\":\"2026-10-22T03:48:01.210Z\",\"publisher\":{\"@id\":\"https://docs.magichour.ai/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.magichour.ai#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Magic Hour API Docs\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"Magic Hour API Docs","nav":{"global":{"anchors":[{"anchor":"API quickstart","icon":"forward-fast","href":"/get-started/quick-start"},{"anchor":"API pricing","icon":"credit-card","href":"/billing/overview"},{"anchor":"Community","icon":"discord","href":"https://discord.com/invite/JX5rgsZaJp"},{"anchor":"Status","icon":"wave-pulse","href":"https://status.magichour.ai"}]},"tabs":[{"tab":"Documentation","pages":[{"group":"Get Started","pages":[{"title":"Magic Hour API Documentation","sidebarTitle":"Introduction","href":"/introduction"},{"title":"Magic Hour API Quickstart","sidebarTitle":"Quick Start","href":"/get-started/quick-start"},{"title":"Authentication","href":"/get-started/authentication"},{"title":"Magic Hour MCP","href":"/integration/model-context-protocol"},{"title":"API Cookbook - Google Colab","href":"/get-started/cookbook"},{"title":"Product Video and Lip-Sync Recipes","href":"/get-started/starter-recipes"},{"title":"Bulk Face Swap API: Safe Batch Processing","sidebarTitle":"Bulk Face Swap","href":"/get-started/bulk-face-swap"}]},{"group":"Integration","pages":[{"title":"Integration Overview","sidebarTitle":"Overview","href":"/integration/overview"},{"title":"Compare AI Media APIs on Your Workload","sidebarTitle":"Evaluate API Providers","href":"/integration/evaluating-media-apis"},{"title":"Choose a Commercial AI Media Workflow","sidebarTitle":"Choose a Workflow","href":"/integration/commercial-media-workflows"},{"title":"Evaluate Lip Sync for Agency and Localization Work","sidebarTitle":"Agency Lip-Sync Pilot","href":"/integration/agency-lip-sync"},{"title":"Creating Your First Integration","sidebarTitle":"Creating Your First Integration","href":"/integration/first-integration"},{"title":"Vercel AI SDK","href":"/integration/vercel-ai-sdk"},{"title":"Langflow","href":"/integration/langflow"},{"title":"Figma plugin","description":"Generate or edit images with Magic Hour and insert the results into a Figma Design canvas.","href":"/integration/figma"},{"title":"Framer plugin","href":"/integration/framer"},{"title":"Adobe Express add-on","description":"Animate an image or an explicitly exported page with Magic Hour and add the result to Adobe Express.","href":"/integration/adobe-express"},{"title":"Canva app","href":"/integration/canva"},{"title":"Postman Collection","href":"/integration/postman"},{"title":"Adding API to Your App","href":"/integration/adding-api-to-your-app"},{"title":"Handling Inputs and Outputs","sidebarTitle":"Inputs \u0026 Outputs","href":"/integration/inputs-and-outputs"},{"title":"Development and Testing","href":"/integration/development-and-testing"},{"group":"Webhook","pages":[{"title":"Webhook Quickstart","sidebarTitle":"Quick Start","href":"/integration/webhook/overview"},{"title":"Create a Webhook","href":"/integration/webhook/create-webhook"},{"title":"Securing Your Webhook Handler","sidebarTitle":"Securing Handler","href":"/integration/webhook/secure-handler"},{"title":"Production Webhook Handler","sidebarTitle":"Production Setup","href":"/integration/webhook/create-handler"},{"title":"Webhook Event Types","sidebarTitle":"Event Types","href":"/integration/webhook/event-types"}]},{"title":"Postman Collection","href":"/integration/postman"},{"title":"API Docs MCP","href":"/integration/api-docs-mcp"}]},{"group":"Billing","pages":[{"title":"Magic Hour API Pricing","sidebarTitle":"Pricing Overview","href":"/billing/overview"},{"title":"Subscription Pricing","href":"/billing/subscription-pricing"},{"title":"Usage-Based Billing","href":"/billing/usage-based-pricing"},{"title":"Resolution Limits","href":"/billing/resolution-limits"}]},{"group":"Tools","pages":[{"group":"Video","pages":[{"title":"Video Tools","href":"/tools/video-tools"},{"title":"Face Swap Video API","sidebarTitle":"Face Swap Video","href":"/tools/video/face-swap-video"},{"title":"AI Talking Photo API","sidebarTitle":"Talking Photo","href":"/tools/video/talking-photo"},{"title":"Text to Video API","sidebarTitle":"Text to Video","href":"/tools/video/text-to-video"},{"title":"Lip Sync API","sidebarTitle":"Lip Sync","href":"/tools/video/lip-sync"},{"title":"Character Replace API","sidebarTitle":"Character Replace","href":"/tools/video/character-replace"},{"title":"Video to Video API","sidebarTitle":"Video to Video","href":"/tools/video/video-to-video"},{"title":"AI Video Editor API","sidebarTitle":"AI Video Editor","href":"/tools/video/video-editor"},{"title":"Audio to Video API","sidebarTitle":"Audio to Video","href":"/tools/video/audio-to-video"},{"title":"Auto Subtitle Generator API","sidebarTitle":"Auto Subtitle","href":"/tools/video/auto-subtitle-generator"},{"title":"Image to Video API","sidebarTitle":"Image to Video","href":"/tools/video/image-to-video"},{"title":"Animation API","sidebarTitle":"Animation","href":"/tools/video/animation"}]},{"group":"Images","pages":[{"title":"Image Tools","href":"/tools/image-tools"},{"title":"AI Image Editor API","sidebarTitle":"Image Editor","href":"/tools/image/image-editor"},{"title":"Face Swap Photo API","sidebarTitle":"Face Swap Photo","href":"/tools/image/face-swap-photo"},{"title":"AI Image Upscaler API","sidebarTitle":"Image Upscaler","href":"/tools/image/image-upscaler"},{"title":"AI Image Generator API","sidebarTitle":"Image Generator","href":"/tools/image/image-generator"},{"title":"Head Swap API","sidebarTitle":"Head Swap","href":"/tools/image/head-swap"},{"title":"AI Clothes Changer API","sidebarTitle":"Clothes Changer","href":"/tools/image/clothes-changer"},{"title":"Image Background Remover API","sidebarTitle":"Background Remover","href":"/tools/image/background-remover"},{"title":"Body Swap API","sidebarTitle":"Body Swap","href":"/tools/image/body-swap"},{"title":"AI Headshot Generator API","sidebarTitle":"Headshot Generator","href":"/tools/image/headshot-generator"},{"title":"AI Face Editor API","sidebarTitle":"Face Editor","href":"/tools/image/face-editor"},{"title":"Photo Colorizer API","sidebarTitle":"Photo Colorizer","href":"/tools/image/photo-colorizer"},{"title":"AI GIF Generator API","sidebarTitle":"GIF Generator API","href":"/tools/image/gif-generator"},{"title":"AI Meme Generator API","sidebarTitle":"Meme Generator","href":"/tools/image/meme-generator"},{"title":"AI QR Code Generator API","sidebarTitle":"QR Code Generator","href":"/tools/image/qr-code-generator"}]},{"group":"Audio","pages":[{"title":"Audio Tools","href":"/tools/audio-tools"},{"title":"AI Voice Cloner API","sidebarTitle":"Voice Cloner","href":"/tools/audio/voice-cloner"},{"title":"AI Voice Generator API","sidebarTitle":"Voice Generator","href":"/tools/audio/voice-generator"}]}]}]},{"tab":"API Reference","pages":[{"title":"API Reference","href":"/api-reference/overview"}]},{"tab":"Webhook Reference","pages":[{"title":"Webhook Reference","href":"/webhook-reference/overview"}]},{"tab":"Changelog","pages":[{"title":"Changelog","href":"/changelog"}]}]},"title":"Framer plugin - Magic Hour API Docs","buildId":"dpl_9DauxEjb9gzCtcuhPQFbquJvx7FJ","deploymentId":"dpl_9DauxEjb9gzCtcuhPQFbquJvx7FJ","dynamics":[],"chunks":[]}