1<!doctype html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <link 7 rel="icon" 8 type="image/svg+xml" 9 href="data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cstyle%3E@media (prefers-color-scheme:dark)%7Bpath%7Bstroke:%23ccc%7D%7D%3C/style%3E%3C/svg%3E" 10 /> 11 <link rel="preconnect" href="https://fonts.googleapis.com" /> 12 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> 13 <link 14 rel="stylesheet" 15 href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@500;700&family=Poppins:wght@500;600;700&family=Instrument+Sans:wght@400;500;600&display=swap" media="print" data-public-fonts> 16 <title>Animater â AI Motion Design Videos From Your Real Product</title> 17 <meta name="description" content="Turn your live web app into a short motion-graphics video. Animater captures your real product and your own AI coding agent animates, cuts and scores it." /> 18 <link rel="canonical" href="https://animater.ai/" /> 19 <meta property="og:type" content="website" /> 20 <meta property="og:site_name" content="Animater" /> 21 <meta property="og:url" content="https://animater.ai/" /> 22 <meta property="og:title" content="Animater â AI Motion Design Videos From Your Real Product" /> 23 <meta property="og:description" content="Turn your live web app into a short motion-graphics video. Animater captures your real product and your own AI coding agent animates, cuts and scores it." /> 24 <style data-public-css="critical">:root { --theme: #c8f24a; --theme-light: #d9f77e; --theme-darker: #a9d92f; --theme-fg: #0a0a0b; --theme-overlay: rgba(200, 242, 74, .12); --theme-overlay-strong: rgba(200, 242, 74, .2); --background-color: #131316; --background-color-dark: #0d0d0f; --surface-color: #18181b; --surface-color-elevated: #232328; --surface-color-light: #2a2a2f; --surface-color-hover: #303035; --overlay-color: var(--surface-color-elevated); --input-background: #18181b; --input-background-hover: #1e1e22; --border-color: rgba(255, 255, 255, .06); --border-color-subtle: rgba(255, 255, 255, .04); --border-color-default: rgba(255, 255, 255, .08); --border-color-strong: rgba(255, 255, 255, .12); --scrollbar-background: var(--surface-color); --radius-xs: 4px; --radius-sm: 6px; --radius: 8px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-full: 9999px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .2); --shadow-md: 0 4px 12px rgba(0, 0, 0, .3); --shadow-lg: 0 8px 24px rgba(0, 0, 0, .4); --shadow-panel: 0 0 0 1px rgba(255, 255, 255, .04), 0 4px 24px rgba(0, 0, 0, .4), 0 1px 4px rgba(0, 0, 0, .3); --shadow-card: 0 0 0 1px rgba(255, 255, 255, .03), 0 2px 8px rgba(0, 0, 0, .3); --shadow-dropdown: 0 0 0 1px rgba(255, 255, 255, .05), 0 8px 32px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3); --shadow-button-hover: 0 4px 12px rgba(200, 242, 74, .3); --shadow-focus: 0 0 0 3px rgba(200, 242, 74, .35); --timing-ease-out: cubic-bezier(.33, 1, .68, 1); --timing-ease-in-out: cubic-bezier(.65, 0, .35, 1); --duration-fast: .1s; --duration-normal: .15s; --duration-slow: .25s; --font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --font-family-mono: "JetBrains Mono", monospace; --font-size-xs: 11px; --font-size-small: 12px; --font-size: 13px; --font-size-md: 14px; --font-size-big: 16px; --font-size-lg: 18px; --text-primary: #ffffff; --text-secondary: rgba(255, 255, 255, .7); --text-muted: rgba(255, 255, 255, .45); --text-disabled: rgba(255, 255, 255, .25); --red: #ff4757; --yellow: #ffbe0b; --green: #2ed573; --blue: var(--theme); --purple: #9a4ab8; --orange: #ff9f43; --track-video: #4a9bb8; --track-audio: #3ba55d; --track-text: #b89a4a; --track-effects: #9a4ab8; } 25@media (prefers-reduced-motion) {:root { --duration-normal: 0; --duration-fast: 0; }} 26* { box-sizing: border-box; accent-color: var(--theme); } 27::-webkit-scrollbar { width: 10px; height: 10px; background-color: var(--scrollbar-background); } 28::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border: 2px solid var(--scrollbar-background); border-radius: var(--radius-full); } 29::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); } 30::-webkit-scrollbar-corner { background-color: transparent; } 31html, body { font-family: var(--font-family); font-size: var(--font-size); line-height: 1.5; overflow: hidden; padding: 0px; margin: 0px; background-color: var(--background-color); color: var(--text-secondary); -webkit-font-smoothing: antialiased; } 32main { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; } 33button, input, select { font-family: inherit; font-size: inherit; line-height: inherit; } 34svg { display: block; width: 24px; height: 24px; } 35button { background: none; appearance: none; border: 0px; padding: 0px; } 36@keyframes loading { 37 0% { background-position: 0px 0px; } 38 100% { background-position: 22.63px 0px; } 39} 40.v8-root, .v8-root * { margin: 0px; padding: 0px; box-sizing: border-box; } 41.v8-root { position: relative; height: 100vh; width: 100%; overflow: hidden auto; background: rgb(10, 10, 11); color: rgb(245, 240, 235); font-family: "Instrument Sans", "Instrument Sans Fallback", system-ui, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; --disp: "Space Grotesk", "Space Grotesk Fallback", "Helvetica Neue", sans-serif; } 42@font-face { font-family: "Space Grotesk Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue"), local("Helvetica"); font-weight: 600 900; size-adjust: 90.9%; ascent-override: 107.8%; descent-override: 31.9%; line-gap-override: 0%; } 43@font-face { font-family: "Space Grotesk Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue"), local("Helvetica"); font-weight: 100 599; size-adjust: 91.6%; ascent-override: 107%; descent-override: 31.7%; line-gap-override: 0%; } 44@font-face { font-family: "Instrument Sans Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 103.4%; ascent-override: 93.8%; descent-override: 24.2%; line-gap-override: 0%; } 45.v8-hero-mask { mask-image: radial-gradient(170% 210% at 50% 58%, rgb(0, 0, 0) 84%, transparent 100%); } 46@keyframes agentBlink { 47 0%, 55% { opacity: 1; } 48 56%, 100% { opacity: 0; } 49} 50.v8-root ::selection { background: rgb(200, 242, 74); color: rgb(10, 10, 11); } 51.disp { font-family: var(--disp, "Poppins", "Helvetica Neue", sans-serif); text-transform: uppercase; letter-spacing: -0.01em; } 52@keyframes rise { 53 0% { opacity: 0.01; transform: translateY(26px); } 54 100% { opacity: 1; transform: none; } 55} 56@keyframes letterWave { 57 0%, 100% { transform: translateY(0px); } 58 50% { transform: translateY(-9px); } 59} 60@keyframes mBounce { 61 0%, 100% { transform: translateY(0px); } 62 30% { transform: translateY(-15px); } 63 48% { transform: translateY(0px); } 64 64% { transform: translateY(-6px); } 65 80% { transform: translateY(0px); } 66} 67@keyframes mFlip { 68 0%, 100% { transform: rotateX(0deg); } 69 50% { transform: rotateX(360deg); } 70} 71@keyframes mBlur { 72 0% { opacity: 0.1; filter: blur(8px); } 73 60% { opacity: 1; filter: blur(0px); } 74 100% { opacity: 1; filter: blur(0px); } 75} 76@keyframes mPop { 77 0%, 100% { transform: scale(1); } 78 40% { transform: scale(1.38); } 79 62% { transform: scale(0.9); } 80} 81@keyframes mSquash { 82 0%, 100% { transform: scale(1); } 83 28% { transform: scale(1.24, 0.8); } 84 54% { transform: scale(0.86, 1.16); } 85 76% { transform: scale(1); } 86} 87@keyframes mGlitch { 88 0% { transform: translate(0px); text-shadow: none; clip-path: inset(0px); } 89 8% { transform: translate(-2px, 1px); text-shadow: rgb(255, 46, 107) 2px 0px, rgb(33, 230, 255) -2px 0px; clip-path: inset(0px); } 90 16% { transform: translate(3px, -1px); text-shadow: rgb(255, 46, 107) 2px 0px, rgb(33, 230, 255) -2px 0px; clip-path: inset(15% 0px 55%); } 91 24% { transform: translate(-2px); text-shadow: rgb(255, 46, 107) -2px 0px, rgb(33, 230, 255) 2px 0px; clip-path: inset(0px); } 92 34% { transform: translate(2px, 1px); text-shadow: rgb(255, 46, 107) 2px 0px, rgb(33, 230, 255) -2px 0px; clip-path: inset(62% 0px 8%); } 93 44% { transform: translate(-1px, -1px); text-shadow: rgb(255, 46, 107) 2px 0px, rgb(33, 230, 255) -2px 0px; clip-path: inset(0px); } 94 54% { transform: translate(1px); text-shadow: rgb(255, 46, 107) -2px 0px, rgb(33, 230, 255) 2px 0px; clip-path: inset(30% 0px); } 95 64% { transform: translate(0px); text-shadow: none; clip-path: inset(0px); } 96 78% { transform: translate(-1px, 1px); text-shadow: rgb(255, 46, 107) 1px 0px, rgb(33, 230, 255) -1px 0px; clip-path: inset(0px); } 97 100% { transform: translate(0px); text-shadow: none; clip-path: inset(0px); } 98} 99@keyframes mRoll { 100 0%, 100% { transform: rotateY(0deg); } 101 50% { transform: rotateY(360deg); } 102} 103@keyframes mNeon { 104 0%, 100% { opacity: 1; } 105 8% { opacity: 0.22; } 106 10% { opacity: 1; } 107 18% { opacity: 0.5; } 108 20% { opacity: 1; } 109 38% { opacity: 0.85; } 110 40% { opacity: 1; } 111 54% { opacity: 0.28; } 112 56% { opacity: 1; } 113 72% { opacity: 0.6; } 114 74% { opacity: 1; } 115} 116@keyframes mWipe { 117 0% { clip-path: inset(0px 100% 0px 0px); } 118 60%, 100% { clip-path: inset(0px); } 119} 120@keyframes mStretch { 121 0%, 100% { transform: scaleX(1); }
122 30% { transform: scaleX(1.55); } 123 46% { transform: scaleX(0.82); } 124 64% { transform: scaleX(1.08); } 125} 126@keyframes avFloat { 127 0%, 100% { transform: translateY(0px); } 128 50% { transform: translateY(-2.5px); } 129} 130@keyframes fadeIn { 131 100% { opacity: 1; } 132} 133@keyframes spin { 134 0% { transform: rotate(0deg); } 135 100% { transform: rotate(360deg); } 136} 137@keyframes hlSwipe { 138 0% { clip-path: inset(0px 100% 0px 0px); } 139 100% { clip-path: inset(0px); } 140} 141@keyframes marquee { 142 0% { transform: translate(0px); } 143 100% { transform: translate(-50%); } 144} 145@keyframes stepTwo { 146 0%, 46% { opacity: 0; } 147 50%, 96% { opacity: 1; } 148 100% { opacity: 0; } 149} 150.strip::-webkit-scrollbar { height: 0px; } 151.v8-navlink:hover { color: rgb(245, 240, 235) !important; } 152.v8-navcta:hover { background: rgb(200, 242, 74) !important; color: rgb(10, 10, 11) !important; } 153.v8-btn-primary:hover { transform: translateY(-2px) !important; } 154.v8-btn-ghost:hover { border-color: rgba(245, 240, 235, 0.35) !important; } 155.v8-price-btn-outline:hover { box-shadow: rgba(245, 240, 235, 0.45) 0px 0px 0px 1px inset !important; } 156.v8-price-btn-primary:hover { transform: translateY(-1px) !important; } 157.v8-foot-link:hover, .v8-social:hover { color: rgb(245, 240, 235) !important; } 158@media (max-width: 900px) {.nav-links { display: none !important; }.grid-2 { grid-template-columns: 1fr !important; gap: 36px !important; }} 159@media (max-width: 640px) {.v8-root nav { padding: 0px 16px !important; }.tk-grid { gap: 10px 12px !important; }.fw { font-size: 24px !important; letter-spacing: 0.2em !important; }} 160@media (prefers-reduced-motion: reduce) {.v8-root * { animation-duration: 1ms !important; }} 161@keyframes _spin_134d7_16 { 162 100% { transform: rotate(360deg); } 163} 164@keyframes _sweep_xf9nj_1 { 165 0% { left: -2px; } 166 100% { left: 100%; } 167} 168@keyframes _spin_jvbwo_391 { 169 100% { transform: rotate(360deg); } 170}</style>
171<script async src="/public-fonts.js"></script>
171 172</head> 173 <body> 174 <main data-prerendered><div id="v8Landing" class="v8-root"><nav style="position: fixed; top: 0px; left: 0px; right: 0px; z-index: 100; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0px 32px; background: rgba(10, 10, 11, 0.72); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(245, 240, 235, 0.06);"><a href="#top" style="display: flex; align-items: center; gap: 9px; text-decoration: none; color: rgb(245, 240, 235);"><svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#c8f24a" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" style="animation: 16s linear 0s infinite normal none running spin;"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path></svg><span class="disp" style="font-size: 20px; font-weight: 700; letter-spacing: 0.08em;">ANIMATER</span></a><div class="nav-links" style="display: flex; gap: 28px; position: absolute; left: 50%; transform: translateX(-50%);"><a href="#feature" class="disp v8-navlink" style="font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: rgb(161, 161, 170); text-decoration: none; transition: color 0.2s;">Product</a><a href="#films" class="disp v8-navlink" style="font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: rgb(161, 161, 170); text-decoration: none; transition: color 0.2s;">Films</a><a href="#pricing" class="disp v8-navlink" style="font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: rgb(161, 161, 170); text-decoration: none; transition: color 0.2s;">Pricing</a><a href="/templates" class="disp v8-navlink" style="font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: rgb(161, 161, 170); text-decoration: none; transition: color 0.2s;">Templates</a><a href="/download" class="disp v8-navlink" style="font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: rgb(161, 161, 170); text-decoration: none; transition: color 0.2s;">Download</a></div><div style="display: flex; align-items: center; gap: 20px;"><button type="button" class="disp v8-navlink" style="font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: rgb(161, 161, 170); background: transparent; border: 0px; cursor: pointer; font-family: inherit; transition: color 0.2s;">Log in</button><button type="button" class="disp v8-navcta" style="font-size: 13px; font-weight: 700; letter-spacing: 0.08em; padding: 9px 20px; color: rgb(200, 242, 74); background: transparent; border: 1px solid rgba(200, 242, 74, 0.5); border-radius: 8px; cursor: pointer; font-family: inherit; transition: background 0.2s, color 0.2s;">Start free</button></div></nav><header id="top" style="position: relative; z-index: 1; padding: 200px 32px 0px; text-align: center;"><div aria-hidden="true" class="v8-hero-mask" style="position: absolute; inset: 0px; z-index: 0; pointer-events: none; opacity: 0.85;"><div style="position: relative; width: 100%; height: 100%; min-height: 380px; background: rgb(10, 10, 11); overflow: hidden; display: block;"><canvas width="1440" height="580" style="position: absolute; inset: 0px; width: 100%; height: 100%; display: block;"></canvas><div aria-hidden="true" style="position: absolute; inset: 0px; pointer-events: none; background: radial-gradient(120% 120%, transparent 72%, rgba(10, 10, 11, 0.5));"></div></div></div><div aria-hidden="true" style="position: absolute; left: 0px; right: 0px; bottom: 0px; height: 220px; z-index: 0; pointer-events: none; background: linear-gradient(transparent, rgb(10, 10, 11));"></div><div style="position: relative; z-index: 1;"><h1 class="disp" style="font-size: clamp(38px, 5.6vw, 76px); font-weight: 700; line-height: 1; margin-top: 20px; max-width: 10.37em; margin-left: auto; margin-right: auto; animation: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.06s 1 normal both running rise;">AI <span style="color: rgb(10, 10, 11); background: rgb(200, 242, 74); padding: 0.06em 0.16em; border-radius: 0.1em; display: inline-block; overflow: visible; perspective: 600px;
174 animation: 0.72s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s 1 normal both running hlSwipe;"><span style="display: inline-block;">m</span><span style="display: inline-block;">o</span><span style="display: inline-block;">t</span><span style="display: inline-block;">i</span><span style="display: inline-block;">o</span><span style="display: inline-block;">n</span></span> design</h1><p style="max-width: 60ch; margin: 26px auto 0px; font-size: 19px; color: rgb(161, 161, 170); animation: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.14s 1 normal both running rise;">Built from your live product â captured straight off the page, including behind your login, then animated, cut and scored. Or start from a template your agent adapts to your product.</p><p style="margin: 14px auto 0px; font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: 0.04em; color: rgb(113, 113, 122); animation: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.18s 1 normal both running rise;">Desktop app for macOS · runs your own AI agent</p><div style="display: flex; gap: 14px; justify-content: center; align-items: center; margin-top: 32px; flex-wrap: wrap; animation: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.22s 1 normal both running rise;"><button type="button" class="disp v8-btn-primary" style="font-size: 14px; font-weight: 700; letter-spacing: 0.08em; padding: 15px 30px; background: rgb(200, 242, 74); color: rgb(10, 10, 11); border: 0px; border-radius: 10px; cursor: pointer; font-family: inherit; transition: transform 0.2s;">Download for macOS</button><a href="/templates" class="disp v8-btn-ghost" style="display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; padding: 15px 24px; background: rgb(24, 24, 27); color: rgb(245, 240, 235); border: 1px solid rgba(245, 240, 235, 0.1); border-radius: 10px; text-decoration: none; transition: border-color 0.2s;"><span style="width: 0px; height: 0px; border-left: 9px solid rgb(200, 242, 74); border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent;"></span>Browse templates</a></div><div class="disp" style="font-size: 12px; font-weight: 600; letter-spacing: 0.18em; color: rgb(200, 242, 74); margin-top: 22px; animation: 0.5s ease 0.5s 1 normal both running fadeIn; display: flex; justify-content: center; align-items: center; gap: 0.5em; flex-wrap: wrap;"><span>Bring your own agent â</span><span>Claude Code, Codex & more</span></div></div></header><section id="tlSection" style="position: relative; z-index: 1; margin-top: 64px; overflow: hidden; animation: 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s 1 normal both running rise;"><div id="tlRuler" style="position: relative; height: 26px; overflow: hidden; margin-bottom: 8px; border-bottom: 1px solid rgba(245, 240, 235, 0.08);"><div id="tlRulerTrack" style="position: relative; height: 100%; width: max-content; display: flex;"></div></div><div id="catStrip" class="strip" style="display: flex; gap: 16px; width: max-content; padding: 0px 0px 8px;"><div style="flex: 0 0 auto; width: 264px;"><div style="border: 1px solid rgba(245, 240, 235, 0.14); border-radius: 9px; overflow: hidden; background: rgb(12, 12, 15);"><div class="disp" style="text-align: center; padding: 7px 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.09em; color: rgb(245, 240, 235); border-bottom: 1px solid rgba(245, 240, 235, 0.1);">Product demo</div><div style="position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: url("https://files.animater.ai/landing-v8/films/numeo-poster.jpg") center center / cover rgb(12, 12, 15);"><video data-src="https://files.animater.ai/landing-v8/films/numeo-sm.mp4" poster="https://files.animater.ai/landing-v8/films/numeo-poster.jpg" autoplay="true" loop="" playsinline="" preload="metadata" style="position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover;"></video></div></div></div><div style="flex: 0 0 auto; width: 264px;"><div style="border: 1px solid rgba(245, 240, 235, 0.14); border-radius: 9px; overflow: hidden; background: rgb(12, 12, 15);"><div class="disp" style="text-align: center; padding: 7px 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.09em; color: rgb(245, 240, 235); border-bottom: 1px solid rgba(245, 240, 235, 0.1);">Edtech</div><div style="position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: url("https://files.animater.ai/landing-v8/films/makon-poster.jpg") center center / cover rgb(12, 12, 15);"><video data-src="https://files.animater.ai/landing-v8/films/makon-sm.mp4" poster="https://files.animater.ai/landing-v8/films/makon-poster.jpg" autoplay="true" loop="" playsinline="" preload="metadata" style="position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover;"></video></div></div></div><div style="flex: 0 0 auto; width: 264px;"><div style="border: 1px solid rgba(245, 240, 235, 0.14); border-radius: 9px; overflow: hidden; background: rgb(12, 12, 15);"><div class="disp" style="text-align: center; padding: 7px 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.09em; color: rgb(245, 240, 235); border-bottom: 1px solid rgba(245, 240, 235, 0.1);">SaaS launch</div><div style="position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: url("https://files.animater.ai/landing-v8/films/tilmoch-0801-poster.jpg") center center / cover rgb(12, 12, 15);"><video data-src="https://files.animater.ai/landing-v8/films/tilmoch-0801-sm.mp4" poster="https://files.animater.ai/landing-v8/films/tilmoch-0801-poster.jpg" autoplay="true" loop="" playsinline="" preload="metadata" style="position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover;"></video></div></div></div><div style="flex: 0 0 auto; width: 264px;"><div style="border: 1px solid rgba(245, 240, 235, 0.14); border-radius: 9px; overflow: hidden; background: rgb(12, 12, 15);"><div class="disp" style="text-align: center; padding: 7px 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.09em; color: rgb(245, 240, 235); border-bottom: 1px solid rgba(245, 240, 235, 0.1);">Agent demo</div><div style="position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: url("https://files.animater.ai/landing-v8/films/chatgpt-poster.jpg") center center / cover rgb(12, 12, 15);"><video data-src="https://files.animater.ai/landing-v8/films/chatgpt-sm.mp4" poster="https://files.animater.ai/landing-v8/films/chatgpt-poster.jpg" autoplay="true" loop="" playsinline="" preload="metadata" style="position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover;"></video></div></div></div><div style="flex: 0 0 auto; width: 264px;"><div style="border: 1px solid rgba(245, 240, 235, 0.14); border-radius: 9px; overflow: hidden; background: rgb(12, 12, 15);"><div class="disp" style="text-align: center; padding: 7px 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.09em; color: rgb(245, 240, 235); border-bottom: 1px solid rgba(245, 240, 235, 0.1);">Launch film</div><div style="position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: url("https://files.animater.ai/landing-v8/films/algebras-poster.jpg") center center / cover rgb(12, 12, 15);"><video data-src="https://files.animater.ai/landing-v8/films/algebras-sm.mp4" poster="https://files.animater.ai/landing-v8/films/algebras-poster.jpg" autoplay="true" loop="" playsinline="" preload="metadata" style="position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover;"></video></div></div></div><div style="flex: 0 0 auto; width: 264px;"><div style="border: 1px solid rgba(245, 240, 235, 0.14); border-radius: 9px; overflow: hidden; background: rgb(12, 12, 15);"><div class="disp" style="text-align: center; padding: 7px 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.09em; color: rgb(245, 240, 235); border-bottom: 1px solid rgba(245, 240, 235, 0.1);">Product demo</div><div style="position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: url("https://files.animater.ai/landing-v8/films/numeo-poster.jpg") center center / cover rgb(12, 12, 15);"><video data-src="https://files.animater.ai/landing-v8/films/numeo-sm.mp4" poster="https://files.animater.ai/landing-v8/films/numeo-poster.jpg" autoplay="true" loop="" playsinline="" preload="metadata" style="position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover;"></video></div></div></div><div style="flex: 0 0 auto; width: 264px;"><div style="border: 1px solid rgba(245, 240, 235, 0.14); border-radius: 9px; overflow: hidden; background: rgb(12, 12, 15);"><div class="disp" style="text-align: center; padding: 7px 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.09em; color: rgb(245, 240, 235); border-bottom: 1px solid rgba(245, 240, 235, 0.1);">Edtech</div><div style="position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: url("https://files.animater.ai/landing-v8/films/makon-poster.jpg") center center / cover rgb(12, 12, 15);"><video data-src="https://files.animater.ai/landing-v8/films/makon-sm.mp4" poster="https://files.animater.ai/landing-v8/films/makon-poster.jpg" autoplay="true" loop="" playsinline="" preload="metadata" style="position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover;"></video></div></div></div><div style="flex: 0 0 auto; width: 264px;"><div style="border: 1px solid rgba(245, 240, 235, 0.14); border-radius: 9px; overflow: hidden; background: rgb(12, 12, 15);"><div class="disp" style="text-align: center; padding: 7px 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.09em; color: rgb(245, 240, 235); border-bottom: 1px solid rgba(245, 240, 235, 0.1);">SaaS launch</div><div style="position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: url("https://files.animater.ai/landing-v8/films/tilmoch-0801-poster.jpg") center center / cover rgb(12, 12, 15);"><video data-src="https://files.animater.ai/landing-v8/films/tilmoch-0801-sm.mp4" poster="https://files.animater.ai/landing-v8/films/tilmoch-0801-poster.jpg" autoplay="true" loop="" playsinline="" preload="metadata" style="position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover;"></video></div></div></div><div style="flex: 0 0 auto; width: 264px;"><div style="border: 1px solid rgba(245, 240, 235, 0.14); border-radius: 9px; overflow: hidden; background: rgb(12, 12, 15);"><div class="disp" style="text-align: center; padding: 7px 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.09em; color: rgb(245, 240, 235); border-bottom: 1px solid rgba(245, 240, 235, 0.1);">Agent demo</div><div style="position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: url("https://files.animater.ai/landing-v8/films/chatgpt-poster.jpg") center center / cover rgb(12, 12, 15);"><video data-src="https://files.animater.ai/landing-v8/films/chatgpt-sm.mp4" poster="https://files.animater.ai/landing-v8/films/chatgpt-poster.jpg" autoplay="true" loop="" playsinline="" preload="metadata" style="position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover;"></video></div></div></div><div style="flex: 0 0 auto; width: 264px;"><div style="border: 1px solid rgba(245, 240, 235, 0.14); border-radius: 9px; overflow: hidden; background: rgb(12, 12, 15);"><div class="disp" style="text-align: center; padding: 7px 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.09em; color: rgb(245, 240, 235); border-bottom: 1px solid rgba(245, 240, 235, 0.1);">Launch film</div><div style="position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: url("https://files.animater.ai/landing-v8/films/algebras-poster.jpg") center center / cover rgb(12, 12, 15);"><video data-src="https://files.animater.ai/landing-v8/films/algebras-sm.mp4" poster="https://files.animater.ai/landing-v8/films/algebras-poster.jpg" autoplay="true" loop="" playsinline="" preload="metadata" style="position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover;"></video></div></div></div></div><div id="tlPlayhead" style="position: absolute; left: 38%; top: 0px; bottom: 6px; width: 2px; background: rgb(200, 242, 74); box-shadow: rgba(200, 242, 74, 0.75) 0px 0px 14px; z-index: 3; pointer-events: none;"><div id="tlBadge" class="disp" style="position: absolute; top: 0px; left: 50%; transform: translateX(-50%); background: rgb(200, 242, 74); color: rgb(10, 10, 11); font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; white-space: nowrap;">0</div></div></section><section id="feature" style="position: relative; z-index: 1; padding: 150px 32px 0px; max-width: 1380px; margin: 0px auto;"><div class="grid-2" style="display: grid; grid-template-columns: minmax(0px, 0.72fr) minmax(0px, 1.28fr); gap: 48px; align-items: center;"><div><div class="disp" style="display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: rgb(200, 242, 74); margin-bottom: 20px;"><span style="width: 16px; height: 16px; border: 1.5px solid rgb(200, 242, 74); border-radius: 4px; display: inline-block;"></span>Made from your live page</div><h2 class="disp" style="font-size: clamp(32px, 4vw, 52px); font-weight: 700; line-height: 1; margin-bottom: 20px;">Your page in.<br>A film out.</h2><p style="font-size: 17px; color: rgb(161, 161, 170); max-width: 46ch; margin-bottom: 16px;">Give Animater a URL and it clones the real page â the actual fonts, the actual colors, every element individually addressable. Not a mockup, not a screen recording. Pages behind a login work too: sign in once and capture the screens no public URL can reach.</p><p style="font-size: 17px; color: rgb(161, 161, 170); max-width: 46ch; margin-bottom: 28px;">Then it isolates the parts worth showing, animates them, and layers in voiceover, music and sound effects â out the other end is a finished MP4 in 1080p or 4K, ready for your site, socials, or the App Store.</p><div style="display: flex; gap: 12px; flex-wrap: wrap;"><a href="#films" class="disp v8-btn-ghost" style="font-size: 13px; font-weight: 700; letter-spacing: 0.08em; padding: 12px 22px; background: rgb(24, 24, 27); color: rgb(245, 240, 235); border: 1px solid rgba(245, 240, 235, 0.1); border-radius: 9px; text-decoration: none; transition: border-color 0.2s; display: inline-flex; align-items: center; gap: 9px;"><span style="width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgb(200, 242, 74); display: inline-flex; align-items: center; justify-content: center;"><span style="width: 0px; height: 0px; border-left: 5px solid rgb(200, 242, 74); border-top: 3px solid transparent; border-bottom: 3px solid transparent; margin-left: 1px;"></span></span>Learn more</a><a href="#pricing" class="disp v8-btn-ghost" style="font-size: 13px; font-weight: 700; letter-spacing: 0.08em; padding: 12px 22px; background: rgb(24, 24, 27); color: rgb(245, 240, 235); border: 1px solid rgba(245, 240, 235, 0.1); border-radius: 9px; text-decoration: none; transition: border-color 0.2s;">Pricing</a></div></div><div style="position: relative; border-radius: 16px; overflow: hidden; background: rgb(14, 14, 16); box-shadow: rgba(245, 240, 235, 0.07) 0px 0px 0px 1px, rgba(0, 0, 0, 0.6) 0px 40px 100px;"><div style="position: relative; aspect-ratio: 16 / 10;"><video data-src="https://files.animater.ai/landing-v8/films/algebras-launch.mp4" poster="https://files.animater.ai/landing-v8/films/algebras-launch-poster.jpg" controls="" autoplay="true" loop="" playsinline="" preload="metadata" aria-label="A product demo made in Animater from the live Algebras platform" style="position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; background: rgb(14, 14, 16);" src="https://files.animater.ai/landing-v8/films/algebras-launch.mp4"></video></div><div style="padding: 13px 16px; border-top: 1px solid rgba(245, 240, 235, 0.07); font-family: "JetBrains Mono", monospace; font-size: 12.5px; color: rgb(113, 113, 122); display: flex; gap: 10px; align-items: center; flex-wrap: wrap;"><span style="color: rgb(200, 242, 74);">platform.algebras.ai</span><span aria-hidden="true">â</span><span>57-second product demo. Every element captured from the live app, behind the login.</span></div></div></div></section><sec
174tion style="position: relative; z-index: 1; padding: 130px 32px 0px; max-width: 1200px; margin: 0px auto;"><div class="grid-2" style="display: grid; grid-template-columns: minmax(0px, 1.1fr) minmax(0px, 1fr); gap: 56px; align-items: center;"><div class="tk-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;"><div style="border: 1px solid rgba(245, 240, 235, 0.14); border-radius: 9px; overflow: hidden; background: rgb(12, 12, 15);"><div class="disp" style="text-align: center; padding: 7px 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.09em; color: rgb(245, 240, 235); border-bottom: 1px solid rgba(245, 240, 235, 0.1);">planetscale.com</div><div style="position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: url("https://files.animater.ai/landing-v8/films/craft-planetscale-poster.jpg") center center / cover rgb(12, 12, 15);"><video data-src="https://files.animater.ai/landing-v8/films/craft-planetscale.mp4" poster="https://files.animater.ai/landing-v8/films/craft-planetscale-poster.jpg" autoplay="true" loop="" playsinline="" preload="metadata" style="position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover;"></video></div></div><div style="border: 1px solid rgba(245, 240, 235, 0.14); border-radius: 9px; overflow: hidden; background: rgb(12, 12, 15);"><div class="disp" style="text-align: center; padding: 7px 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.09em; color: rgb(245, 240, 235); border-bottom: 1px solid rgba(245, 240, 235, 0.1);">northflank.com</div><div style="position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: url("https://files.animater.ai/landing-v8/films/craft-northflank-poster.jpg") center center / cover rgb(12, 12, 15);"><video data-src="https://files.animater.ai/landing-v8/films/craft-northflank.mp4" poster="https://files.animater.ai/landing-v8/films/craft-northflank-poster.jpg" autoplay="true" loop="" playsinline="" preload="metadata" style="position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover;"></video></div></div><div style="border: 1px solid rgba(245, 240, 235, 0.14); border-radius: 9px; overflow: hidden; background: rgb(12, 12, 15);"><div class="disp" style="text-align: center; padding: 7px 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.09em; color: rgb(245, 240, 235); border-bottom: 1px solid rgba(245, 240, 235, 0.1);">graphite.dev</div><div style="position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: url("https://files.animater.ai/landing-v8/films/craft-graphite-poster.jpg") center center / cover rgb(12, 12, 15);"><video data-src="https://files.animater.ai/landing-v8/films/craft-graphite.mp4" poster="https://files.animater.ai/landing-v8/films/craft-graphite-poster.jpg" autoplay="true" loop="" playsinline="" preload="metadata" style="position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover;"></video></div></div><div style="border: 1px solid rgba(245, 240, 235, 0.14); border-radius: 9px; overflow: hidden; background: rgb(12, 12, 15);"><div class="disp" style="text-align: center; padding: 7px 12px; font-size: 13px; font-weight: 700; letter-spacing: 0.09em; color: rgb(245, 240, 235); border-bottom: 1px solid rgba(245, 240, 235, 0.1);">deno.com</div><div style="position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: url("https://files.animater.ai/landing-v8/films/craft-deno-poster.jpg") center center / cover rgb(12, 12, 15);"><video data-src="https://files.animater.ai/landing-v8/films/craft-deno.mp4" poster="https://files.animater.ai/landing-v8/films/craft-deno-poster.jpg" autoplay="true" loop="" playsinline="" preload="metadata" style="position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover;"></video></div></div><div style="grid-column: 1 / -1; margin-top: 4px; font-family: "JetBrains Mono", monospace; font-size: 12px; color: rgb(82, 82, 91);">Each one made from that companyâs public site. Not customers â just pages we pointed Animater at.</div></div><div><div class="disp" style="display: inline-flex; align-items: center; gap: 8px; font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; color: rgb(200, 242, 74); margin-bottom: 20px;">â The craft</div><h2 class="disp" style="font-size: clamp(32px, 4vw, 52px); font-weight: 700; line-height: 1; margin-bottom: 20px;">Motion design,<br>not a recording.</h2><p style="font-size: 17px; color: rgb(161, 161, 170); max-width: 48ch; margin-bottom: 16px;">A screen recording shows your cursor. Animater lifts the parts that matter off the page and directs them â camera moves, mask reveals, staggered entrances, then film-grade motion blur, depth of field and grain over the top.</p><p style="font-size: 17px; color: rgb(161, 161, 170); max-width: 48ch; margin-bottom: 16px;">And nothing ships on trust: every export is checked before you get it â blank frames, glitches, dimensions, and audio loudness â with the verdict on the export itself.</p><p style="font-size: 17px; color: rgb(161, 161, 170); max-width: 48ch; margin-bottom: 28px;">Or start from a template: a finished film whose screens, brand and copy your agent replaces with yours. The choreography stays â that is the part you are buying.</p><div style="display: flex; gap: 12px; flex-wrap: wrap;"><a href="#pricing" class="disp v8-btn-ghost" style="font-size: 13px; font-weight: 700; letter-spacing: 0.08em; padding: 12px 22px; background: rgb(24, 24, 27); color: rgb(245, 240, 235); border: 1px solid rgba(245, 240, 235, 0.1); border-radius: 9px; text-decoration: none; transition: border-color 0.2s; display: inline-flex; align-items: center; gap: 9px;"><span style="width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgb(200, 242, 74); display: inline-flex; align-items: center; justify-content: center;"><span style="width: 0px; height: 0px; border-left: 5px solid rgb(200, 242, 74); border-top: 3px solid transparent; border-bottom: 3px solid transparent; margin-left: 1px;"></span></span>Get started</a></div></div></div></section><section id="films" style="position: relative; z-index: 1; padding: 130px 0px 0px; overflow: hidden;"><div id="filmStrip" class="strip" style="display: flex; gap: 28px; width: max-content; padding: 0px 28px;"><div style="flex: 0 0 auto; width: min(88vw, 880px);"><div style="position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: url("https://files.animater.ai/landing-v8/films/numeo-poster.jpg") center center / cover rgb(11, 13, 18); box-shadow: rgba(245, 240, 235, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.6) 0px 34px 90px;"><video data-hd="true" data-src="https://files.animater.ai/landing-v8/films/numeo.mp4" poster="https://files.animater.ai/landing-v8/films/numeo-poster.jpg" autoplay="true" loop="" playsinline="" preload="metadata" style="position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover;"></video></div></div><div style="flex: 0 0 auto; width: min(88vw, 880px);"><div style="position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: url("https://files.animater.ai/landing-v8/films/makon-poster.jpg") center center / cover rgb(11, 13, 18); box-shadow: rgba(245, 240, 235, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.6) 0px 34px 90px;"><video data-hd="true" data-src="https://files.animater.ai/landing-v8/films/makon.mp4" poster="https://files.animater.ai/landing-v8/films/makon-poster.jpg" autoplay="true" loop="" playsinline="" preload="metadata" style="position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover;"></video></div></div><div style="flex: 0 0 auto; width: min(88vw, 880px);"><div style="position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: url("https://files.animater.ai/landing-v8/films/tilmoch-0801-poster.jpg") center center / cover rgb(11, 13, 18); box-shadow: rgba(245, 240, 235, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.6) 0px 34px 90px;"><video data-hd="true" data-src="https://files.animater.ai/landing-v8/films/tilmoch-0801.mp4" poster="https://files.animater.ai/landing-v8/films/tilmoch-0801-poster.jpg" autoplay="true" loop="" playsinline="" preload="metadata" style="position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover;"></video></div></div><div style="flex: 0 0 auto; width: min(88vw, 880px);"><div style="position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: url("https://files.animater.ai/landing-v8/films/chatgpt-poster.jpg") center center / cover rgb(11, 13, 18); box-shadow: rgba(245, 240, 235, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.6) 0px 34px 90px;"><video data-hd="true" data-src="https://files.animater.ai/landing-v8/films/chatgpt.mp4" poster="https://files.animater.ai/landing-v8/films/chatgpt-poster.jpg" autoplay="true" loop="" playsinline="" preload="metadata" style="position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover;"></video></div></div><div style="flex: 0 0 auto; width: min(88vw, 880px);"><div style="position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: url("https://files.animater.ai/landing-v8/films/algebras-poster.jpg") center center / cover rgb(11, 13, 18); box-shadow: rgba(245, 240, 235, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.6) 0px 34px 90px;"><video data-hd="true" data-src="https://files.animater.ai/landing-v8/films/algebras.mp4" poster="https://files.animater.ai/landing-v8/films/algebras-poster.jpg" autoplay="true" loop="" playsinline="" preload="metadata" style="position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover;"></video></div></div><div style="flex: 0 0 auto; width: min(88vw, 880px);"><div style="position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: url("https://files.animater.ai/landing-v8/films/numeo-poster.jpg") center center / cover rgb(11, 13, 18); box-shadow: rgba(245, 240, 235, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.6) 0px 34px 90px;"><video data-hd="true" data-src="https://files.animater.ai/landing-v8/films/numeo.mp4" poster="https://files.animater.ai/landing-v8/films/numeo-poster.jpg" autoplay="true" loop="" playsinline="" preload="metadata" style="position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover;"></video></div></div><div style="flex: 0 0 auto; width: min(88vw, 880px);"><div style="position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: url("https://files.animater.ai/landing-v8/films/makon-poster.jpg") center center / cover rgb(11, 13, 18); box-shadow: rgba(245, 240, 235, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.6) 0px 34px 90px;"><video data-hd="true" data-src="https://files.animater.ai/landing-v8/films/makon.mp4" poster="https://files.animater.ai/landing-v8/films/makon-poster.jpg" autoplay="true" loop="" playsinline="" preload="metadata" style="position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover;"></video></div></div><div style="flex: 0 0 auto; width: min(88vw, 880px);"><div style="position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: url("https://files.animater.ai/landing-v8/films/tilmoch-0801-poster.jpg") center center / cover rgb(11, 13, 18); box-shadow: rgba(245, 240, 235, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.6) 0px 34px 90px;"><video data-hd="true" data-src="https://files.animater.ai/landing-v8/films/tilmoch-0801.mp4" poster="https://files.animater.ai/landing-v8/films/tilmoch-0801-poster.jpg" autoplay="true" loop="" playsinline="" preload="metadata" style="position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover;"></video></div></div><div style="flex: 0 0 auto; width: min(88vw, 880px);"><div style="position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: url("https://files.animater.ai/landing-v8/films/chatgpt-poster.jpg") center center / cover rgb(11, 13, 18); box-shadow: rgba(245, 240, 235, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.6) 0px 34px 90px;"><video data-hd="true" data-src="https://files.animater.ai/landing-v8/films/chatgpt.mp4" poster="https://files.animater.ai/landing-v8/films/chatgpt-poster.jpg" autoplay="true" loop="" playsinline="" preload="metadata" style="position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover;"></video></div></div><div style="flex: 0 0 auto; width: min(88vw, 880px);"><div style="position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: url("https://files.animater.ai/landing-v8/films/algebras-poster.jpg") center center / cover rgb(11, 13, 18); box-shadow: rgba(245, 240, 235, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.6) 0px 34px 90px;"><video data-hd="true" data-src="https://files.animater.ai/landing-v8/films/algebras.mp4" poster="https://files.animater.ai/landing-v8/films/algebras-poster.jpg" autoplay="true" loop="" playsinline="" preload="metadata" style="position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover;"></video></div></div></div></section><section id="pricing" style="position: relative; z-index: 1; padding: 150px 32px 0px; max-width: 1200px; margin: 0px auto;"><div style="display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; margin-bottom: 44px;"><div><h2 class="disp" style="font-size: clamp(30px, 4vw, 52px); font-weight: 700; line-height: 1;">Pricing</h2><span style="display: block; margin-top: 10px; font-family: "JetBrains Mono", monospace; font-size: 13px; color: rgb(82, 82, 91);">7-day free trial on every plan</span><span style="display: block; margin-top: 6px; font-family: "JetBrains Mono", monospace; font-size: 13px; color: rgb(82, 82, 91);">Animater is a macOS app you download and install</span></div><div style="display: inline-flex; align-items: center; gap: 12px; font-family: "JetBrains Mono", monospace; font-size: 13px;"><span style="color: rgb(245, 240, 235); transition: color 0.2s;">Monthly</span><button type="button" role="switch" aria-checked="false" aria-label="Toggle annual billing" style="width: 48px; height: 27px; border-radius: 100px; background: rgb(38, 38, 43); box-shadow: rgba(245, 240, 235, 0.15) 0px 0px 0px 1px inset; position: relative; cursor: pointer; padding: 0px; border: 0px; transition: background 0.2s; flex-shrink: 0;"><span style="position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: rgb(200, 242, 74); transform: translateX(0px); transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);"></span></button><span style="color: rgb(82, 82, 91); transition: color 0.2s;">Annual <span style="color: rgb(200, 242, 74);">â20%</span></span></div></div><div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; align-items: stretch;"><div style="background: linear-gradient(rgb(22, 24, 16), rgb(17, 17, 19)); border-radius: 20px; box-shadow: rgb(200, 242, 74) 0px 0px 0px 2px, rgba(200, 242, 74, 0.3) 0px 24px 70px -24px; padding: 42px 34px; display: flex; flex-direction: column; min-height: 520px;"><div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px;"><span class="disp" style="font-size: 14px; font-weight: 700; letter-spacing: 0.1em;">Pro</span><span class="disp" style="background: rgb(200, 242, 74); color: rgb(10, 10, 11); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; padding: 5px 11px; border-radius: 100px;">Most popular</span></div><div style="display: flex; align-items: baseline; gap: 6px;"><span class="disp" style="font-weight: 700; font-size: 52px; line-height: 0.9;">$49</span><span style="color: rgb(82, 82, 91); font-size: 14px;">/mo</span></div><div style="font-size: 13.5px; color: rgb(82, 82, 91); margin: 10px 0px 26px;">Billed monthly · 20% off annual</div><button type="button" class="disp v8-price-btn-primary" style="display: block; width: 100%; text-align: center; background: rgb(200, 242, 74); color: rgb(10, 10, 11); border: 0px; cursor: pointer; font-family: inherit; text-decoration:
174 none; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; padding: 13px; border-radius: 11px; margin-bottom: 28px; transition: transform 0.2s;">Start free</button><button type="button" style="display: block; width: 100%; text-align: center; background: transparent; border: 0px; cursor: pointer; font-family: inherit; font-size: 12px; color: rgb(113, 113, 122); text-decoration: underline; text-underline-offset: 3px; padding: 0px; margin-top: -18px; margin-bottom: 28px; transition: color 0.2s;">Skip the trial â start today</button><ul style="list-style: none; display: flex; flex-direction: column; gap: 13px; font-size: 14px; color: rgb(161, 161, 170);"><li style="display: flex; gap: 11px; color: rgb(245, 240, 235);"><span style="color: rgb(200, 242, 74); flex-shrink: 0; font-weight: 700;">â</span>Unlimited animation â AI runs on your Claude/ChatGPT subscription</li><li style="display: flex; gap: 11px;"><span style="color: rgb(200, 242, 74); flex-shrink: 0; font-weight: 700;">â</span>800 audio credits / mo (music & voiceover)</li><li style="display: flex; gap: 11px;"><span style="color: rgb(200, 242, 74); flex-shrink: 0; font-weight: 700;">â</span>1080p + 4K exports, unlimited</li><li style="display: flex; gap: 11px;"><span style="color: rgb(200, 242, 74); flex-shrink: 0; font-weight: 700;">â</span>Capture pages behind a login</li><li style="display: flex; gap: 11px;"><span style="color: rgb(200, 242, 74); flex-shrink: 0; font-weight: 700;">â</span>One seat</li></ul></div><div style="background: rgb(17, 17, 19); border-radius: 20px; box-shadow: rgba(245, 240, 235, 0.06) 0px 0px 0px 1px; padding: 42px 34px; display: flex; flex-direction: column; min-height: 520px;"><div class="disp" style="font-size: 14px; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 22px; color: rgb(161, 161, 170);">Team</div><div style="display: flex; align-items: baseline; gap: 6px;"><span class="disp" style="font-weight: 700; font-size: 52px; line-height: 0.9;">$299</span><span style="color: rgb(82, 82, 91); font-size: 14px;">/mo</span></div><div style="font-size: 13.5px; color: rgb(82, 82, 91); margin: 10px 0px 26px;">Billed monthly · 20% off annual</div><button type="button" class="disp v8-price-btn-outline" style="display: block; width: 100%; text-align: center; background: transparent; color: rgb(245, 240, 235); box-shadow: rgba(245, 240, 235, 0.18) 0px 0px 0px 1px inset; border: 0px; cursor: pointer; font-family: inherit; text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; padding: 13px; border-radius: 11px; margin-bottom: 28px; transition: box-shadow 0.2s;">Start free</button><button type="button" style="display: block; width: 100%; text-align: center; background: transparent; border: 0px; cursor: pointer; font-family: inherit; font-size: 12px; color: rgb(113, 113, 122); text-decoration: underline; text-underline-offset: 3px; padding: 0px; margin-top: -18px; margin-bottom: 28px; transition: color 0.2s;">Skip the trial â start today</button><ul style="list-style: none; display: flex; flex-direction: column; gap: 13px; font-size: 14px; color: rgb(161, 161, 170);"><li style="display: flex; gap: 11px; color: rgb(245, 240, 235);"><span style="color: rgb(200, 242, 74); flex-shrink: 0; font-weight: 700;">â</span>Everything in Pro</li><li style="display: flex; gap: 11px;"><span style="color: rgb(200, 242, 74); flex-shrink: 0; font-weight: 700;">â</span>3 seats â invite your team by email</li><li style="display: flex; gap: 11px;"><span style="color: rgb(200, 242, 74); flex-shrink: 0; font-weight: 700;">â</span>Shared projects and captures across the team</li><li style="display: flex; gap: 11px;"><span style="color: rgb(200, 242, 74); flex-shrink: 0; font-weight: 700;">â</span>2,500 audio credits / mo (music & voiceover)</li><li style="display: flex; gap: 11px;"><span style="color: rgb(200, 242, 74); flex-shrink: 0; font-weight: 700;">â</span>Priority support</li></ul></div></div><p style="margin-top: 26px; text-align: center; font-size: 13.5px; line-height: 1.65; color: rgb(113, 113, 122); max-width: 68ch; margin-left: auto; margin-right: auto;">Animater is bring-your-own-AI: animation runs on the <span style="color: rgb(161, 161, 170);">Claude or ChatGPT plan you already have</span> â we never bill you for AI. Credits only buy studio audio: <span style="color: rgb(161, 161, 170);">background music (20 per minute) and voiceover (20 per take)</span>. Sound effects and mixing are free. Need more audio? Every plan can to
174p up anytime â <span style="color: rgb(161, 161, 170);">$15 for 200 credits</span>, valid 12 months. Templates are sold separately â <span style="color: rgb(161, 161, 170);">$99â$299 one-time</span>, yours for good on any plan.</p></section><footer style="position: relative; z-index: 1; padding: 150px 32px 48px; max-width: 1200px; margin: 0px auto;"><div class="grid-2" style="display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.3fr); gap: 40px; align-items: start; padding-bottom: 56px;"><div><h3 class="disp" style="font-size: 26px; font-weight: 700; margin-bottom: 10px;">Join our newsletter</h3><p style="font-size: 15px; color: rgb(161, 161, 170); max-width: 34ch;">Get new example films and product updates in your inbox.</p></div><div style="display: flex; gap: 12px; flex-wrap: wrap;"><input type="email" placeholder="[email protected]" style="flex: 1 1 0%; min-width: 220px; background: rgb(245, 240, 235); color: rgb(10, 10, 11); border: 0px; border-radius: 10px; padding: 15px 18px; font-family: inherit; font-size: 15px;"><button type="button" class="disp" style="background: rgb(24, 24, 27); color: rgb(245, 240, 235); border: 1px solid rgba(245, 240, 235, 0.12); border-radius: 10px; padding: 15px 26px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; cursor: pointer;">Sign up</button></div></div><div style="border-top: 1px solid rgba(245, 240, 235, 0.08); padding-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 32px;"><div><div class="disp" style="font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: rgb(82, 82, 91); margin-bottom: 18px;">Product</div><div style="display: flex; flex-direction: column; gap: 12px; font-size: 14px;"><a href="#feature" class="v8-foot-link" style="color: rgb(161, 161, 170); text-decoration: none;">Director</a><a href="#feature" class="v8-foot-link" style="color: rgb(161, 161, 170); text-decoration: none;">Capture</a><a href="#feature" class="v8-foot-link" style="color: rgb(161, 161, 170); text-decoration: none;">Scoring</a><a href="#feature" class="v8-foot-link" style="color: rgb(161, 161, 170); text-decoration: none;">Verify</a><a href="/templates" class="v8-foot-link" style="color: rgb(161, 161, 170); text-decoration: none;">Templates</a><a href="/download" class="v8-foot-link" style="color: rgb(161, 161, 170); text-decoration: none;">Download</a></div></div><div><div class="disp" style="font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: rgb(82, 82, 91); margin-bottom: 18px;">Films</div><div style="display: flex; flex-direction: column; gap: 12px; font-size: 14px;"><a href="#films" class="v8-foot-link" style="color: rgb(161, 161, 170); text-decoration: none;">Showcase</a><a href="#films" class="v8-foot-link" style="color: rgb(161, 161, 170); text-decoration: none;">SaaS</a><a href="#films" class="v8-foot-link" style="color: rgb(161, 161, 170); text-decoration: none;">App Store</a><a href="#films" class="v8-foot-link" style="color: rgb(161, 161, 170); text-decoration: none;">Explainers</a></div></div><div><div class="disp" style="font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: rgb(82, 82, 91); margin-bottom: 18px;">Learn</div><div style="display: flex; flex-direction: column; gap: 12px; font-size: 14px;"><a href="#" class="v8-foot-link" style="color: rgb(161, 161, 170); text-decoration: none;">Documentation</a><a href="#" class="v8-foot-link" style="color: rgb(161, 161, 170); text-decoration: none;">Motion laws</a><a href="#" class="v8-foot-link" style="color: rgb(161, 161, 170); text-decoration: none;">Changelog</a></div></div><div><div class="disp" style="font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: rgb(82, 82, 91); margin-bottom: 18px;">Company</div><div style="display: flex; flex-direction: column; gap: 12px; font-size: 14px;"><a href="#" class="v8-foot-link" style="color: rgb(161, 161, 170); text-decoration: none;">Careers</a><a href="/terms" class="v8-foot-link" style="color: rgb(161, 161, 170); text-decoration: none;">Terms</a><a href="/privacy" class="v8-foot-link" style="color: rgb(161, 161, 170); text-decoration: none;">Privacy</a></div></div><div><div class="disp" style="font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: rgb(82, 82, 91); margin-bottom: 18px;">Use cases</div><div style="display: flex; flex-direction: column; gap: 12px; font-size: 14px;"><a href="#films" class="v8-foot-link" style="color: rgb(161, 161, 170); text-decoration: none;">Product launches</a><a href="#films" class="v8-foot-link" style="color: rgb(161, 161, 170); text-decoration: none;">Social promos</a><a href="#films" class="v8-foot-link" style="color: rgb(161, 161, 170); text-decoration: none;">Demos</a></div></div></div><div style="border-top: 1px solid rgba(245, 240, 235, 0.08); margin-top: 56px; padding-top: 32px; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px;"><div><div class="disp fw" style="font-size: 34px; font-weight: 500; letter-spacing: 0.35em; color: rgb(245, 240, 235); padding-left: 0.35em;">ANIMATER</div><div style="font-size: 13px; color: rgb(82, 82, 91); margin-top: 14px;">© 2026 Animater. All rights reserved.</div><div style="font-size: 13px; color: rgb(82, 82, 91); margin-top: 4px; max-width: 40ch;">All trademarks, logos, and brand names are the property of their respective owners.</div></div><div style="display: flex; gap: 16px;"><a href="#" aria-label="YouTube" class="v8-social" style="color: rgb(82, 82, 91); transition: color 0.2s;"><svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M23 12s0-3.8-.5-5.6a2.9 2.9 0 0 0-2-2C18.7 4 12 4 12 4s-6.7 0-8.5.4a2.9 2.9 0 0 0-2 2C1 8.2 1 12 1 12s0 3.8.5 5.6a2.9 2.9 0 0 0 2 2C5.3 20 12 20 12 20s6.7 0 8.5-.4a2.9 2.9 0 0 0 2-2C23 15.8 23 12 23 12zM10 15.5v-7l6 3.5-6 3.5z"></path></svg></a><a href="#" aria-label="X" class="v8-social" style="color: rgb(82, 82, 91); transition: color 0.2s;"><svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M18.9 2H22l-7 8 8.2 12h-6.4l-5-7.3L6 22H2.9l7.5-8.6L2.5 2H9l4.5 6.6L18.9 2z"></path></svg></a><a href="#" aria-label="GitHub" class="v8-social" style="color: rgb(82, 82, 91); transition: color 0.2s;"><svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 0 0-3.2 19.5c.5.1.7-.2.7-.5v-1.7c-2.8.6-3.4-1.3-3.4
174-1.3-.5-1.2-1.1-1.5-1.1-1.5-.9-.6.1-.6.1-.6 1 .1 1.5 1 1.5 1 .9 1.6 2.4 1.1 3 .8.1-.6.3-1.1.6-1.4-2.2-.2-4.6-1.1-4.6-5 0-1.1.4-2 1-2.7-.1-.3-.4-1.3.1-2.7 0 0 .8-.3 2.7 1a9.4 9.4 0 0 1 5 0c1.9-1.3 2.7-1 2.7-1 .5 1.4.2 2.4.1 2.7.6.7 1 1.6 1 2.7 0 3.9-2.4 4.8-4.6 5 .3.3.6.9.6 1.9v2.8c0 .3.2.6.7.5A10 10 0 0 0 12 2z"></path></svg></a></div></div></footer></div></main> 175 176
176<script type="module" crossorigin src="/assets/index-20a4fb98.js"></script>
vendor: 1 bytes, line 176
176
177<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a45c32853f768e65',t:'MTc5MTIwMDkwNw=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
177</body> 178</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.