Videos people made, remixed in HyperFrames: launch films, motion graphics and talking-head edits. Find one you like and remix it in the Studio app.
Every video on this page was made with HyperFrames: launch films, cartoons, explainers, 3D, logo stings, live-coded
music. Click one to watch it with sound.
The fastest way to a video you love is to start from one. Every video below is a remix: someone’s original, rebuilt
in HyperFrames with new words, people and brand. Hover to play. Like one? Choose Remix in Studio and make your
own version; see Reference any video for how it works.
Point HyperFrames at a finished video and it rebuilds the same film in editable HTML —
gestures, type, timing and all. Below, each reference (the original, on the left) sits
next to its HyperFrames replica (on the right), matched frame for frame.
These ready-to-run examples are ordered by human requested installs from the last 30 days. Add any block to a project, then customize its content in place.
{"docsConfig":{"theme":"aspen","$schema":"https://mintlify.com/docs.json","name":"HyperFrames","colors":{"primary":"#181716","light":"#3CE6AC","dark":"#181716"},"logo":{"light":"/logo/light.svg","dark":"/logo/dark.svg","href":"https://hyperframes.heygen.com/"},"favicon":"/favicon.svg","appearance":{"default":"system"},"background":{"color":{"light":"#f2f0ed","dark":"#201e1c"}},"navbar":{"links":[{"href":"https://github.com/heygen-com/hyperframes","type":"github"},{"href":"https://discord.gg/7uMDe3PwQn","type":"discord"}],"primary":{"type":"button","label":"Download","href":"https://hyperframes.studio/studio/download?src=docs-navbar"}},"footer":{"socials":{"github":"https://github.com/heygen-com/hyperframes","discord":"https://discord.gg/7uMDe3PwQn","x":"https://x.com/HyperFrames_"},"links":[{"header":"Explore","items":[{"label":"Introduction","href":"/introduction"},{"label":"Make your first video","href":"/quickstart"},{"label":"Examples","href":"/examples"}]},{"header":"Build","items":[{"label":"Browser editor","href":"/studio"},{"label":"Catalog","href":"/catalog"},{"label":"Developers","href":"/developers/overview"}]},{"header":"Resources","items":[{"label":"Product updates","href":"/product-updates"},{"label":"Download the app","href":"https://hyperframes.studio/studio/download?src=docs-footer"},{"label":"GitHub","href":"https://github.com/heygen-com/hyperframes"}]},{"header":"Made by HeyGen","items":[{"label":"heygen.com","href":"https://www.heygen.com"}]}]},"fonts":{"family":"Inter"},"integrations":{"posthog":{"apiKey":"phc_zjjbX0PnWxERXrMHhkEJWj9A9BhGVLRReICgsfTMmpx","sessionRecording":false}},"contextual":{"options":["copy","claude","cursor","vscode","windsurf","mcp",{"title":"Open an issue","description":"Report a bug or request a feature","icon":"github","href":"https://github.com/heygen-com/hyperframes/issues/new"}],"display":"header"},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"hasAudioNarration":false,"customDomains":[],"gitSource":{"type":"github","owner":"local","repo":"local","deployBranch":"main","contentDirectory":"","isPrivate":true,"mountPath":"","label":"local","isBase":true},"buildId":"local","clientVersion":"0.0.4114"},"basePath":"","hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[],"googleFontsInlined":false,"isLoggedInCli":false},"customCss":[{"filePath":"catalog-gallery.css","content":".hfc-gallery{color:var(--hf-text);font-family:inherit}.hfc-gallery *{box-sizing:border-box}.hfc-gallery :is(button,a):focus-visible{outline:2px solid var(--hf-brand);outline-offset:4px}.hfc-gallery button{font:inherit;cursor:pointer}.hfc-gallery .hfc-hero h1{line-height:1.08;font-weight:600;letter-spacing:-.045em;margin:0 0 24px;color:var(--hf-heading)}.hfc-gallery .hfc-hero>p{font-size:15px;line-height:1.7;color:var(--hf-text-secondary);max-width:560px;margin:0}.hfc-gallery .hfc-overview{display:flex;flex-direction:column;gap:44px}.hfc-gallery .hfc-section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}.hfc-gallery .hfc-section-head h2{display:flex;align-items:center;gap:12px;font-size:20px;line-height:1.3;font-weight:600;margin:0;color:var(--hf-heading)}.hfc-gallery .hfc-section-head button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;border:0;background:transparent;color:var(--hf-text-secondary);padding:6px 0 6px 8px;font-size:12px;white-space:nowrap}.hfc-gallery .hfc-caret{flex-shrink:0;transition:transform .16s ease}.hfc-gallery .hfc-section-head button[aria-expanded=\"true\"] .hfc-caret{transform:rotate(180deg)}.hfc-gallery .hfc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 20px}.hfc-gallery a.hfc-card,.hfc-gallery a.hfc-card:hover{display:block;min-width:0;text-decoration:none;color:inherit;border:0;background:transparent;box-shadow:none;transform:none}.hfc-gallery .hfc-media{position:relative;aspect-ratio:16/9;isolation:isolate;overflow:hidden;border-radius:12px;background:#101214}.hfc-gallery .hfc-media :is(img,video){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0;border:0;border-radius:0}.hfc-gallery .hfc-preview-host{position:absolute;inset:0;pointer-events:none;opacity:0}.hfc-gallery .hfc-preview-host[data-ready=\"true\"]{opacity:1}.hfc-gallery .hfc-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;height:100%;text-align:center;color:#ccc;background:#141414}.hfc-gallery .hfc-fallback span{color:#999;font-size:10px}.hfc-gallery .hfc-fallback strong{font-size:18px;line-height:1.2}.hfc-gallery .hfc-unsupported{gap:6px;padding:20px}.hfc-gallery .hfc-unsupported span{font-size:11px}.hfc-gallery .hfc-unsupported code{font-size:11px;padding:2px 6px;border-radius:6px;background:#0006;color:#ccc}.hfc-gallery .hfc-card-body{padding:12px 2px 0}.hfc-gallery .hfc-card-title{display:flex;align-items:start;justify-content:space-between;gap:10px}.hfc-gallery .hfc-card-title h3{font-size:15px;font-weight:500;line-height:1.4;margin:0;color:var(--hf-heading)}.hfc-gallery .hfc-status{flex-shrink:0;padding:2px 7px;border-radius:20px;background:var(--hf-brand-soft);color:var(--hf-brand);font-size:11px}.hfc-gallery .hfc-meta{font-size:12px;line-height:1.5;margin:4px 0 0;color:var(--hf-text-secondary)}.hfc-gallery .hfc-empty{padding:44px 20px;text-align:center}.hfc-gallery .hfc-empty h3{font-size:18px}.hfc-gallery .hfc-empty p{color:var(--hf-text-secondary);font-size:13px}.hfc-gallery .hfc-empty button,.hfc-gallery .hfc-load{padding:10px 16px;border:1px solid var(--hf-border-color);border-radius:8px;color:var(--hf-text);background:var(--hf-background-light);font-size:12px}.hfc-gallery .hfc-load{display:block;margin:24px auto 0}#navigation-items:has(a[href=\"/catalog\"]) .sidebar-group-header{display:none}#navigation-items .sidebar-group>li>a[href=\"/catalog\"]{width:100%;margin-left:0;padding:6px 12px;border:0;border-radius:12px}#navigation-items .sidebar-group>li[data-active=\"true\"]>a[href=\"/catalog\"],#navigation-items .sidebar-group>li[data-active-nav-item=\"true\"]>a[href=\"/catalog\"],#navigation-items .sidebar-group>li>a[href=\"/catalog\"][aria-current=\"page\"]{color:var(--hf-brand);background:color-mix(in oklab,var(--hf-brand) 10%,transparent)!important}@media (max-width:1100px) and (min-width:601px){.hfc-gallery .hfc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:600px){.hfc-gallery .hfc-grid{grid-template-columns:minmax(0,1fr)}.hfc-gallery .hfc-card-title h3{font-size:16px}}@media (prefers-reduced-motion:reduce){.hfc-gallery *{transition:none!important}}#navigation-items a[href^=\"/catalog/\"][aria-current=\"page\"]{color:var(--hf-brand);background:color-mix(in oklab,var(--hf-brand) 10%,transparent)!important}#navigation-items li[data-group-tag]{--catalog-desc:\"\"}#navigation-items li[data-group-tag]::after{content:var(--catalog-desc);display:block;padding:0 12px 8px 40px;font-size:11px;line-height:1.5;color:var(--hf-text-secondary)}#navigation-items li[data-title=\"3D\"][data-group-tag]{--catalog-desc:\"Three.js scenes and objects: camera moves, product turntables, glass, exploded layers.\"}#navigation-items li[data-title=\"Carousels\"][data-group-tag]{--catalog-desc:\"Image cards that circle, orbit, or sweep a path across the frame.\"}#navigation-items li[data-title=\"Text \u0026 captions\"][data-group-tag]{--catalog-desc:\"Word-by-word caption reveals, highlights, and kinetic type.\"}#navigation-items li[data-title=\"Code\"][data-group-tag]{--catalog-desc:\"Code snippets that type, diff, highlight, and morph on screen.\"}#navigation-items li[data-title=\"Transitions\"][data-group-tag]{--catalog-desc:\"Cuts between shots: zooms, warps, glitches, light leaks.\"}#navigation-items li[data-title=\"Data \u0026 charts\"][data-group-tag]{--catalog-desc:\"Bar, line, and progress charts that animate their own data in.\"}#navigation-items li[data-title=\"Scenes \u0026 demos\"][data-group-tag]{--catalog-desc:\"Full scenes: app showcases, chat exchanges, product demos.\"}#navigation-items li[data-title=\"Cursors\"][data-group-tag]{--catalog-desc:\"Pointers that glide, click, drag, select, and steer the eye across a UI.\"}#navigation-items li[data-title=\"Motion \u0026 effects\"][data-group-tag]{--catalog-desc:\"General-purpose motion: hovers, pops, blurs, grids, paths.\"}#navigation-items li[data-title=\"Surfaces\"][data-group-tag]{--catalog-desc:\"Background textures and screen treatments: grain, halftone, glass.\"}#navigation-items li[data-title=\"Blocks\"][data-group-tag]{--catalog-desc:\"Flowcharts, sketched frames, speech bubbles, and outro cards.\"}.hfc-gallery .mw{display:inline-block;position:relative;white-space:nowrap;--phase: 0;--period: 6;--bl: .87em}.hfc-gallery .mw .ch{display:inline-block;position:relative;transform-origin:50% 70%;background-image:var(--grad);background-size:calc(var(--period) * 1em) 100%;background-position:calc((var(--phase) * var(--period) - var(--x, 0)) * 1em) 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}.hfc-gallery .mw .bl{display:inline-block;width:0;height:0;vertical-align:baseline}.hfc-gallery .mw .dsvg{position:absolute;left:var(--dot-x, 50%);top:var(--dot-y, .16em);width:calc(var(--dot-d, .15em) * 5);height:calc(var(--dot-d, .15em) * 5);margin:calc(var(--dot-d, .15em) * -2.5) 0 0 calc(var(--dot-d, .15em) * -2.5);overflow:visible;pointer-events:none}.hfc-gallery .mw .sq{position:absolute;display:block;left:0;top:calc(var(--bl) + .05em);width:100%;height:auto;overflow:visible;pointer-events:none}.hfc-gallery{padding:0 32px;max-width:1400px;margin:0 auto 48px}.hfc-gallery .hfc-hero{padding:48px 0}.hfc-gallery .hfc-hero h1{max-width:800px;font-size:clamp(34px,4vw,54px)}.hfc-gallery .mw .dsvg{left:50%;top:.18em;width:.75em;height:.75em;margin:-.375em 0 0 -.375em}.hfc-gallery .mw .sq{top:.94em}.hfc-gallery .mw .ring{transform-origin:0 0}.hfc-gallery .mw .sq path{stroke-dasharray:220;stroke-dashoffset:220}@media (prefers-reduced-motion:reduce){.hfc-gallery .mw .sq path{stroke-dashoffset:0}}@media (max-width:600px){.hfc-gallery{padding:0 18px}.hfc-gallery .hfc-hero{padding:28px 0}}.hfc-search{display:block;width:min(560px, 100%);margin-top:18px;padding:12px 16px;border:1px solid color-mix(in srgb, currentColor 18%, transparent);border-radius:999px;background:color-mix(in srgb, currentColor 4%, transparent);color:inherit;font:inherit;font-size:15px}.hfc-search:focus-visible{outline:2px solid color-mix(in srgb, currentColor 40%, transparent);outline-offset:2px}.hfc-gallery .hfc-pause{margin-top:14px;padding:7px 14px;border:1px solid color-mix(in srgb, currentColor 22%, transparent);border-radius:999px;background:transparent;color:inherit;font:inherit;font-size:13px;cursor:pointer}.hfc-gallery .hfc-pause:focus-visible{outline:2px solid color-mix(in srgb, currentColor 45%, transparent);outline-offset:2px}"},{"filePath":"custom.css","href":"/_mintlify/custom/docs.lltai.cloud/90bb600fca48615f/custom.css"},{"filePath":"template-gallery.css","content":".tpl-card video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}.tpl-card.portrait video{aspect-ratio:9/16}.tpl-card:hover{transform:translateY(-2px);border-color:var(--hf-border-color-light, #d0cfcb)}.tpl-label{position:absolute;bottom:0;left:0;right:0;padding:2.5rem 0.75rem 0.75rem;background:linear-gradient(transparent, rgba(0,0,0,0.75));pointer-events:none}"}],"page":{"pagePath":"examples","slug":"/examples","pageMetadata":{"title":"Inspiration","description":"Videos people made, remixed in HyperFrames: launch films, motion graphics and talking-head edits. Find one you like and remix it in the Studio app.","href":"/examples"},"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: \"Videos people made, remixed in HyperFrames: launch films, motion graphics and talking-head edits. Find one you like and remix it in the Studio app.\"\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];const ReplicaCompare=({title,meta,refSrc,refPoster,replicaSrc,replicaPoster})=>{const wrapRef=useRef(null);const refVideo=useRef(null);const repVideo=useRef(null);const[muted,setMuted]=useState(true);const[inView,setInView]=useState(false);useEffect(()=>{const el=wrapRef.current;if(!el||typeof IntersectionObserver!==`function`){setInView(true);return}const observer=new IntersectionObserver(entries=>setInView(entries[0]?.isIntersecting??false),{rootMargin:`200px`});observer.observe(el);return()=>observer.disconnect()},[]);const[reduced,setReduced]=useState(()=>typeof window!==`undefined`\u0026\u0026typeof window.matchMedia===`function`\u0026\u0026window.matchMedia(`(prefers-reduced-motion: reduce)`).matches);useEffect(()=>{const query=window.matchMedia(`(prefers-reduced-motion: reduce)`);const onChange=()=>setReduced(query.matches);query.addEventListener(`change`,onChange);return()=>query.removeEventListener(`change`,onChange)},[]);useEffect(()=>{const videos=[refVideo.current,repVideo.current];if(!inView){for(const video of videos){if(!video)continue;video.pause();video.muted=true;video.removeAttribute(`src`);video.load()}setMuted(true);return}if(reduced){for(const video of videos)if(video\u0026\u0026video.muted)video.pause()}},[reduced,inView]);useEffect(()=>{const a=refVideo.current;const b=repVideo.current;if(!a||!b||!inView)return;const resync=()=>{if(Number.isFinite(a.currentTime)\u0026\u0026Math.abs((b.currentTime||0)-a.currentTime)>.15){try{b.currentTime=a.currentTime}catch{}}if(a.paused\u0026\u0026!b.paused)b.pause();if(!a.paused\u0026\u0026b.paused)b.play().catch(()=>{})};const onPlay=()=>b.play().catch(()=>{});const onPause=()=>b.pause();a.addEventListener(`timeupdate`,resync);a.addEventListener(`seeked`,resync);a.addEventListener(`play`,onPlay);a.addEventListener(`pause`,onPause);return()=>{a.removeEventListener(`timeupdate`,resync);a.removeEventListener(`seeked`,resync);a.removeEventListener(`play`,onPlay);a.removeEventListener(`pause`,onPause)}},[reduced,inView]);const startBoth=()=>{refVideo.current?.play().catch(()=>{});repVideo.current?.play().catch(()=>{})};const pauseBoth=()=>{refVideo.current?.pause();repVideo.current?.pause()};const toggleSound=()=>{const a=refVideo.current;if(!a)return;const next=!muted;setMuted(next);a.muted=next;if(!next){startBoth()}else if(reduced){pauseBoth()}};const active=inView\u0026\u0026!reduced;const card=`overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950`;const video=`aspect-video w-full object-cover bg-zinc-100 dark:bg-zinc-900`;const cap=`text-xs font-semibold uppercase tracking-wide`;return _jsxs(`div`,{ref:wrapRef,children:[_jsxs(`div`,{className:`mint-mb-3 mint-flex mint-items-baseline mint-justify-between`,children:[_jsx(`strong`,{className:`mint-text-sm`,children:title}),_jsx(`span`,{className:`mint-text-xs mint-text-zinc-500 dark:mint-text-zinc-400`,children:meta})]}),_jsxs(`div`,{className:`mint-grid mint-grid-cols-1 mint-gap-4 md:mint-grid-cols-2`,children:[_jsxs(`div`,{className:`mint-relative ${`mint-overflow-hidden mint-rounded-xl mint-border mint-border-zinc-200 mint-bg-white dark:mint-border-zinc-800 dark:mint-bg-zinc-950`}`,children:[_jsx(`video`,{ref:refVideo,className:`mint-aspect-video mint-w-full mint-object-cover mint-bg-zinc-100 dark:mint-bg-zinc-900`,src:inView?refSrc:undefined,poster:refPoster,autoPlay:active,muted,loop:active,playsInline:true,preload:`none`}),_jsxs(`button`,{type:`button`,onClick:toggleSound,\"aria-pressed\":!muted,\"aria-label\":muted?reduced?`Sound off — play the comparison with sound`:`Sound off — unmute the reference`:reduced?`Sound on — pause the comparison`:`Sound on — mute the reference`,className:`mint-absolute mint-left-3 mint-top-3 mint-z-10 mint-flex mint-items-center mint-gap-1.5 mint-rounded-full mint-bg-black/60 mint-px-3 mint-py-1.5 mint-text-xs mint-font-medium mint-text-white mint-backdrop-blur mint-transition hover:mint-bg-black/75 focus-visible:mint-outline focus-visible:mint-outline-2 focus-visible:mint-outline-offset-2 focus-visible:mint-outline-white`,children:[muted?_jsxs(`svg`,{width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:[_jsx(`path`,{d:`M11 5 6 9H2v6h4l5 4V5z`}),_jsx(`line`,{x1:`23`,y1:`9`,x2:`17`,y2:`15`}),_jsx(`line`,{x1:`17`,y1:`9`,x2:`23`,y2:`15`})]}):_jsxs(`svg`,{width:`14`,height:`14`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:[_jsx(`path`,{d:`M11 5 6 9H2v6h4l5 4V5z`}),_jsx(`path`,{d:`M15.5 8.5a5 5 0 0 1 0 7`}),_jsx(`path`,{d:`M18.5 5.5a9 9 0 0 1 0 13`})]}),muted?`Sound off`:`Sound on`]}),_jsx(`div`,{className:`mint-p-3`,children:_jsx(`span`,{className:`${`mint-text-xs mint-font-semibold mint-uppercase mint-tracking-wide`} mint-text-zinc-500 dark:mint-text-zinc-400`,children:`Reference — original film`})})]}),_jsxs(`div`,{className:`mint-overflow-hidden mint-rounded-xl mint-border mint-border-zinc-200 mint-bg-white dark:mint-border-zinc-800 dark:mint-bg-zinc-950`,children:[_jsx(`video`,{ref:repVideo,className:`mint-aspect-video mint-w-full mint-object-cover mint-bg-zinc-100 dark:mint-bg-zinc-900`,src:inView?replicaSrc:undefined,poster:replicaPoster,autoPlay:active,muted:true,loop:active,playsInline:true,preload:`none`}),_jsx(`div`,{className:`mint-p-3`,children:_jsx(`span`,{className:`${`mint-text-xs mint-font-semibold mint-uppercase mint-tracking-wide`} mint-text-zinc-700 dark:mint-text-zinc-300`,children:`HyperFrames replica`})})]})]})]})};const FilmRows=()=>{const CDN=`https://static.heygen.ai/hyperframes-oss`;const film=(id,kind,name,ar)=>({kind,name,ar,src:`${CDN}/homepage/showcase/card/${id}-v1.mp4`,hq:`${CDN}/homepage/showcase/hq/${id}-v1.mp4`,poster:`${CDN}/homepage/showcase/poster/${id}-v1.jpg`});const launch=`${CDN}/site/studio-launch-nib-sf-audio`;const rows=[[{...film(`studio-launch`,`Launch film`,`Studio launch`,16/9),hq:`${launch}.mp4`,poster:`${launch}-poster.jpg`},film(`vfx-billboard-hoodie-handoff`,`VFX`,`Out of the billboard`,9/16),film(`frameys-opening-night`,`Awards trailer`,`Opening night`,16/9),film(`jake-taycan-bricks`,`3D build`,`Jake \u0026 the Taycan`,1),film(`cartoon-frameys-launch-one-take`,`Cartoon`,`The Frameys`,16/9),film(`k`,`Explainer`,`The journey of “k”`,9/16),film(`real-ui-newspaper-1969`,`Real UI`,`Men walk on the Moon`,16/9),film(`launch-storyboard-first`,`Product launch`,`Storyboard first`,16/9),film(`captions`,`Captions`,`Don’t tell my clients`,4/5),film(`manga-last-onigiri`,`Manga`,`The last onigiri`,16/9),film(`square-one-strudel`,`Live-coded music`,`Square one`,1),film(`vfx-background-removal-launch`,`VFX`,`Background removal`,16/9),film(`sitcom`,`Sitcom`,`Two lines`,9/16),film(`just-html`,`Explainer`,`It’s just HTML`,16/9),film(`kinetic-type-curiosity`,`Kinetic type`,`Going through a change`,4/3),film(`home`,`Many looks`,`This homepage`,16/9),film(`wordmark-sting`,`Logo sting`,`Wordmark`,1),film(`session-story`,`Cartoon`,`Jake’s favorite agent`,16/9),film(`launch-claude-motion`,`Square`,`Claude Motion`,1),film(`real-ui-google-search`,`Real UI`,`How do cameras focus`,16/9),film(`muybridge-horse-styles`,`Style study`,`One horse, many looks`,32/9),film(`rackrats`,`Cartoon`,`Rackrats`,16/9)],[film(`tutorial-wenbo-studio-tutorial-talkinghead`,`Tutorial`,`Reference any video`,16/9),film(`axe`,`3D tutorial`,`Axe chop`,9/16),film(`framey-orby-halloween`,`Cartoon`,`Halloween party`,16/9),film(`cow`,`Launch parody`,`Cow 1.0`,16/9),film(`ascii-sharks-logo`,`Logo sting`,`ASCII sharks`,16/9),film(`vfx-giant-keyboard-reel`,`VFX`,`Giant keyboard`,9/16),film(`real-ui-wikipedia`,`Real UI`,`Wikipedia`,16/9),film(`launch-heygen-video1`,`AI footage`,`HeyGen Video 1`,16/9),film(`pixel-game-one-canvas`,`Code tutorial`,`A game in one canvas`,16/9),film(`demo`,`Talking head`,`Tool demo`,9/16),film(`everything-was-written`,`Motion design`,`Everything was written`,16/9),film(`launch`,`Kinetic type`,`Keynote line`,16/9),film(`remotion-to-hyperframes`,`3D voxel`,`Remotion to HyperFrames`,16/9),film(`explainer-code2video-bench`,`Presenter`,`Code2Video Bench`,16/9),film(`real-ui-cctv`,`Real UI`,`CCTV tracking`,16/9),film(`frameys-felt-party`,`3D characters`,`The Frameys dance`,16/9),film(`launch-moments-catalog`,`Product launch`,`Moments catalog`,16/9),film(`shards-logo-reveal`,`Logo reveal`,`Shards`,16/9),film(`launch-hyperframes-studio-intro`,`Product reveal`,`Studio intro`,16/9),film(`studio-launch-pixel`,`Launch film`,`A launch video in 6 hours`,16/9),film(`youtube-online-business`,`YouTube edit`,`Online business story`,16/9),film(`website-to-launch`,`Product launch`,`From your website`,16/9),film(`generative-replica`,`Generative art`,`Code is a material`,16/9)]];const rootRef=useRef(null);const dialogRef=useRef(null);const[open,setOpen]=useState(null);const[paused,setPaused]=useState(false);const pausedRef=useRef(paused);pausedRef.current=paused;const[still,setStill]=useState(()=>typeof window!==`undefined`\u0026\u0026window.matchMedia(`(prefers-reduced-motion: reduce)`).matches);useEffect(()=>{const query=window.matchMedia(`(prefers-reduced-motion: reduce)`);const follow=event=>setStill(event.matches);query.addEventListener(`change`,follow);return()=>query.removeEventListener(`change`,follow)},[]);useEffect(()=>{const root=rootRef.current;if(!root)return;if(still){for(const v of root.querySelectorAll(`video[data-src]`)){v.pause();v.removeAttribute(`src`);v.load()}return}const near=new Set;const seen=new IntersectionObserver(entries=>{for(const{target,isIntersecting}of entries){if(isIntersecting){if(!target.src)target.src=target.dataset.src;near.add(target)}else if(target.src){near.delete(target);target.pause();target.removeAttribute(`src`);target.load()}}},{rootMargin:`100px`});for(const v of root.querySelectorAll(`video[data-src]`))seen.observe(v);const pick=()=>{const mid=window.innerWidth/2;const centre=v=>{const r=v.getBoundingClientRect();return Math.abs(r.left+r.width/2-mid)};const filmWithSound=[...document.querySelectorAll(`video`)].some(v=>!v.paused\u0026\u0026!v.muted);const resting=root.classList.contains(`is-paused`)||root.dataset.watching===`true`||filmWithSound;const first=resting?null:[...near].sort((a,b)=>centre(a)-centre(b))[0];for(const v of near){if(v===first)v.play().catch(()=>{});else v.pause()}};const tick=setInterval(pick,1e3);return()=>{seen.disconnect();clearInterval(tick)}},[still]);useEffect(()=>{const root=rootRef.current;if(!root||still)return;const ac=new AbortController;const on={signal:ac.signal};const stops=[...root.querySelectorAll(`.hf-film-track`)].map((row,r)=>{const dir=r?1:-1;const seconds=r?105:90;let x=0;let fling=0;let last=0;let raf=0;let moved=0;let focused=false;let drag=null;const period=()=>{const cards=row.children;return cards[cards.length/2].offsetLeft-cards[0].offsetLeft};const tick=now=>{const dt=Math.min(.05,(now-last)/1e3);last=now;const loop=period();if(!drag?.on){x+=fling;fling=Math.abs(fling)\u003c.05?0:fling*.86;if(!pausedRef.current\u0026\u0026!focused)x+=loop/seconds*dt}x=(x%loop+loop)%loop;row.parentElement.scrollLeft=0;row.style.transform=`translateX(${(dir\u003c0?-x:x-loop).toFixed(1)}px)`;raf=requestAnimationFrame(tick)};const seen=new IntersectionObserver(([entry])=>{cancelAnimationFrame(raf);if(entry.isIntersecting){last=performance.now();raf=requestAnimationFrame(tick)}});seen.observe(row);row.addEventListener(`focusin`,e=>{if(!e.target.matches(`:focus-visible`))return;focused=true;const into=(row.parentElement.clientWidth-e.target.offsetWidth)/2;const shift=Math.max(.5,e.target.offsetLeft-into);x=dir\u003c0?shift:period()-shift},on);row.addEventListener(`focusout`,()=>focused=false,on);row.addEventListener(`pointerdown`,e=>{drag={x:e.clientX,x0:x,id:e.pointerId,on:false};moved=0;fling=0},on);row.addEventListener(`pointermove`,e=>{if(!drag)return;const dx=e.clientX-drag.x;moved=Math.max(moved,Math.abs(dx));if(!drag.on\u0026\u0026moved>6){drag.on=true;row.setPointerCapture(drag.id);row.classList.add(`is-dragging`)}if(drag.on)x=drag.x0+dx*dir},on);const end=()=>{drag=null;row.classList.remove(`is-dragging`)};window.addEventListener(`pointerup`,end,on);window.addEventListener(`pointercancel`,end,on);row.addEventListener(`lostpointercapture`,end,on);row.addEventListener(`click`,e=>{if(e.detail>0\u0026\u0026moved>6){e.stopPropagation();e.preventDefault()}moved=0},{capture:true,signal:ac.signal});row.addEventListener(`wheel`,e=>{const d=Math.abs(e.deltaX)>Math.abs(e.deltaY)?e.deltaX:e.shiftKey?e.deltaY:0;if(!d)return;e.preventDefault();fling+=d*-dir},{passive:false,signal:ac.signal});return()=>{cancelAnimationFrame(raf);seen.disconnect();row.style.transform=``}});return()=>{ac.abort();for(const stop of stops)stop()}},[still]);useEffect(()=>{if(paused)for(const v of rootRef.current?.querySelectorAll(`video`)??[])v.pause()},[paused]);useEffect(()=>{const root=rootRef.current;if(!root)return;root.dataset.watching=open?`true`:`false`;if(open)for(const v of root.querySelectorAll(`video[data-src]`))v.pause()},[open]);useEffect(()=>{const d=dialogRef.current;if(!d)return;if(open\u0026\u0026!d.open)d.showModal();if(!open\u0026\u0026d.open)d.close()},[open]);const card=(f,i,twin)=>_jsxs(`button`,{type:`button`,className:`hf-film-card`,style:{aspectRatio:String(f.ar)},\"aria-hidden\":twin?`true`:undefined,tabIndex:twin?-1:0,onClick:()=>setOpen(f),\"aria-label\":`${f.kind}: ${f.name}. Watch with sound`,children:[_jsx(`video`,{\"data-src\":f.src,poster:f.poster,muted:true,loop:true,playsInline:true,preload:`none`}),_jsxs(`span`,{className:`hf-film-label`,children:[_jsx(`b`,{children:f.kind}),` `,f.name]})]},(twin?`t`:``)+i);return _jsxs(`div`,{className:`hf-film-rows not-prose`+(paused?` is-paused`:``),ref:rootRef,children:[rows.map((row,r)=>_jsx(`div`,{className:`hf-film-row`+(r?` is-reverse`:``),children:_jsxs(`div`,{className:`hf-film-track`,children:[row.map((f,i)=>card(f,i,false)),row.map((f,i)=>card(f,i,true))]})},r)),!still\u0026\u0026_jsx(`button`,{type:`button`,className:`hf-film-pause`,\"aria-pressed\":paused,onClick:()=>setPaused(!paused),children:paused?`Play`:`Pause`}),_jsx(`dialog`,{ref:dialogRef,className:`hf-film-dialog`,onClose:()=>setOpen(null),onClick:e=>{if(e.target===dialogRef.current)setOpen(null)},children:open\u0026\u0026_jsxs(`div`,{children:[_jsx(`video`,{src:open.hq,poster:open.poster,controls:true,autoPlay:true,playsInline:true}),_jsxs(`div`,{className:`hf-film-dialog-bar`,children:[_jsxs(`span`,{children:[_jsx(`b`,{children:open.kind}),` `,open.name,` · made with HyperFrames`]}),_jsx(`button`,{type:`button`,onClick:()=>setOpen(null),children:`Close`})]})]})})]})};const RemixShelf=({items,tall=false})=>{const _components={a:`a`,..._provideComponents()};const shelfRef=useRef(null);const reduced=useRef(null);if(reduced.current===null)reduced.current=typeof window!==`undefined`\u0026\u0026window.matchMedia(`(prefers-reduced-motion: reduce)`).matches;useEffect(()=>{const query=window.matchMedia(`(prefers-reduced-motion: reduce)`);const follow=event=>{reduced.current=event.matches;if(event.matches){for(const v of shelfRef.current?.querySelectorAll(`video`)??[])if(v.dataset.hover)v.pause()}};query.addEventListener(`change`,follow);return()=>query.removeEventListener(`change`,follow)},[]);const RemixCard=({item})=>{const videoRef=useRef(null);const[open,setOpen]=useState(false);const[copied,setCopied]=useState(false);const[chosen,setChosen]=useState(false);useEffect(()=>{const onPlay=event=>{const v=event.target;const own=videoRef.current;if(!(v instanceof HTMLVideoElement)||v.muted||v===own||!own)return;own.pause();own.muted=true;setChosen(false)};document.addEventListener(`play`,onPlay,true);return()=>document.removeEventListener(`play`,onPlay,true)},[]);const preview=on=>{const v=videoRef.current;const filmWithSound=[...document.querySelectorAll(`video`)].some(x=>!x.paused\u0026\u0026!x.muted);if(!v||chosen||on\u0026\u0026filmWithSound)return;if(on\u0026\u0026!reduced.current){v.dataset.hover=`1`;v.play().catch(()=>{})}else if(!on){delete v.dataset.hover;v.pause();v.currentTime=0}};const toggle=()=>{const v=videoRef.current;if(!v)return;if(chosen\u0026\u0026!v.paused){v.pause();v.muted=true;setChosen(false)}else{delete v.dataset.hover;v.muted=false;v.play().catch(()=>{});setChosen(true)}};const copy=async()=>{try{await navigator.clipboard.writeText(item.post);setCopied(true);setTimeout(()=>setCopied(false),1600)}catch{}};return _jsxs(`div`,{className:`hf-remix-card mint-overflow-hidden mint-rounded-xl mint-border`,children:[_jsx(`button`,{type:`button`,className:`hf-remix-media mint-relative mint-block mint-w-full mint-cursor-pointer mint-border-0 mint-p-0`,style:{aspectRatio:item.ratio},\"aria-label\":`${chosen?`Pause`:`Play with sound:`} ${item.name}, remixed in HyperFrames`,\"aria-pressed\":chosen,onMouseEnter:()=>preview(true),onMouseLeave:()=>preview(false),onClick:toggle,children:_jsx(`video`,{ref:videoRef,className:`mint-absolute mint-inset-0 mint-h-full mint-w-full mint-object-cover`,src:item.result,poster:item.resultPoster,preload:`none`,muted:true,loop:true,playsInline:true})}),_jsxs(`div`,{className:`mint-flex mint-flex-col mint-gap-1.5 mint-p-3`,children:[_jsx(`strong`,{className:`hf-remix-name mint-text-sm mint-leading-snug`,children:item.name}),_jsxs(`span`,{className:`hf-remix-credit mint-text-xs`,children:[`Remix of a video by`,` `,_jsx(_components.a,{href:item.post,target:`_blank`,rel:`noopener noreferrer`,children:item.handle})]}),_jsx(`button`,{type:`button`,onClick:()=>setOpen(!open),className:`hf-remix-btn mint-mt-1 mint-self-start mint-rounded-full mint-px-3 mint-py-1 mint-text-xs mint-font-semibold`,children:`Remix in Studio`}),open\u0026\u0026_jsxs(`div`,{className:`hf-remix-help mint-text-xs mint-leading-relaxed`,children:[`Copy the original's link, then paste it in `,_jsx(`strong`,{children:`Reference`}),` on the Studio app's Home.`,` `,_jsx(`button`,{type:`button`,onClick:copy,className:`mint-font-semibold mint-underline`,children:copied?`Copied`:`Copy link`})]})]})]})};return _jsx(`div`,{ref:shelfRef,className:`hf-remix-shelf not-prose mint-my-6${tall?` is-tall`:``}`,children:items.map(item=>_jsx(RemixCard,{item},item.id))})};const motion=[{\"id\":`jake-pond`,\"name\":`Pond: a new Linux OS`,\"ratio\":`16/9`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/jake-pond-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/jake-pond-result.jpg`,\"handle\":`@bflycomputer`,\"post\":`https://x.com/bflycomputer/status/2082496873655648632`},{\"id\":`jake-lovable`,\"name\":`Lovable: Aesthetics Update`,\"ratio\":`16/9`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/jake-lovable-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/jake-lovable-result.jpg`,\"handle\":`@Lovable`,\"post\":`https://x.com/Lovable/status/2053874566460752191`},{\"id\":`jake-figma-draw`,\"name\":`Figma Draw`,\"ratio\":`16/9`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/jake-figma-draw-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/jake-figma-draw-result.jpg`,\"handle\":`@figma`,\"post\":`https://x.com/figma/status/1920168282751185360`},{\"id\":`remix-anduril`,\"name\":`Anduril: AI Grand Prix`,\"ratio\":`1/1`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-anduril-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-anduril-result.jpg`,\"handle\":`@anduriltech`,\"post\":`https://x.com/anduriltech/status/2016233946607141290`},{\"id\":`remix-grok-bot`,\"name\":`Grok Bot: now on more plans`,\"ratio\":`16/9`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-grok-bot-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-grok-bot-result.jpg`,\"handle\":`@bot`,\"post\":`https://x.com/bot/status/2090852881373311369`},{\"id\":`remix-kimi-k3`,\"name\":`Kimi K3 teaser`,\"ratio\":`16/9`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-kimi-k3-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-kimi-k3-result.jpg`,\"handle\":`@Kimi_Moonshot`,\"post\":`https://x.com/Kimi_Moonshot/status/2081757327146045450`},{\"id\":`remix-jordanarchivess`,\"name\":`How do you communicate that`,\"ratio\":`4/3`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-jordanarchivess-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-jordanarchivess-result.jpg`,\"handle\":`@jordanarchivess`,\"post\":`https://x.com/jordanarchivess/status/2107536262894915762`},{\"id\":`remix-firecrawl`,\"name\":`Firecrawl Free Keyless`,\"ratio\":`16/9`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-firecrawl-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-firecrawl-result.jpg`,\"handle\":`@ericciarla`,\"post\":`https://x.com/ericciarla/status/2093375835679977570`},{\"id\":`remix-authorize-once`,\"name\":`Authorize Once, Everyone Connected`,\"ratio\":`16/9`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-authorize-once-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-authorize-once-result.jpg`,\"post\":`https://x.com/ClaudeDevs/status/2091953609185657251`,\"handle\":`@ClaudeDevs`},{\"id\":`remix-zaro`,\"name\":`Zaro: apps and agents on your context`,\"ratio\":`16/9`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-zaro-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-zaro-result.jpg`,\"handle\":`@ZaroAI_`,\"post\":`https://x.com/ZaroAI_/status/2070084796378747316`},{\"id\":`remix-polymarket-perps`,\"name\":`Polymarket Perps`,\"ratio\":`16/9`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-polymarket-perps-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-polymarket-perps-result.jpg`,\"handle\":`@Polymarket`,\"post\":`https://x.com/Polymarket/status/2095530373274816595`},{\"id\":`remix-web-noise`,\"name\":`From web noise to working UI`,\"ratio\":`16/9`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-web-noise-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-web-noise-result.jpg`,\"post\":`https://x.com/firecrawl/status/2057495269785358384`,\"handle\":`@firecrawl`},{\"id\":`remix-linear-loops`,\"name\":`Linear Loops`,\"ratio\":`16/9`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-linear-loops-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-linear-loops-result.jpg`,\"handle\":`@linear`,\"post\":`https://x.com/linear/status/2079233260161323371`},{\"id\":`remix-glyph`,\"name\":`Glyph: GPU typography for the web`,\"ratio\":`640/461`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-glyph-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-glyph-result.jpg`,\"handle\":`@pmndrs`,\"post\":`https://x.com/pmndrs/status/2100980802091708818`},{\"id\":`remix-hermes-omarchy`,\"name\":`Hermes in Omarchy`,\"ratio\":`1/1`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-hermes-omarchy-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-hermes-omarchy-result.jpg`,\"handle\":`@NousResearch`,\"post\":`https://x.com/NousResearch/status/2097403926072987986`},{\"id\":`remix-iskra-light`,\"name\":`Iskra Light`,\"ratio\":`5/4`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-iskra-light-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-iskra-light-result.jpg`,\"handle\":`@world_is_web`,\"post\":`https://x.com/world_is_web/status/2084694934657892557`},{\"id\":`remix-elevenlabs-reception`,\"name\":`Reception by ElevenLabs`,\"ratio\":`16/9`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-elevenlabs-reception-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-elevenlabs-reception-result.jpg`,\"handle\":`@ElevenLabs`,\"post\":`https://x.com/ElevenLabs/status/2100262886916358361`},{\"id\":`remix-cyera`,\"name\":`Cyera brand video`,\"ratio\":`16/9`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-cyera-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-cyera-result.jpg`,\"handle\":`@motionimo`,\"post\":`https://x.com/motionimo/status/2103703350017433670`},{\"id\":`remix-harvey`,\"name\":`Harvey`,\"ratio\":`16/9`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-harvey-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/remix-harvey-result.jpg`,\"handle\":`@harvey`,\"post\":`https://x.com/harvey/status/2089722668761432349`}];const aroll=[{\"id\":`aroll-aiwithsachi`,\"name\":`Top 5 plugins to install in Claude`,\"ratio\":`9/16`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/aiwithsachi-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/aiwithsachi-result.jpg`,\"handle\":`@aiwithsachi`,\"post\":`https://www.instagram.com/reel/Dc7G9Pxu_1O/`},{\"id\":`aroll-tenfoldmarc`,\"name\":`17 video effects Claude can create`,\"ratio\":`9/16`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/tenfoldmarc-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/tenfoldmarc-result.jpg`,\"handle\":`@tenfoldmarc`,\"post\":`https://www.instagram.com/reel/Def9pj5TWtA/`},{\"id\":`aroll-careerwithriya`,\"name\":`6 essential skills to transform your career`,\"ratio\":`9/16`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/careerwithriya-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/careerwithriya-result.jpg`,\"handle\":`@careerwithriya`,\"post\":`https://www.instagram.com/reel/Ddd57MBszhc/`},{\"id\":`aroll-harpercarrollai`,\"name\":`10 Days of AI Basics, Day 1`,\"ratio\":`9/16`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/harpercarrollai-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/harpercarrollai-result.jpg`,\"handle\":`@harpercarrollai`,\"post\":`https://www.instagram.com/reel/C4eNPF3PdpG/`},{\"id\":`aroll-mattfarmerai`,\"name\":`Best AI image generators, October 2026`,\"ratio\":`9/16`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/mattfarmerai-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/mattfarmerai-result.jpg`,\"handle\":`@mattfarmerai`,\"post\":`https://www.instagram.com/reel/DeCtQ_9JACg/`},{\"id\":`aroll-nocode-joshua`,\"name\":`10/10 Claude Skills for marketing`,\"ratio\":`9/16`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/nocode-joshua-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/nocode-joshua-result.jpg`,\"handle\":`@nocode.joshua`,\"post\":`https://www.tiktok.com/@nocode.joshua/video/7663973344026397960`},{\"id\":`aroll-mpaige13`,\"name\":`Granola + Claude Skills`,\"ratio\":`9/16`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/mpaige13-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/mpaige13-result.jpg`,\"handle\":`@mpaige13`,\"post\":`https://www.instagram.com/reel/DY5X72kxE-4/`},{\"id\":`aroll-brockmesarich`,\"name\":`These 5 GitHub Repos Give You Thousands of Free Claude Skills`,\"ratio\":`9/16`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/brockmesarich-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/brockmesarich-result.jpg`,\"handle\":`Brock Mesarich`,\"post\":`https://www.youtube.com/shorts/rxOcBowQcS0`},{\"id\":`aroll-drcintas`,\"name\":`Motion graphics in seconds`,\"ratio\":`9/16`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/drcintas-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/drcintas-result.jpg`,\"handle\":`@drcintas`,\"post\":`https://www.instagram.com/reel/DPoXbzZjb8J/`},{\"id\":`aroll-itsbetterwithai`,\"name\":`Astra makes complete AI videos inside ChatGPT`,\"ratio\":`9/16`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/itsbetterwithai-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/itsbetterwithai-result.jpg`,\"handle\":`@itsbetterwithai`,\"post\":`https://www.instagram.com/reel/DdTzYbkCkvc/`},{\"id\":`aroll-kevinstratvert`,\"name\":`Stop Paying for 5 AI Tools`,\"ratio\":`9/16`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/kevinstratvert-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/reference/aroll/kevinstratvert-result.jpg`,\"handle\":`Kevin Stratvert`,\"post\":`https://www.youtube.com/shorts/1fA5j5_5TRY`},{\"id\":`aroll-dan-martell-tools`,\"name\":`What's the best AI tool right now?`,\"ratio\":`9/16`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/dan-martell-tools-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/dan-martell-tools-result.jpg`,\"handle\":`Dan Martell`,\"post\":`https://www.youtube.com/shorts/mk1zJd9Rm4c`},{\"id\":`aroll-ali-abdaal-workflow`,\"name\":`5 tools I use every day`,\"ratio\":`9/16`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/ali-abdaal-workflow-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/ali-abdaal-workflow-result.jpg`,\"handle\":`@aliabdaal`,\"post\":`https://www.youtube.com/shorts/S2AZbZ_K8vY`},{\"id\":`aroll-ali-abdaal-archival`,\"name\":`Face over archival art`,\"ratio\":`9/16`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/ali-abdaal-archival-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/ali-abdaal-archival-result.jpg`,\"handle\":`@aliabdaal`,\"post\":`https://www.youtube.com/shorts/Ksjt_I8rDrE`},{\"id\":`aroll-ali-abdaal-dm`,\"name\":`Reads a DM, answers it`,\"ratio\":`9/16`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/ali-abdaal-dm-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/ali-abdaal-dm-result.jpg`,\"handle\":`Ali Abdaal`,\"post\":`https://www.youtube.com/shorts/jCyhEO3h-Ik`},{\"id\":`aroll-cindy-zhu-ranking`,\"name\":`Webcam ranking, 1 to 10`,\"ratio\":`9/16`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/cindy-zhu-ranking-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/cindy-zhu-ranking-result.jpg`,\"handle\":`@cindiezhu`,\"post\":`https://www.tiktok.com/@cindiezhu/video/7694049166972013831`},{\"id\":`aroll-hook-open-loops`,\"name\":`Hook, lead, open loops`,\"ratio\":`9/16`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/hook-open-loops-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/hook-open-loops-result.jpg`,\"post\":`https://www.instagram.com/reel/DambEp1igDW/`,\"handle\":`@realskytan`},{\"id\":`aroll-hundred-days-story`,\"name\":`100 days with stickers and photo cards`,\"ratio\":`9/16`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/hundred-days-story-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/hundred-days-story-result.jpg`,\"post\":`https://www.instagram.com/reel/Dd6vHlQgpok/`,\"handle\":`@anyway.julia`},{\"id\":`aroll-khris-sheer-founder`,\"name\":`The Founder Experiments, Ep. 1`,\"ratio\":`9/16`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/khris-sheer-founder-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/khris-sheer-founder-result.jpg`,\"handle\":`@khris.sheer`,\"post\":`https://www.tiktok.com/@khris.sheer/video/7491715587895430402`},{\"id\":`aroll-john-tagudin-capso`,\"name\":`Tool demo with callouts`,\"ratio\":`9/16`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/john-tagudin-capso-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/john-tagudin-capso-result.jpg`,\"handle\":`@john.tagudin`,\"post\":`https://www.tiktok.com/@john.tagudin/video/7524883942328126728`},{\"id\":`aroll-ugc-rachelll`,\"name\":`AI creator with product`,\"ratio\":`9/16`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/ugc-rachelll-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/ugc-rachelll-result.jpg`,\"handle\":`@ugc.rachelll`,\"post\":`https://www.tiktok.com/@ugc.rachelll/video/7616996050066345246`},{\"id\":`aroll-gusfiraa-meitu`,\"name\":`Photo glow-up in an editing app`,\"ratio\":`9/16`,\"result\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/gusfiraa-meitu-result.mp4`,\"resultPoster\":`https://static.heygen.ai/hyperframes-oss/desktop/viral-clone/gusfiraa-meitu-result.jpg`,\"handle\":`@gusfiraa`,\"post\":`https://www.tiktok.com/@gusfiraa/video/7668295832994598162`}];function _createMdxContent(props){const _components={a:`a`,li:`li`,p:`p`,strong:`strong`,tbody:`tbody`,td:`td`,th:`th`,thead:`thead`,tr:`tr`,ul:`ul`,..._provideComponents(),...props.components},{Heading,Table,Tip,_MdxComponentBoundary}=_components;if(!Heading)_missingMdxReference(`Heading`,true);if(!Table)_missingMdxReference(`Table`,true);if(!Tip)_missingMdxReference(`Tip`,true);if(!_MdxComponentBoundary)_missingMdxReference(`_MdxComponentBoundary`,true);return _jsxs(_Fragment,{children:[_jsx(_components.p,{children:`Every video on this page was made with HyperFrames: launch films, cartoons, explainers, 3D, logo stings, live-coded\nmusic. Click one to watch it with sound.`}),`\n`,_jsx(_MdxComponentBoundary,{name:`FilmRows`,children:_jsx(FilmRows,{})}),`\n`,_jsx(Heading,{level:`2`,id:`remix-a-video-you-like`,children:`Remix a video you like`}),`\n`,_jsxs(_components.p,{children:[`The fastest way to a video you love is to start from one. Every video below is a remix: someone’s original, rebuilt\nin HyperFrames with new words, people and brand. Hover to play. Like one? Choose `,_jsx(_components.strong,{children:`Remix in Studio`}),` and make your\nown version; see `,_jsx(_components.a,{href:`/studio-app/reference-video`,children:`Reference any video`}),` for how it works.`]}),`\n`,_jsx(Heading,{level:`3`,id:`launch-films-and-motion-graphics`,children:`Launch films and motion graphics`}),`\n`,_jsx(_components.p,{children:`Product launches and type-led motion, rebuilt from the original’s cuts, timing and effects.`}),`\n`,_jsx(_MdxComponentBoundary,{name:`RemixShelf`,children:_jsx(RemixShelf,{items:motion})}),`\n`,_jsx(Heading,{level:`3`,id:`talking-head-edits`,children:`Talking-head edits`}),`\n`,_jsx(_components.p,{children:`The editing style of popular Reels, TikToks and Shorts, with a different presenter: captions, cutaways, callouts and\npacing.`}),`\n`,_jsx(_MdxComponentBoundary,{name:`RemixShelf`,children:_jsx(RemixShelf,{items:aroll,tall:true})}),`\n`,_jsx(Heading,{level:`2`,id:`recreate-any-video-11`,children:`Recreate any video, 1:1`}),`\n`,_jsxs(_components.p,{children:[`Point HyperFrames at a finished video and it rebuilds the same film in editable HTML —\ngestures, type, timing and all. Below, each `,_jsx(_components.strong,{children:`reference`}),` (the original, on the left) sits\nnext to its `,_jsx(_components.strong,{children:`HyperFrames replica`}),` (on the right), matched frame for frame.`]}),`\n`,_jsxs(`div`,{className:`not-prose mint-my-6 mint-space-y-8`,children:[_jsx(_MdxComponentBoundary,{name:`ReplicaCompare`,children:_jsx(ReplicaCompare,{title:`THE OBLIST`,meta:`38.58s · 60fps`,refSrc:`https://static.heygen.ai/hyperframes-oss/docs/images/showcase/reverse-oblist-reference-snd.mp4`,refPoster:`https://static.heygen.ai/hyperframes-oss/docs/images/showcase/reverse-oblist-reference.jpg`,replicaSrc:`https://static.heygen.ai/hyperframes-oss/docs/images/showcase/reverse-oblist-replica.mp4`,replicaPoster:`https://static.heygen.ai/hyperframes-oss/docs/images/showcase/reverse-oblist-replica.jpg`})}),_jsx(_MdxComponentBoundary,{name:`ReplicaCompare`,children:_jsx(ReplicaCompare,{title:`Srinika × Mercury`,meta:`30.56s · 25fps · avatar footage`,refSrc:`https://static.heygen.ai/hyperframes-oss/docs/images/showcase/reverse-srinika-reference-snd.mp4`,refPoster:`https://static.heygen.ai/hyperframes-oss/docs/images/showcase/reverse-srinika-reference.jpg`,replicaSrc:`https://static.heygen.ai/hyperframes-oss/docs/images/showcase/reverse-srinika-replica.mp4`,replicaPoster:`https://static.heygen.ai/hyperframes-oss/docs/images/showcase/reverse-srinika-replica.jpg`})})]}),`\n`,_jsx(Heading,{level:`2`,id:`most-installed-blocks`,children:`Most-installed blocks`}),`\n`,_jsx(_components.p,{children:`These ready-to-run examples are ordered by human requested installs from the last 30 days. Add any block to a project, then customize its content in place.`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Example`}),_jsx(_components.th,{children:`Start here`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`logo-outro`}),_jsx(_components.td,{children:`npx hyperframes add logo-outro`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`data-chart`}),_jsx(_components.td,{children:`npx hyperframes add data-chart`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`editorial-flash-overlay`}),_jsx(_components.td,{children:`npx hyperframes add editorial-flash-overlay`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`organic-light-leak-overlay`}),_jsx(_components.td,{children:`npx hyperframes add organic-light-leak-overlay`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`mk-progress-stat`}),_jsx(_components.td,{children:`npx hyperframes add mk-progress-stat`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`flowchart`}),_jsx(_components.td,{children:`npx hyperframes add flowchart`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`mk-specs-list`}),_jsx(_components.td,{children:`npx hyperframes add mk-specs-list`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`mk-callout-highlight`}),_jsx(_components.td,{children:`npx hyperframes add mk-callout-highlight`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`hw-title`}),_jsx(_components.td,{children:`npx hyperframes add hw-title`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`code-typing`}),_jsx(_components.td,{children:`npx hyperframes add code-typing`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`lt-dark-card`}),_jsx(_components.td,{children:`npx hyperframes add lt-dark-card`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`cinematic-zoom`}),_jsx(_components.td,{children:`npx hyperframes add cinematic-zoom`})]})]})]}),`\n`,_jsx(Heading,{level:`2`,id:`project-templates`,children:`Project templates`}),`\n`,_jsx(_components.p,{children:`The init templates remain available for scaffolding complete projects.`}),`\n`,_jsxs(Table,{children:[_jsx(_components.thead,{children:_jsxs(_components.tr,{children:[_jsx(_components.th,{children:`Template`}),_jsx(_components.th,{children:`Good starting point for`})]})}),_jsxs(_components.tbody,{children:[_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`warm-grain`}),_jsx(_components.td,{children:`Branding, lifestyle, and editorial work`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`play-mode`}),_jsx(_components.td,{children:`Energetic social videos and product launches`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`swiss-grid`}),_jsx(_components.td,{children:`Technical, structured, and corporate stories`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`kinetic-type`}),_jsx(_components.td,{children:`Type-led promos, intros, and title cards`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`decision-tree`}),_jsx(_components.td,{children:`Explainable diagrams and tutorials`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`product-promo`}),_jsx(_components.td,{children:`Multi-scene product showcases`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`nyt-graph`}),_jsx(_components.td,{children:`Editorial charts and data stories`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`vignelli`}),_jsx(_components.td,{children:`Bold portrait announcements`})]}),_jsxs(_components.tr,{children:[_jsx(_components.td,{children:`blank`}),_jsx(_components.td,{children:`Agent-generated or fully custom work`})]})]})]}),`\n`,_jsx(Tip,{children:_jsx(_components.p,{children:`Use npx hyperframes init my-video —example \u003cname> for a full project template, or npx hyperframes add \u003cblock> to start from one of the examples above.`})}),`\n`,_jsx(Heading,{level:`2`,id:`related-topics`,children:`Related topics`}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsx(_components.li,{children:_jsx(_components.a,{href:`/studio-app/reference-video`,children:`Reference any video to recreate its style`})}),`\n`,_jsx(_components.li,{children:_jsx(_components.a,{href:`/workflows`,children:`What do you want to make?`})}),`\n`,_jsx(_components.li,{children:_jsx(_components.a,{href:`/quickstart`,children:`Make your first video`})}),`\n`]})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{ReplicaCompare,FilmRows,RemixShelf,motion,aroll,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":"Inspiration","description":"Videos people made, remixed in HyperFrames: launch films, motion graphics and talking-head edits. Find one you like and remix it in the Studio app.","href":"/examples"}}},"mdxSourceWithNoJs":null,"noJsSplices":[[150,33221,")=>null;const FilmRows=()=>null;const RemixShelf=()=>null;const motion=undefined;const aroll=undefined;function _createM"]]},"mdxExtracts":{"tableOfContents":[{"title":"Remix a video you like","slug":"remix-a-video-you-like","depth":2,"children":[{"title":"Launch films and motion graphics","slug":"launch-films-and-motion-graphics","depth":3,"children":[]},{"title":"Talking-head edits","slug":"talking-head-edits","depth":3,"children":[]}]},{"title":"Recreate any video, 1:1","slug":"recreate-any-video-11","depth":2,"children":[]},{"title":"Most-installed blocks","slug":"most-installed-blocks","depth":2,"children":[]},{"title":"Project templates","slug":"project-templates","depth":2,"children":[]},{"title":"Related topics","slug":"related-topics","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":["/_mintlify/custom/docs.lltai.cloud/3e1dd9f13f45d886/docs-menu-label.js","/_mintlify/custom/docs.lltai.cloud/8a0fcba05bf0a907/download-attribution.js","/_mintlify/custom/docs.lltai.cloud/e197f5ee3156e18e/template-gallery.js"],"dynamicCss":".mint-absolute {\n position: absolute\n}\n.mint-relative {\n position: relative\n}\n.mint-inset-0 {\n inset: 0px\n}\n.mint-left-3 {\n left: 0.75rem\n}\n.mint-top-3 {\n top: 0.75rem\n}\n.mint-z-10 {\n z-index: 10\n}\n.mint-my-6 {\n margin-top: 1.5rem;\n margin-bottom: 1.5rem\n}\n.mint-mb-3 {\n margin-bottom: 0.75rem\n}\n.mint-mt-1 {\n margin-top: 0.25rem\n}\n.mint-block {\n display: block\n}\n.mint-flex {\n display: flex\n}\n.mint-grid {\n display: grid\n}\n.mint-aspect-video {\n aspect-ratio: 16 / 9\n}\n.mint-h-full {\n height: 100%\n}\n.mint-w-full {\n width: 100%\n}\n.mint-cursor-pointer {\n cursor: pointer\n}\n.mint-grid-cols-1 {\n grid-template-columns: repeat(1, minmax(0, 1fr))\n}\n.mint-flex-col {\n flex-direction: column\n}\n.mint-items-center {\n align-items: center\n}\n.mint-items-baseline {\n align-items: baseline\n}\n.mint-justify-between {\n justify-content: space-between\n}\n.mint-gap-1\\.5 {\n gap: 0.375rem\n}\n.mint-gap-4 {\n gap: 1rem\n}\n.mint-space-y-8 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-y-reverse: 0;\n margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));\n margin-bottom: calc(2rem * var(--tw-space-y-reverse))\n}\n.mint-self-start {\n align-self: flex-start\n}\n.mint-overflow-hidden {\n overflow: hidden\n}\n.mint-rounded-full {\n border-radius: 9999px\n}\n.mint-rounded-xl {\n border-radius: 0.75rem\n}\n.mint-border {\n border-width: 1px\n}\n.mint-border-0 {\n border-width: 0px\n}\n.mint-border-zinc-200 {\n --tw-border-opacity: 1;\n border-color: rgb(228 228 231 / var(--tw-border-opacity, 1))\n}\n.mint-bg-black\\/60 {\n background-color: rgb(0 0 0 / 0.6)\n}\n.mint-bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))\n}\n.mint-bg-zinc-100 {\n --tw-bg-opacity: 1;\n background-color: rgb(244 244 245 / var(--tw-bg-opacity, 1))\n}\n.mint-object-cover {\n object-fit: cover\n}\n.mint-p-0 {\n padding: 0px\n}\n.mint-p-3 {\n padding: 0.75rem\n}\n.mint-px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem\n}\n.mint-py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem\n}\n.mint-py-1\\.5 {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem\n}\n.mint-text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n.mint-text-xs {\n font-size: 0.75rem;\n line-height: 1rem\n}\n.mint-font-medium {\n font-weight: 500\n}\n.mint-font-semibold {\n font-weight: 600\n}\n.mint-uppercase {\n text-transform: uppercase\n}\n.mint-leading-relaxed {\n line-height: 1.625\n}\n.mint-leading-snug {\n line-height: 1.375\n}\n.mint-tracking-wide {\n letter-spacing: 0.025em\n}\n.mint-text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity, 1))\n}\n.mint-text-zinc-500 {\n --tw-text-opacity: 1;\n color: rgb(113 113 122 / var(--tw-text-opacity, 1))\n}\n.mint-text-zinc-700 {\n --tw-text-opacity: 1;\n color: rgb(63 63 70 / var(--tw-text-opacity, 1))\n}\n.mint-underline {\n text-decoration-line: underline\n}\n.mint-backdrop-blur {\n --tw-backdrop-blur: blur(8px);\n -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)\n}\n.mint-transition {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n.hover\\:mint-bg-black\\/75:hover {\n background-color: rgb(0 0 0 / 0.75)\n}\n.focus-visible\\:mint-outline:focus-visible {\n outline-style: solid\n}\n.focus-visible\\:mint-outline-2:focus-visible {\n outline-width: 2px\n}\n.focus-visible\\:mint-outline-offset-2:focus-visible {\n outline-offset: 2px\n}\n.focus-visible\\:mint-outline-white:focus-visible {\n outline-color: #fff\n}\n.dark\\:mint-border-zinc-800:is(.dark *) {\n --tw-border-opacity: 1;\n border-color: rgb(39 39 42 / var(--tw-border-opacity, 1))\n}\n.dark\\:mint-bg-zinc-900:is(.dark *) {\n --tw-bg-opacity: 1;\n background-color: rgb(24 24 27 / var(--tw-bg-opacity, 1))\n}\n.dark\\:mint-bg-zinc-950:is(.dark *) {\n --tw-bg-opacity: 1;\n background-color: rgb(9 9 11 / var(--tw-bg-opacity, 1))\n}\n.dark\\:mint-text-zinc-300:is(.dark *) {\n --tw-text-opacity: 1;\n color: rgb(212 212 216 / var(--tw-text-opacity, 1))\n}\n.dark\\:mint-text-zinc-400:is(.dark *) {\n --tw-text-opacity: 1;\n color: rgb(161 161 170 / var(--tw-text-opacity, 1))\n}\n@media (min-width: 768px) {\n .md\\:mint-grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr))\n }\n}","subdomain":"docs.lltai.cloud","siteName":"HyperFrames","title":"Inspiration - HyperFrames","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"originalFileLocation":"examples.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=\"system\"}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=\"Videos people made, remixed in HyperFrames: launch films, motion graphics and talking-head edits. Find one you like and remix it in the Studio app.\">\u003cmeta data-mint-head name=\"application-name\" content=\"HyperFrames\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/favicons/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/favicons/favicon-32x32.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/favicons/favicon-16x16.png\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/favicons/favicon.ico\">\u003cmeta data-mint-head property=\"og:title\" content=\"Inspiration - HyperFrames\">\u003cmeta data-mint-head property=\"og:description\" content=\"Videos people made, remixed in HyperFrames: launch films, motion graphics and talking-head edits. Find one you like and remix it in the Studio app.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"HyperFrames\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://local./examples\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"http://docs.lltai.cloud/_mintlify/og/examples.png\">\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=\"Inspiration - HyperFrames\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Videos people made, remixed in HyperFrames: launch films, motion graphics and talking-head edits. Find one you like and remix it in the Studio app.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"http://docs.lltai.cloud/_mintlify/og/examples.png\">\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=\"/favicons/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"HyperFrames\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#181716\">\u003clink data-mint-head rel=\"canonical\" href=\"https://local./examples\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/examples.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"HyperFrames\",\"publisher\":{\"@type\":\"Organization\",\"name\":\"HyperFrames\"},\"provider\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","agentPointerHref":"/examples.md","siteName":"HyperFrames","nav":{"tabs":[{"tab":"Docs","icon":"book-open","menu":[{"item":"Make a video","icon":"book-open","description":"Guides by kind of video","groups":[{"group":"Start here","pages":[{"title":"What is HyperFrames?","sidebarTitle":"What HyperFrames is","href":"/introduction"},{"title":"Make your first video","description":"Make your first HyperFrames video in the free Studio app for Mac, Windows and Linux, with your own AI agent, or in an AI chat with nothing to install.","href":"/quickstart"},{"title":"Inspiration","href":"/examples"},{"title":"HyperFrames FAQ","description":"Short answers to the questions people ask most about HyperFrames: cost, which agent to use, Windows, Studio, Remotion, rendering, audio, and fonts.","sidebarTitle":"FAQ","href":"/faq"}]},{"group":"Make a video","pages":[{"title":"What do you want to make?","sidebarTitle":"What to make","href":"/workflows"},{"title":"Make a product launch video with AI","sidebarTitle":"Product launch","href":"/guides/product-launch-video"},{"title":"Make an explainer video with AI","sidebarTitle":"Explainer","href":"/guides/faceless-explainer"},{"title":"Make motion graphics with AI","sidebarTitle":"Motion graphics","href":"/guides/motion-graphics"},{"title":"Add captions to a video with AI","sidebarTitle":"Captions","href":"/guides/captions-and-recuts"},{"title":"Make a music video or lyric video","sidebarTitle":"Music or lyric video","href":"/guides/music-to-video"},{"title":"Turn data into an animated video","sidebarTitle":"Data and maps","href":"/prompting/data-and-maps"},{"title":"Add an AI avatar presenter to a video","sidebarTitle":"Avatar presenter","href":"/guides/avatar-presenter"},{"title":"Turn a GitHub PR into a video","sidebarTitle":"PR to video","href":"/guides/pr-to-video"},{"title":"Make an interactive presentation with AI","sidebarTitle":"Presentation","href":"/guides/slideshow"},{"title":"Make any other video","sidebarTitle":"Any other video","href":"/guides/general-video"}]},{"group":"Use it with your agent","pages":[{"title":"Make videos with Claude Code","sidebarTitle":"Claude Code","href":"/guides/with-claude-code"},{"title":"Make videos with Codex","sidebarTitle":"Codex","href":"/guides/with-codex"},{"title":"Make videos with Cursor","sidebarTitle":"Cursor","href":"/guides/with-cursor"},{"title":"Create through an AI chat","href":"/guides/mcp"},{"title":"Make videos with a free agent","sidebarTitle":"Free agents","href":"/guides/free-agents"},{"title":"Install and update agent skills","sidebarTitle":"Agent skills","href":"/guides/skills"},{"title":"Install the HyperFrames plugin","sidebarTitle":"Agent plugins","href":"/guides/plugins"},{"title":"Bring in a design: Figma, Claude Design, Open Design","sidebarTitle":"Bring in a design","href":"/guides/design-tools"}]},{"group":"Compare","pages":[{"title":"HyperFrames vs Remotion","sidebarTitle":"vs Remotion","href":"/guides/hyperframes-vs-remotion"},{"title":"Move from Remotion to HyperFrames","sidebarTitle":"Move from Remotion","href":"/prompting/remotion-migration"}]},{"group":"Tips for better videos","pages":[{"title":"Ask for a great video","href":"/prompting/overview"},{"title":"Ask for smooth motion and transitions","sidebarTitle":"Motion and transitions","href":"/prompting/motion"},{"title":"Add voice, music and sound","sidebarTitle":"Voice, music and sound","href":"/prompting/media-and-audio"},{"title":"Text, captions and code on screen","sidebarTitle":"Text, captions and code","href":"/prompting/captions-catalog"},{"title":"Colour, effects, 3D and generated art","sidebarTitle":"Colour, effects and 3D","href":"/prompting/color-grading"},{"title":"Brand, templates and storyboards","sidebarTitle":"Brand and templates","href":"/prompting/design-systems"},{"group":"More prompt topics","pages":[{"title":"Verified example prompts","href":"/prompting/examples"},{"title":"Editing existing videos","href":"/prompting/editing-existing-videos"},{"title":"Recreating something you saw","href":"/prompting/recreating-references"},{"title":"A full film, prompt by prompt","href":"/prompting/capstone"}]}]},{"group":"Images, sound and footage","pages":[{"title":"Work with media","sidebarTitle":"Overview","href":"/guides/media"},{"title":"Add images and video clips","sidebarTitle":"Images and video","href":"/guides/video-components"},{"title":"Add voiceover, music, sound effects and captions","sidebarTitle":"Voice, music and captions","href":"/guides/voice-and-audio"},{"title":"Remove a video background","sidebarTitle":"Remove background","href":"/guides/remove-background"},{"title":"Add effects to images and video","sidebarTitle":"Video effects","href":"/guides/media-effects"},{"title":"Render a video to MP4","sidebarTitle":"Render","href":"/guides/export-and-share"}]},{"group":"Browser editor","pages":[{"title":"Edit in the browser editor","sidebarTitle":"Browser editor","href":"/studio/index"},{"title":"Edit on the canvas","sidebarTitle":"Canvas, motion and code","href":"/studio/canvas"},{"title":"Edit timing on the timeline","href":"/studio/timeline"},{"title":"Mix audio","sidebarTitle":"Audio","href":"/studio/audio-effects"},{"title":"Captions, assets and variables","sidebarTitle":"Captions, assets and variables","href":"/studio/assets-and-blocks"},{"title":"Export and slideshows","sidebarTitle":"Export and slideshows","href":"/studio/export"}]},{"group":"Help and updates","pages":[{"title":"Troubleshooting","sidebarTitle":"Troubleshooting","href":"/help"},{"title":"30 Days of HyperFrames","sidebarTitle":"30 Days of HyperFrames","href":"/thirty-days"},{"title":"Product updates","href":"/product-updates"},{"title":"Weekly updates","href":"/weekly-updates"},{"title":"Changelog","href":"/changelog"}]}]},{"item":"Studio app","icon":"laptop","description":"The desktop app","pages":[{"title":"Studio app","href":"/studio-app"}]},{"item":"Developers","icon":"code","description":"CLI, SDK and reference","pages":[{"title":"Developers","href":"/developers/overview"}]},{"item":"Free lessons","icon":"graduation-cap","description":"A free video course","href":"https://hyperframes.heygen.com/lessons"},{"item":"Community","icon":"users","description":"Videos people made","href":"https://hyperframes.studio/?view=community\u0026src=docs-navbar"},{"item":"App changelog","icon":"sparkles","description":"What's new in the app","href":"https://hyperframes.studio/changelog?src=docs-navbar"}]},{"tab":"Catalog","icon":"grid-2","pages":[{"title":"Catalog","href":"/catalog"}]}]},"basePath":"","title":"Inspiration - HyperFrames","buildId":"44983560cdbd","dynamics":[],"chunks":[]}