1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <!-- âââââââââââââââââââââââââââââââââââââââââââ 6 META â CORE 7 âââââââââââââââââââââââââââââââââââââââââââ --> 8 <meta charset="UTF-8" /> 9 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 10 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 11 12 <!-- âââââââââââââââââââââââââââââââââââââââââââ 13 SEO 14 âââââââââââââââââââââââââââââââââââââââââââ --> 15 <title>Free AI Video Generator - No Sign Up,Unlimited & Uncensored</title> 16 <meta name="description" content="Pixwith AI - Free AI video generator with no restrictions,no limits,and uncensored creation.Turn text,image into high-quality videos online instantly." /> 17 <meta name="keywords" content="AI video generator free online" /> 18 <meta name="author" content="video-generator.ai" /> 19 <meta name="robots" content="index, follow" /> 20 <link rel="canonical" href="https://video-generator.ai/" /> 21 <link rel="alternate" hreflang="en" href="https://video-generator.ai/" /> 22 <link rel="alternate" hreflang="es" href="https://video-generator.ai/es/" /> 23 <link rel="alternate" hreflang="fr" href="https://video-generator.ai/fr/" /> 24 <link rel="alternate" hreflang="de" href="https://video-generator.ai/de/" /> 25 <link rel="alternate" hreflang="ja" href="https://video-generator.ai/ja/" /> 26 <link rel="alternate" hreflang="hi" href="https://video-generator.ai/hi/" /> 27 <link rel="alternate" hreflang="ru" href="https://video-generator.ai/ru/" /> 28 <link rel="alternate" hreflang="ar" href="https://video-generator.ai/ar/" /> 29 <link rel="alternate" hreflang="zh" href="https://video-generator.ai/zh/" /> 30 <link rel="alternate" hreflang="pt" href="https://video-generator.ai/pt/" /> 31 <link rel="alternate" hreflang="x-default" href="https://video-generator.ai/" /> 32 33 <!-- âââââââââââââââââââââââââââââââââââââââââââ 34 OPEN GRAPH 35 âââââââââââââââââââââââââââââââââââââââââââ --> 36 <meta property="og:type" content="website" /> 37 <meta property="og:url" content="https://video-generator.ai/" /> 38 <meta property="og:title" content="AI Video Generator â Turn Ideas Into Motion" /> 39 <meta property="og:description" content="Generate videos from text or images using multiple AI models. Fast, flexible, creator-ready." /> 40 <meta property="og:image" content="https://video-generator.ai/og-image.jpg" /> 41 <meta property="og:site_name" content="video-generator.ai" /> 42 43 <!-- âââââââââââââââââââââââââââââââââââââââââââ 44 TWITTER / X CARD 45 âââââââââââââââââââââââââââââââââââââââââââ --> 46 <meta name="twitter:card" content="summary_large_image" /> 47 <meta name="twitter:site" content="@videogeneratorai" /> 48 <meta name="twitter:title" content="AI Video Generator â Turn Ideas Into Motion" /> 49 <meta name="twitter:description" content="Generate videos from text or images using multiple AI models. Fast, flexible, creator-ready." /> 50 <meta name="twitter:image" content="https://video-generator.ai/og-image.jpg" /> 51 52 <!-- âââââââââââââââââââââââââââââââââââââââââââ 53 FAVICON 54 âââââââââââââââââââââââââââââââââââââââââââ --> 55 <link rel="icon" type="image/svg+xml" href="/favicon.ico" /> 56 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> 57 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> 58 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> 59 <link rel="manifest" href="/site.webmanifest" /> 60 <meta name="theme-color" content="#0a0a0a" /> 61 62 <!-- âââââââââââââââââââââââââââââââââââââââââââ 63 FONTS â Google Fonts 64 Display : Bebas Neue (cinematic, bold headers) 65 Body : DM Sans (clean, modern reading) 66 Mono : JetBrains Mono (tech / code accents) 67 âââââââââââââââââââââââââââââââââââââââââââ --> 68 69
70 <link rel="preconnect" href="https://ipapi.co" /> 71 <style type="text/css">@font-face {font-family:'Bebas Neue';font-style:normal;font-weight:400;src:url(/cf-fonts/s/bebas-neue/5.2.7/latin-ext/400/normal.woff2);unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:'Bebas Neue';font-style:normal;font-weight:400;src:url(/cf-fonts/s/bebas-neue/5.2.7/latin/400/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:'DM Sans';font-style:normal;font-weight:300;src:url(/cf-fonts/v/dm-sans/5.2.8/latin-ext/wght/normal.woff2);unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:'DM Sans';font-style:normal;font-weight:300;src:url(/cf-fonts/v/dm-sans/5.2.8/latin/wght/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:'DM Sans';font-style:normal;font-weight:400;src:url(/cf-fonts/v/dm-sans/5.2.8/latin/wght/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:'DM Sans';font-style:normal;font-weight:400;src:url(/cf-fonts/v/dm-sans/5.2.8/latin-ext/wght/normal.woff2);unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:'DM Sans';font-style:normal;font-weight:500;src:url(/cf-fonts/v/dm-sans/5.2.8/latin/wght/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:'DM Sans';font-style:normal;font-weight:500;src:url(/cf-fonts/v/dm-sans/5.2.8/latin-ext/wght/normal.woff2);unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:'DM Sans';font-style:normal;font-weight:600;src:url(/cf-fonts/v/dm-sans/5.2.8/latin/wght/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:'DM Sans';font-style:normal;font-weight:600;src:url(/cf-fonts/v/dm-sans/5.2.8/latin-ext/wght/normal.woff2);unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:400;src:url(/cf-fonts/v/jetbrains-mono/5.2.8/cyrillic-ext/wght/normal.woff2);unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;font-display:swap;}@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:400;src:url(/cf-fonts/v/jetbrains-mono/5.2.8/latin-ext/wght/normal.woff2);unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:400;src:url(/cf-fonts/v/jetbrains-mono/5.2.8/greek/wght/normal.woff2);
71unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;font-display:swap;}@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:400;src:url(/cf-fonts/v/jetbrains-mono/5.2.8/latin/wght/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:400;src:url(/cf-fonts/v/jetbrains-mono/5.2.8/cyrillic/wght/normal.woff2);unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap;}@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:400;src:url(/cf-fonts/v/jetbrains-mono/5.2.8/vietnamese/wght/normal.woff2);unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;font-display:swap;}@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:500;src:url(/cf-fonts/v/jetbrains-mono/5.2.8/cyrillic-ext/wght/normal.woff2);unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;font-display:swap;}@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:500;src:url(/cf-fonts/v/jetbrains-mono/5.2.8/greek/wght/normal.woff2);unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;font-display:swap;}@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:500;src:url(/cf-fonts/v/jetbrains-mono/5.2.8/latin/wght/normal.woff2);unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;font-display:swap;}@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:500;src:url(/cf-fonts/v/jetbrains-mono/5.2.8/vietnamese/wght/normal.woff2);unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;font-display:swap;}@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:500;src:url(/cf-fonts/v/jetbrains-mono/5.2.8/cyrillic/wght/normal.woff2);unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;font-display:swap;}@font-face {font-family:'JetBrains Mono';font-style:normal;font-weight:500;src:url(/cf-fonts/v/jetbrains-mono/5.2.8/latin-ext/wght/normal.woff2);unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;font-display:swap;}</style> 72 73 <!-- âââââââââââââââââââââââââââââââââââââââââââ 74 ANALYTICS â Google Tag Manager 75 gtag.js itself is ~159 KiB of general-purpose library code (mostly 76 unused on any single page), so instead of fetching it eagerly we 77 queue the config calls immediately (cheap, no network) and only 78 fetch the real script on first user interaction â or after a short 79 fallback timeout so non-interacting visitors are still tracked 80 before they'd typically navigate away. 81 âââââââââââââââââââââââââââââââââââââââââââ --> 82
82<script type="6c18279ba6d93a40249c492f-text/javascript"> 83
vendor: 141 bytes, lines 83-86
83window.dataLayer = window.dataLayer || []; 84 function gtag(){ dataLayer.push(arguments); } 85 gtag('js', new Date()); 86 gtag('config', '
86G-9G3M9D2K5W
vendor: 9 bytes, lines 86-88
86'); 87 88
88(function () { 89 let loaded = false; 90 function loadGTM() { 91 if (loaded) return; 92 loaded = true; 93 const s = document.createElement('script'); 94 s.async = true; 95 s.src = 'https://www.googletagmanager.com/gtag/js?id=G-9G3M9D2K5W'; 96 document.head.appendChild(s); 97 } 98 ['scroll', 'mousemove', 'keydown', 'touchstart', 'click'].forEach(ev => 99 window.addEventListener(ev, loadGTM, { passive: true, once: true }) 100 ); 101 setTimeout(loadGTM, 5000); 102 })(); 103 </script>
103 104 105 <!-- âââââââââââââââââââââââââââââââââââââââââââ 106 BASE STYLES â Design Tokens + Reset 107 âââââââââââââââââââââââââââââââââââââââââââ --> 108 <style> 109 110 /* âââââââââââââââââââââââââââââââââââââââââ 111 DESIGN TOKENS (CSS Variables) 112 âââââââââââââââââââââââââââââââââââââââââ */ 113 :root { 114 /* Palette */ 115 --c-bg: #0a0a0a; 116 --c-bg-2: #111111; 117 --c-bg-3: #1a1a1a; 118 --c-surface: #1e1e1e; 119 --c-border: rgba(255, 255, 255, 0.08); 120 --c-border-hi: rgba(255, 255, 255, 0.18); 121 122 --c-text: #f0f0f0; 123 --c-text-muted: #888888; 124 --c-text-dim: #868686; 125 126 --c-accent: #d4ff00; /* electric lime â primary CTA */ 127 --c-accent-2: #ff4d00; /* burnt orange â secondary */ 128 --c-accent-3: #00c2ff; /* cyan â tertiary / info */ 129 130 --c-white: #ffffff; 131 --c-black: #000000; 132 133 /* Typography */ 134 --font-display: 'Bebas Neue', sans-serif; 135 --font-body: 'DM Sans', sans-serif; 136 --font-mono: 'JetBrains Mono', monospace; 137 138 /* Type Scale */ 139 --text-xs: 0.75rem; 140 --text-sm: 0.875rem; 141 --text-base: 1rem; 142 --text-lg: 1.125rem; 143 --text-xl: 1.25rem; 144 --text-2xl: 1.5rem; 145 --text-3xl: 2rem; 146 --text-4xl: 3rem; 147 --text-5xl: 4.5rem; 148 --text-6xl: 7rem; 149 --text-7xl: 10rem; 150 151 /* Spacing */ 152 --space-1: 0.25rem; 153 --space-2: 0.5rem; 154 --space-3: 0.75rem; 155 --space-4: 1rem; 156 --space-6: 1.5rem; 157 --space-8: 2rem; 158 --space-12: 3rem; 159 --space-16: 4rem; 160 --space-24: 6rem; 161 --space-32: 8rem; 162 163 /* Layout */ 164 --max-w: 1280px; 165 --max-w-tight: 960px; 166 --gutter: clamp(1.5rem, 4vw, 3rem); 167 --section-pad: clamp(5rem, 10vw, 9rem); 168 169 /* Border Radius */ 170 --r-sm: 4px; 171 --r-md: 8px; 172 --r-lg: 16px; 173 --r-xl: 24px; 174 --r-full: 9999px; 175 176 /* Shadows */ 177 --shadow-sm: 0 1px 3px rgba(0,0,0,0.5); 178 --shadow-md: 0 4px 20px rgba(0,0,0,0.6); 179 --shadow-lg: 0 8px 40px rgba(0,0,0,0.8); 180 --shadow-glow: 0 0 40px rgba(212, 255, 0, 0.25); 181 --shadow-glow-2: 0 0 60px rgba(255, 77, 0, 0.2); 182 183 /* Motion */ 184 --ease: cubic-bezier(0.16, 1, 0.3, 1); 185 --ease-in: cubic-bezier(0.4, 0, 1, 1); 186 --ease-out: cubic-bezier(0, 0, 0.2, 1); 187 --t-fast: 150ms; 188 --t-base: 250ms; 189 --t-slow: 450ms; 190 --t-xl: 800ms; 191 192 /* Z-index layers */ 193 --z-base: 1; 194 --z-above: 10; 195 --z-nav: 100; 196 --z-overlay: 200; 197 --z-modal: 300; 198 --z-toast: 400; 199 } 200 201 /* âââââââââââââââââââââââââââââââââââââââââ 202 RESET 203 âââââââââââââââââââââââââââââââââââââââââ */ 204 *, *::before, *::after { 205 box-sizing: border-box; 206 margin: 0; 207 padding: 0; 208 } 209 210 html { 211 font-size: 16px; 212 scroll-behavior: smooth; 213 -webkit-text-size-adjust: 100%; 214 text-rendering: optimizeLegibility; 215 -webkit-font-smoothing: antialiased; 216 -moz-osx-font-smoothing: grayscale; 217 } 218 219 body { 220 background-color: var(--c-bg); 221 color: var(--c-text); 222 font-family: var(--font-body); 223 font-size: var(--text-base); 224 font-weight: 400; 225 line-height: 1.65; 226 overflow-x: hidden; 227 min-height: 100vh; 228 } 229 230 /* Text selection */ 231 ::selection { 232 background: var(--c-accent); 233 color: var(--c-black); 234 } 235 236 /* Scrollbar */ 237 ::-webkit-scrollbar { width: 5px; } 238 ::-webkit-scrollbar-track { background: var(--c-bg); } 239 ::-webkit-scrollbar-thumb { background: var(--c-border-hi); border-radius: var(--r-full); } 240 ::-webkit-scrollbar-thumb:hover{ background: var(--c-text-muted); } 241 242 /* Elements */ 243 a { color: inherit; text-decoration: none; } 244 img, video { display: block; max-width: 100%; } 245 ul, ol { list-style: none; } 246 button { cursor: pointer; border: none; background: none; font-family: inherit; } 247 input, textarea, select { font-family: inherit; font-size: inherit; } 248 249 /* âââââââââââââââââââââââââââââââââââââââââ 250 LAYOUT UTILITIES 251 âââââââââââââââââââââââââââââââââââââââââ */ 252 .container { 253 width: 100%; 254 max-width: var(--max-w); 255 margin-inline: auto; 256 padding-inline: var(--gutter); 257 } 258 259 .container--tight { 260 max-width: var(--max-w-tight); 261 } 262 263 .section { 264 padding-block: var(--section-pad); 265 } 266 267 /* âââââââââââââââââââââââââââââââââââââââââ 268 TYPOGRAPHY UTILITIES 269 âââââââââââââââââââââââââââââââââââââââââ */ 270 .display { 271 font-family: var(--font-display); 272 line-height: 0.92; 273 letter-spacing: 0.02em; 274 text-transform: uppercase; 275 } 276 277 .mono { 278 font-family: var(--font-mono); 279 font-size: var(--text-sm); 280 letter-spacing: 0.06em; 281 } 282 283 /* âââââââââââââââââââââââââââââââââââââââââ 284 GRAIN OVERLAY (subtle film grain) 285 âââââââââââââââââââââââââââââââââââââââââ */ 286 body::after { 287 content: ''; 288 position: fixed; 289 inset: 0; 290 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); 291 opacity: 0.03; 292 pointer-events: none; 293 z-index: var(--z-toast); 294 mix-blend-mode: overlay; 295 } 296 297 /* âââââââââââââââââââââââââââââââââââââââââ 298 CUSTOM CURSOR 299 âââââââââââââââââââââââââââââââââââââââââ */
300 @media (pointer: fine) { * { cursor: none; } } 301 302 #cursor-dot { 303 position: fixed; 304 width: 8px; 305 height: 8px; 306 background: var(--c-accent); 307 border-radius: 50%; 308 pointer-events: none; 309 z-index: var(--z-toast); 310 transform: translate(-50%, -50%); 311 transition: width var(--t-base) var(--ease), 312 height var(--t-base) var(--ease), 313 background var(--t-base) var(--ease); 314 mix-blend-mode: difference; 315 } 316 317 #cursor-ring { 318 position: fixed; 319 width: 36px; 320 height: 36px; 321 border: 1.5px solid rgba(212,255,0,0.4); 322 border-radius: 50%; 323 pointer-events: none; 324 z-index: var(--z-toast); 325 transform: translate(-50%, -50%); 326 transition: width var(--t-slow) var(--ease), 327 height var(--t-slow) var(--ease), 328 border-color var(--t-slow) var(--ease), 329 left 80ms linear, 330 top 80ms linear; 331 } 332 333 #cursor-dot.is-hover { width: 14px; height: 14px; } 334 #cursor-ring.is-hover { width: 56px; height: 56px; border-color: var(--c-accent); } 335 336 337 /* âââââââââââââââââââââââââââââââââââââââââââ 338 NAV 339 âââââââââââââââââââââââââââââââââââââââââââ */ 340 .nav { 341 position: fixed; 342 top: 0; 343 left: 0; 344 right: 0; 345 z-index: var(--z-nav); 346 padding: 1.25rem var(--gutter); 347 display: flex; 348 align-items: center; 349 justify-content: space-between; 350 transition: background var(--t-slow) var(--ease), 351 backdrop-filter var(--t-slow) var(--ease), 352 border-color var(--t-slow) var(--ease); 353 border-bottom: 1px solid transparent; 354 } 355 356 .nav.scrolled { 357 background: rgba(10, 10, 10, 0.82); 358 backdrop-filter: blur(18px) saturate(1.4); 359 -webkit-backdrop-filter: blur(18px) saturate(1.4); 360 border-color: var(--c-border); 361 } 362 363 .nav__logo { 364 display: flex; 365 align-items: center; 366 gap: 0.5rem; 367 font-family: var(--font-display); 368 font-size: 1.4rem; 369 letter-spacing: 0.06em; 370 text-transform: uppercase; 371 color: var(--c-white); 372 } 373 374 .nav__logo-icon { 375 width: 28px; 376 height: 28px; 377 background: var(--c-accent); 378 border-radius: 6px; 379 display: grid; 380 place-items: center; 381 } 382 383 .nav__logo-icon svg { 384 width: 16px; 385 height: 16px; 386 } 387 388 .nav__logo span { color: var(--c-accent); } 389 390 .nav__links { 391 display: flex; 392 align-items: center; 393 gap: 2rem; 394 } 395 396 .nav__links a { 397 font-size: var(--text-sm); 398 font-weight: 500; 399 color: var(--c-text-muted); 400 letter-spacing: 0.03em; 401 transition: color var(--t-fast); 402 position: relative; 403 } 404 405 .nav__links a::after { 406 content: ''; 407 position: absolute; 408 bottom: -3px; 409 left: 0; 410 width: 0; 411 height: 1px; 412 background: var(--c-accent); 413 transition: width var(--t-base) var(--ease); 414 } 415 416 .nav__links a:hover { color: var(--c-white); } 417 .nav__links a:hover::after { width: 100%; } 418 419 .nav__actions { 420 display: flex; 421 align-items: center; 422 gap: 0.75rem; 423 } 424 425 .btn { 426 display: inline-flex; 427 align-items: center; 428 gap: 0.5rem; 429 padding: 0.6rem 1.25rem; 430 border-radius: var(--r-full); 431 font-size: var(--text-sm); 432 font-weight: 600; 433 letter-spacing: 0.03em; 434 transition: all var(--t-base) var(--ease); 435 white-space: nowrap; 436 } 437 438 .btn--ghost { 439 color: var(--c-text-muted); 440 border: 1px solid var(--c-border); 441 } 442 443 .btn--ghost:hover { 444 color: var(--c-white); 445 border-color: var(--c-border-hi); 446 background: rgba(255,255,255,0.05); 447 } 448 449 .btn--primary { 450 background: var(--c-accent); 451 color: var(--c-black); 452 font-weight: 700; 453 } 454 455 .btn--primary:hover { 456 background: #e8ff33; 457 box-shadow: var(--shadow-glow); 458 transform: translateY(-1px); 459 } 460 461 .btn--primary:active { transform: translateY(0); } 462 463 .nav__hamburger { 464 display: none; 465 flex-direction: column; 466 gap: 5px; 467 padding: 4px; 468 z-index: calc(var(--z-nav) + 1); 469 position: relative; 470 } 471 472 .nav__hamburger span { 473 display: block; 474 width: 22px; 475 height: 1.5px; 476 background: var(--c-text); 477 transition: all var(--t-base) var(--ease); 478 transform-origin: center; 479 } 480 481 /* Hamburger â X animation */ 482 .nav__hamburger.is-open span:nth-child(1) { 483 transform: translateY(6.5px) rotate(45deg); 484 } 485 .nav__hamburger.is-open span:nth-child(2) { 486 opacity: 0; 487 transform: scaleX(0); 488 } 489 .nav__hamburger.is-open span:nth-child(3) { 490 transform: translateY(-6.5px) rotate(-45deg); 491 } 492 493 /* Mobile drawer overlay */ 494 .nav__mobile-overlay { 495 display: none; 496 position: fixed; 497 inset: 0; 498 background: rgba(0, 0, 0, 0.6); 499 backdrop-filter: blur(4px); 500 z-index: calc(var(--z-nav) - 1); 501 opacity: 0; 502 pointer-events: none; 503 transition: opacity var(--t-slow) var(--ease); 504 } 505 506 .nav__mobile-overlay.is-open { 507 opacity: 1; 508 pointer-events: auto; 509 } 510 511 /* Mobile drawer panel */ 512 .nav__mobile-drawer { 513 position: fixed; 514 top: 0; 515 right: 0; 516 bottom: 0; 517 width: min(320px, 85vw); 518 background: var(--c-bg-2); 519 border-left: 1px solid var(--c-border); 520 z-index: var(--z-nav); 521 display: flex; 522 flex-direction: column; 523 padding: 5rem 2rem 2.5rem; 524 transform: translateX(100%); 525 transition: transform var(--t-slow) var(--ease); 526 gap: 0.25rem; 527 } 528 529 .nav__mobile-drawer.is-open { 530 transform: translateX(0); 531 } 532 533 .nav__mobile-drawer a { 534 display: block; 535 font-size: var(--text-lg); 536 font-weight: 500; 537 color: var(--c-text-muted); 538 padding: 0.85rem 0; 539 border-bottom: 1px solid var(--c-border); 540 letter-spacing: 0.02em; 541 transition: color var(--t-fast), padding-left var(--t-fast); 542 } 543 544 .nav__mobile-drawer a:hover { 545 color: var(--c-white); 546 padding-left: 0.5rem; 547 } 548 549 .nav__mobile-drawer a:last-child { 550 border-bottom: none; 551 } 552 553 .nav__mobile-actions { 554 margin-top: auto; 555 display: flex; 556 flex-direction: column; 557 gap: 0.75rem; 558 } 559 560 .nav__mobile-actions .btn { 561 width: 100%; 562 justify-content: center; 563 padding: 0.85rem 1.5rem; 564 font-size: var(--text-base); 565 } 566 567 /* âââââââââââââââââââââââââââââââââââââââââââ 568 HERO 569 âââââââââââââââââââââââââââââââââââââââââââ */ 570 .hero { 571 position: relative; 572 min-height: 100vh; 573 display: flex; 574 flex-direction: column; 575 justify-content: center; 576 overflow: hidden; 577 padding-top: 5rem; 578 } 579
580 /* Background grid */ 581 .hero__grid-bg { 582 position: absolute; 583 inset: 0; 584 background-image: 585 linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), 586 linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); 587 background-size: 60px 60px; 588 mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%); 589 } 590 591 /* Radial glow blobs */ 592 .hero__glow { 593 position: absolute; 594 border-radius: 50%; 595 pointer-events: none; 596 filter: blur(80px); 597 } 598 599 .hero__glow--1 { 600 width: 700px; 601 height: 700px; 602 background: radial-gradient(circle, rgba(212,255,0,0.12) 0%, transparent 70%); 603 top: -200px; 604 left: -100px; 605 animation: glow-drift-1 12s ease-in-out infinite alternate; 606 } 607 608 .hero__glow--2 { 609 width: 500px; 610 height: 500px; 611 background: radial-gradient(circle, rgba(255,77,0,0.1) 0%, transparent 70%); 612 top: 100px; 613 right: -80px; 614 animation: glow-drift-2 15s ease-in-out infinite alternate; 615 } 616 617 .hero__glow--3 { 618 width: 400px; 619 height: 400px; 620 background: radial-gradient(circle, rgba(0,194,255,0.07) 0%, transparent 70%); 621 bottom: 0; 622 left: 40%; 623 animation: glow-drift-1 18s ease-in-out infinite alternate-reverse; 624 } 625 626 @keyframes glow-drift-1 { 627 from { transform: translate(0, 0) scale(1); } 628 to { transform: translate(60px, 40px) scale(1.15); } 629 } 630 @keyframes glow-drift-2 { 631 from { transform: translate(0, 0) scale(1); } 632 to { transform: translate(-40px, 60px) scale(1.2); } 633 } 634 635 /* Inner layout */ 636 .hero__inner { 637 position: relative; 638 z-index: var(--z-base); 639 display: grid; 640 grid-template-columns: 1fr 1fr; 641 gap: clamp(3rem, 6vw, 6rem); 642 align-items: center; 643 padding-block: clamp(4rem, 8vh, 7rem); 644 } 645 646 /* LEFT col â text */ 647 .hero__content {} 648 649 .hero__eyebrow { 650 display: inline-flex; 651 align-items: center; 652 gap: 0.5rem; 653 padding: 0.35rem 0.85rem; 654 border: 1px solid var(--c-border-hi); 655 border-radius: var(--r-full); 656 font-family: var(--font-mono); 657 font-size: var(--text-xs); 658 color: var(--c-text-muted); 659 letter-spacing: 0.1em; 660 text-transform: uppercase; 661 margin-bottom: 1.75rem; 662 opacity: 0; 663 transform: translateY(20px); 664 animation: fade-up 0.8s var(--ease) 0.02s forwards; 665 } 666 667 .hero__eyebrow-dot { 668 width: 6px; 669 height: 6px; 670 background: var(--c-accent); 671 border-radius: 50%; 672 animation: pulse 2s ease-in-out infinite; 673 } 674 675 @keyframes pulse { 676 0%, 100% { opacity: 1; transform: scale(1); } 677 50% { opacity: 0.4; transform: scale(0.7); } 678 } 679 680 .hero__title { 681 font-family: var(--font-display); 682 font-size: clamp(3.8rem, 8vw, 7.5rem); 683 line-height: 0.9; 684 letter-spacing: 0.02em; 685 text-transform: uppercase; 686 color: var(--c-white); 687 margin-bottom: 1.5rem; 688 opacity: 0; 689 transform: translateY(30px); 690 animation: fade-up 0.9s var(--ease) 0.05s forwards; 691 } 692 693 .hero__title-line { display: block; } 694 695 .hero__title-line--accent { 696 color: var(--c-accent); 697 position: relative; 698 display: inline-block; 699 } 700 701 /* Underline scribble on accent word */ 702 .hero__title-line--accent::after { 703 content: ''; 704 position: absolute; 705 bottom: 6px; 706 left: 0; 707 right: 0; 708 height: 4px; 709 background: var(--c-accent-2); 710 border-radius: 2px; 711 transform: scaleX(0); 712 transform-origin: left; 713 animation: line-reveal 0.6s var(--ease) 1.1s forwards; 714 } 715 716 @keyframes line-reveal { 717 to { transform: scaleX(1); } 718 } 719 720 .hero__sub { 721 font-size: var(--text-lg); 722 color: var(--c-text-muted); 723 line-height: 1.6; 724 max-width: 460px; 725 margin-bottom: 2.5rem; 726 opacity: 0; 727 transform: translateY(20px); 728 animation: fade-up 0.8s var(--ease) 0.09s forwards; 729 } 730 731 .hero__sub strong { color: var(--c-text); font-weight: 500; } 732 733 .hero__ctas { 734 display: flex; 735 align-items: center; 736 flex-wrap: wrap; 737 gap: 1rem; 738 margin-bottom: 3rem; 739 opacity: 0; 740 transform: translateY(20px); 741 animation: fade-up 0.8s var(--ease) 0.12s forwards; 742 } 743 744 .btn--hero { 745 padding: 0.85rem 2rem; 746 font-size: var(--text-base); 747 border-radius: var(--r-full); 748 } 749 750 .btn--hero-outline { 751 display: inline-flex; 752 align-items: center; 753 gap: 0.5rem; 754 padding: 0.85rem 1.75rem; 755 border: 1px solid var(--c-border-hi); 756 border-radius: var(--r-full); 757 font-size: var(--text-base); 758 font-weight: 500; 759 color: var(--c-text-muted); 760 transition: all var(--t-base) var(--ease); 761 } 762 763 .btn--hero-outline:hover { 764 color: var(--c-white); 765 border-color: var(--c-white); 766 background: rgba(255,255,255,0.04); 767 } 768 769 .btn--hero-outline svg { transition: transform var(--t-base) var(--ease); } 770 .btn--hero-outline:hover svg { transform: translateX(4px); } 771 772 /* Stats row */ 773 .hero__stats { 774 display: flex; 775 gap: 2.5rem; 776 opacity: 0; 777 transform: translateY(20px); 778 animation: fade-up 0.8s var(--ease) 0.15s forwards; 779 } 780 781 .hero__stat {} 782 783 .hero__stat-value { 784 font-family: var(--font-display); 785 font-size: var(--text-3xl); 786 color: var(--c-white); 787 line-height: 1; 788 letter-spacing: 0.02em; 789 } 790 791 .hero__stat-value span { color: var(--c-accent); } 792 793 .hero__stat-label { 794 font-size: var(--text-xs); 795 color: var(--c-text-dim); 796 text-transform: uppercase; 797 letter-spacing: 0.08em; 798 margin-top: 0.25rem; 799 } 800 801 /* RIGHT col â visual card */ 802 .hero__visual { 803 position: relative; 804 opacity: 0; 805 transform: translateX(40px); 806 animation: fade-left 1s var(--ease) 0.4s forwards; 807 } 808
809 @keyframes fade-left { 810 to { opacity: 1; transform: translateX(0); } 811 } 812 813 /* Main card */ 814 .hero__card { 815 position: relative; 816 background: var(--c-surface); 817 border: 1px solid var(--c-border-hi); 818 border-radius: var(--r-xl); 819 overflow: hidden; 820 aspect-ratio: 16/10; 821 } 822 823 .hero__card-video-placeholder { 824 width: 100%; 825 height: 100%; 826 background: linear-gradient(135deg, #111 0%, #1a1a1a 50%, #111 100%); 827 display: flex; 828 align-items: center; 829 justify-content: center; 830 position: relative; 831 overflow: hidden; 832 } 833 834 /* Animated gradient mesh in the card */ 835 .hero__card-video-placeholder::before { 836 content: ''; 837 position: absolute; 838 inset: -50%; 839 background: conic-gradient( 840 from 0deg at 30% 50%, 841 rgba(212,255,0,0.12), 842 rgba(255,77,0,0.08), 843 rgba(0,194,255,0.06), 844 rgba(212,255,0,0.12) 845 ); 846 animation: rotate-mesh 10s linear infinite; 847 } 848 849 @keyframes rotate-mesh { 850 to { transform: rotate(360deg); } 851 } 852 853 /* Play button */ 854 .hero__play { 855 position: relative; 856 z-index: 2; 857 width: 72px; 858 height: 72px; 859 background: var(--c-accent); 860 border-radius: 50%; 861 display: grid; 862 place-items: center; 863 transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease); 864 } 865 866 .hero__play:hover { 867 transform: scale(1.1); 868 box-shadow: 0 0 50px rgba(212,255,0,0.5); 869 } 870 871 .hero__play::before { 872 content: ''; 873 position: absolute; 874 inset: -8px; 875 border: 1px solid rgba(212,255,0,0.3); 876 border-radius: 50%; 877 animation: ring-pulse 2s ease-in-out infinite; 878 } 879 880 @keyframes ring-pulse { 881 0%, 100% { transform: scale(1); opacity: 0.6; } 882 50% { transform: scale(1.2); opacity: 0; } 883 } 884 885 /* Card bottom bar */ 886 .hero__card-bar { 887 position: absolute; 888 bottom: 0; 889 left: 0; 890 right: 0; 891 padding: 1rem 1.25rem; 892 background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%); 893 display: flex; 894 align-items: center; 895 justify-content: space-between; 896 } 897 898 .hero__card-prompt { 899 font-family: var(--font-mono); 900 font-size: var(--text-xs); 901 color: rgba(255,255,255,0.6); 902 } 903 904 .hero__card-badge { 905 display: flex; 906 align-items: center; 907 gap: 0.4rem; 908 padding: 0.3rem 0.7rem; 909 background: rgba(212,255,0,0.15); 910 border: 1px solid rgba(212,255,0,0.3); 911 border-radius: var(--r-full); 912 font-family: var(--font-mono); 913 font-size: 0.65rem; 914 color: var(--c-accent); 915 letter-spacing: 0.06em; 916 text-transform: uppercase; 917 } 918 919 .hero__card-badge-dot { 920 width: 5px; 921 height: 5px; 922 background: var(--c-accent); 923 border-radius: 50%; 924 animation: pulse 1.5s ease-in-out infinite; 925 } 926 927 /* Floating tags */ 928 .hero__tag { 929 position: absolute; 930 background: rgba(15,15,15,0.9); 931 border: 1px solid var(--c-border-hi); 932 border-radius: var(--r-md); 933 padding: 0.55rem 0.9rem; 934 font-size: var(--text-xs); 935 backdrop-filter: blur(12px); 936 white-space: nowrap; 937 animation: float 4s ease-in-out infinite; 938 } 939 940 .hero__tag--1 { 941 top: -3.5rem; 942 right: 2rem; 943 color: var(--c-accent); 944 font-family: var(--font-mono); 945 border-color: rgba(212,255,0,0.25); 946 animation-delay: 0s; 947 } 948 949 @keyframes float { 950 0%, 100% { transform: translateY(0px); } 951 50% { transform: translateY(-10px); } 952 } 953 954 /* Model pills row below card */ 955 .hero__models { 956 display: flex; 957 align-items: center; 958 gap: 0.6rem; 959 margin-top: 1.25rem; 960 flex-wrap: wrap; 961 } 962 963 .hero__models-label { 964 font-size: var(--text-xs); 965 color: var(--c-text-dim); 966 text-transform: uppercase; 967 letter-spacing: 0.08em; 968 margin-right: 0.25rem; 969 } 970 971 .hero__model-pill { 972 display: inline-flex; 973 align-items: center; 974 gap: 0.35rem; 975 padding: 0.3rem 0.75rem; 976 border: 1px solid var(--c-border); 977 border-radius: var(--r-full); 978 font-size: 0.7rem; 979 color: var(--c-text-muted); 980 font-family: var(--font-mono); 981 letter-spacing: 0.04em; 982 transition: all var(--t-fast); 983 } 984 985 .hero__model-pill:hover { 986 border-color: var(--c-border-hi); 987 color: var(--c-text); 988 background: rgba(255,255,255,0.04); 989 } 990 991 .hero__model-pill-dot { 992 width: 4px; 993 height: 4px; 994 border-radius: 50%; 995 } 996 997 /* Ticker / scrolling text bar */ 998 .hero__ticker { 999 position: absolute; 1000 bottom: 0; 1001 left: 0; 1002 right: 0; 1003 border-top: 1px solid var(--c-border); 1004 background: var(--c-bg); 1005 overflow: hidden; 1006 padding: 0.75rem 0; 1007 z-index: var(--z-base); 1008 } 1009 1010 .hero__ticker-track { 1011 display: flex; 1012 gap: 4rem; 1013 width: max-content; 1014 animation: ticker 28s linear infinite; 1015 } 1016 1017 .hero__ticker-track:hover { animation-play-state: paused; } 1018
1019 @keyframes ticker { 1020 from { transform: translateX(0); } 1021 to { transform: translateX(-50%); } 1022 } 1023 1024 .hero__ticker-item { 1025 display: flex; 1026 align-items: center; 1027 gap: 0.75rem; 1028 font-size: var(--text-xs); 1029 color: var(--c-text-dim); 1030 text-transform: uppercase; 1031 letter-spacing: 0.1em; 1032 white-space: nowrap; 1033 } 1034 1035 .hero__ticker-item-sep { 1036 width: 3px; 1037 height: 3px; 1038 background: var(--c-accent); 1039 border-radius: 50%; 1040 } 1041 1042 /* Scroll indicator */ 1043 .hero__scroll { 1044 position: absolute; 1045 bottom: 3.5rem; 1046 left: 50%; 1047 transform: translateX(-50%); 1048 display: flex; 1049 flex-direction: column; 1050 align-items: center; 1051 gap: 0.5rem; 1052 opacity: 0; 1053 animation: fade-up 0.8s var(--ease) 0.28s forwards; 1054 } 1055 1056 .hero__scroll-label { 1057 font-family: var(--font-mono); 1058 font-size: 0.6rem; 1059 color: var(--c-text-dim); 1060 text-transform: uppercase; 1061 letter-spacing: 0.12em; 1062 } 1063 1064 .hero__scroll-line { 1065 width: 1px; 1066 height: 40px; 1067 background: linear-gradient(to bottom, var(--c-accent), transparent); 1068 animation: scroll-line 1.8s ease-in-out infinite; 1069 } 1070 1071 @keyframes scroll-line { 1072 0% { transform: scaleY(0); transform-origin: top; opacity: 1; } 1073 50% { transform: scaleY(1); transform-origin: top; opacity: 1; } 1074 51% { transform: scaleY(1); transform-origin: bottom; } 1075 100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; } 1076 } 1077 1078 /* Shared fade-up keyframe */ 1079 @keyframes fade-up { 1080 to { opacity: 1; transform: translateY(0); } 1081 } 1082 1083 /* âââââââââââââââââââââââââââââââââââââââââââ 1084 RESPONSIVE â NAV + HERO 1085 âââââââââââââââââââââââââââââââââââââââââââ */ 1086 /* Disable custom cursor on touch devices */ 1087 @media (hover: none) and (pointer: coarse) { 1088 * { cursor: auto !important; } 1089 #cursor-dot, #cursor-ring { display: none !important; } 1090 } 1091 1092 @media (max-width: 900px) { 1093 .nav__links { display: none; } 1094 .nav__hamburger { display: flex; } 1095 /* Hide desktop CTA buttons so the navbar isn't cramped */ 1096 .nav__actions .btn--ghost, 1097 .nav__actions .btn--primary { display: none; } 1098 /* Show the mobile overlay */ 1099 .nav__mobile-overlay { display: block; } 1100 1101 .hero__inner { 1102 grid-template-columns: 1fr; 1103 text-align: center; 1104 } 1105 1106 .hero__sub { margin-inline: auto; } 1107 .hero__ctas { justify-content: center; } 1108 .hero__stats { justify-content: center; } 1109 1110 .hero__visual { 1111 max-width: 520px; 1112 margin-inline: auto; 1113 width: 100%; 1114 } 1115 1116 .hero__tag--2 { left: 0; } 1117 .hero__tag--3 { right: 0; } 1118 } 1119 1120 @media (max-width: 520px) { 1121 .hero__title { font-size: clamp(3rem, 14vw, 4.5rem); } 1122 .hero__stats { gap: 1.5rem; } 1123 .btn--hero { width: 100%; justify-content: center; } 1124 .hero__models { gap: 0.4rem; margin-top: 1rem; } 1125 .hero__models-label { font-size: 0.6rem; margin-right: 0.15rem; } 1126 .hero__model-pill { padding: 0.2rem 0.55rem; font-size: 0.6rem; gap: 0.25rem; } 1127 .hero__model-pill-dot { width: 3px; height: 3px; } 1128 } 1129 1130 /* Language picker active state (legacy, kept for compat) */ 1131 [data-lang-btn].is-active { 1132 color: var(--c-accent) !important; 1133 border-color: var(--c-accent) !important; 1134 background: rgba(212,255,0,0.08) !important; 1135 } 1136 1137 /* ââ Language Dropdown âââââââââââââââââââââââââââââââââââ */ 1138 .lang-dropdown { 1139 position: relative; 1140 } 1141 1142 .lang-dropdown__trigger { 1143 display: flex; 1144 align-items: center; 1145 gap: 0.3rem; 1146 background: none; 1147 border: 1px solid rgba(255,255,255,0.12); 1148 color: var(--c-text-muted); 1149 padding: 0.3rem 0.55rem; 1150 border-radius: var(--r-sm); 1151 cursor: pointer; 1152 font-size: 0.7rem; 1153 font-family: var(--font-mono); 1154 letter-spacing: 0.06em; 1155 transition: color 0.2s, border-color 0.2s, background 0.2s; 1156 white-space: nowrap; 1157 } 1158 1159 .lang-dropdown__trigger:hover { 1160 color: var(--c-white); 1161 border-color: rgba(255,255,255,0.28); 1162 background: rgba(255,255,255,0.04); 1163 } 1164 1165 .lang-dropdown__trigger[aria-expanded="true"] { 1166 color: var(--c-accent); 1167 border-color: var(--c-accent); 1168 background: rgba(212,255,0,0.06); 1169 } 1170 1171 .lang-dropdown__globe { display: flex; align-items: center; opacity: 0.7; } 1172 .lang-dropdown__label { font-weight: 600; } 1173 1174 .lang-dropdown__caret { 1175 display: flex; 1176 align-items: center; 1177 opacity: 0.5; 1178 transition: transform 0.2s var(--ease); 1179 } 1180 .lang-dropdown__trigger[aria-expanded="true"] .lang-dropdown__caret { 1181 transform: rotate(180deg); 1182 opacity: 1; 1183 } 1184 1185 .lang-dropdown__menu { 1186 position: absolute; 1187 top: calc(100% + 6px); 1188 right: 0; 1189 min-width: 160px; 1190 background: var(--c-bg-2); 1191 border: 1px solid rgba(255,255,255,0.1); 1192 border-radius: var(--r-md); 1193 box-shadow: var(--shadow-md), 0 0 0 1px rgba(0,0,0,0.3); 1194 list-style: none; 1195 padding: 0.3rem; 1196 z-index: calc(var(--z-nav) + 10); 1197 opacity: 0; 1198 transform: translateY(-6px) scale(0.97); 1199 pointer-events: none; 1200 transition: opacity 0.18s var(--ease), transform 0.18s var(--ease); 1201 transform-origin: top right; 1202 } 1203 1204 .lang-dropdown__menu.is-open { 1205 opacity: 1; 1206 transform: translateY(0) scale(1); 1207 pointer-events: auto; 1208 } 1209 1210 .lang-dropdown__item { 1211 display: flex; 1212 align-items: center; 1213 gap: 0.5rem; 1214 padding: 0.45rem 0.6rem; 1215 border-radius: 5px; 1216 cursor: pointer; 1217 font-size: 0.8rem; 1218 font-family: var(--font-body); 1219 color: var(--c-text-muted); 1220 transition: background 0.15s, color 0.15s; 1221 user-select: none; 1222 } 1223 1224 .lang-dropdown__item:hover { 1225 background: rgba(255,255,255,0.06); 1226 color: var(--c-white); 1227 } 1228 1229 .lang-dropdown__item.is-active { 1230 color: var(--c-accent); 1231 background: rgba(212,255,0,0.07); 1232 } 1233 1234 .lang-dropdown__flag { font-size: 1rem; line-height: 1; } 1235 1236 .lang-dropdown__code { 1237 margin-left: auto; 1238 font-family: var(--font-mono); 1239 font-size: 0.65rem; 1240 letter-spacing: 0.08em; 1241 opacity: 0.45; 1242 } 1243 1244 .lang-dropdown__item.is-active .lang-dropdown__code { opacity: 0.8; } 1245 1246 /* Mobile variant â menu opens upward */ 1247 .lang-dropdown--mobile .lang-dropdown__menu { 1248 top: auto; 1249 bottom: calc(100% + 6px); 1250 transform-origin: bottom right; 1251 transform: translateY(6px) scale(0.97); 1252 } 1253 .lang-dropdown--mobile .lang-dropdown__menu.is-open { 1254 transform: translateY(0) scale(1); 1255 } 1256 1257 </style> 1258 1259 <!-- âââââââââââââââââââââââââââââââââââââââââââ 1260 STRUCTURED DATA â JSON-LD 1261 âââââââââââââââââââââââââââââââââââââââââââ --> 1262
1262<script type="application/ld+json"> 1263 { 1264 "@context": "https://schema.org", 1265 "@type": "WebApplication", 1266 "name": "AI Video Generator", 1267 "url": "https://video-generator.ai", 1268 "description": "Create stunning AI videos from text or images. Multi-model AI video generator with cinematic control, style presets, and export-ready output.", 1269 "applicationCategory": "MultimediaApplication", 1270 "operatingSystem": "Web", 1271 "offers": { 1272 "@type": "Offer", 1273 "price": "0", 1274 "priceCurrency": "USD", 1275 "description": "Free tier available" 1276 }, 1277 "provider": { 1278 "@type": "Organization", 1279 "name": "video-generator.ai", 1280 "url": "https://video-generator.ai" 1281 } 1282 } 1283 </script>
1283 1284 1285 <!-- âââââââââââââââââââââââââââââââââââââââââââ 1286 CURSOR SCRIPT 1287 âââââââââââââââââââââââââââââââââââââââââââ --> 1288
1288<script type="6c18279ba6d93a40249c492f-text/javascript"> 1289 document.addEventListener('DOMContentLoaded', () => { 1290 const dot = document.getElementById('cursor-dot'); 1291 const ring = document.getElementById('cursor-ring'); 1292 1293 let mx = 0, my = 0; 1294 let rx = 0, ry = 0; 1295 1296 document.addEventListener('mousemove', e => { 1297 mx = e.clientX; 1298 my = e.clientY; 1299 dot.style.left = mx + 'px'; 1300 dot.style.top = my + 'px'; 1301 }); 1302 1303 // Ring follows with slight lag via requestAnimationFrame 1304 (function lerp() { 1305 rx += (mx - rx) * 0.12; 1306 ry += (my - ry) * 0.12; 1307 ring.style.left = rx + 'px'; 1308 ring.style.top = ry + 'px'; 1309 requestAnimationFrame(lerp); 1310 })(); 1311 1312 // Hover states 1313 document.querySelectorAll('a, button, [data-hover]').forEach(el => { 1314 el.addEventListener('mouseenter', () => { 1315 dot.classList.add('is-hover'); 1316 ring.classList.add('is-hover'); 1317 }); 1318 el.addEventListener('mouseleave', () => { 1319 dot.classList.remove('is-hover'); 1320 ring.classList.remove('is-hover'); 1321 }); 1322 }); 1323 }); 1324 </script>
1324 1325 1326 1327 <!-- Page transition styles --> 1328 <style> 1329 #page-transition-overlay { 1330 position: fixed; 1331 inset: 0; 1332 background: #0a0a0a; 1333 z-index: 99999; 1334 pointer-events: none; 1335 opacity: 0; 1336 transition: opacity 220ms ease; 1337 } 1338 #page-transition-overlay.fade-out { opacity: 1; pointer-events: all; } 1339 body { animation: pageFadeIn 280ms ease forwards; } 1340 @keyframes pageFadeIn { 1341 from { opacity: 0; } 1342 to { opacity: 1; } 1343 } 1344 </style> 1345</head> 1346 1347<body> 1348 <div id="page-transition-overlay"></div> 1349 1350 <!-- Custom cursor --> 1351 <div id="cursor-dot"></div> 1352 <div id="cursor-ring"></div> 1353 1354 <!-- â¼â¼â¼ SECTION 1 â NAV â¼â¼â¼ --> 1355 <nav class="nav" id="main-nav" role="navigation" aria-label="Main navigation"> 1356 <a href="/" class="nav__logo" aria-label="video-generator.ai home"> 1357 <div class="nav__logo-icon"> 1358 <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> 1359 <path d="M3 3.5L13 8L3 12.5V3.5Z" fill="#0a0a0a"/> 1360 </svg> 1361 </div> 1362 video<span>generator</span>ai 1363 </a> 1364 1365 <ul class="nav__links" role="list"> 1366 <li><a href="#models" data-i18n="nav_models">Models</a></li> 1367 <li><a href="#features" data-i18n="nav_features">Features</a></li> 1368 <li><a href="#usecases" data-i18n="nav_usecases">Use Cases</a></li> 1369 <li><a href="#pricing" data-i18n="nav_pricing">Pricing</a></li> 1370 <li><a href="#faq" data-i18n="nav_faq">FAQ</a></li> 1371 </ul> 1372 1373 <div class="nav__actions"> 1374 <div class="lang-dropdown" id="lang-dropdown-desktop"> 1375 <button class="lang-dropdown__trigger" id="lang-trigger-desktop" aria-haspopup="listbox" aria-expanded="false"> 1376 <span class="lang-dropdown__globe"> 1377 <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg> 1378 </span> 1379 <span class="lang-dropdown__label" id="lang-label-desktop">EN</span> 1380 <span class="lang-dropdown__caret"> 1381 <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg> 1382 </span> 1383 </button> 1384 <ul class="lang-dropdown__menu" role="listbox" aria-label="Select language"> 1385 <li class="lang-dropdown__item" role="option" data-lang-btn="en" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('en','desktop')" data-cf-modified-6c18279ba6d93a40249c492f-=""> 1386 <span class="lang-dropdown__flag">ðºð¸</span><span>English</span><span class="lang-dropdown__code">EN</span> 1387 </li> 1388 <li class="lang-dropdown__item" role="option" data-lang-btn="es" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('es','desktop')" data-cf-modified-6c18279ba6d93a40249c492f-=""> 1389 <span class="lang-dropdown__flag">ðªð¸</span><span>Español</span><span class="lang-dropdown__code">ES</span> 1390 </li> 1391 <li class="lang-dropdown__item" role="option" data-lang-btn="fr" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('fr','desktop')" data-cf-modified-6c18279ba6d93a40249c492f-=""> 1392 <span class="lang-dropdown__flag">ð«ð·</span><span>Français</span><span class="lang-dropdown__code">FR</span> 1393 </li> 1394 <li class="lang-dropdown__item" role="option" data-lang-btn="de" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('de','desktop')" data-cf-modified-6c18279ba6d93a40249c492f-=""> 1395 <span class="lang-dropdown__flag">ð©ðª</span><span>Deutsch</span><span class="lang-dropdown__code">DE</span> 1396 </li> 1397 <li class="lang-dropdown__item" role="option" data-lang-btn="ja" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('ja','desktop')" data-cf-modified-6c18279ba6d93a40249c492f-="">
1398 <span class="lang-dropdown__flag">ð¯ðµ</span><span>æ¥æ¬èª</span><span class="lang-dropdown__code">JA</span> 1399 </li> 1400 <li class="lang-dropdown__item" role="option" data-lang-btn="hi" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('hi','desktop')" data-cf-modified-6c18279ba6d93a40249c492f-=""> 1401 <span class="lang-dropdown__flag">ð®ð³</span><span>हिनà¥à¤¦à¥</span><span class="lang-dropdown__code">HI</span> 1402 </li> 1403 <li class="lang-dropdown__item" role="option" data-lang-btn="ru" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('ru','desktop')" data-cf-modified-6c18279ba6d93a40249c492f-=""> 1404 <span class="lang-dropdown__flag">ð·ðº</span><span>Ð ÑÑÑкий</span><span class="lang-dropdown__code">RU</span> 1405 </li> 1406 <li class="lang-dropdown__item" role="option" data-lang-btn="ar" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('ar','desktop')" data-cf-modified-6c18279ba6d93a40249c492f-=""> 1407 <span class="lang-dropdown__flag">ð¸ð¦</span><span>Ø§ÙØ¹Ø±Ø¨ÙØ©</span><span class="lang-dropdown__code">AR</span> 1408 </li> 1409 <li class="lang-dropdown__item" role="option" data-lang-btn="zh" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('zh','desktop')" data-cf-modified-6c18279ba6d93a40249c492f-=""> 1410 <span class="lang-dropdown__flag">ð¨ð³</span><span>䏿</span><span class="lang-dropdown__code">ZH</span> 1411 </li> 1412 <li class="lang-dropdown__item" role="option" data-lang-btn="pt" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('pt','desktop')" data-cf-modified-6c18279ba6d93a40249c492f-=""> 1413 <span class="lang-dropdown__flag">ð§ð·</span><span>Português</span><span class="lang-dropdown__code">PT</span> 1414 </li> 1415 </ul> 1416 </div> 1417 <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn btn--ghost" data-i18n="nav_signin">Sign in</a> 1418 <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn btn--primary" data-i18n="nav_start_free">Start Free</a> 1419 <button class="nav__hamburger" data-i18n-aria="nav_open_menu" aria-label="Open menu"> 1420 <span></span><span></span><span></span> 1421 </button> 1422 </div> 1423 </nav> 1424 1425 <!-- Mobile nav overlay --> 1426 <div class="nav__mobile-overlay" id="nav-overlay" aria-hidden="true"></div> 1427 1428 <!-- Mobile nav drawer --> 1429 <div class="nav__mobile-drawer" id="nav-drawer" role="dialog" aria-label="Mobile navigation" aria-hidden="true"> 1430 <a href="#models" onclick="if (!window.__cfRLUnblockHandlers) return false; closeMenu()" data-i18n="nav_models" data-cf-modified-6c18279ba6d93a40249c492f-="">Models</a> 1431 <a href="#features" onclick="if (!window.__cfRLUnblockHandlers) return false; closeMenu()" data-i18n="nav_features" data-cf-modified-6c18279ba6d93a40249c492f-="">Features</a> 1432 <a href="#usecases" onclick="if (!window.__cfRLUnblockHandlers) return false; closeMenu()" data-i18n="nav_usecases" data-cf-modified-6c18279ba6d93a40249c492f-="">Use Cases</a> 1433 <a href="#pricing" onclick="if (!window.__cfRLUnblockHandlers) return false; closeMenu()" data-i18n="nav_pricing" data-cf-modified-6c18279ba6d93a40249c492f-="">Pricing</a> 1434 <a href="#faq" onclick="if (!window.__cfRLUnblockHandlers) return false; closeMenu()" data-i18n="nav_faq" data-cf-modified-6c18279ba6d93a40249c492f-="">FAQ</a> 1435 <div class="nav__mobile-actions"> 1436 <div class="lang-dropdown lang-dropdown--mobile" id="lang-dropdown-mobile"> 1437 <button class="lang-dropdown__trigger" id="lang-trigger-mobile" aria-haspopup="listbox" aria-expanded="false"> 1438 <span class="lang-dropdown__globe"> 1439 <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg> 1440 </span>
1441 <span class="lang-dropdown__label" id="lang-label-mobile">EN</span> 1442 <span class="lang-dropdown__caret"> 1443 <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg> 1444 </span> 1445 </button> 1446 <ul class="lang-dropdown__menu" role="listbox" aria-label="Select language"> 1447 <li class="lang-dropdown__item" role="option" data-lang-btn="en" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('en','mobile')" data-cf-modified-6c18279ba6d93a40249c492f-=""> 1448 <span class="lang-dropdown__flag">ðºð¸</span><span>English</span><span class="lang-dropdown__code">EN</span> 1449 </li> 1450 <li class="lang-dropdown__item" role="option" data-lang-btn="es" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('es','mobile')" data-cf-modified-6c18279ba6d93a40249c492f-=""> 1451 <span class="lang-dropdown__flag">ðªð¸</span><span>Español</span><span class="lang-dropdown__code">ES</span> 1452 </li> 1453 <li class="lang-dropdown__item" role="option" data-lang-btn="fr" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('fr','mobile')" data-cf-modified-6c18279ba6d93a40249c492f-=""> 1454 <span class="lang-dropdown__flag">ð«ð·</span><span>Français</span><span class="lang-dropdown__code">FR</span> 1455 </li> 1456 <li class="lang-dropdown__item" role="option" data-lang-btn="de" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('de','mobile')" data-cf-modified-6c18279ba6d93a40249c492f-=""> 1457 <span class="lang-dropdown__flag">ð©ðª</span><span>Deutsch</span><span class="lang-dropdown__code">DE</span> 1458 </li> 1459 <li class="lang-dropdown__item" role="option" data-lang-btn="ja" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('ja','mobile')" data-cf-modified-6c18279ba6d93a40249c492f-=""> 1460 <span class="lang-dropdown__flag">ð¯ðµ</span><span>æ¥æ¬èª</span><span class="lang-dropdown__code">JA</span> 1461 </li> 1462 <li class="lang-dropdown__item" role="option" data-lang-btn="hi" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('hi','mobile')" data-cf-modified-6c18279ba6d93a40249c492f-=""> 1463 <span class="lang-dropdown__flag">ð®ð³</span><span>हिनà¥à¤¦à¥</span><span class="lang-dropdown__code">HI</span> 1464 </li> 1465 <li class="lang-dropdown__item" role="option" data-lang-btn="ru" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('ru','mobile')" data-cf-modified-6c18279ba6d93a40249c492f-=""> 1466 <span class="lang-dropdown__flag">ð·ðº</span><span>Ð ÑÑÑкий</span><span class="lang-dropdown__code">RU</span> 1467 </li> 1468 </ul> 1469 </div> 1470 <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn btn--ghost" onclick="if (!window.__cfRLUnblockHandlers) return false; closeMenu()" data-i18n="nav_signin" data-cf-modified-6c18279ba6d93a40249c492f-="">Sign in</a> 1471 <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn btn--primary" onclick="if (!window.__cfRLUnblockHandlers) return false; closeMenu()" data-i18n="nav_start_free" data-cf-modified-6c18279ba6d93a40249c492f-="">Start Free</a> 1472 </div> 1473 </div> 1474 1475 <!-- â¼â¼â¼ SECTION 2 â HERO â¼â¼â¼ --> 1476 <section class="hero" id="top" aria-label="Hero"> 1477 1478 <!-- Background decorations --> 1479 <div class="hero__grid-bg" aria-hidden="true"></div> 1480 <div class="hero__glow hero__glow--1" aria-hidden="true"></div> 1481 <div class="hero__glow hero__glow--2" aria-hidden="true"></div> 1482 <div class="hero__glow hero__glow--3" aria-hidden="true"></div> 1483 1484 <div class="container"> 1485 <div class="hero__inner"> 1486 1487 <!-- LEFT â Copy --> 1488 <div class="hero__content"> 1489 1490 <div class="hero__eyebrow" data-i18n="hero_eyebrow"> 1491 <span class="hero__eyebrow-dot"></span> 1492 Multi-Model · Text to Video · Image to Video 1493 </div> 1494 1495 <h1 class="hero__title">
1496 <span class="hero__title-line" data-i18n="hero_title_line1">Free AI Video</span> 1497 <span class="hero__title-line" data-i18n="hero_title_line2">Generator That</span> 1498 <span class="hero__title-line--accent" data-i18n="hero_title_accent">Create Without</span> 1499 <span class="hero__title-line" data-i18n="hero_title_line4">Signing Up</span> 1500 </h1> 1501 1502 <p class="hero__sub" data-i18n="hero_sub"> 1503 Create <strong>cinematic videos</strong> from text or images using multiple AI models. 1504 Fast generation, flexible styles, and creator-friendly controls â all in one place. 1505 </p> 1506 1507 <div class="hero__ctas"> 1508 <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn btn--primary btn--hero" data-i18n="hero_cta_primary"> 1509 <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> 1510 <path d="M3 3.5L13 8L3 12.5V3.5Z" fill="currentColor"/> 1511 </svg> 1512 Generate a Video Free 1513 </a> 1514 <a href="https://pixwith.video-generator.ai/explore" target="_blank" rel="nofollow" class="btn--hero-outline" data-i18n="hero_cta_secondary"> 1515 Browse Examples 1516 <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> 1517 <path d="M3 8H13M8 3l5 5-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 1518 </svg> 1519 </a> 1520 </div> 1521 1522 <div class="hero__stats"> 1523 <div class="hero__stat"> 1524 <div class="hero__stat-value">6<span>+</span></div> 1525 <div class="hero__stat-label" data-i18n="hero_stat_models_label">AI Models</div> 1526 </div> 1527 <div class="hero__stat"> 1528 <div class="hero__stat-value">4<span>K</span></div> 1529 <div class="hero__stat-label" data-i18n="hero_stat_resolution_label">Max Resolution</div> 1530 </div> 1531 <div class="hero__stat"> 1532 <div class="hero__stat-value">3<span>s</span></div> 1533 <div class="hero__stat-label" data-i18n="hero_stat_speed_label">Avg. Generation</div> 1534 </div> 1535 </div> 1536 1537 </div> 1538 1539 <!-- RIGHT â Visual --> 1540 <div class="hero__visual" aria-hidden="true"> 1541 1542 <!-- Floating tags --> 1543 <div class="hero__tag hero__tag--1">⦠Text â Video</div> 1544 1545 <!-- Video card --> 1546 <div class="hero__card"> 1547 <div class="hero__card-video-placeholder"> 1548 <button class="hero__play" data-i18n-aria="hero_play_label" aria-label="Play demo video"> 1549 <svg width="28" height="28" viewBox="0 0 28 28" fill="none"> 1550 <path d="M8 5.5L22 14L8 22.5V5.5Z" fill="#0a0a0a"/> 1551 </svg> 1552 </button> 1553 </div> 1554 <div class="hero__card-bar"> 1555 <span class="hero__card-prompt" data-i18n="hero_card_prompt">"Neon city rain, cinematic, slow dolly-inâ¦"</span> 1556 <span class="hero__card-badge"> 1557 <span class="hero__card-badge-dot"></span> 1558 <span data-i18n="hero_card_badge">Generating</span> 1559 </span> 1560 </div> 1561 </div> 1562 1563 <!-- Model pills --> 1564 <div class="hero__models"> 1565 <span class="hero__models-label" data-i18n="hero_models_label">Models:</span> 1566 <span class="hero__model-pill"><span class="hero__model-pill-dot" style="background:#d4ff00"></span>TextâVideo</span> 1567 <span class="hero__model-pill"><span class="hero__model-pill-dot" style="background:#00c2ff"></span>ImgâVideo</span> 1568 <span class="hero__model-pill"><span class="hero__model-pill-dot" style="background:#ff4d00"></span>Cinematic</span> 1569 <span class="hero__model-pill"><span class="hero__model-pill-dot" style="background:#a78bfa"></span>Anime</span> 1570 </div> 1571 1572 </div> 1573 </div><!-- /.hero__inner --> 1574 </div><!-- /.container --> 1575 1576 <!-- Scroll indicator --> 1577 <div class="hero__scroll" aria-hidden="true">
1578 <span class="hero__scroll-label" data-i18n="hero_scroll_label">Scroll</span> 1579 <span class="hero__scroll-line"></span> 1580 </div> 1581 1582 <!-- Ticker bar --> 1583 <div class="hero__ticker" aria-hidden="true"> 1584 <div class="hero__ticker-track"> 1585 <!-- duplicate items for seamless loop --> 1586 <span class="hero__ticker-item">Text to Video <span class="hero__ticker-item-sep"></span></span> 1587 <span class="hero__ticker-item">Image to Video <span class="hero__ticker-item-sep"></span></span> 1588 <span class="hero__ticker-item">Character Consistency <span class="hero__ticker-item-sep"></span></span> 1589 <span class="hero__ticker-item">Cinematic Shots <span class="hero__ticker-item-sep"></span></span> 1590 <span class="hero__ticker-item">Style Presets <span class="hero__ticker-item-sep"></span></span> 1591 <span class="hero__ticker-item">Multi-Model AI <span class="hero__ticker-item-sep"></span></span> 1592 <span class="hero__ticker-item">Export Ready <span class="hero__ticker-item-sep"></span></span> 1593 <span class="hero__ticker-item">4K Output <span class="hero__ticker-item-sep"></span></span> 1594 <span class="hero__ticker-item">Text to Video <span class="hero__ticker-item-sep"></span></span> 1595 <span class="hero__ticker-item">Image to Video <span class="hero__ticker-item-sep"></span></span> 1596 <span class="hero__ticker-item">Character Consistency <span class="hero__ticker-item-sep"></span></span> 1597 <span class="hero__ticker-item">Cinematic Shots <span class="hero__ticker-item-sep"></span></span> 1598 <span class="hero__ticker-item">Style Presets <span class="hero__ticker-item-sep"></span></span> 1599 <span class="hero__ticker-item">Multi-Model AI <span class="hero__ticker-item-sep"></span></span> 1600 <span class="hero__ticker-item">Export Ready <span class="hero__ticker-item-sep"></span></span> 1601 <span class="hero__ticker-item">4K Output <span class="hero__ticker-item-sep"></span></span> 1602 </div> 1603 </div> 1604 1605 </section> 1606 1607 <!-- â¼â¼â¼ NEXT SECTIONS WILL BE ADDED HERE â¼â¼â¼ --> 1608 1609 <!-- âââââââââââââââââââââââââââââââââââââââââââ 1610 NAV SCROLL + HERO JS 1611 âââââââââââââââââââââââââââââââââââââââââââ --> 1612
1612<script type="6c18279ba6d93a40249c492f-text/javascript"> 1613 // Nav sticky scroll effect 1614 const nav = document.getElementById('main-nav'); 1615 window.addEventListener('scroll', () => { 1616 nav.classList.toggle('scrolled', window.scrollY > 40); 1617 }, { passive: true }); 1618 1619 // Mobile menu toggle 1620 const hamburger = document.querySelector('.nav__hamburger'); 1621 const drawer = document.getElementById('nav-drawer'); 1622 const overlay = document.getElementById('nav-overlay'); 1623 1624 function openMenu() { 1625 hamburger.classList.add('is-open'); 1626 drawer.classList.add('is-open'); 1627 overlay.classList.add('is-open'); 1628 hamburger.setAttribute('aria-expanded', 'true'); 1629 hamburger.setAttribute('aria-label', 'Close menu'); 1630 drawer.setAttribute('aria-hidden', 'false'); 1631 overlay.setAttribute('aria-hidden', 'false'); 1632 document.body.style.overflow = 'hidden'; 1633 } 1634 1635 function closeMenu() { 1636 hamburger.classList.remove('is-open'); 1637 drawer.classList.remove('is-open'); 1638 overlay.classList.remove('is-open'); 1639 hamburger.setAttribute('aria-expanded', 'false'); 1640 hamburger.setAttribute('aria-label', 'Open menu'); 1641 drawer.setAttribute('aria-hidden', 'true'); 1642 overlay.setAttribute('aria-hidden', 'true'); 1643 document.body.style.overflow = ''; 1644 } 1645 1646 hamburger.addEventListener('click', () => { 1647 hamburger.classList.contains('is-open') ? closeMenu() : openMenu(); 1648 }); 1649 1650 overlay.addEventListener('click', closeMenu); 1651 1652 // Close menu on Escape key 1653 document.addEventListener('keydown', e => { 1654 if (e.key === 'Escape') closeMenu(); 1655 }); 1656 1657 // Close menu if window resized to desktop 1658 window.addEventListener('resize', () => { 1659 if (window.innerWidth > 900) closeMenu(); 1660 }); 1661 1662 // Counter animation for stats 1663 function animateCounter(el, target, suffix = '') { 1664 let start = 0; 1665 const duration = 1800; 1666 const step = timestamp => { 1667 if (!start) start = timestamp; 1668 const progress = Math.min((timestamp - start) / duration, 1); 1669 const eased = 1 - Math.pow(1 - progress, 3); 1670 el.textContent = Math.round(eased * target) + suffix; 1671 if (progress < 1) requestAnimationFrame(step); 1672 }; 1673 requestAnimationFrame(step); 1674 } 1675 1676 // Trigger counters when hero stats enter view 1677 const statObserver = new IntersectionObserver(entries => { 1678 entries.forEach(entry => { 1679 if (entry.isIntersecting) { 1680 const stats = [ 1681 { el: document.querySelectorAll('.hero__stat-value')[0], target: 6, suffix: '+' }, 1682 { el: document.querySelectorAll('.hero__stat-value')[1], target: 4, suffix: 'K' }, 1683 { el: document.querySelectorAll('.hero__stat-value')[2], target: 3, suffix: 's' }, 1684 ];
1685 stats.forEach(s => { 1686 if (s.el) { 1687 s.el.innerHTML = '0' + `<span>${s.suffix.includes('+') ? '+' : s.suffix}</span>`; 1688 // Simple display â just set final after short delay for effect 1689 setTimeout(() => { 1690 s.el.innerHTML = s.target + `<span>${s.suffix.includes('+') ? '+' : s.suffix}</span>`; 1691 }, 900); 1692 } 1693 }); 1694 statObserver.disconnect(); 1695 } 1696 }); 1697 }, { threshold: 0.5 }); 1698 1699 const statsEl = document.querySelector('.hero__stats'); 1700 if (statsEl) statObserver.observe(statsEl); 1701 </script>
1701 1702 1703 1704 <!-- â¼â¼â¼ SECTION 3 â WHY CHOOSE â¼â¼â¼ --> 1705 <style> 1706 1707 /* âââââââââââââââââââââââââââââââââââââââââââ 1708 WHY CHOOSE 1709 âââââââââââââââââââââââââââââââââââââââââââ */ 1710 .why { 1711 position: relative; 1712 padding-block: var(--section-pad); 1713 overflow: hidden; 1714 } 1715 1716 .why::before { 1717 content: ''; 1718 position: absolute; 1719 top: 0; 1720 left: 50%; 1721 transform: translateX(-50%); 1722 width: 1px; 1723 height: 80px; 1724 background: linear-gradient(to bottom, transparent, var(--c-border-hi)); 1725 } 1726 1727 .why__header { 1728 text-align: center; 1729 margin-bottom: clamp(3rem, 6vw, 5rem); 1730 } 1731 1732 .why__label { 1733 display: inline-flex; 1734 align-items: center; 1735 gap: 0.6rem; 1736 font-family: var(--font-mono); 1737 font-size: var(--text-xs); 1738 color: var(--c-accent); 1739 text-transform: uppercase; 1740 letter-spacing: 0.14em; 1741 margin-bottom: 1.25rem; 1742 } 1743 1744 .why__label-line { 1745 width: 32px; 1746 height: 1px; 1747 background: var(--c-accent); 1748 opacity: 0.5; 1749 } 1750 1751 .why__title { 1752 font-family: var(--font-display); 1753 font-size: clamp(2.8rem, 6vw, 5.5rem); 1754 line-height: 0.92; 1755 text-transform: uppercase; 1756 color: var(--c-white); 1757 letter-spacing: 0.02em; 1758 margin-bottom: 1.25rem; 1759 } 1760 1761 .why__title em { 1762 font-style: normal; 1763 color: var(--c-accent); 1764 } 1765 1766 .why__subtitle { 1767 font-size: var(--text-lg); 1768 color: var(--c-text-muted); 1769 max-width: 520px; 1770 margin-inline: auto; 1771 line-height: 1.6; 1772 } 1773 1774 /* BENTO GRID */ 1775 .why__grid { 1776 display: grid; 1777 grid-template-columns: repeat(12, 1fr); 1778 gap: 1rem; 1779 } 1780 1781 .why__card { 1782 position: relative; 1783 background: var(--c-surface); 1784 border: 1px solid var(--c-border); 1785 border-radius: var(--r-xl); 1786 padding: clamp(1.5rem, 3vw, 2.25rem); 1787 overflow: hidden; 1788 opacity: 0; 1789 transform: translateY(32px); 1790 transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), 1791 border-color var(--t-base), box-shadow var(--t-slow); 1792 } 1793 1794 .why__card.in-view { 1795 opacity: 1; 1796 transform: translateY(0); 1797 } 1798 1799 .why__card:hover { 1800 border-color: var(--c-border-hi); 1801 transform: translateY(-4px); 1802 box-shadow: var(--shadow-lg); 1803 } 1804 1805 .why__card::before { 1806 content: ''; 1807 position: absolute; 1808 inset: 0; 1809 border-radius: inherit; 1810 opacity: 0; 1811 transition: opacity var(--t-slow) var(--ease); 1812 pointer-events: none; 1813 } 1814 1815 .why__card:hover::before { opacity: 1; } 1816 1817 /* Grid placements */ 1818 .why__card--1 { grid-column: span 5; } 1819 .why__card--2 { grid-column: span 4; } 1820 .why__card--3 { grid-column: span 3; grid-row: span 2; } 1821 .why__card--4 { grid-column: span 4; } 1822 .why__card--5 { grid-column: span 5; } 1823 .why__card--6 { grid-column: span 6; } 1824 .why__card--7 { grid-column: span 6; } 1825 1826 /* Per-card glows */ 1827 .why__card--1::before { background: radial-gradient(circle at 0% 100%, rgba(212,255,0,0.08) 0%, transparent 60%); } 1828 .why__card--2::before { background: radial-gradient(circle at 100% 0%, rgba(0,194,255,0.08) 0%, transparent 60%); } 1829 .why__card--3::before { background: radial-gradient(circle at 50% 100%, rgba(255,77,0,0.1) 0%, transparent 60%); } 1830 .why__card--4::before { background: radial-gradient(circle at 0% 0%, rgba(167,139,250,0.08) 0%, transparent 60%); } 1831 .why__card--5::before { background: radial-gradient(circle at 100% 100%, rgba(212,255,0,0.07) 0%, transparent 60%); } 1832 .why__card--6::before { background: radial-gradient(circle at 0% 50%, rgba(0,194,255,0.07) 0%, transparent 60%); } 1833 .why__card--7::before { background: radial-gradient(circle at 100% 50%, rgba(255,77,0,0.07) 0%, transparent 60%); } 1834 1835 /* Stagger delays */ 1836 .why__card--1 { transition-delay: 0.05s; } 1837 .why__card--2 { transition-delay: 0.12s; } 1838 .why__card--3 { transition-delay: 0.19s; } 1839 .why__card--4 { transition-delay: 0.26s; } 1840 .why__card--5 { transition-delay: 0.33s; } 1841 .why__card--6 { transition-delay: 0.40s; } 1842 .why__card--7 { transition-delay: 0.47s; } 1843 1844 .why__card-icon { 1845 width: 44px; 1846 height: 44px; 1847 border-radius: var(--r-md); 1848 display: grid; 1849 place-items: center; 1850 margin-bottom: 1.25rem; 1851 } 1852 1853 .why__card-icon svg { width: 22px; height: 22px; } 1854 .why__card-icon--lime { background: rgba(212,255,0,0.12); } 1855 .why__card-icon--cyan { background: rgba(0,194,255,0.12); } 1856 .why__card-icon--orange { background: rgba(255,77,0,0.12); } 1857 .why__card-icon--purple { background: rgba(167,139,250,0.12); } 1858 1859 .why__card-tag { 1860 display: inline-block; 1861 font-family: var(--font-mono); 1862 font-size: 0.65rem; 1863 text-transform: uppercase; 1864 letter-spacing: 0.1em; 1865 padding: 0.2rem 0.6rem; 1866 border-radius: var(--r-full); 1867 margin-bottom: 0.75rem; 1868 } 1869 1870 .why__card-tag--lime { color: var(--c-accent); background: rgba(212,255,0,0.1); border: 1px solid rgba(212,255,0,0.2); } 1871 .why__card-tag--cyan { color: var(--c-accent-3); background: rgba(0,194,255,0.1); border: 1px solid rgba(0,194,255,0.2); } 1872 .why__card-tag--orange { color: var(--c-accent-2); background: rgba(255,77,0,0.1); border: 1px solid rgba(255,77,0,0.2); } 1873 .why__card-tag--purple { color: #a78bfa; background: rgba(167,139,250,0.1); border: 1px solid rgba(167,139,250,0.2); } 1874 1875 .why__card-title { 1876 font-family: var(--font-display); 1877 font-size: clamp(1.4rem, 2.5vw, 1.9rem); 1878 line-height: 1; 1879 text-transform: uppercase; 1880 letter-spacing: 0.03em; 1881 color: var(--c-white); 1882 margin-bottom: 0.6rem; 1883 } 1884 1885 .why__card-desc { 1886 font-size: var(--text-sm); 1887 color: var(--c-text-muted); 1888 line-height: 1.65; 1889 } 1890 1891 /* Card 1 inner layout */ 1892 .why__card--1 .why__card-inner { 1893 display: flex; 1894 align-items: flex-start; 1895 gap: 1.5rem; 1896 } 1897 1898 .why__card--1 .why__card-body { flex: 1; } 1899 1900 /* Orbit */ 1901 .why__orbit { 1902 position: relative; 1903 width: 100px; 1904 height: 100px; 1905 flex-shrink: 0; 1906 } 1907 1908 .why__orbit-center { 1909 position: absolute; 1910 top: 50%; 1911 left: 50%; 1912 transform: translate(-50%, -50%); 1913 width: 32px; 1914 height: 32px; 1915 background: var(--c-accent); 1916 border-radius: 50%; 1917 display: grid; 1918 place-items: center; 1919 } 1920 1921 .why__orbit-ring { 1922 position: absolute; 1923 top: 50%; 1924 left: 50%; 1925 border: 1px solid rgba(255,255,255,0.1); 1926 border-radius: 50%; 1927 transform: translate(-50%, -50%); 1928 } 1929 1930 .why__orbit-ring--1 { width: 60px; height: 60px; animation: spin 8s linear infinite; } 1931 .why__orbit-ring--2 { width: 100px; height: 100px; animation: spin 14s linear infinite reverse; border-style: dashed; } 1932
1933 @keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } } 1934 1935 .why__orbit-dot { 1936 position: absolute; 1937 width: 8px; 1938 height: 8px; 1939 border-radius: 50%; 1940 top: 0; 1941 left: 50%; 1942 transform: translateX(-50%) translateY(-4px); 1943 } 1944 1945 /* Card 3 â Tall accent */ 1946 .why__card--3 { 1947 background: linear-gradient(160deg, #1a1400 0%, #0f0f0f 60%); 1948 border-color: rgba(212,255,0,0.2); 1949 display: flex; 1950 flex-direction: column; 1951 justify-content: space-between; 1952 } 1953 1954 .why__big-num { 1955 font-family: var(--font-display); 1956 font-size: clamp(4rem, 7vw, 6rem); 1957 line-height: 1; 1958 color: var(--c-accent); 1959 letter-spacing: 0.02em; 1960 margin: 0.5rem 0; 1961 } 1962 1963 .why__speed-bars { 1964 display: flex; 1965 flex-direction: column; 1966 gap: 0.5rem; 1967 margin-top: 1.5rem; 1968 } 1969 1970 .why__speed-bar { 1971 display: flex; 1972 align-items: center; 1973 gap: 0.75rem; 1974 } 1975 1976 .why__speed-bar-label { 1977 font-family: var(--font-mono); 1978 font-size: 0.65rem; 1979 color: var(--c-text-dim); 1980 width: 52px; 1981 text-transform: uppercase; 1982 letter-spacing: 0.06em; 1983 } 1984 1985 .why__speed-bar-track { 1986 flex: 1; 1987 height: 4px; 1988 background: rgba(255,255,255,0.06); 1989 border-radius: 99px; 1990 overflow: hidden; 1991 } 1992 1993 .why__speed-bar-fill { 1994 height: 100%; 1995 border-radius: 99px; 1996 width: 0; 1997 transition: width 1.2s var(--ease); 1998 } 1999 2000 .why__card.in-view .why__speed-bar-fill { width: var(--fill-w); } 2001 2002 /* Card 5 â Export formats */ 2003 .why__formats { 2004 display: flex; 2005 flex-wrap: wrap; 2006 gap: 0.5rem; 2007 margin-top: 1rem; 2008 } 2009 2010 .why__format-pill { 2011 padding: 0.35rem 0.85rem; 2012 border: 1px solid var(--c-border); 2013 border-radius: var(--r-full); 2014 font-family: var(--font-mono); 2015 font-size: 0.7rem; 2016 color: var(--c-text-muted); 2017 transition: all var(--t-fast); 2018 } 2019 2020 .why__card:hover .why__format-pill:nth-child(1) { border-color: rgba(212,255,0,0.5); color: var(--c-accent); } 2021 .why__card:hover .why__format-pill:nth-child(2) { border-color: rgba(0,194,255,0.5); color: var(--c-accent-3); } 2022 .why__card:hover .why__format-pill:nth-child(3) { border-color: rgba(255,77,0,0.5); color: var(--c-accent-2); } 2023 .why__card:hover .why__format-pill:nth-child(4) { border-color: rgba(167,139,250,0.5); color: #a78bfa; } 2024 2025 /* Card 6 â avatars */ 2026 .why__avatars { 2027 display: flex; 2028 margin-top: 1rem; 2029 } 2030 2031 .why__avatar { 2032 width: 36px; 2033 height: 36px; 2034 border-radius: 50%; 2035 border: 2px solid var(--c-surface); 2036 margin-left: -10px; 2037 background: var(--c-bg-3); 2038 display: grid; 2039 place-items: center; 2040 font-size: 0.7rem; 2041 font-family: var(--font-mono); 2042 color: var(--c-text-muted); 2043 transition: transform var(--t-base) var(--ease); 2044 } 2045 2046 .why__avatar:first-child { margin-left: 0; } 2047 .why__card:hover .why__avatar { transform: translateX(-4px); } 2048 .why__card:hover .why__avatar:first-child { transform: translateX(0); } 2049 2050 .why__avatar-more { 2051 background: rgba(212,255,0,0.15); 2052 color: var(--c-accent); 2053 font-size: 0.6rem; 2054 border-color: rgba(212,255,0,0.2); 2055 } 2056 2057 /* CTA strip */ 2058 .why__cta { 2059 display: flex; 2060 align-items: center; 2061 justify-content: center; 2062 gap: 1.5rem; 2063 margin-top: clamp(2.5rem, 5vw, 4rem); 2064 padding-top: clamp(2rem, 4vw, 3rem); 2065 border-top: 1px solid var(--c-border); 2066 flex-wrap: wrap; 2067 text-align: center; 2068 } 2069 2070 .why__cta-text { 2071 font-size: var(--text-lg); 2072 color: var(--c-text-muted); 2073 } 2074 2075 .why__cta-text strong { color: var(--c-white); } 2076 2077 /* Responsive */ 2078 @media (max-width: 1024px) { 2079 .why__card--1 { grid-column: span 7; } 2080 .why__card--2 { grid-column: span 5; } 2081 .why__card--3 { grid-column: span 4; grid-row: span 1; } 2082 .why__card--4 { grid-column: span 8; } 2083 .why__card--5 { grid-column: span 6; } 2084 .why__card--6 { grid-column: span 6; } 2085 .why__card--7 { grid-column: span 12; } 2086 } 2087 2088 @media (max-width: 768px) { 2089 .why__grid { grid-template-columns: 1fr 1fr; } 2090 .why__card--1, 2091 .why__card--2, 2092 .why__card--3, 2093 .why__card--4, 2094 .why__card--5, 2095 .why__card--6, 2096 .why__card--7 { grid-column: span 2; } 2097 .why__card--1 .why__card-inner { flex-direction: column; } 2098 } 2099 2100 @media (max-width: 480px) { 2101 .why__grid { grid-template-columns: 1fr; } 2102 .why__card { grid-column: span 1 !important; } 2103 } 2104 2105 </style> 2106 2107 <section class="why" id="why" aria-label="Why Choose AI Video Generator"> 2108 <div class="container"> 2109 2110 <div class="why__header"> 2111 <div class="why__label">
2112 <span class="why__label-line"></span> 2113 <span data-i18n="why_section_label">Why Choose Us</span> 2114 <span class="why__label-line"></span> 2115 </div> 2116 <h2 class="why__title"><span data-i18n="why_title_line1">Built Different.</span><br><em data-i18n="why_title_line2">Works Better.</em></h2> 2117 <p class="why__subtitle" data-i18n="why_subtitle">Everything a modern video creator needs â in one unified, multi-model workspace.</p> 2118 </div> 2119 2120 <div class="why__grid"> 2121 2122 <!-- Card 1 â Multi-model --> 2123 <div class="why__card why__card--1" data-why> 2124 <div class="why__card-inner"> 2125 <div class="why__card-body"> 2126 <div class="why__card-icon why__card-icon--lime"> 2127 <svg viewBox="0 0 22 22" fill="none" stroke="#d4ff00" stroke-width="1.5"> 2128 <circle cx="11" cy="11" r="9"/> 2129 <path d="M11 2v18M2 11h18M4.93 4.93l12.14 12.14M17.07 4.93L4.93 17.07"/> 2130 </svg> 2131 </div> 2132 <span class="why__card-tag why__card-tag--lime" data-i18n="why_card1_tag">Core Advantage</span> 2133 <h3 class="why__card-title" data-i18n="why_card1_title">6+ AI Models,<br>One Workspace</h3> 2134 <p class="why__card-desc" data-i18n="why_card1_desc">Switch between TextâVideo, ImageâVideo, Cinematic, Character-Consistent and Anime models instantly. No tab-hopping, no re-uploading.</p> 2135 </div> 2136 <div class="why__orbit" aria-hidden="true"> 2137 <div class="why__orbit-ring why__orbit-ring--1"> 2138 <span class="why__orbit-dot" style="background:#d4ff00"></span> 2139 </div> 2140 <div class="why__orbit-ring why__orbit-ring--2"> 2141 <span class="why__orbit-dot" style="background:#00c2ff; top:auto; bottom:0; transform:translateX(-50%) translateY(4px)"></span> 2142 </div> 2143 <div class="why__orbit-center"> 2144 <svg width="14" height="14" viewBox="0 0 16 16" fill="none"> 2145 <path d="M3 3.5L13 8L3 12.5V3.5Z" fill="#0a0a0a"/> 2146 </svg> 2147 </div> 2148 </div> 2149 </div> 2150 </div> 2151 2152 <!-- Card 2 â Speed --> 2153 <div class="why__card why__card--2" data-why> 2154 <div class="why__card-icon why__card-icon--cyan"> 2155 <svg viewBox="0 0 22 22" fill="none" stroke="#00c2ff" stroke-width="1.5"> 2156 <path d="M13 2L4.5 13H11L9 20L17.5 9H11L13 2Z" stroke-linejoin="round"/> 2157 </svg> 2158 </div> 2159 <span class="why__card-tag why__card-tag--cyan" data-i18n="why_card2_tag">Speed</span> 2160 <h3 class="why__card-title" data-i18n="why_card2_title">Avg. 3s<br>Generation</h3> 2161 <p class="why__card-desc" data-i18n="why_card2_desc">Optimized inference pipelines deliver results fast. Iterate in real-time, not real-minutes.</p> 2162 </div> 2163 2164 <!-- Card 3 â Tall: Resolution --> 2165 <div class="why__card why__card--3" data-why> 2166 <div> 2167 <div class="why__card-icon why__card-icon--lime"> 2168 <svg viewBox="0 0 22 22" fill="none" stroke="#d4ff00" stroke-width="1.5"> 2169 <rect x="2" y="5" width="18" height="12" rx="2"/> 2170 <path d="M7 9h8M7 13h5"/> 2171 </svg> 2172 </div> 2173 <span class="why__card-tag why__card-tag--lime" data-i18n="why_card3_tag">Quality</span> 2174 <div class="why__big-num">4K</div> 2175 <h3 class="why__card-title" data-i18n="why_card3_title">Max<br>Resolution</h3> 2176 <p class="why__card-desc" data-i18n="why_card3_desc">Sharp, export-ready video output for any platform.</p> 2177 </div> 2178 <div class="why__speed-bars"> 2179 <div class="why__speed-bar"> 2180 <span class="why__speed-bar-label">720p</span> 2181 <div class="why__speed-bar-track"> 2182 <div class="why__speed-bar-fill" style="--fill-w:45%; background:#444;"></div> 2183 </div> 2184 </div> 2185 <div class="why__speed-bar">
2186 <span class="why__speed-bar-label">1080p</span> 2187 <div class="why__speed-bar-track"> 2188 <div class="why__speed-bar-fill" style="--fill-w:68%; background:#888;"></div> 2189 </div> 2190 </div> 2191 <div class="why__speed-bar"> 2192 <span class="why__speed-bar-label">4K</span> 2193 <div class="why__speed-bar-track"> 2194 <div class="why__speed-bar-fill" style="--fill-w:100%; background:#d4ff00;"></div> 2195 </div> 2196 </div> 2197 </div> 2198 </div> 2199 2200 <!-- Card 4 â Style Presets --> 2201 <div class="why__card why__card--4" data-why> 2202 <div class="why__card-icon why__card-icon--purple"> 2203 <svg viewBox="0 0 22 22" fill="none" stroke="#a78bfa" stroke-width="1.5"> 2204 <circle cx="11" cy="11" r="3"/> 2205 <path d="M11 2v3M11 17v3M2 11h3M17 11h3M4.93 4.93l2.12 2.12M14.95 14.95l2.12 2.12M4.93 17.07l2.12-2.12M14.95 7.05l2.12-2.12"/> 2206 </svg> 2207 </div> 2208 <span class="why__card-tag why__card-tag--purple" data-i18n="why_card4_tag">Presets</span> 2209 <h3 class="why__card-title" data-i18n="why_card4_title">10+ Style<br>Presets</h3> 2210 <p class="why__card-desc" data-i18n="why_card4_desc">Cinematic, Anime, Retro Film, Abstract â one click sets the entire visual mood.</p> 2211 </div> 2212 2213 <!-- Card 5 â Export --> 2214 <div class="why__card why__card--5" data-why> 2215 <div class="why__card-icon why__card-icon--lime"> 2216 <svg viewBox="0 0 22 22" fill="none" stroke="#d4ff00" stroke-width="1.5"> 2217 <path d="M4 14v4a1 1 0 001 1h12a1 1 0 001-1v-4M11 3v11M7 10l4 4 4-4"/> 2218 </svg> 2219 </div> 2220 <span class="why__card-tag why__card-tag--lime" data-i18n="why_card5_tag">Export</span> 2221 <h3 class="why__card-title" data-i18n="why_card5_title">Export-Ready<br>Outputs</h3> 2222 <p class="why__card-desc" data-i18n="why_card5_desc">Download in the format that fits your workflow â no conversion needed.</p> 2223 <div class="why__formats"> 2224 <span class="why__format-pill">MP4</span> 2225 <span class="why__format-pill">WebM</span> 2226 <span class="why__format-pill">GIF</span> 2227 <span class="why__format-pill">MOV</span> 2228 </div> 2229 </div> 2230 2231 <!-- Card 6 â Character Consistency --> 2232 <div class="why__card why__card--6" data-why> 2233 <div class="why__card-icon why__card-icon--cyan"> 2234 <svg viewBox="0 0 22 22" fill="none" stroke="#00c2ff" stroke-width="1.5"> 2235 <circle cx="11" cy="8" r="3.5"/> 2236 <path d="M4 19c0-3.87 3.13-7 7-7h0c3.87 0 7 3.13 7 7"/> 2237 <path d="M16 6l2 2-2 2" stroke-linecap="round"/> 2238 </svg> 2239 </div> 2240 <span class="why__card-tag why__card-tag--cyan" data-i18n="why_card6_tag">Consistency</span> 2241 <h3 class="why__card-title" data-i18n="why_card6_title">Character-Stable<br>Across Clips</h3> 2242 <p class="why__card-desc" data-i18n="why_card6_desc">Keep identity, outfit and style locked across every scene â built for series, avatars and narrative continuity.</p> 2243 <div class="why__avatars" aria-hidden="true"> 2244 <div class="why__avatar" style="background:linear-gradient(135deg,#1e3a2f,#0a2018)">C1</div> 2245 <div class="why__avatar" style="background:linear-gradient(135deg,#1a1a3a,#0a0a20)">C2</div> 2246 <div class="why__avatar" style="background:linear-gradient(135deg,#3a1a1a,#200a0a)">C3</div> 2247 <div class="why__avatar why__avatar-more">+5</div> 2248 </div> 2249 </div> 2250 2251 <!-- Card 7 â Privacy --> 2252 <div class="why__card why__card--7" data-why> 2253 <div class="why__card-icon why__card-icon--orange"> 2254 <svg viewBox="0 0 22 22" fill="none" stroke="#ff4d00" stroke-width="1.5"> 2255 <path d="M11 2L3 6v5c0 4.42 3.36 8.56 8 9.56C16.64 19.56 20 15.42 20 11V6l-9-4z"/> 2256 <path d="M8 11l2 2 4-4" stroke-linecap="round" stroke-linejoin="round"/> 2257 </svg> 2258 </div>
2259 <span class="why__card-tag why__card-tag--orange" data-i18n="why_card7_tag">Ownership</span> 2260 <h3 class="why__card-title" data-i18n="why_card7_title">You Own What You Create</h3> 2261 <p class="why__card-desc" data-i18n="why_card7_desc">All outputs are yours. No watermarks on paid plans. Your prompts and uploads are private â never used to train AI without your explicit consent.</p> 2262 </div> 2263 2264 </div> 2265 2266 <div class="why__cta"> 2267 <p class="why__cta-text"><strong data-i18n="why_cta_text_strong">Ready to see the difference?</strong> <span data-i18n="why_cta_text">Start generating for free â no credit card required.</span></p> 2268 <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn btn--primary btn--hero" data-i18n="why_cta_btn">Start Free Now</a> 2269 </div> 2270 2271 </div> 2272 </section> 2273 2274
2274<script type="6c18279ba6d93a40249c492f-text/javascript"> 2275 const whyCards = document.querySelectorAll('[data-why]'); 2276 const whyObserver = new IntersectionObserver(entries => { 2277 entries.forEach(entry => { 2278 if (entry.isIntersecting) { 2279 entry.target.classList.add('in-view'); 2280 whyObserver.unobserve(entry.target); 2281 } 2282 }); 2283 }, { threshold: 0.12 }); 2284 whyCards.forEach(c => whyObserver.observe(c)); 2285 </script>
vendor: 144 bytes, lines 2285-2287
2285 2286 2287<script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="6c18279ba6d93a40249c492f-|49" defer></script>
2287</body> 2288</html> 2289 2290 2291 <!-- â¼â¼â¼ SECTION 4 â HOW TO CREATE AI VIDEOS â¼â¼â¼ --> 2292 <style> 2293 .how { 2294 position: relative; 2295 padding-block: var(--section-pad); 2296 overflow: hidden; 2297 background: var(--c-bg-2); 2298 } 2299 .how::before, .how::after { 2300 content: ''; 2301 position: absolute; 2302 left: 0; right: 0; 2303 height: 120px; 2304 pointer-events: none; 2305 z-index: 2; 2306 } 2307 .how::before { top: 0; background: linear-gradient(to bottom, var(--c-bg), transparent); } 2308 .how::after { bottom: 0; background: linear-gradient(to top, var(--c-bg), transparent); } 2309 2310 .how__stripe { 2311 position: absolute; 2312 inset: 0; 2313 background: repeating-linear-gradient(-55deg, transparent, transparent 60px, rgba(255,255,255,0.012) 60px, rgba(255,255,255,0.012) 61px); 2314 pointer-events: none; 2315 } 2316 2317 .how__header { text-align: center; margin-bottom: clamp(4rem,8vw,6rem); position: relative; z-index: 3; } 2318 2319 .how__label { 2320 display: inline-flex; align-items: center; gap: 0.6rem; 2321 font-family: var(--font-mono); font-size: var(--text-xs); color: var(--c-accent-3); 2322 text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 1.25rem; 2323 } 2324 .how__label-line { width: 32px; height: 1px; background: var(--c-accent-3); opacity: 0.5; } 2325 2326 .how__title { 2327 font-family: var(--font-display); 2328 font-size: clamp(2.8rem,6vw,5.5rem); 2329 line-height: 0.92; text-transform: uppercase; color: var(--c-white); 2330 letter-spacing: 0.02em; margin-bottom: 1.25rem; 2331 } 2332 .how__title em { font-style: normal; color: var(--c-accent-3); } 2333 2334 .how__subtitle { font-size: var(--text-lg); color: var(--c-text-muted); max-width: 480px; margin-inline: auto; line-height: 1.6; } 2335 2336 /* Steps layout */ 2337 .how__steps { 2338 position: relative; z-index: 3; 2339 display: grid; grid-template-columns: 1fr 1fr; 2340 gap: clamp(3rem,6vw,5rem); align-items: center; 2341 } 2342 2343 .how__list { display: flex; flex-direction: column; } 2344 2345 .how__step { 2346 display: flex; gap: 1.5rem; padding: 1.75rem 0; position: relative; 2347 cursor: pointer; opacity: 0; transform: translateX(-24px); 2348 transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); 2349 } 2350 .how__step.in-view { opacity: 1; transform: translateX(0); } 2351 .how__step:nth-child(1) { transition-delay: 0.05s; } 2352 .how__step:nth-child(2) { transition-delay: 0.15s; } 2353 .how__step:nth-child(3) { transition-delay: 0.25s; } 2354 .how__step:nth-child(4) { transition-delay: 0.35s; } 2355 2356 .how__step:not(:last-child)::after { 2357 content: ''; position: absolute; 2358 left: 22px; top: calc(1.75rem + 48px); bottom: 0; 2359 width: 1px; background: linear-gradient(to bottom, var(--c-border-hi), transparent); 2360 } 2361 .how__step.is-active:not(:last-child)::after { background: linear-gradient(to bottom, rgba(0,194,255,0.4), transparent); } 2362 2363 .how__step-num { 2364 flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; 2365 border: 1px solid var(--c-border-hi); display: grid; place-items: center; 2366 font-family: var(--font-display); font-size: 1.5rem; color: var(--c-text-dim); 2367 background: var(--c-bg-2); transition: all var(--t-base) var(--ease); position: relative; z-index: 1; 2368 } 2369 .how__step.is-active .how__step-num, .how__step:hover .how__step-num { 2370 border-color: var(--c-accent-3); color: var(--c-accent-3); 2371 background: rgba(0,194,255,0.08); box-shadow: 0 0 20px rgba(0,194,255,0.2); 2372 } 2373 2374 .how__step-body { flex: 1; padding-top: 0.25rem; } 2375 2376 .how__step-tag { 2377 display: inline-block; font-family: var(--font-mono); font-size: 0.6rem; 2378 text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-text-dim); 2379 margin-bottom: 0.4rem; transition: color var(--t-base); 2380 } 2381 .how__step.is-active .how__step-tag, .how__step:hover .how__step-tag { color: var(--c-accent-3); } 2382 2383 .how__step-title { 2384 font-family: var(--font-display); font-size: clamp(1.3rem,2.5vw,1.75rem); 2385 line-height: 1; text-transform: uppercase; letter-spacing: 0.03em; 2386 color: var(--c-text-muted); margin-bottom: 0.5rem; transition: color var(--t-base); 2387 } 2388 .how__step.is-active .how__step-title, .how__step:hover .how__step-title { color: var(--c-white); } 2389 2390 .how__step-desc { 2391 font-size: var(--text-sm); color: var(--c-text-dim); line-height: 1.65; 2392 max-height: 0; overflow: hidden; opacity: 0; 2393 transition: max-height 0.5s var(--ease), opacity 0.4s; 2394 } 2395 .how__step.is-active .how__step-desc, .how__step:hover .how__step-desc { 2396 max-height: 120px; opacity: 1; color: var(--c-text-muted); 2397 } 2398 2399 .how__step-arrow { 2400 align-self: flex-start; padding-top: 0.35rem; color: var(--c-text-dim); flex-shrink: 0; 2401 transition: color var(--t-base), transform var(--t-base) var(--ease); 2402 } 2403 .how__step.is-active .how__step-arrow, .how__step:hover .how__step-arrow { 2404 color: var(--c-accent-3); transform: translateX(4px); 2405 } 2406 2407 /* Preview card */ 2408 .how__preview { 2409 position: relative; opacity: 0; transform: translateX(32px); 2410 transition: opacity 0.8s var(--ease) 0.3s, transform 0.8s var(--ease) 0.3s; 2411 } 2412 .how__preview.in-view { opacity: 1; transform: translateX(0); } 2413 2414 .how__preview-card { 2415 background: var(--c-surface); border: 1px solid var(--c-border-hi);
2416 border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4/3; position: relative; 2417 } 2418 2419 .how__panel { 2420 position: absolute; inset: 0; padding: 2rem; 2421 display: flex; flex-direction: column; justify-content: space-between; 2422 opacity: 0; transform: scale(0.97) translateY(10px); 2423 transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); 2424 pointer-events: none; 2425 } 2426 .how__panel.is-active { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; } 2427 2428 .how__panel--1 { background: linear-gradient(140deg, #111a0a 0%, #0d0d0d 100%); } 2429 .how__panel--2 { background: linear-gradient(140deg, #0a101a 0%, #0d0d0d 100%); } 2430 .how__panel--3 { background: linear-gradient(140deg, #1a100a 0%, #0d0d0d 100%); } 2431 .how__panel--4 { background: linear-gradient(140deg, #100a1a 0%, #0d0d0d 100%); } 2432 2433 .how__panel-label { font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-text-dim); } 2434 .how__panel-title { font-family: var(--font-display); font-size: clamp(1.8rem,3.5vw,2.8rem); line-height: 1; text-transform: uppercase; letter-spacing: 0.03em; color: var(--c-white); } 2435 2436 /* Panel 1 */ 2437 .how__input-types { display: flex; gap: 0.75rem; flex-wrap: wrap; } 2438 .how__input-pill { 2439 display: flex; align-items: center; gap: 0.5rem; 2440 padding: 0.6rem 1.1rem; border-radius: var(--r-full); font-size: var(--text-sm); 2441 font-weight: 500; border: 1px solid var(--c-border-hi); color: var(--c-text-muted); 2442 transition: all var(--t-base) var(--ease); cursor: pointer; 2443 } 2444 .how__input-pill.selected { background: rgba(212,255,0,0.1); border-color: rgba(212,255,0,0.5); color: var(--c-accent); } 2445 .how__input-pill svg { width: 14px; height: 14px; } 2446 2447 /* Panel 2 */ 2448 .how__model-list { display: flex; flex-direction: column; gap: 0.5rem; } 2449 .how__model-row { 2450 display: flex; align-items: center; gap: 0.75rem; 2451 padding: 0.65rem 0.9rem; border-radius: var(--r-md); 2452 border: 1px solid transparent; transition: all var(--t-fast); cursor: pointer; 2453 } 2454 .how__model-row.selected { border-color: rgba(0,194,255,0.3); background: rgba(0,194,255,0.06); } 2455 .how__model-row-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } 2456 .how__model-row-name { font-size: var(--text-sm); color: var(--c-text-muted); flex: 1; } 2457 .how__model-row.selected .how__model-row-name { color: var(--c-accent-3); } 2458 .how__model-row-badge { font-family: var(--font-mono); font-size: 0.6rem; padding: 0.15rem 0.5rem; border-radius: var(--r-full); background: rgba(0,194,255,0.1); color: var(--c-accent-3); border: 1px solid rgba(0,194,255,0.2); } 2459 2460 /* Panel 3 */ 2461 .how__prompt-box { background: rgba(0,0,0,0.4); border: 1px solid var(--c-border-hi); border-radius: var(--r-lg); padding: 1rem 1.25rem; } 2462 .how__prompt-text { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--c-text-muted); line-height: 1.7; } 2463 .how__prompt-cursor { display: inline-block; width: 2px; height: 14px; background: var(--c-accent-2); vertical-align: middle; margin-left: 2px; animation: blink 1s step-end infinite; } 2464 @keyframes blink { 50% { opacity: 0; } } 2465 .how__prompt-actions { display: flex; justify-content: flex-end; margin-top: 0.75rem; } 2466 .how__generate-btn { 2467 display: flex; align-items: center; gap: 0.5rem; 2468 padding: 0.55rem 1.1rem; background: var(--c-accent-2); color: var(--c-bg); 2469 border-radius: var(--r-full); font-size: var(--text-xs); font-weight: 600; 2470 letter-spacing: 0.04em; transition: all var(--t-base) var(--ease); 2471 } 2472 .how__generate-btn:hover { background: #ff6620; transform: scale(1.04); } 2473 2474 /* Panel 4 */ 2475 .how__export-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } 2476 .how__export-item { 2477 background: rgba(0,0,0,0.3); border: 1px solid var(--c-border); border-radius: var(--r-md); 2478 padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.6rem; 2479 font-size: var(--text-xs); color: var(--c-text-muted); transition: all var(--t-fast); 2480 } 2481 .how__export-item:hover { border-color: var(--c-border-hi); color: var(--c-text); } 2482 .how__export-icon { width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; flex-shrink: 0; } 2483 2484 /* Progress dots */ 2485 .how__dots { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; } 2486 .how__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-border-hi); transition: all var(--t-base) var(--ease); cursor: pointer; }
2487 .how__dot.is-active { width: 20px; border-radius: var(--r-full); background: var(--c-accent-3); } 2488 2489 /* Big deco number */ 2490 .how__big-step-num { 2491 position: absolute; top: -2rem; right: -1rem; 2492 font-family: var(--font-display); font-size: 10rem; line-height: 1; 2493 color: rgba(255,255,255,0.025); letter-spacing: 0.02em; 2494 pointer-events: none; user-select: none; transition: opacity 0.4s; 2495 } 2496 2497 /* CTA */ 2498 .how__cta { display: flex; justify-content: center; margin-top: clamp(3rem,6vw,5rem); position: relative; z-index: 3; } 2499 2500 @media (max-width: 900px) { 2501 .how__steps { grid-template-columns: 1fr; } 2502 .how__preview { order: -1; max-width: 520px; width: 100%; margin-inline: auto; } 2503 } 2504 @media (max-width: 480px) { 2505 .how__input-types { flex-direction: column; } 2506 .how__export-grid { grid-template-columns: 1fr; } 2507 } 2508 </style> 2509 2510 <section class="how" id="how" aria-label="How to Create AI Videos"> 2511 <div class="how__stripe" aria-hidden="true"></div> 2512 <div class="container"> 2513 2514 <div class="how__header"> 2515 <div class="how__label"> 2516 <span class="how__label-line"></span> 2517 <span data-i18n="how_section_label">How It Works</span> 2518 <span class="how__label-line"></span> 2519 </div> 2520 <h2 class="how__title"><span data-i18n="how_title_line1">Go From Idea</span><br>to <em data-i18n="how_title_accent">Video</em> <span data-i18n="how_title_line2">in 4 Steps</span></h2> 2521 <p class="how__subtitle" data-i18n="how_subtitle">No learning curve. No tool-switching. Just clear steps and smart defaults that get you there fast.</p> 2522 </div> 2523 2524 <div class="how__steps"> 2525 2526 <!-- LEFT â Step list --> 2527 <div class="how__list"> 2528 2529 <div class="how__step is-active" data-how data-step="1"> 2530 <div class="how__step-num">1</div> 2531 <div class="how__step-body"> 2532 <span class="how__step-tag" data-i18n="how_step1_tag">Step One</span> 2533 <h3 class="how__step-title" data-i18n="how_step1_title">Choose Your Input</h3> 2534 <p class="how__step-desc" data-i18n="how_step1_desc">Start with a text prompt or upload an image. Text is great for storytelling and new scenes. Images unlock animation and motion controls.</p> 2535 </div> 2536 <svg class="how__step-arrow" width="18" height="18" viewBox="0 0 18 18" fill="none"> 2537 <path d="M4 9h10M9 4l5 5-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 2538 </svg> 2539 </div> 2540 2541 <div class="how__step" data-how data-step="2"> 2542 <div class="how__step-num">2</div> 2543 <div class="how__step-body"> 2544 <span class="how__step-tag" data-i18n="how_step2_tag">Step Two</span> 2545 <h3 class="how__step-title" data-i18n="how_step2_title">Pick a Model</h3> 2546 <p class="how__step-desc" data-i18n="how_step2_desc">Select from 6+ AI model categories â or use Auto-Recommend and let the system choose based on your goal, input type, and style.</p> 2547 </div> 2548 <svg class="how__step-arrow" width="18" height="18" viewBox="0 0 18 18" fill="none"> 2549 <path d="M4 9h10M9 4l5 5-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 2550 </svg> 2551 </div> 2552 2553 <div class="how__step" data-how data-step="3"> 2554 <div class="how__step-num">3</div> 2555 <div class="how__step-body"> 2556 <span class="how__step-tag" data-i18n="how_step3_tag">Step Three</span> 2557 <h3 class="how__step-title" data-i18n="how_step3_title">Write & Generate</h3> 2558 <p class="how__step-desc" data-i18n="how_step3_desc">Enter your prompt, dial in motion and style presets, then hit generate. The first result is ready in seconds â iterate as many times as you need.</p> 2559 </div> 2560 <svg class="how__step-arrow" width="18" height="18" viewBox="0 0 18 18" fill="none"> 2561 <path d="M4 9h10M9 4l5 5-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 2562 </svg> 2563 </div> 2564 2565 <div class="how__step" data-how data-step="4"> 2566 <div class="how__step-num">4</div> 2567 <div class="how__step-body">
2568 <span class="how__step-tag" data-i18n="how_step4_tag">Step Four</span> 2569 <h3 class="how__step-title" data-i18n="how_step4_title">Export & Ship</h3> 2570 <p class="how__step-desc" data-i18n="how_step4_desc">Download in MP4, WebM, GIF or MOV. No watermarks on paid plans. Your video is ready to drop straight into your content workflow.</p> 2571 </div> 2572 <svg class="how__step-arrow" width="18" height="18" viewBox="0 0 18 18" fill="none"> 2573 <path d="M4 9h10M9 4l5 5-5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 2574 </svg> 2575 </div> 2576 2577 </div> 2578 2579 <!-- RIGHT â Preview card --> 2580 <div class="how__preview" data-how-preview> 2581 <div class="how__big-step-num" id="how-big-num">1</div> 2582 <div class="how__preview-card"> 2583 2584 <!-- Panel 1 --> 2585 <div class="how__panel how__panel--1 is-active" data-panel="1"> 2586 <div> 2587 <span class="how__panel-label" data-i18n="how_panel1_label">Step 01 â Input</span> 2588 <h4 class="how__panel-title" style="margin-top:0.5rem" data-i18n="how_panel1_title">Choose<br>Your Input</h4> 2589 </div> 2590 <div class="how__input-types"> 2591 <div class="how__input-pill selected" data-i18n="how_input_text"> 2592 <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M2 7h10M7 2l5 5-5 5"/></svg> 2593 Text â Video 2594 </div> 2595 <div class="how__input-pill" data-i18n="how_input_image"> 2596 <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="2" width="12" height="10" rx="1.5"/><path d="M5 6l3 2-3 2V6z" fill="currentColor" stroke="none"/></svg> 2597 Image â Video 2598 </div> 2599 <div class="how__input-pill" data-i18n="how_input_character"> 2600 <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="5" cy="5" r="2.5"/><path d="M1 13c0-2.76 1.79-5 4-5h2c2.21 0 4 2.24 4 5"/></svg> 2601 Character 2602 </div> 2603 </div> 2604 <div class="how__dots"> 2605 <div class="how__dot is-active"></div> 2606 <div class="how__dot"></div> 2607 <div class="how__dot"></div> 2608 <div class="how__dot"></div> 2609 </div> 2610 </div> 2611 2612 <!-- Panel 2 --> 2613 <div class="how__panel how__panel--2" data-panel="2"> 2614 <div> 2615 <span class="how__panel-label" data-i18n="how_panel2_label">Step 02 â Model</span> 2616 <h4 class="how__panel-title" style="margin-top:0.5rem" data-i18n="how_panel2_title">Pick a<br>Model</h4> 2617 </div> 2618 <div class="how__model-list"> 2619 <div class="how__model-row selected"> 2620 <span class="how__model-row-dot" style="background:#00c2ff"></span> 2621 <span class="how__model-row-name" data-i18n="how_model_auto">Auto-Recommend</span> 2622 <span class="how__model-row-badge" data-i18n="how_model_auto_badge">Best match</span> 2623 </div> 2624 <div class="how__model-row"> 2625 <span class="how__model-row-dot" style="background:#d4ff00"></span> 2626 <span class="how__model-row-name" data-i18n="how_model_text">Text â Video</span> 2627 </div> 2628 <div class="how__model-row"> 2629 <span class="how__model-row-dot" style="background:#ff4d00"></span> 2630 <span class="how__model-row-name" data-i18n="how_model_cinematic">Cinematic</span> 2631 </div> 2632 <div class="how__model-row"> 2633 <span class="how__model-row-dot" style="background:#a78bfa"></span> 2634 <span class="how__model-row-name" data-i18n="how_model_anime">Anime / Stylized</span> 2635 </div> 2636 </div> 2637 <div class="how__dots"> 2638 <div class="how__dot"></div> 2639 <div class="how__dot is-active"></div> 2640 <div class="how__dot"></div> 2641 <div class="how__dot"></div> 2642 </div> 2643 </div> 2644 2645 <!-- Panel 3 --> 2646 <div class="how__panel how__panel--3" data-panel="3"> 2647 <div>
2648 <span class="how__panel-label" data-i18n="how_panel3_label">Step 03 â Prompt</span> 2649 <h4 class="how__panel-title" style="margin-top:0.5rem" data-i18n="how_panel3_title">Write &<br>Generate</h4> 2650 </div> 2651 <div class="how__prompt-box"> 2652 <p class="how__prompt-text">"Neon-lit city at night, slow cinematic dolly-in, rain on streets, moody atmosphere, shallow depth of field<span class="how__prompt-cursor"></span>"</p> 2653 <div class="how__prompt-actions"> 2654 <button class="how__generate-btn" data-i18n="how_generate_btn"> 2655 <svg width="12" height="12" viewBox="0 0 16 16" fill="none"><path d="M3 3.5L13 8L3 12.5V3.5Z" fill="currentColor"/></svg> 2656 Generate 2657 </button> 2658 </div> 2659 </div> 2660 <div class="how__dots"> 2661 <div class="how__dot"></div> 2662 <div class="how__dot"></div> 2663 <div class="how__dot is-active"></div> 2664 <div class="how__dot"></div> 2665 </div> 2666 </div> 2667 2668 <!-- Panel 4 --> 2669 <div class="how__panel how__panel--4" data-panel="4"> 2670 <div> 2671 <span class="how__panel-label" data-i18n="how_panel4_label">Step 04 â Export</span> 2672 <h4 class="how__panel-title" style="margin-top:0.5rem" data-i18n="how_panel4_title">Export &<br>Ship</h4> 2673 </div> 2674 <div class="how__export-grid"> 2675 <div class="how__export-item" data-i18n="how_export_mp4"> 2676 <div class="how__export-icon" style="background:rgba(212,255,0,0.1)"> 2677 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="#d4ff00" stroke-width="1.5"><path d="M2 9v3h10V9M7 1v7M4 6l3 3 3-3"/></svg> 2678 </div>MP4 2679 </div> 2680 <div class="how__export-item" data-i18n="how_export_webm"> 2681 <div class="how__export-icon" style="background:rgba(0,194,255,0.1)"> 2682 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="#00c2ff" stroke-width="1.5"><path d="M2 9v3h10V9M7 1v7M4 6l3 3 3-3"/></svg> 2683 </div>WebM 2684 </div> 2685 <div class="how__export-item" data-i18n="how_export_gif"> 2686 <div class="how__export-icon" style="background:rgba(255,77,0,0.1)"> 2687 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="#ff4d00" stroke-width="1.5"><path d="M2 9v3h10V9M7 1v7M4 6l3 3 3-3"/></svg> 2688 </div>GIF 2689 </div> 2690 <div class="how__export-item" data-i18n="how_export_mov"> 2691 <div class="how__export-icon" style="background:rgba(167,139,250,0.1)"> 2692 <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="#a78bfa" stroke-width="1.5"><path d="M2 9v3h10V9M7 1v7M4 6l3 3 3-3"/></svg> 2693 </div>MOV 2694 </div> 2695 </div> 2696 <div class="how__dots"> 2697 <div class="how__dot"></div> 2698 <div class="how__dot"></div> 2699 <div class="how__dot"></div> 2700 <div class="how__dot is-active"></div> 2701 </div> 2702 </div> 2703 2704 </div> 2705 </div> 2706 2707 </div> 2708 2709 <div class="how__cta"> 2710 <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn btn--primary btn--hero" data-i18n="how_cta_btn"> 2711 <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 3.5L13 8L3 12.5V3.5Z" fill="currentColor"/></svg> 2712 Try It Now â It's Free 2713 </a> 2714 </div> 2715 2716 </div> 2717 </section> 2718 2719
2719<script type="6c18279ba6d93a40249c492f-text/javascript"> 2720 (function () { 2721 const steps = document.querySelectorAll('[data-how]'); 2722 const panels = document.querySelectorAll('[data-panel]'); 2723 const bigNum = document.getElementById('how-big-num'); 2724 const preview = document.querySelector('[data-how-preview]'); 2725 let current = 1; 2726 let autoTimer = null; 2727 2728 function goTo(n) { 2729 current = n; 2730 steps.forEach(s => s.classList.toggle('is-active', +s.dataset.step === n)); 2731 panels.forEach(p => p.classList.toggle('is-active', +p.dataset.panel === n)); 2732 if (bigNum) bigNum.textContent = n; 2733 } 2734 2735 steps.forEach(s => { 2736 s.addEventListener('click', () => { 2737 clearInterval(autoTimer); 2738 goTo(+s.dataset.step); 2739 startAuto(); 2740 }); 2741 }); 2742 2743 function startAuto() { 2744 autoTimer = setInterval(() => { goTo(current < 4 ? current + 1 : 1); }, 3500); 2745 } 2746 2747 const howStepObs = new IntersectionObserver(entries => { 2748 entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in-view'); howStepObs.unobserve(e.target); } }); 2749 }, { threshold: 0.2 }); 2750 steps.forEach(s => howStepObs.observe(s)); 2751 2752 if (preview) { 2753 const prevObs = new IntersectionObserver(entries => { 2754 entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in-view'); startAuto(); prevObs.unobserve(e.target); } }); 2755 }, { threshold: 0.3 }); 2756 prevObs.observe(preview); 2757 } 2758 })(); 2759 </script>
2759 2760 2761 <!-- â¼â¼â¼ SECTION 5 â AI VIDEO GENERATION FEATURES â¼â¼â¼ --> 2762 <style> 2763 2764 /* âââââââââââââââââââââââââââââââââââââââââââ 2765 FEATURES SECTION 2766 âââââââââââââââââââââââââââââââââââââââââââ */ 2767 .features { 2768 position: relative; 2769 padding-block: var(--section-pad); 2770 overflow: hidden; 2771 } 2772 2773 /* Ambient glow behind section */ 2774 .features__glow { 2775 position: absolute; 2776 width: 800px; 2777 height: 800px; 2778 border-radius: 50%; 2779 background: radial-gradient(circle, rgba(212,255,0,0.05) 0%, transparent 65%); 2780 top: 50%; 2781 left: 50%; 2782 transform: translate(-50%, -50%); 2783 pointer-events: none; 2784 } 2785 2786 /* ââ Header ââ */ 2787 .features__header { 2788 text-align: center; 2789 margin-bottom: clamp(4rem, 8vw, 6rem); 2790 position: relative; 2791 z-index: 2; 2792 } 2793 2794 .features__label { 2795 display: inline-flex; 2796 align-items: center; 2797 gap: 0.6rem; 2798 font-family: var(--font-mono); 2799 font-size: var(--text-xs); 2800 color: var(--c-accent-2); 2801 text-transform: uppercase; 2802 letter-spacing: 0.14em; 2803 margin-bottom: 1.25rem; 2804 } 2805 2806 .features__label-line { 2807 width: 32px; 2808 height: 1px; 2809 background: var(--c-accent-2); 2810 opacity: 0.5; 2811 } 2812 2813 .features__title { 2814 font-family: var(--font-display); 2815 font-size: clamp(2.8rem, 6vw, 5.5rem); 2816 line-height: 0.92; 2817 text-transform: uppercase; 2818 color: var(--c-white); 2819 letter-spacing: 0.02em; 2820 margin-bottom: 1.25rem; 2821 } 2822 2823 .features__title em { 2824 font-style: normal; 2825 color: var(--c-accent-2); 2826 } 2827 2828 .features__subtitle { 2829 font-size: var(--text-lg); 2830 color: var(--c-text-muted); 2831 max-width: 500px; 2832 margin-inline: auto; 2833 line-height: 1.6; 2834 } 2835 2836 /* ââ TAB NAV ââ */ 2837 .features__tabs { 2838 display: flex; 2839 justify-content: center; 2840 gap: 0.4rem; 2841 margin-bottom: 3rem; 2842 flex-wrap: wrap; 2843 position: relative; 2844 z-index: 2; 2845 } 2846 2847 .features__tab { 2848 display: flex; 2849 align-items: center; 2850 gap: 0.5rem; 2851 padding: 0.55rem 1.25rem; 2852 border-radius: var(--r-full); 2853 border: 1px solid var(--c-border); 2854 font-size: var(--text-sm); 2855 font-weight: 500; 2856 color: var(--c-text-muted); 2857 background: transparent; 2858 transition: all var(--t-base) var(--ease); 2859 cursor: pointer; 2860 } 2861 2862 .features__tab svg { width: 14px; height: 14px; flex-shrink: 0; } 2863 2864 .features__tab:hover { 2865 border-color: var(--c-border-hi); 2866 color: var(--c-text); 2867 } 2868 2869 .features__tab.is-active { 2870 background: var(--c-accent); 2871 border-color: var(--c-accent); 2872 color: var(--c-black); 2873 font-weight: 700; 2874 } 2875 2876 /* ââ FEATURE PANELS ââ */ 2877 .features__panels { 2878 position: relative; 2879 z-index: 2; 2880 } 2881 2882 .features__panel { 2883 display: none; 2884 } 2885 2886 .features__panel.is-active { 2887 display: block; 2888 animation: panel-in 0.5s var(--ease) both; 2889 } 2890 2891 @keyframes panel-in { 2892 from { opacity: 0; transform: translateY(16px); } 2893 to { opacity: 1; transform: translateY(0); } 2894 } 2895 2896 /* ââ FEATURE GRID (inside each panel) ââ */ 2897 .features__grid { 2898 display: grid; 2899 grid-template-columns: repeat(12, 1fr); 2900 gap: 1rem; 2901 } 2902 2903 /* Feature card base */ 2904 .feat-card { 2905 position: relative; 2906 background: var(--c-surface); 2907 border: 1px solid var(--c-border); 2908 border-radius: var(--r-xl); 2909 padding: clamp(1.5rem, 2.5vw, 2rem); 2910 overflow: hidden; 2911 transition: border-color var(--t-base) var(--ease), 2912 transform var(--t-slow) var(--ease), 2913 box-shadow var(--t-slow) var(--ease); 2914 opacity: 0; 2915 transform: translateY(24px); 2916 } 2917 2918 .feat-card.in-view { 2919 opacity: 1; 2920 transform: translateY(0); 2921 transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), 2922 border-color var(--t-base), box-shadow var(--t-slow); 2923 } 2924 2925 .feat-card:hover { 2926 border-color: var(--c-border-hi); 2927 transform: translateY(-3px); 2928 box-shadow: var(--shadow-lg); 2929 } 2930 2931 /* Hover glow per card */ 2932 .feat-card::after { 2933 content: ''; 2934 position: absolute; 2935 inset: 0; 2936 border-radius: inherit; 2937 opacity: 0; 2938 transition: opacity var(--t-slow) var(--ease); 2939 pointer-events: none; 2940 } 2941 .feat-card:hover::after { opacity: 1; } 2942 2943 /* Grid column spans */ 2944 .feat-card--wide { grid-column: span 8; } 2945 .feat-card--narrow { grid-column: span 4; } 2946 .feat-card--third { grid-column: span 4; } 2947 .feat-card--half { grid-column: span 6; } 2948 .feat-card--full { grid-column: span 12; } 2949 .feat-card--five { grid-column: span 5; } 2950 .feat-card--seven { grid-column: span 7; } 2951 2952 /* Stagger delays */ 2953 .feat-card:nth-child(1) { transition-delay: 0.04s; } 2954 .feat-card:nth-child(2) { transition-delay: 0.10s; } 2955 .feat-card:nth-child(3) { transition-delay: 0.16s; } 2956 .feat-card:nth-child(4) { transition-delay: 0.22s; } 2957 .feat-card:nth-child(5) { transition-delay: 0.28s; } 2958 .feat-card:nth-child(6) { transition-delay: 0.34s; } 2959 2960 /* Card inner elements */ 2961 .feat-card__icon { 2962 width: 42px; 2963 height: 42px; 2964 border-radius: var(--r-md); 2965 display: grid; 2966 place-items: center; 2967 margin-bottom: 1.1rem; 2968 } 2969
2970 .feat-card__icon svg { width: 20px; height: 20px; } 2971 2972 .feat-card__tag { 2973 display: inline-block; 2974 font-family: var(--font-mono); 2975 font-size: 0.62rem; 2976 text-transform: uppercase; 2977 letter-spacing: 0.1em; 2978 padding: 0.18rem 0.55rem; 2979 border-radius: var(--r-full); 2980 margin-bottom: 0.7rem; 2981 } 2982 2983 .feat-card__title { 2984 font-family: var(--font-display); 2985 font-size: clamp(1.25rem, 2vw, 1.7rem); 2986 line-height: 1; 2987 text-transform: uppercase; 2988 letter-spacing: 0.03em; 2989 color: var(--c-white); 2990 margin-bottom: 0.55rem; 2991 } 2992 2993 .feat-card__desc { 2994 font-size: var(--text-sm); 2995 color: var(--c-text-muted); 2996 line-height: 1.65; 2997 } 2998 2999 /* ââ COLOR VARIANTS ââ */ 3000 .feat-card--lime::after { background: radial-gradient(circle at 0% 100%, rgba(212,255,0,0.07) 0%, transparent 60%); } 3001 .feat-card--cyan::after { background: radial-gradient(circle at 100% 0%, rgba(0,194,255,0.07) 0%, transparent 60%); } 3002 .feat-card--orange::after { background: radial-gradient(circle at 0% 0%, rgba(255,77,0,0.08) 0%, transparent 60%); } 3003 .feat-card--purple::after { background: radial-gradient(circle at 100% 100%, rgba(167,139,250,0.07) 0%, transparent 60%); } 3004 3005 .feat-card__icon--lime { background: rgba(212,255,0,0.12); } 3006 .feat-card__icon--cyan { background: rgba(0,194,255,0.12); } 3007 .feat-card__icon--orange { background: rgba(255,77,0,0.12); } 3008 .feat-card__icon--purple { background: rgba(167,139,250,0.12); } 3009 3010 .feat-card__tag--lime { color: var(--c-accent); background: rgba(212,255,0,0.08); border: 1px solid rgba(212,255,0,0.2); } 3011 .feat-card__tag--cyan { color: var(--c-accent-3); background: rgba(0,194,255,0.08); border: 1px solid rgba(0,194,255,0.2); } 3012 .feat-card__tag--orange { color: var(--c-accent-2); background: rgba(255,77,0,0.08); border: 1px solid rgba(255,77,0,0.2); } 3013 .feat-card__tag--purple { color: #a78bfa; background: rgba(167,139,250,0.08); border: 1px solid rgba(167,139,250,0.2); } 3014 3015 /* ââ SPECIAL CARD VISUALS ââ */ 3016 3017 /* Waveform visual for motion control card */ 3018 .feat-wave { 3019 display: flex; 3020 align-items: flex-end; 3021 gap: 3px; 3022 height: 48px; 3023 margin-top: 1.25rem; 3024 } 3025 3026 .feat-wave__bar { 3027 flex: 1; 3028 border-radius: 2px; 3029 background: rgba(212,255,0,0.3); 3030 transition: height 0.3s var(--ease), background 0.3s; 3031 animation: wave-anim 1.8s ease-in-out infinite; 3032 } 3033 3034 .feat-wave__bar:nth-child(1) { animation-delay: 0.0s; } 3035 .feat-wave__bar:nth-child(2) { animation-delay: 0.1s; } 3036 .feat-wave__bar:nth-child(3) { animation-delay: 0.2s; } 3037 .feat-wave__bar:nth-child(4) { animation-delay: 0.3s; } 3038 .feat-wave__bar:nth-child(5) { animation-delay: 0.4s; } 3039 .feat-wave__bar:nth-child(6) { animation-delay: 0.3s; } 3040 .feat-wave__bar:nth-child(7) { animation-delay: 0.2s; } 3041 .feat-wave__bar:nth-child(8) { animation-delay: 0.1s; } 3042 .feat-wave__bar:nth-child(9) { animation-delay: 0.0s; } 3043 .feat-wave__bar:nth-child(10) { animation-delay: 0.15s; } 3044 .feat-wave__bar:nth-child(11) { animation-delay: 0.25s; } 3045 .feat-wave__bar:nth-child(12) { animation-delay: 0.35s; } 3046 3047 .feat-card:hover .feat-wave__bar { background: var(--c-accent); } 3048 3049 @keyframes wave-anim { 3050 0%, 100% { height: 20%; } 3051 50% { height: var(--h, 70%); } 3052 } 3053 3054 /* Prompt variations mini-list */ 3055 .feat-variations { 3056 display: flex; 3057 flex-direction: column; 3058 gap: 0.5rem; 3059 margin-top: 1.25rem; 3060 } 3061 3062 .feat-variation { 3063 display: flex; 3064 align-items: center; 3065 gap: 0.75rem; 3066 padding: 0.55rem 0.85rem; 3067 background: rgba(0,0,0,0.3); 3068 border: 1px solid var(--c-border); 3069 border-radius: var(--r-md); 3070 font-family: var(--font-mono); 3071 font-size: 0.65rem; 3072 color: var(--c-text-muted); 3073 transition: all var(--t-fast); 3074 } 3075 3076 .feat-variation:hover, 3077 .feat-card:hover .feat-variation:nth-child(1) { 3078 border-color: rgba(0,194,255,0.3); 3079 color: var(--c-accent-3); 3080 } 3081 3082 .feat-variation-num { 3083 font-size: 0.6rem; 3084 color: var(--c-text-dim); 3085 width: 16px; 3086 } 3087 3088 /* Style preset swatches */ 3089 .feat-swatches { 3090 display: flex; 3091 gap: 0.6rem; 3092 margin-top: 1.25rem; 3093 flex-wrap: wrap; 3094 } 3095 3096 .feat-swatch { 3097 padding: 0.4rem 0.8rem; 3098 border-radius: var(--r-full); 3099 font-size: 0.68rem; 3100 font-weight: 500; 3101 letter-spacing: 0.03em; 3102 border: 1px solid var(--c-border); 3103 color: var(--c-text-muted); 3104 transition: all var(--t-base) var(--ease); 3105 } 3106 3107 .feat-card:hover .feat-swatch:nth-child(1) { border-color: rgba(212,255,0,0.5); color: var(--c-accent); background: rgba(212,255,0,0.06); } 3108 .feat-card:hover .feat-swatch:nth-child(2) { border-color: rgba(255,77,0,0.5); color: var(--c-accent-2); background: rgba(255,77,0,0.06); } 3109 .feat-card:hover .feat-swatch:nth-child(3) { border-color: rgba(167,139,250,0.5); color: #a78bfa; background: rgba(167,139,250,0.06); } 3110 .feat-card:hover .feat-swatch:nth-child(4) { border-color: rgba(0,194,255,0.5); color: var(--c-accent-3); background: rgba(0,194,255,0.06); } 3111 3112 /* Model switch toggle row */ 3113 .feat-model-switch { 3114 display: flex; 3115 flex-direction: column; 3116 gap: 0.45rem; 3117 margin-top: 1.25rem; 3118 } 3119 3120 .feat-model-btn { 3121 display: flex; 3122 align-items: center; 3123 gap: 0.7rem; 3124 padding: 0.5rem 0.8rem; 3125 border-radius: var(--r-md); 3126 border: 1px solid var(--c-border); 3127 transition: all var(--t-fast); 3128 } 3129 3130 .feat-model-btn.active { 3131 border-color: rgba(255,77,0,0.4); 3132 background: rgba(255,77,0,0.06); 3133 } 3134 3135 .feat-model-btn-dot { 3136 width: 7px; 3137 height: 7px; 3138 border-radius: 50%; 3139 flex-shrink: 0; 3140 } 3141 3142 .feat-model-btn-label { 3143 font-size: var(--text-xs); 3144 color: var(--c-text-muted); 3145 flex: 1; 3146 } 3147 3148 .feat-model-btn.active .feat-model-btn-label { color: var(--c-accent-2); } 3149 3150 .feat-model-btn-check { 3151 width: 16px; 3152 height: 16px; 3153 border-radius: 50%; 3154 border: 1px solid var(--c-border); 3155 display: grid; 3156 place-items: center; 3157 } 3158 3159 .feat-model-btn.active .feat-model-btn-check { 3160 background: var(--c-accent-2); 3161 border-color: var(--c-accent-2); 3162 } 3163 3164 /* Prompt library card â big text showcase */ 3165 .feat-prompt-showcase { 3166 margin-top: 1.25rem; 3167 padding: 1rem 1.25rem; 3168 background: rgba(0,0,0,0.35); 3169 border: 1px solid var(--c-border); 3170 border-radius: var(--r-lg); 3171 } 3172 3173 .feat-prompt-showcase p { 3174 font-family: var(--font-mono); 3175 font-size: var(--text-xs); 3176 color: var(--c-text-muted); 3177 line-height: 1.8; 3178 } 3179 3180 .feat-prompt-highlight { color: var(--c-accent); } 3181 3182 /* Export big formats */ 3183 .feat-export-row { 3184 display: flex; 3185 align-items: center; 3186 gap: 0.75rem; 3187 margin-top: 1.25rem; 3188 flex-wrap: wrap; 3189 } 3190 3191 .feat-format-big { 3192 font-family: var(--font-display); 3193 font-size: 2rem; 3194 letter-spacing: 0.06em; 3195 color: var(--c-text-dim); 3196 transition: color var(--t-base) var(--ease); 3197 } 3198 3199 .feat-card:hover .feat-format-big { color: var(--c-accent); } 3200 3201 .feat-format-sep { 3202 width: 1px; 3203 height: 28px; 3204 background: var(--c-border); 3205 } 3206 3207 /* ââ RESPONSIVE ââ */ 3208 @media (max-width: 1024px) { 3209 .feat-card--wide { grid-column: span 12; } 3210 .feat-card--narrow { grid-column: span 6; } 3211 .feat-card--third { grid-column: span 6; } 3212 .feat-card--five { grid-column: span 6; } 3213 .feat-card--seven { grid-column: span 6; } 3214 } 3215 3216 @media (max-width: 640px) { 3217 .features__grid { grid-template-columns: 1fr; } 3218 .feat-card { grid-column: span 1 !important; } 3219 .features__tabs { gap: 0.3rem; } 3220 .features__tab { font-size: var(--text-xs); padding: 0.45rem 0.9rem; } 3221 } 3222 3223 </style> 3224 3225 <section class="features" id="features" aria-label="AI Video Generation Features"> 3226 <div class="features__glow" aria-hidden="true"></div> 3227 <div class="container"> 3228 3229 <!-- Header --> 3230 <div class="features__header"> 3231 <div class="features__label">
3232 <span class="features__label-line"></span> 3233 <span data-i18n="features_section_label">Features</span> 3234 <span class="features__label-line"></span> 3235 </div> 3236 <h2 class="features__title" data-i18n="features_title">AI Video Generation<br>Features <em>Built</em> for Modern Workflows</h2> 3237 <p class="features__subtitle" data-i18n="features_subtitle">Every tool you need to generate, refine, and ship video content at scale â without switching apps.</p> 3238 </div> 3239 3240 <!-- Tab navigation --> 3241 <div class="features__tabs" role="tablist"> 3242 <button class="features__tab is-active" data-ftab="generation" role="tab" data-i18n="features_tab_generation"> 3243 <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5"> 3244 <path d="M2 3.5L12 7L2 10.5V3.5Z"/> 3245 </svg> 3246 Generation 3247 </button> 3248 <button class="features__tab" data-ftab="refinement" role="tab" data-i18n="features_tab_refinement"> 3249 <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5"> 3250 <path d="M2 4h10M4 7h6M6 10h2"/> 3251 </svg> 3252 Refinement 3253 </button> 3254 <button class="features__tab" data-ftab="control" role="tab" data-i18n="features_tab_control"> 3255 <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5"> 3256 <circle cx="7" cy="7" r="5"/><path d="M7 4v3l2 2"/> 3257 </svg> 3258 Motion Control 3259 </button> 3260 <button class="features__tab" data-ftab="export" role="tab" data-i18n="features_tab_export"> 3261 <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5"> 3262 <path d="M2 9v3h10V9M7 1v7M4 6l3 3 3-3"/> 3263 </svg> 3264 Export 3265 </button> 3266 </div> 3267 3268 <!-- Panels --> 3269 <div class="features__panels"> 3270 3271 <!-- Tab 1: Generation --> 3272 <div class="features__panel is-active" data-fpanel="generation"> 3273 <div class="features__grid"> 3274 3275 <!-- Wide: Text to Video --> 3276 <div class="feat-card feat-card--wide feat-card--lime" data-feat> 3277 <div class="feat-card__icon feat-card__icon--lime"> 3278 <svg viewBox="0 0 20 20" fill="none" stroke="#d4ff00" stroke-width="1.5"> 3279 <path d="M3 5h14M3 8h10M3 11h7M14 11l4 3-4 3v-6z"/> 3280 </svg> 3281 </div> 3282 <span class="feat-card__tag feat-card__tag--lime" data-i18n="feature_1_tag">Text â Video</span> 3283 <h3 class="feat-card__title" data-i18n="feature_1_title">Prompt-Driven Video Generation</h3> 3284 <p class="feat-card__desc" data-i18n="feature_1_desc">Type a description â scene, mood, camera movement, lighting â and get a cinematic clip in seconds. Supports natural language and structured prompt syntax.</p> 3285 <div class="feat-prompt-showcase"> 3286 <p><span class="feat-prompt-highlight">"</span>Rain-soaked Tokyo alley at night, <span class="feat-prompt-highlight">slow push-in</span>, neon reflections on wet pavement, <span class="feat-prompt-highlight">cinematic</span>, 24mm lens, atmospheric fog<span class="feat-prompt-highlight">"</span></p> 3287 </div> 3288 </div> 3289 3290 <!-- Narrow: Image to Video --> 3291 <div class="feat-card feat-card--narrow feat-card--cyan" data-feat> 3292 <div class="feat-card__icon feat-card__icon--cyan"> 3293 <svg viewBox="0 0 20 20" fill="none" stroke="#00c2ff" stroke-width="1.5"> 3294 <rect x="2" y="3" width="16" height="11" rx="1.5"/> 3295 <path d="M8 7l5 3-5 3V7z" fill="#00c2ff" stroke="none"/> 3296 </svg> 3297 </div> 3298 <span class="feat-card__tag feat-card__tag--cyan" data-i18n="feature_2_tag">Image â Video</span> 3299 <h3 class="feat-card__title" data-i18n="feature_2_title">Animate Any Still</h3> 3300 <p class="feat-card__desc" data-i18n="feature_2_desc">Upload a photo or illustration and bring it to life with motion, depth, and camera movement.</p> 3301 </div> 3302 3303 <!-- Third: Variations --> 3304 <div class="feat-card feat-card--third feat-card--cyan" data-feat> 3305 <div class="feat-card__icon feat-card__icon--cyan"> 3306 <svg viewBox="0 0 20 20" fill="none" stroke="#00c2ff" stroke-width="1.5"> 3307 <path d="M4 10h12M4 6l4 4-4 4M12 6l4 4-4 4" stroke-linecap="round"/> 3308 </svg> 3309 </div>
3310 <span class="feat-card__tag feat-card__tag--cyan" data-i18n="feature_3_tag">Variations</span> 3311 <h3 class="feat-card__title" data-i18n="feature_3_title">Multiple Takes,<br>One Prompt</h3> 3312 <p class="feat-card__desc" data-i18n="feature_3_desc">Generate several candidates from a single prompt. Keep what works, remix the rest.</p> 3313 <div class="feat-variations"> 3314 <div class="feat-variation"><span class="feat-variation-num">V1</span> Slow dolly-in, warm tone</div> 3315 <div class="feat-variation"><span class="feat-variation-num">V2</span> Handheld, cool grade</div> 3316 <div class="feat-variation"><span class="feat-variation-num">V3</span> Static, high contrast</div> 3317 </div> 3318 </div> 3319 3320 <!-- Third: Style Presets --> 3321 <div class="feat-card feat-card--third feat-card--purple" data-feat> 3322 <div class="feat-card__icon feat-card__icon--purple"> 3323 <svg viewBox="0 0 20 20" fill="none" stroke="#a78bfa" stroke-width="1.5"> 3324 <circle cx="10" cy="10" r="7"/> 3325 <path d="M10 3v7l4 4"/> 3326 </svg> 3327 </div> 3328 <span class="feat-card__tag feat-card__tag--purple" data-i18n="feature_4_tag">Styles</span> 3329 <h3 class="feat-card__title" data-i18n="feature_4_title">One-Click<br>Style Presets</h3> 3330 <p class="feat-card__desc" data-i18n="feature_4_desc">Set the entire visual mood in one click â from cinematic to anime to retro film.</p> 3331 <div class="feat-swatches"> 3332 <span class="feat-swatch">Cinematic</span> 3333 <span class="feat-swatch">Anime</span> 3334 <span class="feat-swatch">Fantasy</span> 3335 <span class="feat-swatch">Retro</span> 3336 </div> 3337 </div> 3338 3339 <!-- Third: Smart Recommend --> 3340 <div class="feat-card feat-card--third feat-card--orange" data-feat> 3341 <div class="feat-card__icon feat-card__icon--orange"> 3342 <svg viewBox="0 0 20 20" fill="none" stroke="#ff4d00" stroke-width="1.5"> 3343 <path d="M10 2l2.4 4.8L18 8l-4 3.9 1 5.6L10 15l-5 2.5 1-5.6L2 8l5.6-.2L10 2z"/> 3344 </svg> 3345 </div> 3346 <span class="feat-card__tag feat-card__tag--orange" data-i18n="feature_5_tag">Smart AI</span> 3347 <h3 class="feat-card__title" data-i18n="feature_5_title">Auto-Recommend<br>Model</h3> 3348 <p class="feat-card__desc" data-i18n="feature_5_desc">Not sure which model? The system picks the best one automatically based on your prompt and goals.</p> 3349 </div> 3350 3351 </div> 3352 </div> 3353 3354 <!-- Tab 2: Refinement --> 3355 <div class="features__panel" data-fpanel="refinement"> 3356 <div class="features__grid"> 3357 3358 <div class="feat-card feat-card--half feat-card--lime" data-feat> 3359 <div class="feat-card__icon feat-card__icon--lime"> 3360 <svg viewBox="0 0 20 20" fill="none" stroke="#d4ff00" stroke-width="1.5"> 3361 <path d="M3 7h14M7 3l-4 4 4 4M13 3l4 4-4 4M3 13h14"/> 3362 </svg> 3363 </div> 3364 <span class="feat-card__tag feat-card__tag--lime" data-i18n="feature_6_tag">Iterate</span> 3365 <h3 class="feat-card__title" data-i18n="feature_6_title">Prompt Refinement<br>& Re-Generation</h3> 3366 <p class="feat-card__desc" data-i18n="feature_6_desc">Tweak any part of your prompt and re-run. Change camera angles, lighting, pacing or style â all without starting over.</p> 3367 </div> 3368 3369 <div class="feat-card feat-card--half feat-card--orange" data-feat> 3370 <div class="feat-card__icon feat-card__icon--orange"> 3371 <svg viewBox="0 0 20 20" fill="none" stroke="#ff4d00" stroke-width="1.5"> 3372 <circle cx="10" cy="10" r="3"/> 3373 <path d="M10 2v2M10 16v2M2 10h2M16 10h2M4.93 4.93l1.41 1.41M13.66 13.66l1.41 1.41M4.93 15.07l1.41-1.41M13.66 6.34l1.41-1.41"/> 3374 </svg> 3375 </div>
3376 <span class="feat-card__tag feat-card__tag--orange" data-i18n="feature_7_tag">Prompt Library</span> 3377 <h3 class="feat-card__title" data-i18n="feature_7_title">Reusable Prompt<br>Templates</h3> 3378 <p class="feat-card__desc" data-i18n="feature_7_desc">Save your best prompts. Pull them back as starting points for new projects. Build a personal creative library over time.</p> 3379 </div> 3380 3381 <div class="feat-card feat-card--seven feat-card--cyan" data-feat> 3382 <div class="feat-card__icon feat-card__icon--cyan"> 3383 <svg viewBox="0 0 20 20" fill="none" stroke="#00c2ff" stroke-width="1.5"> 3384 <path d="M4 10a6 6 0 1012 0 6 6 0 00-12 0zM10 7v3l2 2"/> 3385 </svg> 3386 </div> 3387 <span class="feat-card__tag feat-card__tag--cyan" data-i18n="feature_8_tag">Character</span> 3388 <h3 class="feat-card__title" data-i18n="feature_8_title">Character Consistency Mode</h3> 3389 <p class="feat-card__desc" data-i18n="feature_8_desc">Keep identity, outfit, and facial features stable across multiple clips. Essential for series content, branded avatars, and narrative-driven videos that span multiple scenes.</p> 3390 </div> 3391 3392 <div class="feat-card feat-card--five feat-card--purple" data-feat> 3393 <div class="feat-card__icon feat-card__icon--purple"> 3394 <svg viewBox="0 0 20 20" fill="none" stroke="#a78bfa" stroke-width="1.5"> 3395 <path d="M5 4h10v12H5zM8 4V2M12 4V2M8 16v2M12 16v2M2 8h3M15 8h3M2 12h3M15 12h3"/> 3396 </svg> 3397 </div> 3398 <span class="feat-card__tag feat-card__tag--purple" data-i18n="feature_9_tag">Model Switch</span> 3399 <h3 class="feat-card__title" data-i18n="feature_9_title">Instant<br>Model Switching</h3> 3400 <p class="feat-card__desc" data-i18n="feature_9_desc">Swap between AI model categories mid-project. Your prompt carries over â only the engine changes.</p> 3401 <div class="feat-model-switch"> 3402 <div class="feat-model-btn"> 3403 <span class="feat-model-btn-dot" style="background:#d4ff00"></span> 3404 <span class="feat-model-btn-label" data-i18n="feature_9_model1">Text â Video</span> 3405 <span class="feat-model-btn-check"></span> 3406 </div> 3407 <div class="feat-model-btn active"> 3408 <span class="feat-model-btn-dot" style="background:#ff4d00"></span> 3409 <span class="feat-model-btn-label">Cinematic</span> 3410 <span class="feat-model-btn-check"> 3411 <svg width="8" height="8" viewBox="0 0 8 8" fill="none"> 3412 <path d="M1.5 4L3.5 6L6.5 2" stroke="white" stroke-width="1.5" stroke-linecap="round"/> 3413 </svg> 3414 </span> 3415 </div> 3416 <div class="feat-model-btn"> 3417 <span class="feat-model-btn-dot" style="background:#a78bfa"></span> 3418 <span class="feat-model-btn-label">Anime</span> 3419 <span class="feat-model-btn-check"></span> 3420 </div> 3421 </div> 3422 </div> 3423 3424 </div> 3425 </div> 3426 3427 <!-- Tab 3: Motion Control --> 3428 <div class="features__panel" data-fpanel="control"> 3429 <div class="features__grid"> 3430 3431 <div class="feat-card feat-card--half feat-card--lime" data-feat> 3432 <div class="feat-card__icon feat-card__icon--lime"> 3433 <svg viewBox="0 0 20 20" fill="none" stroke="#d4ff00" stroke-width="1.5"> 3434 <path d="M10 4v12M4 10h12" stroke-linecap="round"/> 3435 <circle cx="10" cy="10" r="3"/> 3436 </svg> 3437 </div> 3438 <span class="feat-card__tag feat-card__tag--lime">Motion</span> 3439 <h3 class="feat-card__title">Camera Motion<br>Controls</h3> 3440 <p class="feat-card__desc">Set dolly, pan, tilt, orbit, and zoom directions in your prompt. Control pacing from slow cinematic glide to fast dynamic push.</p> 3441 <div class="feat-wave"> 3442 <div class="feat-wave__bar" style="--h:80%"></div> 3443 <div class="feat-wave__bar" style="--h:40%"></div> 3444 <div class="feat-wave__bar" style="--h:90%"></div> 3445 <div class="feat-wave__bar" style="--h:55%"></div> 3446 <div class="feat-wave__bar" style="--h:70%"></div> 3447 <div class="feat-wave__bar" style="--h:35%"></div> 3448 <div class="feat-wave__bar" style="--h:85%"></div> 3449 <div class="feat-wave__bar" style="--h:60%"></div> 3450 <div class="feat-wave__bar" style="--h:45%"></div> 3451 <div class="feat-wave__bar" style="--h:75%"></div> 3452 <div class="feat-wave__bar" style="--h:50%"></div> 3453 <div class="feat-wave__bar" style="--h:65%"></div> 3454 </div> 3455 </div> 3456 3457 <div class="feat-card feat-card--half feat-card--cyan" data-feat> 3458 <div class="feat-card__icon feat-card__icon--cyan"> 3459 <svg viewBox="0 0 20 20" fill="none" stroke="#00c2ff" stroke-width="1.5"> 3460 <path d="M4 4l12 12M4 16L16 4" stroke-linecap="round"/> 3461 <circle cx="10" cy="10" r="4"/> 3462 </svg> 3463 </div>
3464 <span class="feat-card__tag feat-card__tag--cyan">Aspect Ratio</span> 3465 <h3 class="feat-card__title">Multi-Format<br>Aspect Ratios</h3> 3466 <p class="feat-card__desc">Generate for any platform â 16:9 landscape for YouTube, 9:16 vertical for Reels and TikTok, 1:1 for feeds, 21:9 ultrawide for cinematic.</p> 3467 <div class="feat-swatches" style="margin-top:1.25rem"> 3468 <span class="feat-swatch">16:9</span> 3469 <span class="feat-swatch">9:16</span> 3470 <span class="feat-swatch">1:1</span> 3471 <span class="feat-swatch">21:9</span> 3472 </div> 3473 </div> 3474 3475 <div class="feat-card feat-card--third feat-card--orange" data-feat> 3476 <div class="feat-card__icon feat-card__icon--orange"> 3477 <svg viewBox="0 0 20 20" fill="none" stroke="#ff4d00" stroke-width="1.5"> 3478 <path d="M3 10h14M10 3v14" stroke-linecap="round"/> 3479 <path d="M6 6l8 8M14 6L6 14" stroke-linecap="round"/> 3480 </svg> 3481 </div> 3482 <span class="feat-card__tag feat-card__tag--orange">Clip Length</span> 3483 <h3 class="feat-card__title">Flexible<br>Clip Duration</h3> 3484 <p class="feat-card__desc">3s for quick loops, up to 12s for extended scenes. Pick the right length for your output goal.</p> 3485 </div> 3486 3487 <div class="feat-card feat-card--third feat-card--purple" data-feat> 3488 <div class="feat-card__icon feat-card__icon--purple"> 3489 <svg viewBox="0 0 20 20" fill="none" stroke="#a78bfa" stroke-width="1.5"> 3490 <path d="M4 7h12M4 13h12M7 4v12M13 4v12" stroke-linecap="round"/> 3491 </svg> 3492 </div> 3493 <span class="feat-card__tag feat-card__tag--purple">Lighting</span> 3494 <h3 class="feat-card__title">Lighting &<br>Lens Control</h3> 3495 <p class="feat-card__desc">Dial in cinematic lighting moods â golden hour, neon, overcast â and set lens characteristics for depth and realism.</p> 3496 </div> 3497 3498 <div class="feat-card feat-card--third feat-card--lime" data-feat> 3499 <div class="feat-card__icon feat-card__icon--lime"> 3500 <svg viewBox="0 0 20 20" fill="none" stroke="#d4ff00" stroke-width="1.5"> 3501 <rect x="3" y="6" width="14" height="9" rx="1.5"/> 3502 <path d="M7 6V4M13 6V4"/> 3503 </svg> 3504 </div> 3505 <span class="feat-card__tag feat-card__tag--lime">FPS</span> 3506 <h3 class="feat-card__title">Frame Rate<br>Selection</h3> 3507 <p class="feat-card__desc">Choose between 24fps for film feel, 30fps for standard, or 60fps for smooth high-motion output.</p> 3508 </div> 3509 3510 </div> 3511 </div> 3512 3513 <!-- Tab 4: Export --> 3514 <div class="features__panel" data-fpanel="export"> 3515 <div class="features__grid"> 3516 3517 <div class="feat-card feat-card--wide feat-card--lime" data-feat> 3518 <div class="feat-card__icon feat-card__icon--lime"> 3519 <svg viewBox="0 0 20 20" fill="none" stroke="#d4ff00" stroke-width="1.5"> 3520 <path d="M4 13v4h12v-4M10 3v10M7 10l3 3 3-3"/> 3521 </svg> 3522 </div> 3523 <span class="feat-card__tag feat-card__tag--lime">Export</span> 3524 <h3 class="feat-card__title">Export-Ready Output â No Conversion Needed</h3> 3525 <p class="feat-card__desc">Download in the exact format your workflow needs. All outputs are crisp, correctly encoded, and ready to upload directly to any platform.</p> 3526 <div class="feat-export-row"> 3527 <span class="feat-format-big">MP4</span> 3528 <span class="feat-format-sep"></span> 3529 <span class="feat-format-big">WebM</span> 3530 <span class="feat-format-sep"></span> 3531 <span class="feat-format-big">GIF</span> 3532 <span class="feat-format-sep"></span> 3533 <span class="feat-format-big">MOV</span> 3534 </div> 3535 </div> 3536 3537 <div class="feat-card feat-card--narrow feat-card--orange" data-feat> 3538 <div class="feat-card__icon feat-card__icon--orange"> 3539 <svg viewBox="0 0 20 20" fill="none" stroke="#ff4d00" stroke-width="1.5"> 3540 <path d="M10 3L3 7v6l7 4 7-4V7l-7-4z"/> 3541 <path d="M10 3v14M3 7l7 4 7-4"/> 3542 </svg> 3543 </div>
3544 <span class="feat-card__tag feat-card__tag--orange">Resolution</span> 3545 <h3 class="feat-card__title">Up to 4K<br>Output</h3> 3546 <p class="feat-card__desc">High-fidelity exports in HD, Full HD, and 4K depending on your plan and model selection.</p> 3547 </div> 3548 3549 <div class="feat-card feat-card--half feat-card--cyan" data-feat> 3550 <div class="feat-card__icon feat-card__icon--cyan"> 3551 <svg viewBox="0 0 20 20" fill="none" stroke="#00c2ff" stroke-width="1.5"> 3552 <path d="M10 3L3 7v6l7 4 7-4V7l-7-4z"/> 3553 <circle cx="10" cy="10" r="2"/> 3554 </svg> 3555 </div> 3556 <span class="feat-card__tag feat-card__tag--cyan">Watermark-Free</span> 3557 <h3 class="feat-card__title">No Watermarks<br>on Paid Plans</h3> 3558 <p class="feat-card__desc">Your outputs are clean and ready for commercial use. Paid plans include full watermark-free exports with commercial licensing.</p> 3559 </div> 3560 3561 <div class="feat-card feat-card--half feat-card--purple" data-feat> 3562 <div class="feat-card__icon feat-card__icon--purple"> 3563 <svg viewBox="0 0 20 20" fill="none" stroke="#a78bfa" stroke-width="1.5"> 3564 <path d="M17 10c0 3.87-3.13 7-7 7a7 7 0 010-14"/> 3565 <path d="M17 10H10V3"/> 3566 </svg> 3567 </div> 3568 <span class="feat-card__tag feat-card__tag--purple">Batch</span> 3569 <h3 class="feat-card__title">Batch Export<br>& Bulk Download</h3> 3570 <p class="feat-card__desc">Select multiple generations and download them all at once. Streamlined for content teams working at volume.</p> 3571 </div> 3572 3573 </div> 3574 </div> 3575 3576 </div><!-- /.features__panels --> 3577 </div> 3578 </section> 3579 3580
3580<script type="6c18279ba6d93a40249c492f-text/javascript"> 3581 // ââ Features tab switching ââ 3582 (function () { 3583 const tabs = document.querySelectorAll('[data-ftab]'); 3584 const panels = document.querySelectorAll('[data-fpanel]'); 3585 3586 function activate(tab) { 3587 const target = tab.dataset.ftab; 3588 3589 tabs.forEach(t => t.classList.toggle('is-active', t === tab)); 3590 panels.forEach(p => { 3591 const isActive = p.dataset.fpanel === target; 3592 p.classList.toggle('is-active', isActive); 3593 // Re-trigger card reveal in new panel 3594 if (isActive) { 3595 p.querySelectorAll('.feat-card').forEach(c => { 3596 c.classList.remove('in-view'); 3597 setTimeout(() => featObs.observe(c), 10); 3598 }); 3599 } 3600 }); 3601 } 3602 3603 tabs.forEach(t => t.addEventListener('click', () => activate(t))); 3604 3605 // Scroll reveal for feat cards 3606 const featObs = new IntersectionObserver(entries => { 3607 entries.forEach(e => { 3608 if (e.isIntersecting) { 3609 e.target.classList.add('in-view'); 3610 featObs.unobserve(e.target); 3611 } 3612 }); 3613 }, { threshold: 0.12 }); 3614 3615 document.querySelectorAll('.feat-card').forEach(c => featObs.observe(c)); 3616 })(); 3617 </script>
3617 3618 3619 <!-- â¼â¼â¼ SECTION 6 â BLUEPRINTS FOR AI VIDEO CREATION â¼â¼â¼ --> 3620 <style> 3621 3622 /* âââââââââââââââââââââââââââââââââââââââââââ 3623 BLUEPRINTS 3624 âââââââââââââââââââââââââââââââââââââââââââ */ 3625 .blueprints { 3626 position: relative; 3627 padding-block: var(--section-pad); 3628 overflow: hidden; 3629 background: var(--c-bg-2); 3630 } 3631 3632 /* Edge fades */ 3633 .blueprints::before, 3634 .blueprints::after { 3635 content: ''; 3636 position: absolute; 3637 left: 0; right: 0; 3638 height: 100px; 3639 pointer-events: none; 3640 z-index: 2; 3641 } 3642 .blueprints::before { top: 0; background: linear-gradient(to bottom, var(--c-bg), transparent); } 3643 .blueprints::after { bottom: 0; background: linear-gradient(to top, var(--c-bg), transparent); } 3644 3645 /* Blueprint grid-paper bg */ 3646 .blueprints__paper { 3647 position: absolute; 3648 inset: 0; 3649 background-image: 3650 linear-gradient(rgba(212,255,0,0.03) 1px, transparent 1px), 3651 linear-gradient(90deg, rgba(212,255,0,0.03) 1px, transparent 1px); 3652 background-size: 40px 40px; 3653 mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, black 40%, transparent 100%); 3654 pointer-events: none; 3655 } 3656 3657 /* ââ Header ââ */ 3658 .blueprints__header { 3659 position: relative; 3660 z-index: 3; 3661 display: grid; 3662 grid-template-columns: 1fr auto; 3663 align-items: end; 3664 gap: 2rem; 3665 margin-bottom: clamp(3rem, 6vw, 5rem); 3666 } 3667 3668 .blueprints__label { 3669 display: inline-flex; 3670 align-items: center; 3671 gap: 0.6rem; 3672 font-family: var(--font-mono); 3673 font-size: var(--text-xs); 3674 color: var(--c-accent); 3675 text-transform: uppercase; 3676 letter-spacing: 0.14em; 3677 margin-bottom: 1.25rem; 3678 } 3679 3680 .blueprints__label-line { 3681 width: 32px; height: 1px; 3682 background: var(--c-accent); 3683 opacity: 0.5; 3684 } 3685 3686 .blueprints__title { 3687 font-family: var(--font-display); 3688 font-size: clamp(3rem, 7vw, 6.5rem); 3689 line-height: 0.88; 3690 text-transform: uppercase; 3691 color: var(--c-white); 3692 letter-spacing: 0.02em; 3693 } 3694 3695 .blueprints__title em { 3696 font-style: normal; 3697 color: var(--c-accent); 3698 display: block; 3699 } 3700 3701 .blueprints__title-arrow { 3702 display: inline-flex; 3703 align-items: center; 3704 gap: 0.4rem; 3705 color: var(--c-accent); 3706 vertical-align: middle; 3707 } 3708 3709 .blueprints__header-right { 3710 display: flex; 3711 flex-direction: column; 3712 align-items: flex-end; 3713 gap: 1rem; 3714 padding-bottom: 0.5rem; 3715 } 3716 3717 .blueprints__header-desc { 3718 font-size: var(--text-base); 3719 color: var(--c-text-muted); 3720 max-width: 320px; 3721 text-align: right; 3722 line-height: 1.6; 3723 } 3724 3725 /* ââ BLUEPRINT CARDS GRID ââ */ 3726 .blueprints__grid { 3727 position: relative; 3728 z-index: 3; 3729 display: grid; 3730 grid-template-columns: repeat(3, 1fr); 3731 gap: 1.25rem; 3732 } 3733 3734 .bp-card { 3735 position: relative; 3736 border-radius: var(--r-xl); 3737 overflow: hidden; 3738 border: 1px solid var(--c-border); 3739 cursor: pointer; 3740 opacity: 0; 3741 transform: translateY(28px); 3742 transition: opacity 0.65s var(--ease), transform 0.65s var(--ease), 3743 border-color var(--t-base), box-shadow var(--t-slow); 3744 } 3745 3746 .bp-card.in-view { 3747 opacity: 1; 3748 transform: translateY(0); 3749 } 3750 3751 .bp-card:nth-child(1) { transition-delay: 0.05s; } 3752 .bp-card:nth-child(2) { transition-delay: 0.14s; } 3753 .bp-card:nth-child(3) { transition-delay: 0.23s; } 3754 .bp-card:nth-child(4) { transition-delay: 0.10s; } 3755 .bp-card:nth-child(5) { transition-delay: 0.19s; } 3756 .bp-card:nth-child(6) { transition-delay: 0.28s; } 3757 3758 .bp-card:hover { 3759 border-color: var(--c-border-hi); 3760 box-shadow: var(--shadow-lg); 3761 transform: translateY(-6px) !important; 3762 } 3763 3764 /* Card visual area */ 3765 .bp-card__visual { 3766 aspect-ratio: 4/3; 3767 position: relative; 3768 overflow: hidden; 3769 } 3770 3771 .bp-card__bg { 3772 position: absolute; 3773 inset: 0; 3774 transition: transform 0.7s var(--ease); 3775 } 3776 3777 .bp-card:hover .bp-card__bg { 3778 transform: scale(1.06); 3779 } 3780 3781 /* Each card's unique gradient bg */ 3782 .bp-card--1 .bp-card__bg { background: linear-gradient(135deg, #0d1a0a 0%, #1a2a0a 40%, #0a1200 100%); } 3783 .bp-card--2 .bp-card__bg { background: linear-gradient(135deg, #0a0d1a 0%, #0a1a2a 40%, #00080d 100%); } 3784 .bp-card--3 .bp-card__bg { background: linear-gradient(135deg, #1a0a0a 0%, #2a0d0a 40%, #120000 100%); } 3785 .bp-card--4 .bp-card__bg { background: linear-gradient(135deg, #0f0a1a 0%, #1a0a2a 40%, #080012 100%); } 3786 .bp-card--5 .bp-card__bg { background: linear-gradient(135deg, #1a120a 0%, #2a1a0a 40%, #120800 100%); } 3787 .bp-card--6 .bp-card__bg { background: linear-gradient(135deg, #0a1a18 0%, #0a2a24 40%, #00120e 100%); } 3788 3789 /* Animated mesh inside each visual */ 3790 .bp-card__mesh { 3791 position: absolute; 3792 inset: -40%; 3793 opacity: 0.6; 3794 animation: bp-mesh 12s ease-in-out infinite alternate; 3795 border-radius: 50%; 3796 } 3797 3798 .bp-card--1 .bp-card__mesh { background: radial-gradient(circle at 30% 40%, rgba(212,255,0,0.18) 0%, transparent 55%); animation-delay: 0s; } 3799 .bp-card--2 .bp-card__mesh { background: radial-gradient(circle at 60% 30%, rgba(0,194,255,0.18) 0%, transparent 55%); animation-delay: 1.5s; } 3800 .bp-card--3 .bp-card__mesh { background: radial-gradient(circle at 40% 60%, rgba(255,77,0,0.18) 0%, transparent 55%); animation-delay: 3s; } 3801 .bp-card--4 .bp-card__mesh { background: radial-gradient(circle at 50% 50%, rgba(167,139,250,0.18) 0%, transparent 55%); animation-delay: 0.8s; } 3802 .bp-card--5 .bp-card__mesh { background: radial-gradient(circle at 35% 45%, rgba(255,180,0,0.18) 0%, transparent 55%); animation-delay: 2s; } 3803 .bp-card--6 .bp-card__mesh { background: radial-gradient(circle at 65% 35%, rgba(0,255,180,0.15) 0%, transparent 55%); animation-delay: 1s; } 3804
3805 @keyframes bp-mesh { 3806 from { transform: translate(0, 0) scale(1); } 3807 to { transform: translate(15%, 10%) scale(1.15); } 3808 } 3809 3810 /* Blueprint crosshair / wireframe overlay */ 3811 .bp-card__crosshair { 3812 position: absolute; 3813 inset: 0; 3814 display: flex; 3815 align-items: center; 3816 justify-content: center; 3817 opacity: 0.15; 3818 transition: opacity 0.4s; 3819 } 3820 3821 .bp-card:hover .bp-card__crosshair { opacity: 0.3; } 3822 3823 .bp-card__crosshair svg { 3824 width: 80px; 3825 height: 80px; 3826 } 3827 3828 /* Category badge */ 3829 .bp-card__badge { 3830 position: absolute; 3831 top: 1rem; 3832 left: 1rem; 3833 display: flex; 3834 align-items: center; 3835 gap: 0.4rem; 3836 padding: 0.3rem 0.75rem; 3837 border-radius: var(--r-full); 3838 font-family: var(--font-mono); 3839 font-size: 0.62rem; 3840 text-transform: uppercase; 3841 letter-spacing: 0.08em; 3842 backdrop-filter: blur(12px); 3843 -webkit-backdrop-filter: blur(12px); 3844 border: 1px solid; 3845 } 3846 3847 .bp-card__badge-dot { 3848 width: 5px; height: 5px; 3849 border-radius: 50%; 3850 } 3851 3852 /* Step count badge top-right */ 3853 .bp-card__steps { 3854 position: absolute; 3855 top: 1rem; 3856 right: 1rem; 3857 padding: 0.3rem 0.65rem; 3858 background: rgba(0,0,0,0.5); 3859 border: 1px solid rgba(255,255,255,0.1); 3860 border-radius: var(--r-full); 3861 font-family: var(--font-mono); 3862 font-size: 0.6rem; 3863 color: var(--c-text-muted); 3864 backdrop-filter: blur(8px); 3865 } 3866 3867 /* Center play/action button */ 3868 .bp-card__action { 3869 position: absolute; 3870 top: 50%; 3871 left: 50%; 3872 transform: translate(-50%, -50%) scale(0.85); 3873 width: 52px; 3874 height: 52px; 3875 border-radius: 50%; 3876 display: grid; 3877 place-items: center; 3878 opacity: 0; 3879 transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); 3880 } 3881 3882 .bp-card:hover .bp-card__action { 3883 opacity: 1; 3884 transform: translate(-50%, -50%) scale(1); 3885 } 3886 3887 /* Card info panel */ 3888 .bp-card__info { 3889 background: var(--c-surface); 3890 padding: 1.25rem 1.5rem; 3891 border-top: 1px solid var(--c-border); 3892 } 3893 3894 .bp-card__category { 3895 font-family: var(--font-mono); 3896 font-size: 0.6rem; 3897 text-transform: uppercase; 3898 letter-spacing: 0.1em; 3899 color: var(--c-text-dim); 3900 margin-bottom: 0.35rem; 3901 } 3902 3903 .bp-card__name { 3904 font-family: var(--font-display); 3905 font-size: clamp(1.1rem, 2vw, 1.4rem); 3906 line-height: 1; 3907 text-transform: uppercase; 3908 letter-spacing: 0.03em; 3909 color: var(--c-white); 3910 margin-bottom: 0.5rem; 3911 } 3912 3913 .bp-card__desc { 3914 font-size: var(--text-xs); 3915 color: var(--c-text-muted); 3916 line-height: 1.6; 3917 margin-bottom: 1rem; 3918 } 3919 3920 /* Tags inside info */ 3921 .bp-card__tags { 3922 display: flex; 3923 flex-wrap: wrap; 3924 gap: 0.4rem; 3925 } 3926 3927 .bp-card__tag { 3928 padding: 0.2rem 0.6rem; 3929 border-radius: var(--r-full); 3930 font-family: var(--font-mono); 3931 font-size: 0.6rem; 3932 color: var(--c-text-dim); 3933 border: 1px solid var(--c-border); 3934 transition: all var(--t-fast); 3935 } 3936 3937 .bp-card:hover .bp-card__tag { border-color: var(--c-border-hi); color: var(--c-text-muted); } 3938 3939 /* Use Blueprint CTA link */ 3940 .bp-card__use { 3941 display: inline-flex; 3942 align-items: center; 3943 gap: 0.4rem; 3944 font-size: var(--text-xs); 3945 font-weight: 600; 3946 letter-spacing: 0.04em; 3947 margin-top: 1rem; 3948 padding-top: 0.75rem; 3949 border-top: 1px solid var(--c-border); 3950 color: var(--c-text-dim); 3951 transition: color var(--t-base) var(--ease); 3952 width: 100%; 3953 } 3954 3955 .bp-card__use svg { width: 12px; height: 12px; transition: transform var(--t-base) var(--ease); } 3956 .bp-card:hover .bp-card__use { color: var(--c-accent); } 3957 .bp-card:hover .bp-card__use svg { transform: translateX(4px); } 3958 3959 /* ââ BIG MARQUEE TEXT ââ */ 3960 .blueprints__marquee { 3961 position: relative; 3962 z-index: 3; 3963 overflow: hidden; 3964 margin-block: clamp(3rem, 6vw, 5rem); 3965 padding-block: 1.5rem; 3966 border-top: 1px solid var(--c-border); 3967 border-bottom: 1px solid var(--c-border); 3968 } 3969 3970 .blueprints__marquee-track { 3971 display: flex; 3972 gap: 3rem; 3973 width: max-content; 3974 animation: bp-marquee 30s linear infinite; 3975 } 3976 3977 .blueprints__marquee-track:hover { animation-play-state: paused; } 3978
3979 @keyframes bp-marquee { 3980 from { transform: translateX(0); } 3981 to { transform: translateX(-50%); } 3982 } 3983 3984 .blueprints__marquee-item { 3985 display: flex; 3986 align-items: center; 3987 gap: 1.5rem; 3988 white-space: nowrap; 3989 } 3990 3991 .blueprints__marquee-word { 3992 font-family: var(--font-display); 3993 font-size: clamp(2.5rem, 5vw, 4.5rem); 3994 line-height: 1; 3995 text-transform: uppercase; 3996 letter-spacing: 0.04em; 3997 color: rgba(255,255,255,0.06); 3998 transition: color 0.3s; 3999 } 4000 4001 .blueprints__marquee-word--accent { color: var(--c-accent); opacity: 0.7; } 4002 .blueprints__marquee-track:hover .blueprints__marquee-word { color: rgba(255,255,255,0.12); } 4003 4004 .blueprints__marquee-sep { 4005 font-family: var(--font-display); 4006 font-size: 2rem; 4007 color: var(--c-accent); 4008 opacity: 0.4; 4009 } 4010 4011 /* ââ BOTTOM CTA ââ */ 4012 .blueprints__cta { 4013 position: relative; 4014 z-index: 3; 4015 display: flex; 4016 align-items: center; 4017 justify-content: space-between; 4018 gap: 2rem; 4019 padding: 2rem 2.5rem; 4020 background: rgba(212,255,0,0.04); 4021 border: 1px solid rgba(212,255,0,0.15); 4022 border-radius: var(--r-xl); 4023 flex-wrap: wrap; 4024 } 4025 4026 .blueprints__cta-left {} 4027 4028 .blueprints__cta-count { 4029 font-family: var(--font-display); 4030 font-size: clamp(2rem, 4vw, 3rem); 4031 line-height: 1; 4032 color: var(--c-accent); 4033 letter-spacing: 0.04em; 4034 } 4035 4036 .blueprints__cta-text { 4037 font-size: var(--text-base); 4038 color: var(--c-text-muted); 4039 margin-top: 0.25rem; 4040 } 4041 4042 .blueprints__cta-text strong { color: var(--c-white); } 4043 4044 .blueprints__cta-actions { 4045 display: flex; 4046 align-items: center; 4047 gap: 0.75rem; 4048 } 4049 4050 /* Responsive */ 4051 @media (max-width: 1024px) { 4052 .blueprints__grid { grid-template-columns: repeat(2, 1fr); } 4053 .blueprints__header { grid-template-columns: 1fr; } 4054 .blueprints__header-right { align-items: flex-start; } 4055 .blueprints__header-desc { text-align: left; } 4056 } 4057 4058 @media (max-width: 640px) { 4059 .blueprints__grid { grid-template-columns: 1fr; } 4060 .blueprints__cta { flex-direction: column; align-items: flex-start; } 4061 } 4062 4063 </style> 4064 4065 <section class="blueprints" id="blueprints" aria-label="Blueprints for AI Video Creation"> 4066 <div class="blueprints__paper" aria-hidden="true"></div> 4067 4068 <div class="container"> 4069 4070 <!-- Header --> 4071 <div class="blueprints__header"> 4072 <div> 4073 <div class="blueprints__label"> 4074 <span class="blueprints__label-line"></span> 4075 Blueprints 4076 <span class="blueprints__label-line"></span> 4077 </div> 4078 <h2 class="blueprints__title"> 4079 <span data-i18n="bp_title_line1">Blueprints for</span><br><span data-i18n="bp_title_line2">AI Video</span> 4080 <em> 4081 <span data-i18n="bp_title_accent">Creation</span> 4082 <span class="blueprints__title-arrow" aria-hidden="true"> 4083 <svg width="48" height="32" viewBox="0 0 48 32" fill="none"> 4084 <path d="M0 16h40M28 4l12 12-12 12" stroke="#d4ff00" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/> 4085 </svg> 4086 </span> 4087 </em> 4088 </h2> 4089 </div> 4090 <div class="blueprints__header-right"> 4091 <p class="blueprints__header-desc" data-i18n="bp_header_desc">Pre-built creative blueprints for every video use case â pick your goal and start generating in seconds.</p> 4092 <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn btn--ghost" data-i18n="bp_browse_all">Browse All Blueprints</a> 4093 </div> 4094 </div> 4095 4096 <!-- Cards grid --> 4097 <div class="blueprints__grid"> 4098 4099 <!-- Blueprint 1: Product / Commercial --> 4100 <div class="bp-card bp-card--1" data-bp> 4101 <div class="bp-card__visual"> 4102 <div class="bp-card__bg"></div> 4103 <div class="bp-card__mesh"></div> 4104 <!-- Crosshair wireframe --> 4105 <div class="bp-card__crosshair" aria-hidden="true"> 4106 <svg viewBox="0 0 80 80" fill="none" stroke="#d4ff00" stroke-width="0.8"> 4107 <circle cx="40" cy="40" r="30"/> 4108 <line x1="40" y1="5" x2="40" y2="15"/> 4109 <line x1="40" y1="65" x2="40" y2="75"/> 4110 <line x1="5" y1="40" x2="15" y2="40"/> 4111 <line x1="65" y1="40" x2="75" y2="40"/> 4112 <rect x="25" y="25" width="30" height="30" stroke-dasharray="3 3"/> 4113 </svg> 4114 </div> 4115 <!-- Badge --> 4116 <div class="bp-card__badge" style="background:rgba(212,255,0,0.1); border-color:rgba(212,255,0,0.3); color:#d4ff00;">
4117 <span class="bp-card__badge-dot" style="background:#d4ff00"></span> 4118 Product 4119 </div> 4120 <div class="bp-card__steps">4 steps</div> 4121 <!-- Hover action --> 4122 <div class="bp-card__action" style="background:var(--c-accent)"> 4123 <svg width="20" height="20" viewBox="0 0 20 20" fill="none"> 4124 <path d="M5 5L15 10L5 15V5Z" fill="#0a0a0a"/> 4125 </svg> 4126 </div> 4127 </div> 4128 <div class="bp-card__info"> 4129 <p class="bp-card__category" data-i18n="bp1_category">Commercial</p> 4130 <h3 class="bp-card__name" data-i18n="bp1_name">Product Hero Video</h3> 4131 <p class="bp-card__desc" data-i18n="bp1_desc">Studio-quality product reveal with turntable motion, clean lighting, and cinematic detail shots.</p> 4132 <div class="bp-card__tags"> 4133 <span class="bp-card__tag">TextâVideo</span> 4134 <span class="bp-card__tag">Cinematic</span> 4135 <span class="bp-card__tag">9:16 + 16:9</span> 4136 </div> 4137 <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="bp-card__use" data-i18n="bp_use_this"> 4138 Use this Blueprint 4139 <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> 4140 <path d="M2 6h8M6 2l4 4-4 4"/> 4141 </svg> 4142 </a> 4143 </div> 4144 </div> 4145 4146 <!-- Blueprint 2: Social Content --> 4147 <div class="bp-card bp-card--2" data-bp> 4148 <div class="bp-card__visual"> 4149 <div class="bp-card__bg"></div> 4150 <div class="bp-card__mesh"></div> 4151 <div class="bp-card__crosshair" aria-hidden="true"> 4152 <svg viewBox="0 0 80 80" fill="none" stroke="#00c2ff" stroke-width="0.8"> 4153 <circle cx="40" cy="40" r="30"/> 4154 <line x1="40" y1="5" x2="40" y2="15"/> 4155 <line x1="40" y1="65" x2="40" y2="75"/> 4156 <line x1="5" y1="40" x2="15" y2="40"/> 4157 <line x1="65" y1="40" x2="75" y2="40"/> 4158 <rect x="25" y="25" width="30" height="30" stroke-dasharray="3 3"/> 4159 </svg> 4160 </div> 4161 <div class="bp-card__badge" style="background:rgba(0,194,255,0.1); border-color:rgba(0,194,255,0.3); color:#00c2ff;"> 4162 <span class="bp-card__badge-dot" style="background:#00c2ff"></span> 4163 Social 4164 </div> 4165 <div class="bp-card__steps">3 steps</div> 4166 <div class="bp-card__action" style="background:var(--c-accent-3)"> 4167 <svg width="20" height="20" viewBox="0 0 20 20" fill="none"> 4168 <path d="M5 5L15 10L5 15V5Z" fill="#0a0a0a"/> 4169 </svg> 4170 </div> 4171 </div> 4172 <div class="bp-card__info"> 4173 <p class="bp-card__category" data-i18n="bp2_category">Social Media</p> 4174 <h3 class="bp-card__name" data-i18n="bp2_name">Viral Short-Form Hook</h3> 4175 <p class="bp-card__desc" data-i18n="bp2_desc">Attention-grabbing vertical clips for Reels, TikTok, and Shorts â designed for high retention and loop-ability.</p> 4176 <div class="bp-card__tags"> 4177 <span class="bp-card__tag">9:16</span> 4178 <span class="bp-card__tag">3â6s loop</span> 4179 <span class="bp-card__tag">TextâVideo</span> 4180 </div> 4181 <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="bp-card__use"> 4182 Use this Blueprint 4183 <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> 4184 <path d="M2 6h8M6 2l4 4-4 4"/> 4185 </svg> 4186 </a> 4187 </div> 4188 </div> 4189 4190 <!-- Blueprint 3: Cinematic Storytelling --> 4191 <div class="bp-card bp-card--3" data-bp> 4192 <div class="bp-card__visual"> 4193 <div class="bp-card__bg"></div> 4194 <div class="bp-card__mesh"></div> 4195 <div class="bp-card__crosshair" aria-hidden="true"> 4196 <svg viewBox="0 0 80 80" fill="none" stroke="#ff4d00" stroke-width="0.8"> 4197 <circle cx="40" cy="40" r="30"/> 4198 <line x1="40" y1="5" x2="40" y2="15"/> 4199 <line x1="40" y1="65" x2="40" y2="75"/> 4200 <line x1="5" y1="40" x2="15" y2="40"/> 4201 <line x1="65" y1="40" x2="75" y2="40"/> 4202 <rect x="25" y="25" width="30" height="30" stroke-dasharray="3 3"/> 4203 </svg> 4204 </div> 4205 <div class="bp-card__badge" style="background:rgba(255,77,0,0.1); border-color:rgba(255,77,0,0.3); color:#ff4d00;">
4206 <span class="bp-card__badge-dot" style="background:#ff4d00"></span> 4207 Cinematic 4208 </div> 4209 <div class="bp-card__steps">5 steps</div> 4210 <div class="bp-card__action" style="background:var(--c-accent-2)"> 4211 <svg width="20" height="20" viewBox="0 0 20 20" fill="none"> 4212 <path d="M5 5L15 10L5 15V5Z" fill="white"/> 4213 </svg> 4214 </div> 4215 </div> 4216 <div class="bp-card__info"> 4217 <p class="bp-card__category" data-i18n="bp3_category">Storytelling</p> 4218 <h3 class="bp-card__name" data-i18n="bp3_name">Cinematic Story Reel</h3> 4219 <p class="bp-card__desc" data-i18n="bp3_desc">Multi-scene story sequences with consistent character, lighting continuity, and narrative arc â from concept to final cut.</p> 4220 <div class="bp-card__tags"> 4221 <span class="bp-card__tag">16:9</span> 4222 <span class="bp-card__tag">Character mode</span> 4223 <span class="bp-card__tag">Multi-scene</span> 4224 </div> 4225 <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="bp-card__use"> 4226 Use this Blueprint 4227 <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> 4228 <path d="M2 6h8M6 2l4 4-4 4"/> 4229 </svg> 4230 </a> 4231 </div> 4232 </div> 4233 4234 <!-- Blueprint 4: Anime / Stylized --> 4235 <div class="bp-card bp-card--4" data-bp> 4236 <div class="bp-card__visual"> 4237 <div class="bp-card__bg"></div> 4238 <div class="bp-card__mesh"></div> 4239 <div class="bp-card__crosshair" aria-hidden="true"> 4240 <svg viewBox="0 0 80 80" fill="none" stroke="#a78bfa" stroke-width="0.8"> 4241 <circle cx="40" cy="40" r="30"/> 4242 <line x1="40" y1="5" x2="40" y2="15"/> 4243 <line x1="40" y1="65" x2="40" y2="75"/> 4244 <line x1="5" y1="40" x2="15" y2="40"/> 4245 <line x1="65" y1="40" x2="75" y2="40"/> 4246 <rect x="25" y="25" width="30" height="30" stroke-dasharray="3 3"/> 4247 </svg> 4248 </div> 4249 <div class="bp-card__badge" style="background:rgba(167,139,250,0.1); border-color:rgba(167,139,250,0.3); color:#a78bfa;"> 4250 <span class="bp-card__badge-dot" style="background:#a78bfa"></span> 4251 Stylized 4252 </div> 4253 <div class="bp-card__steps">4 steps</div> 4254 <div class="bp-card__action" style="background:#a78bfa"> 4255 <svg width="20" height="20" viewBox="0 0 20 20" fill="none"> 4256 <path d="M5 5L15 10L5 15V5Z" fill="#0a0a0a"/> 4257 </svg> 4258 </div> 4259 </div> 4260 <div class="bp-card__info"> 4261 <p class="bp-card__category" data-i18n="bp4_category">Anime & Art</p> 4262 <h3 class="bp-card__name" data-i18n="bp4_name">Anime World Builder</h3> 4263 <p class="bp-card__desc" data-i18n="bp4_desc">Fantasy scenes, illustrated worlds, and stylized character animations â built for anime and creative art workflows.</p> 4264 <div class="bp-card__tags"> 4265 <span class="bp-card__tag">Anime model</span> 4266 <span class="bp-card__tag">Stylized</span> 4267 <span class="bp-card__tag">16:9</span> 4268 </div> 4269 <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="bp-card__use"> 4270 Use this Blueprint 4271 <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> 4272 <path d="M2 6h8M6 2l4 4-4 4"/> 4273 </svg> 4274 </a> 4275 </div> 4276 </div> 4277 4278 <!-- Blueprint 5: Brand / Promo --> 4279 <div class="bp-card bp-card--5" data-bp> 4280 <div class="bp-card__visual"> 4281 <div class="bp-card__bg"></div> 4282 <div class="bp-card__mesh"></div> 4283 <div class="bp-card__crosshair" aria-hidden="true"> 4284 <svg viewBox="0 0 80 80" fill="none" stroke="#ffb400" stroke-width="0.8"> 4285 <circle cx="40" cy="40" r="30"/> 4286 <line x1="40" y1="5" x2="40" y2="15"/> 4287 <line x1="40" y1="65" x2="40" y2="75"/> 4288 <line x1="5" y1="40" x2="15" y2="40"/> 4289 <line x1="65" y1="40" x2="75" y2="40"/> 4290 <rect x="25" y="25" width="30" height="30" stroke-dasharray="3 3"/> 4291 </svg> 4292 </div> 4293 <div class="bp-card__badge" style="background:rgba(255,180,0,0.1); border-color:rgba(255,180,0,0.3); color:#ffb400;">
4294 <span class="bp-card__badge-dot" style="background:#ffb400"></span> 4295 Brand 4296 </div> 4297 <div class="bp-card__steps">3 steps</div> 4298 <div class="bp-card__action" style="background:#ffb400"> 4299 <svg width="20" height="20" viewBox="0 0 20 20" fill="none"> 4300 <path d="M5 5L15 10L5 15V5Z" fill="#0a0a0a"/> 4301 </svg> 4302 </div> 4303 </div> 4304 <div class="bp-card__info"> 4305 <p class="bp-card__category" data-i18n="bp5_category">Branding</p> 4306 <h3 class="bp-card__name" data-i18n="bp5_name">Brand Promo Reel</h3> 4307 <p class="bp-card__desc" data-i18n="bp5_desc">Polished promotional videos for product launches, campaigns, and social ads â consistent brand visual language throughout.</p> 4308 <div class="bp-card__tags"> 4309 <span class="bp-card__tag">16:9 + 9:16</span> 4310 <span class="bp-card__tag">Style preset</span> 4311 <span class="bp-card__tag">Export-ready</span> 4312 </div> 4313 <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="bp-card__use"> 4314 Use this Blueprint 4315 <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> 4316 <path d="M2 6h8M6 2l4 4-4 4"/> 4317 </svg> 4318 </a> 4319 </div> 4320 </div> 4321 4322 <!-- Blueprint 6: Experimental / Abstract --> 4323 <div class="bp-card bp-card--6" data-bp> 4324 <div class="bp-card__visual"> 4325 <div class="bp-card__bg"></div> 4326 <div class="bp-card__mesh"></div> 4327 <div class="bp-card__crosshair" aria-hidden="true"> 4328 <svg viewBox="0 0 80 80" fill="none" stroke="#00ffb4" stroke-width="0.8"> 4329 <circle cx="40" cy="40" r="30"/> 4330 <line x1="40" y1="5" x2="40" y2="15"/> 4331 <line x1="40" y1="65" x2="40" y2="75"/> 4332 <line x1="5" y1="40" x2="15" y2="40"/> 4333 <line x1="65" y1="40" x2="75" y2="40"/> 4334 <rect x="25" y="25" width="30" height="30" stroke-dasharray="3 3"/> 4335 </svg> 4336 </div> 4337 <div class="bp-card__badge" style="background:rgba(0,255,180,0.08); border-color:rgba(0,255,180,0.25); color:#00ffb4;"> 4338 <span class="bp-card__badge-dot" style="background:#00ffb4"></span> 4339 Experimental 4340 </div> 4341 <div class="bp-card__steps">2 steps</div> 4342 <div class="bp-card__action" style="background:#00ffb4"> 4343 <svg width="20" height="20" viewBox="0 0 20 20" fill="none"> 4344 <path d="M5 5L15 10L5 15V5Z" fill="#0a0a0a"/> 4345 </svg> 4346 </div> 4347 </div> 4348 <div class="bp-card__info"> 4349 <p class="bp-card__category" data-i18n="bp6_category">Abstract Art</p> 4350 <h3 class="bp-card__name" data-i18n="bp6_name">Abstract Motion Art</h3> 4351 <p class="bp-card__desc" data-i18n="bp6_desc">Surreal textures, liquid motion, and experimental visual compositions â for creative projects with no limits and no rules.</p> 4352 <div class="bp-card__tags"> 4353 <span class="bp-card__tag">Abstract</span> 4354 <span class="bp-card__tag">Experimental</span> 4355 <span class="bp-card__tag">Any ratio</span> 4356 </div> 4357 <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="bp-card__use"> 4358 Use this Blueprint 4359 <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5"> 4360 <path d="M2 6h8M6 2l4 4-4 4"/> 4361 </svg> 4362 </a> 4363 </div> 4364 </div> 4365 4366 </div><!-- /.blueprints__grid --> 4367 4368 <!-- Marquee --> 4369 <div class="blueprints__marquee" aria-hidden="true"> 4370 <div class="blueprints__marquee-track"> 4371 <div class="blueprints__marquee-item"> 4372 <span class="blueprints__marquee-word" data-i18n="marquee_blueprints">Blueprints</span> 4373 <span class="blueprints__marquee-sep">â¦</span>
4374 <span class="blueprints__marquee-word blueprints__marquee-word--accent" data-i18n="marquee_creation">Creation</span> 4375 <span class="blueprints__marquee-sep">â¦</span> 4376 <span class="blueprints__marquee-word" data-i18n="marquee_ai_video">AI Video</span> 4377 <span class="blueprints__marquee-sep">â¦</span> 4378 <span class="blueprints__marquee-word blueprints__marquee-word--accent" data-i18n="marquee_motion">Motion</span> 4379 <span class="blueprints__marquee-sep">â¦</span> 4380 <span class="blueprints__marquee-word" data-i18n="marquee_cinematic">Cinematic</span> 4381 <span class="blueprints__marquee-sep">â¦</span> 4382 <span class="blueprints__marquee-word blueprints__marquee-word--accent" data-i18n="marquee_generate">Generate</span> 4383 <span class="blueprints__marquee-sep">â¦</span> 4384 </div> 4385 <!-- Duplicate for seamless loop --> 4386 <div class="blueprints__marquee-item"> 4387 <span class="blueprints__marquee-word" data-i18n="marquee_blueprints">Blueprints</span> 4388 <span class="blueprints__marquee-sep">â¦</span> 4389 <span class="blueprints__marquee-word blueprints__marquee-word--accent" data-i18n="marquee_creation">Creation</span> 4390 <span class="blueprints__marquee-sep">â¦</span> 4391 <span class="blueprints__marquee-word" data-i18n="marquee_ai_video">AI Video</span> 4392 <span class="blueprints__marquee-sep">â¦</span> 4393 <span class="blueprints__marquee-word blueprints__marquee-word--accent" data-i18n="marquee_motion">Motion</span> 4394 <span class="blueprints__marquee-sep">â¦</span> 4395 <span class="blueprints__marquee-word" data-i18n="marquee_cinematic">Cinematic</span> 4396 <span class="blueprints__marquee-sep">â¦</span> 4397 <span class="blueprints__marquee-word blueprints__marquee-word--accent" data-i18n="marquee_generate">Generate</span> 4398 <span class="blueprints__marquee-sep">â¦</span> 4399 </div> 4400 </div> 4401 </div> 4402 4403 <!-- Bottom CTA bar --> 4404 <div class="blueprints__cta"> 4405 <div class="blueprints__cta-left"> 4406 <div class="blueprints__cta-count" data-i18n="bp_count">20+ Blueprints</div> 4407 <p class="blueprints__cta-text"> 4408 <span data-i18n="bp_growing"><strong>and growing.</strong> New blueprints added every week for emerging video formats and use cases.</span> 4409 </p> 4410 </div> 4411 <div class="blueprints__cta-actions"> 4412 <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn btn--ghost" data-i18n="bp_view_all">View All</a> 4413 <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn btn--primary" data-i18n="bp_start">Start with a Blueprint</a> 4414 </div> 4415 </div> 4416 4417 </div> 4418 </section> 4419 4420
4420<script type="6c18279ba6d93a40249c492f-text/javascript"> 4421 // Blueprint cards scroll reveal 4422 const bpCards = document.querySelectorAll('[data-bp]'); 4423 const bpObs = new IntersectionObserver(entries => { 4424 entries.forEach(e => { 4425 if (e.isIntersecting) { 4426 e.target.classList.add('in-view'); 4427 bpObs.unobserve(e.target); 4428 } 4429 }); 4430 }, { threshold: 0.12 }); 4431 bpCards.forEach(c => bpObs.observe(c)); 4432 </script>
4432 4433 4434 <!-- â¼â¼â¼ SECTION 7 â COMMUNITY GALLERY / VIDEO SHOWCASE â¼â¼â¼ --> 4435 <style> 4436 4437 /* âââââââââââââââââââââââââââââââââââââââââââ 4438 GALLERY SECTION 4439 âââââââââââââââââââââââââââââââââââââââââââ */ 4440 .gallery { 4441 position: relative; 4442 padding-block: var(--section-pad); 4443 overflow: hidden; 4444 } 4445 4446 /* Radial spotlight */ 4447 .gallery__spotlight { 4448 position: absolute; 4449 top: 0; left: 50%; 4450 transform: translateX(-50%); 4451 width: 900px; 4452 height: 500px; 4453 background: radial-gradient(ellipse at top, rgba(212,255,0,0.06) 0%, transparent 65%); 4454 pointer-events: none; 4455 } 4456 4457 /* ââ Header ââ */ 4458 .gallery__header { 4459 text-align: center; 4460 margin-bottom: clamp(3rem, 6vw, 5rem); 4461 position: relative; 4462 z-index: 2; 4463 } 4464 4465 .gallery__label { 4466 display: inline-flex; 4467 align-items: center; 4468 gap: 0.6rem; 4469 font-family: var(--font-mono); 4470 font-size: var(--text-xs); 4471 color: var(--c-accent); 4472 text-transform: uppercase; 4473 letter-spacing: 0.14em; 4474 margin-bottom: 1.25rem; 4475 } 4476 4477 .gallery__label-line { 4478 width: 32px; height: 1px; 4479 background: var(--c-accent); 4480 opacity: 0.5; 4481 } 4482 4483 .gallery__title { 4484 font-family: var(--font-display); 4485 font-size: clamp(2.8rem, 6vw, 5.5rem); 4486 line-height: 0.92; 4487 text-transform: uppercase; 4488 color: var(--c-white); 4489 letter-spacing: 0.02em; 4490 margin-bottom: 1.25rem; 4491 } 4492 4493 .gallery__title em { 4494 font-style: normal; 4495 color: var(--c-accent); 4496 } 4497 4498 .gallery__subtitle { 4499 font-size: var(--text-lg); 4500 color: var(--c-text-muted); 4501 max-width: 500px; 4502 margin-inline: auto; 4503 line-height: 1.6; 4504 } 4505 4506 /* ââ FILTER PILLS ââ */ 4507 .gallery__filters { 4508 display: flex; 4509 justify-content: center; 4510 gap: 0.5rem; 4511 margin-bottom: 2.5rem; 4512 flex-wrap: wrap; 4513 position: relative; 4514 z-index: 2; 4515 } 4516 4517 .gallery__filter { 4518 padding: 0.45rem 1.1rem; 4519 border-radius: var(--r-full); 4520 border: 1px solid var(--c-border); 4521 font-size: var(--text-xs); 4522 font-weight: 500; 4523 color: var(--c-text-muted); 4524 background: transparent; 4525 letter-spacing: 0.04em; 4526 cursor: pointer; 4527 transition: all var(--t-base) var(--ease); 4528 } 4529 4530 .gallery__filter:hover { 4531 border-color: var(--c-border-hi); 4532 color: var(--c-white); 4533 } 4534 4535 .gallery__filter.is-active { 4536 background: var(--c-accent); 4537 border-color: var(--c-accent); 4538 color: var(--c-black); 4539 font-weight: 700; 4540 } 4541 4542 /* ââ MASONRY GRID ââ */ 4543 .gallery__grid { 4544 position: relative; 4545 z-index: 2; 4546 columns: 4; 4547 column-gap: 0.85rem; 4548 } 4549 4550 .gallery__item { 4551 break-inside: avoid; 4552 margin-bottom: 0.85rem; 4553 position: relative; 4554 border-radius: var(--r-lg); 4555 overflow: hidden; 4556 border: 1px solid var(--c-border); 4557 cursor: pointer; 4558 opacity: 0; 4559 transform: translateY(20px) scale(0.97); 4560 transition: opacity 0.55s var(--ease), transform 0.55s var(--ease), 4561 border-color var(--t-base), box-shadow var(--t-slow); 4562 } 4563 4564 .gallery__item.in-view { 4565 opacity: 1; 4566 transform: translateY(0) scale(1); 4567 } 4568 4569 /* Staggered delays */ 4570 .gallery__item:nth-child(1) { transition-delay: 0.03s; } 4571 .gallery__item:nth-child(2) { transition-delay: 0.07s; } 4572 .gallery__item:nth-child(3) { transition-delay: 0.11s; } 4573 .gallery__item:nth-child(4) { transition-delay: 0.15s; } 4574 .gallery__item:nth-child(5) { transition-delay: 0.05s; } 4575 .gallery__item:nth-child(6) { transition-delay: 0.09s; } 4576 .gallery__item:nth-child(7) { transition-delay: 0.13s; } 4577 .gallery__item:nth-child(8) { transition-delay: 0.17s; } 4578 .gallery__item:nth-child(9) { transition-delay: 0.06s; } 4579 .gallery__item:nth-child(10) { transition-delay: 0.10s; } 4580 .gallery__item:nth-child(11) { transition-delay: 0.14s; } 4581 .gallery__item:nth-child(12) { transition-delay: 0.18s; } 4582 4583 .gallery__item:hover { 4584 border-color: var(--c-border-hi); 4585 box-shadow: 0 12px 40px rgba(0,0,0,0.7); 4586 z-index: 3; 4587 } 4588 4589 /* Video thumb */ 4590 .gallery__thumb { 4591 position: relative; 4592 width: 100%; 4593 display: block; 4594 background: var(--c-bg-3); 4595 } 4596 4597 /* Fake video gradient bg â each unique color */ 4598 .gallery__thumb-bg { 4599 width: 100%; 4600 display: block; 4601 transition: transform 0.6s var(--ease); 4602 } 4603 4604 .gallery__item:hover .gallery__thumb-bg { 4605 transform: scale(1.05); 4606 } 4607 4608 /* Overlay on hover */ 4609 .gallery__overlay { 4610 position: absolute; 4611 inset: 0; 4612 background: rgba(0,0,0,0); 4613 display: flex; 4614 flex-direction: column; 4615 align-items: center; 4616 justify-content: center; 4617 gap: 0.5rem; 4618 transition: background var(--t-slow) var(--ease); 4619 } 4620 4621 .gallery__item:hover .gallery__overlay { background: rgba(0,0,0,0.55); } 4622 4623 /* Play button in overlay */ 4624 .gallery__play { 4625 width: 44px; 4626 height: 44px; 4627 background: var(--c-accent); 4628 border-radius: 50%; 4629 display: grid; 4630 place-items: center; 4631 opacity: 0; 4632 transform: scale(0.7); 4633 transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); 4634 } 4635 4636 .gallery__item:hover .gallery__play { 4637 opacity: 1; 4638 transform: scale(1); 4639 } 4640 4641 .gallery__play svg { width: 16px; height: 16px; } 4642 4643 /* Duration badge */ 4644 .gallery__duration { 4645 position: absolute; 4646 bottom: 0.6rem; 4647 right: 0.6rem; 4648 font-family: var(--font-mono); 4649 font-size: 0.6rem; 4650 color: rgba(255,255,255,0.7); 4651 background: rgba(0,0,0,0.6); 4652 padding: 0.15rem 0.45rem; 4653 border-radius: var(--r-sm); 4654 backdrop-filter: blur(4px); 4655 } 4656 4657 /* Model tag top-left */ 4658 .gallery__model-tag { 4659 position: absolute; 4660 top: 0.6rem; 4661 left: 0.6rem; 4662 font-family: var(--font-mono); 4663 font-size: 0.58rem; 4664 text-transform: uppercase; 4665 letter-spacing: 0.08em; 4666 padding: 0.18rem 0.55rem; 4667 border-radius: var(--r-full); 4668 backdrop-filter: blur(8px); 4669 border: 1px solid; 4670 opacity: 0; 4671 transform: translateY(-4px); 4672 transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); 4673 } 4674 4675 .gallery__item:hover .gallery__model-tag { 4676 opacity: 1; 4677 transform: translateY(0); 4678 } 4679 4680 /* Card info below thumb */ 4681 .gallery__info { 4682 padding: 0.75rem 0.9rem 0.85rem; 4683 background: var(--c-surface); 4684 } 4685 4686 .gallery__prompt { 4687 font-family: var(--font-mono); 4688 font-size: 0.62rem; 4689 color: var(--c-text-muted); 4690 line-height: 1.5; 4691 margin-bottom: 0.5rem; 4692 display: -webkit-box; 4693 -webkit-line-clamp: 2; 4694 -webkit-box-orient: vertical; 4695 overflow: hidden; 4696 } 4697 4698 .gallery__meta { 4699 display: flex; 4700 align-items: center; 4701 justify-content: space-between; 4702 gap: 0.5rem; 4703 } 4704 4705 .gallery__creator { 4706 display: flex; 4707 align-items: center; 4708 gap: 0.4rem; 4709 font-size: var(--text-xs); 4710 color: var(--c-text-dim); 4711 } 4712 4713 .gallery__creator-avatar { 4714 width: 18px; 4715 height: 18px; 4716 border-radius: 50%; 4717 display: grid; 4718 place-items: center; 4719 font-size: 0.5rem; 4720 font-weight: 700; 4721 flex-shrink: 0; 4722 } 4723 4724 .gallery__likes { 4725 display: flex; 4726 align-items: center; 4727 gap: 0.3rem; 4728 font-size: var(--text-xs); 4729 color: var(--c-text-dim); 4730 transition: color var(--t-fast); 4731 } 4732 4733 .gallery__likes:hover { color: #ff4d6d; } 4734 .gallery__likes svg { width: 11px; height: 11px; } 4735 4736 /* ââ LIVE COUNT BAR ââ */ 4737 .gallery__live-bar { 4738 display: flex; 4739 align-items: center; 4740 justify-content: center; 4741 gap: 2.5rem; 4742 margin-top: 3rem; 4743 padding: 1.5rem 2rem; 4744 background: rgba(255,255,255,0.02); 4745 border: 1px solid var(--c-border);
4746 border-radius: var(--r-xl); 4747 flex-wrap: wrap; 4748 position: relative; 4749 z-index: 2; 4750 } 4751 4752 .gallery__stat { 4753 display: flex; 4754 flex-direction: column; 4755 align-items: center; 4756 gap: 0.2rem; 4757 } 4758 4759 .gallery__stat-value { 4760 font-family: var(--font-display); 4761 font-size: clamp(1.5rem, 3vw, 2.2rem); 4762 color: var(--c-white); 4763 line-height: 1; 4764 letter-spacing: 0.04em; 4765 } 4766 4767 .gallery__stat-value span { color: var(--c-accent); } 4768 4769 .gallery__stat-label { 4770 font-family: var(--font-mono); 4771 font-size: 0.62rem; 4772 color: var(--c-text-dim); 4773 text-transform: uppercase; 4774 letter-spacing: 0.1em; 4775 } 4776 4777 .gallery__stat-sep { 4778 width: 1px; 4779 height: 40px; 4780 background: var(--c-border); 4781 } 4782 4783 /* Live indicator */ 4784 .gallery__live-badge { 4785 display: flex; 4786 align-items: center; 4787 gap: 0.5rem; 4788 padding: 0.35rem 0.85rem; 4789 background: rgba(255,77,0,0.1); 4790 border: 1px solid rgba(255,77,0,0.3); 4791 border-radius: var(--r-full); 4792 font-family: var(--font-mono); 4793 font-size: 0.62rem; 4794 color: var(--c-accent-2); 4795 text-transform: uppercase; 4796 letter-spacing: 0.08em; 4797 } 4798 4799 .gallery__live-dot { 4800 width: 6px; 4801 height: 6px; 4802 background: var(--c-accent-2); 4803 border-radius: 50%; 4804 animation: pulse 1.5s ease-in-out infinite; 4805 } 4806 4807 /* ââ LOAD MORE ââ */ 4808 .gallery__load-more { 4809 display: flex; 4810 justify-content: center; 4811 margin-top: 2.5rem; 4812 position: relative; 4813 z-index: 2; 4814 } 4815 4816 .btn--load { 4817 display: inline-flex; 4818 align-items: center; 4819 gap: 0.6rem; 4820 padding: 0.85rem 2rem; 4821 border: 1px solid var(--c-border-hi); 4822 border-radius: var(--r-full); 4823 font-size: var(--text-sm); 4824 font-weight: 600; 4825 color: var(--c-text-muted); 4826 transition: all var(--t-base) var(--ease); 4827 letter-spacing: 0.03em; 4828 } 4829 4830 .btn--load:hover { 4831 border-color: var(--c-accent); 4832 color: var(--c-accent); 4833 background: rgba(212,255,0,0.04); 4834 box-shadow: 0 0 24px rgba(212,255,0,0.1); 4835 } 4836 4837 .btn--load svg { width: 16px; height: 16px; transition: transform var(--t-base) var(--ease); } 4838 .btn--load:hover svg { transform: translateY(3px); } 4839 4840 /* Responsive */ 4841 @media (max-width: 1100px) { .gallery__grid { columns: 3; } } 4842 @media (max-width: 768px) { .gallery__grid { columns: 2; } } 4843 @media (max-width: 480px) { .gallery__grid { columns: 1; } } 4844 4845 </style> 4846 4847 <section class="gallery" id="gallery" aria-label="Community Gallery"> 4848 <div class="gallery__spotlight" aria-hidden="true"></div> 4849 4850 <div class="container"> 4851 4852 <!-- Header --> 4853 <div class="gallery__header"> 4854 <div class="gallery__label"> 4855 <span class="gallery__label-line"></span> 4856 <span data-i18n="gallery_section_label">Community Gallery</span> 4857 <span class="gallery__label-line"></span> 4858 </div> 4859 <h2 class="gallery__title"><span data-i18n="gallery_title_line1">Made With</span><br><em data-i18n="gallery_title_line2">Pixwith AI</em></h2> 4860 <p class="gallery__subtitle" data-i18n="gallery_subtitle">Real videos from real creators â every clip made with AI, ready to inspire your next generation.</p> 4861 </div> 4862 4863 <!-- Filter pills --> 4864 <div class="gallery__filters" role="group" aria-label="Filter gallery"> 4865 <button class="gallery__filter is-active" data-gfilter="all" data-i18n="gallery_filter_all">All</button> 4866 <button class="gallery__filter" data-gfilter="cinematic" data-i18n="gallery_filter_cinematic">Cinematic</button> 4867 <button class="gallery__filter" data-gfilter="anime" data-i18n="gallery_filter_anime">Anime</button> 4868 <button class="gallery__filter" data-gfilter="product" data-i18n="gallery_filter_product">Product</button> 4869 <button class="gallery__filter" data-gfilter="social" data-i18n="gallery_filter_social">Social</button> 4870 <button class="gallery__filter" data-gfilter="abstract" data-i18n="gallery_filter_abstract">Abstract</button> 4871 </div> 4872 4873 <!-- Masonry grid --> 4874 <div class="gallery__grid" id="gallery-grid"> 4875 4876 <!-- Item 1 â tall, cinematic --> 4877 <div class="gallery__item" data-gitem data-cat="cinematic"> 4878 <div class="gallery__thumb"> 4879 <div class="gallery__thumb-bg" style="padding-top:140%; background:linear-gradient(160deg,#0d1a0a 0%,#1a2d0a 35%,#0a150a 70%,#050d05 100%);"> 4880 <!-- Visual content: abstract shapes --> 4881 <svg style="position:absolute;inset:0;width:100%;
4881height:100%" viewBox="0 0 200 280" preserveAspectRatio="xMidYMid slice" fill="none"> 4882 <circle cx="100" cy="100" r="80" fill="rgba(212,255,0,0.06)"/> 4883 <circle cx="60" cy="180" r="50" fill="rgba(212,255,0,0.04)"/> 4884 <line x1="0" y1="140" x2="200" y2="140" stroke="rgba(212,255,0,0.08)" stroke-width="0.5"/> 4885 <line x1="100" y1="0" x2="100" y2="280" stroke="rgba(212,255,0,0.08)" stroke-width="0.5"/> 4886 <rect x="60" y="60" width="80" height="80" stroke="rgba(212,255,0,0.12)" stroke-width="0.5" fill="none" transform="rotate(15,100,100)"/> 4887 </svg> 4888 </div> 4889 <div class="gallery__overlay"> 4890 <div class="gallery__play"> 4891 <svg viewBox="0 0 16 16" fill="none"><path d="M4 3.5L12 8L4 12.5V3.5Z" fill="#0a0a0a"/></svg> 4892 </div> 4893 </div> 4894 <span class="gallery__model-tag" style="background:rgba(212,255,0,0.12);border-color:rgba(212,255,0,0.3);color:#d4ff00;">Cinematic</span> 4895 <span class="gallery__duration">0:07</span> 4896 </div> 4897 <div class="gallery__info"> 4898 <p class="gallery__prompt" data-i18n="gallery_prompt_1">"Rain-soaked city alley, slow dolly push-in, neon reflections, fog"</p> 4899 <div class="gallery__meta"> 4900 <div class="gallery__creator"> 4901 <div class="gallery__creator-avatar" style="background:linear-gradient(135deg,#1e3a2f,#0a2018)">AK</div> 4902 @alexkim 4903 </div> 4904 <button class="gallery__likes"> 4905 <svg viewBox="0 0 12 12" fill="currentColor"><path d="M6 10.5C6 10.5 1 7.5 1 4.5a2.5 2.5 0 015-0 2.5 2.5 0 015 0c0 3-5 6-5 6z"/></svg> 4906 2.4k 4907 </button> 4908 </div> 4909 </div> 4910 </div> 4911 4912 <!-- Item 2 â short, anime --> 4913 <div class="gallery__item" data-gitem data-cat="anime"> 4914 <div class="gallery__thumb"> 4915 <div class="gallery__thumb-bg" style="padding-top:75%; background:linear-gradient(160deg,#0a0d1a 0%,#0f1433 40%,#060810 100%);"> 4916 <svg style="position:absolute;inset:0;width:100%;height:100%" viewBox="0 0 200 150" preserveAspectRatio="xMidYMid slice" fill="none"> 4917 <circle cx="150" cy="40" r="60" fill="rgba(167,139,250,0.08)"/> 4918 <circle cx="40" cy="110" r="40" fill="rgba(0,194,255,0.06)"/> 4919 <ellipse cx="100" cy="75" rx="70" ry="40" stroke="rgba(167,139,250,0.1)" stroke-width="0.5" fill="none"/> 4920 </svg> 4921 </div> 4922 <div class="gallery__overlay"> 4923 <div class="gallery__play"><svg viewBox="0 0 16 16" fill="none"><path d="M4 3.5L12 8L4 12.5V3.5Z" fill="#0a0a0a"/></svg></div> 4924 </div> 4925 <span class="gallery__model-tag" style="background:rgba(167,139,250,0.12);border-color:rgba(167,139,250,0.3);color:#a78bfa;">Anime</span> 4926 <span class="gallery__duration">0:05</span> 4927 </div> 4928 <div class="gallery__info"> 4929 <p class="gallery__prompt" data-i18n="gallery_prompt_2">"Floating sky city, soft anime style, gentle camera drift, dusk light"</p> 4930 <div class="gallery__meta"> 4931 <div class="gallery__creator"> 4932 <div class="gallery__creator-avatar" style="background:linear-gradient(135deg,#1a0a3a,#0a0520)">MR</div> 4933 @mirarui 4934 </div> 4935 <button class="gallery__likes"> 4936 <svg viewBox="0 0 12 12" fill="currentColor"><path d="M6 10.5C6 10.5 1 7.5 1 4.5a2.5 2.5 0 015-0 2.5 2.5 0 015 0c0 3-5 6-5 6z"/></svg> 4937 1.8k 4938 </button> 4939 </div> 4940 </div> 4941 </div> 4942 4943 <!-- Item 3 â tall, product --> 4944 <div class="gallery__item" data-gitem data-cat="product"> 4945 <div class="gallery__thumb"> 4946 <div class="gallery__thumb-bg" style="padding-top:125%; background:linear-gradient(160deg,#1a1200 0%,#2a1e00 40%,#0d0900 100%);"> 4947 <svg style="position:absolute;inset:0;width:100%;
4947height:100%" viewBox="0 0 200 250" preserveAspectRatio="xMidYMid slice" fill="none"> 4948 <rect x="50" y="50" width="100" height="150" rx="8" stroke="rgba(255,180,0,0.15)" stroke-width="0.8" fill="rgba(255,180,0,0.03)"/> 4949 <circle cx="100" cy="125" r="35" fill="rgba(255,180,0,0.08)"/> 4950 <line x1="50" y1="125" x2="150" y2="125" stroke="rgba(255,180,0,0.1)" stroke-width="0.5"/> 4951 </svg> 4952 </div> 4953 <div class="gallery__overlay"> 4954 <div class="gallery__play"><svg viewBox="0 0 16 16" fill="none"><path d="M4 3.5L12 8L4 12.5V3.5Z" fill="#0a0a0a"/></svg></div> 4955 </div> 4956 <span class="gallery__model-tag" style="background:rgba(255,180,0,0.12);border-color:rgba(255,180,0,0.3);color:#ffb400;">Product</span> 4957 <span class="gallery__duration">0:06</span> 4958 </div> 4959 <div class="gallery__info"> 4960 <p class="gallery__prompt" data-i18n="gallery_prompt_3">"Minimal perfume bottle, rotating turntable, studio light sweep, 9:16"</p> 4961 <div class="gallery__meta"> 4962 <div class="gallery__creator"> 4963 <div class="gallery__creator-avatar" style="background:linear-gradient(135deg,#3a2a00,#1a1200)">SL</div> 4964 @saralens 4965 </div> 4966 <button class="gallery__likes"> 4967 <svg viewBox="0 0 12 12" fill="currentColor"><path d="M6 10.5C6 10.5 1 7.5 1 4.5a2.5 2.5 0 015-0 2.5 2.5 0 015 0c0 3-5 6-5 6z"/></svg> 4968 3.1k 4969 </button> 4970 </div> 4971 </div> 4972 </div> 4973 4974 <!-- Item 4 â short, abstract --> 4975 <div class="gallery__item" data-gitem data-cat="abstract"> 4976 <div class="gallery__thumb"> 4977 <div class="gallery__thumb-bg" style="padding-top:80%; background:linear-gradient(160deg,#0a1a18 0%,#0a2820 40%,#050e0c 100%);"> 4978 <svg style="position:absolute;inset:0;width:100%;height:100%" viewBox="0 0 200 160" preserveAspectRatio="xMidYMid slice" fill="none"> 4979 <circle cx="100" cy="80" r="60" stroke="rgba(0,255,180,0.1)" stroke-width="0.5"/> 4980 <circle cx="100" cy="80" r="40" stroke="rgba(0,255,180,0.08)" stroke-width="0.5"/> 4981 <circle cx="100" cy="80" r="20" fill="rgba(0,255,180,0.06)"/> 4982 <path d="M40 80 Q100 20 160 80 Q100 140 40 80Z" stroke="rgba(0,255,180,0.1)" stroke-width="0.5" fill="none"/> 4983 </svg> 4984 </div> 4985 <div class="gallery__overlay"> 4986 <div class="gallery__play"><svg viewBox="0 0 16 16" fill="none"><path d="M4 3.5L12 8L4 12.5V3.5Z" fill="#0a0a0a"/></svg></div> 4987 </div> 4988 <span class="gallery__model-tag" style="background:rgba(0,255,180,0.1);border-color:rgba(0,255,180,0.25);color:#00ffb4;">Abstract</span> 4989 <span class="gallery__duration">0:04</span> 4990 </div> 4991 <div class="gallery__info"> 4992 <p class="gallery__prompt" data-i18n="gallery_prompt_4">"Liquid metal morphing, abstract surreal motion, deep teal, looping"</p> 4993 <div class="gallery__meta"> 4994 <div class="gallery__creator"> 4995 <div class="gallery__creator-avatar" style="background:linear-gradient(135deg,#003a2a,#001a12)">DV</div> 4996 @devoid 4997 </div> 4998 <button class="gallery__likes"> 4999 <svg viewBox="0 0 12 12" fill="currentColor"><path d="M6 10.5C6 10.5 1 7.5 1 4.5a2.5 2.5 0 015-0 2.5 2.5 0 015 0c0 3-5 6-5 6z"/></svg> 5000 987 5001 </button> 5002 </div> 5003 </div> 5004 </div> 5005 5006 <!-- Item 5 â social, medium --> 5007 <div class="gallery__item" data-gitem data-cat="social"> 5008 <div class="gallery__thumb"> 5009 <div class="gallery__thumb-bg" style="padding-top:170%; background:linear-gradient(160deg,#1a0a00 0%,#2d1400 40%,#0d0500 100%);"> 5010 <svg style="position:absolute;inset:0;width:100%;height:100%" viewBox="0 0 200 340" preserveAspectRatio="xMidYMid slice" fill="none"> 5011 <circle cx="100" cy="170" r="90" fill="rgba(255,77,0,0.05)"/> 5012 <circle cx="100" cy="170" r="60" stroke="rgba(255,77,0,0.1)" stroke-width="0.5" fill="none"/> 5013 <path d="M100 90 L155 200 L45 200 Z" stroke="rgba(255,77,0,0.12)" stroke-width="0.8" fill="rgba(255,77,0,0.04)"/> 5014 </svg> 5015 </div> 5016 <div class="gallery__overlay"> 5017 <div class="gallery__play"><svg viewBox="0 0 16 16" fill="none"><path d="M4 3.5L12 8L4 12.5V3.5Z" fill="#0a0a0a"/></svg></div> 5018 </div>
5019 <span class="gallery__model-tag" style="background:rgba(255,77,0,0.12);border-color:rgba(255,77,0,0.3);color:#ff4d00;">Social 9:16</span> 5020 <span class="gallery__duration">0:06</span> 5021 </div> 5022 <div class="gallery__info"> 5023 <p class="gallery__prompt" data-i18n="gallery_prompt_5">"Fast energy drink ad, punchy cuts, fire particles, vertical format"</p> 5024 <div class="gallery__meta"> 5025 <div class="gallery__creator"> 5026 <div class="gallery__creator-avatar" style="background:linear-gradient(135deg,#3a0a00,#1a0500)">JX</div> 5027 @jaxon_v 5028 </div> 5029 <button class="gallery__likes"> 5030 <svg viewBox="0 0 12 12" fill="currentColor"><path d="M6 10.5C6 10.5 1 7.5 1 4.5a2.5 2.5 0 015-0 2.5 2.5 0 015 0c0 3-5 6-5 6z"/></svg> 5031 5.2k 5032 </button> 5033 </div> 5034 </div> 5035 </div> 5036 5037 <!-- Item 6 â cinematic landscape --> 5038 <div class="gallery__item" data-gitem data-cat="cinematic"> 5039 <div class="gallery__thumb"> 5040 <div class="gallery__thumb-bg" style="padding-top:62%; background:linear-gradient(160deg,#050812 0%,#0a1020 40%,#030508 100%);"> 5041 <svg style="position:absolute;inset:0;width:100%;height:100%" viewBox="0 0 200 124" preserveAspectRatio="xMidYMid slice" fill="none"> 5042 <ellipse cx="100" cy="80" rx="120" ry="50" fill="rgba(0,194,255,0.04)"/> 5043 <circle cx="160" cy="30" r="25" fill="rgba(0,194,255,0.08)"/> 5044 <path d="M0 90 Q50 60 100 80 Q150 100 200 70" stroke="rgba(0,194,255,0.12)" stroke-width="0.8" fill="none"/> 5045 </svg> 5046 </div> 5047 <div class="gallery__overlay"> 5048 <div class="gallery__play"><svg viewBox="0 0 16 16" fill="none"><path d="M4 3.5L12 8L4 12.5V3.5Z" fill="#0a0a0a"/></svg></div> 5049 </div> 5050 <span class="gallery__model-tag" style="background:rgba(0,194,255,0.1);border-color:rgba(0,194,255,0.25);color:#00c2ff;">Cinematic</span> 5051 <span class="gallery__duration">0:08</span> 5052 </div> 5053 <div class="gallery__info"> 5054 <p class="gallery__prompt" data-i18n="gallery_prompt_6">"Deep space nebula, slow drift, ultra-wide cinematic, 21:9 ratio"</p> 5055 <div class="gallery__meta"> 5056 <div class="gallery__creator"> 5057 <div class="gallery__creator-avatar" style="background:linear-gradient(135deg,#001a3a,#000a1a)">NB</div> 5058 @nebulart 5059 </div> 5060 <button class="gallery__likes"> 5061 <svg viewBox="0 0 12 12" fill="currentColor"><path d="M6 10.5C6 10.5 1 7.5 1 4.5a2.5 2.5 0 015-0 2.5 2.5 0 015 0c0 3-5 6-5 6z"/></svg> 5062 4.7k 5063 </button> 5064 </div> 5065 </div> 5066 </div> 5067 5068 <!-- Item 7 â anime tall --> 5069 <div class="gallery__item" data-gitem data-cat="anime"> 5070 <div class="gallery__thumb"> 5071 <div class="gallery__thumb-bg" style="padding-top:115%; background:linear-gradient(160deg,#0f0a1a 0%,#1a0f2a 40%,#070510 100%);"> 5072 <svg style="position:absolute;inset:0;width:100%;height:100%" viewBox="0 0 200 230" preserveAspectRatio="xMidYMid slice" fill="none"> 5073 <path d="M100 20 L180 115 L100 210 L20 115 Z" stroke="rgba(167,139,250,0.12)" stroke-width="0.8" fill="rgba(167,139,250,0.03)"/> 5074 <circle cx="100" cy="115" r="50" fill="rgba(167,139,250,0.05)"/> 5075 <circle cx="100" cy="115" r="25" stroke="rgba(167,139,250,0.15)" stroke-width="0.5" fill="none"/> 5076 </svg> 5077 </div> 5078 <div class="gallery__overlay"> 5079 <div class="gallery__play"><svg viewBox="0 0 16 16" fill="none"><path d="M4 3.5L12 8L4 12.5V3.5Z" fill="#0a0a0a"/></svg></div> 5080 </div> 5081 <span class="gallery__model-tag" style="background:rgba(167,139,250,0.12);border-color:rgba(167,139,250,0.3);color:#a78bfa;">Anime</span> 5082 <span class="gallery__duration">0:05</span> 5083 </div> 5084 <div class="gallery__info"> 5085 <p class="gallery__prompt" data-i18n="gallery_prompt_7">"Magical girl transformation sequence, sakura petals, dramatic zoom"</p> 5086 <div class="gallery__meta"> 5087 <div class="gallery__creator"> 5088 <div class="gallery__creator-avatar" style="background:linear-gradient(135deg,#1a0a3a,#0a0520)">YK</div> 5089 @yukiframe 5090 </div> 5091 <button class="gallery__likes"> 5092 <svg viewBox="0 0 12 12" fill="currentColor"><path d="M6 10.5C6 10.5 1 7.5 1 4.5a2.5 2.5 0 015-0 2.5 2.5 0 015 0c0 3-5 6-5 6z"/></svg> 5093 6.3k 5094 </button> 5095 </div> 5096 </div> 5097 </div> 5098 5099 <!-- Item 8 â product short --> 5100 <div class="gallery__item" data-gitem data-cat="product"> 5101 <div class="gallery__thumb"> 5102 <div class="gallery__thumb-bg" style="padding-top:70%; background:linear-gradient(160deg,#0a0a0a 0%,#141414 50%,#080808 100%);"> 5103 <svg style="position:absolute;inset:0;width:100%;
5103height:100%" viewBox="0 0 200 140" preserveAspectRatio="xMidYMid slice" fill="none"> 5104 <rect x="70" y="30" width="60" height="80" rx="6" stroke="rgba(255,255,255,0.08)" fill="rgba(255,255,255,0.02)"/> 5105 <circle cx="100" cy="70" r="20" stroke="rgba(212,255,0,0.15)" stroke-width="0.8" fill="rgba(212,255,0,0.03)"/> 5106 <path d="M0 70 Q100 40 200 70" stroke="rgba(212,255,0,0.08)" stroke-width="0.5" fill="none"/> 5107 </svg> 5108 </div> 5109 <div class="gallery__overlay"> 5110 <div class="gallery__play"><svg viewBox="0 0 16 16" fill="none"><path d="M4 3.5L12 8L4 12.5V3.5Z" fill="#0a0a0a"/></svg></div> 5111 </div> 5112 <span class="gallery__model-tag" style="background:rgba(212,255,0,0.1);border-color:rgba(212,255,0,0.25);color:#d4ff00;">Product</span> 5113 <span class="gallery__duration">0:04</span> 5114 </div> 5115 <div class="gallery__info"> 5116 <p class="gallery__prompt" data-i18n="gallery_prompt_8">"Sleek wireless earbuds, clean white studio, subtle shadow, 360 spin"</p> 5117 <div class="gallery__meta"> 5118 <div class="gallery__creator"> 5119 <div class="gallery__creator-avatar" style="background:linear-gradient(135deg,#1a1a0a,#0a0a05)">PP</div> 5120 @pixprod 5121 </div> 5122 <button class="gallery__likes"> 5123 <svg viewBox="0 0 12 12" fill="currentColor"><path d="M6 10.5C6 10.5 1 7.5 1 4.5a2.5 2.5 0 015-0 2.5 2.5 0 015 0c0 3-5 6-5 6z"/></svg> 5124 2.9k 5125 </button> 5126 </div> 5127 </div> 5128 </div> 5129 5130 <!-- Item 9 â abstract medium --> 5131 <div class="gallery__item" data-gitem data-cat="abstract"> 5132 <div class="gallery__thumb"> 5133 <div class="gallery__thumb-bg" style="padding-top:100%; background:linear-gradient(160deg,#1a0a12 0%,#2a0a1a 40%,#0d0508 100%);"> 5134 <svg style="position:absolute;inset:0;width:100%;height:100%" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid slice" fill="none"> 5135 <path d="M20 100 Q100 0 180 100 Q100 200 20 100Z" stroke="rgba(255,0,128,0.12)" stroke-width="0.8" fill="rgba(255,0,128,0.04)"/> 5136 <circle cx="100" cy="100" r="45" fill="rgba(255,0,128,0.05)"/> 5137 <circle cx="100" cy="100" r="70" stroke="rgba(255,0,128,0.07)" stroke-width="0.5" fill="none" stroke-dasharray="4 4"/> 5138 </svg> 5139 </div> 5140 <div class="gallery__overlay"> 5141 <div class="gallery__play"><svg viewBox="0 0 16 16" fill="none"><path d="M4 3.5L12 8L4 12.5V3.5Z" fill="#0a0a0a"/></svg></div> 5142 </div> 5143 <span class="gallery__model-tag" style="background:rgba(255,0,128,0.1);border-color:rgba(255,0,128,0.25);color:#ff0080;">Abstract</span> 5144 <span class="gallery__duration">0:06</span> 5145 </div> 5146 <div class="gallery__info"> 5147 <p class="gallery__prompt" data-i18n="gallery_prompt_9">"Neon fluid simulation, magenta bloom, loop-ready, abstract art"</p> 5148 <div class="gallery__meta"> 5149 <div class="gallery__creator"> 5150 <div class="gallery__creator-avatar" style="background:linear-gradient(135deg,#3a001a,#1a000d)">CM</div> 5151 @chromamx 5152 </div> 5153 <button class="gallery__likes"> 5154 <svg viewBox="0 0 12 12" fill="currentColor"><path d="M6 10.5C6 10.5 1 7.5 1 4.5a2.5 2.5 0 015-0 2.5 2.5 0 015 0c0 3-5 6-5 6z"/></svg> 5155 1.4k 5156 </button> 5157 </div> 5158 </div> 5159 </div> 5160 5161 <!-- Item 10 â social square --> 5162 <div class="gallery__item" data-gitem data-cat="social"> 5163 <div class="gallery__thumb"> 5164 <div class="gallery__thumb-bg" style="padding-top:90%; background:linear-gradient(160deg,#121a0a 0%,#1e2a0a 40%,#080d05 100%);"> 5165 <svg style="position:absolute;inset:0;width:100%;height:100%" viewBox="0 0 200 180" preserveAspectRatio="xMidYMid slice" fill="none"> 5166 <polygon points="100,20 180,160 20,160" stroke="rgba(212,255,0,0.12)" stroke-width="0.8" fill="rgba(212,255,0,0.04)"/> 5167 <circle cx="100" cy="110" r="30" fill="rgba(212,255,0,0.05)"/> 5168 </svg> 5169 </div> 5170 <div class="gallery__overlay"> 5171 <div class="gallery__play"><svg viewBox="0 0 16 16" fill="none"><path d="M4 3.5L12 8L4 12.5V3.5Z" fill="#0a0a0a"/></svg></div> 5172 </div>
5173 <span class="gallery__model-tag" style="background:rgba(212,255,0,0.1);border-color:rgba(212,255,0,0.25);color:#d4ff00;">Social 1:1</span> 5174 <span class="gallery__duration">0:05</span> 5175 </div> 5176 <div class="gallery__info"> 5177 <p class="gallery__prompt" data-i18n="gallery_prompt_10">"Nature timelapse, forest sunrise, misty mountains, square crop"</p> 5178 <div class="gallery__meta"> 5179 <div class="gallery__creator"> 5180 <div class="gallery__creator-avatar" style="background:linear-gradient(135deg,#0a1a05,#050d03)">GN</div> 5181 @greennoise 5182 </div> 5183 <button class="gallery__likes"> 5184 <svg viewBox="0 0 12 12" fill="currentColor"><path d="M6 10.5C6 10.5 1 7.5 1 4.5a2.5 2.5 0 015-0 2.5 2.5 0 015 0c0 3-5 6-5 6z"/></svg> 5185 3.8k 5186 </button> 5187 </div> 5188 </div> 5189 </div> 5190 5191 <!-- Item 11 â cinematic medium --> 5192 <div class="gallery__item" data-gitem data-cat="cinematic"> 5193 <div class="gallery__thumb"> 5194 <div class="gallery__thumb-bg" style="padding-top:85%; background:linear-gradient(160deg,#0d0505 0%,#1a0808 40%,#080202 100%);"> 5195 <svg style="position:absolute;inset:0;width:100%;height:100%" viewBox="0 0 200 170" preserveAspectRatio="xMidYMid slice" fill="none"> 5196 <path d="M0 120 Q60 80 100 100 Q140 120 200 70" stroke="rgba(255,77,0,0.12)" stroke-width="0.8" fill="none"/> 5197 <circle cx="80" cy="90" r="40" fill="rgba(255,77,0,0.05)"/> 5198 <circle cx="140" cy="110" r="25" fill="rgba(255,180,0,0.06)"/> 5199 </svg> 5200 </div> 5201 <div class="gallery__overlay"> 5202 <div class="gallery__play"><svg viewBox="0 0 16 16" fill="none"><path d="M4 3.5L12 8L4 12.5V3.5Z" fill="#0a0a0a"/></svg></div> 5203 </div> 5204 <span class="gallery__model-tag" style="background:rgba(255,77,0,0.12);border-color:rgba(255,77,0,0.3);color:#ff4d00;">Cinematic</span> 5205 <span class="gallery__duration">0:09</span> 5206 </div> 5207 <div class="gallery__info"> 5208 <p class="gallery__prompt" data-i18n="gallery_prompt_11">"Desert dunes at golden hour, heat haze ripple, wide orbit shot"</p> 5209 <div class="gallery__meta"> 5210 <div class="gallery__creator"> 5211 <div class="gallery__creator-avatar" style="background:linear-gradient(135deg,#2a0a00,#140500)">TP</div> 5212 @terrapin 5213 </div> 5214 <button class="gallery__likes"> 5215 <svg viewBox="0 0 12 12" fill="currentColor"><path d="M6 10.5C6 10.5 1 7.5 1 4.5a2.5 2.5 0 015-0 2.5 2.5 0 015 0c0 3-5 6-5 6z"/></svg> 5216 7.1k 5217 </button> 5218 </div> 5219 </div> 5220 </div> 5221 5222 <!-- Item 12 â anime short wide --> 5223 <div class="gallery__item" data-gitem data-cat="anime"> 5224 <div class="gallery__thumb"> 5225 <div class="gallery__thumb-bg" style="padding-top:60%; background:linear-gradient(160deg,#0a0f1a 0%,#0a1530 40%,#040810 100%);"> 5226 <svg style="position:absolute;inset:0;width:100%;height:100%" viewBox="0 0 200 120" preserveAspectRatio="xMidYMid slice" fill="none"> 5227 <path d="M0 60 Q50 20 100 60 Q150 100 200 40" stroke="rgba(0,194,255,0.12)" stroke-width="0.8" fill="none"/> 5228 <circle cx="100" cy="60" r="35" fill="rgba(0,194,255,0.05)"/> 5229 <ellipse cx="100" cy="60" rx="80" ry="35" stroke="rgba(0,194,255,0.07)" stroke-width="0.5" fill="none"/> 5230 </svg> 5231 </div> 5232 <div class="gallery__overlay"> 5233 <div class="gallery__play"><svg viewBox="0 0 16 16" fill="none"><path d="M4 3.5L12 8L4 12.5V3.5Z" fill="#0a0a0a"/></svg></div> 5234 </div> 5235 <span class="gallery__model-tag" style="background:rgba(0,194,255,0.1);border-color:rgba(0,194,255,0.25);color:#00c2ff;">Anime</span> 5236 <span class="gallery__duration">0:04</span> 5237 </div> 5238 <div class="gallery__info"> 5239 <p class="gallery__prompt" data-i18n="gallery_prompt_12">"Ocean waves at midnight, anime style, moonlight shimmer, calm pan"</p> 5240 <div class="gallery__meta"> 5241 <div class="gallery__creator"> 5242 <div class="gallery__creator-avatar" style="background:linear-gradient(135deg,#001a2a,#000a14)">WV</div> 5243 @wavevfx 5244 </div> 5245 <button class="gallery__likes"> 5246 <svg viewBox="0 0 12 12" fill="currentColor"><path d="M6 10.5C6 10.5 1 7.5 1 4.5a2.5 2.5 0 015-0 2.5 2.5 0 015 0c0 3-5 6-5 6z"/></svg> 5247 2.2k 5248 </button> 5249 </div> 5250 </div> 5251 </div> 5252 5253 </div><!-- /.gallery__grid --> 5254 5255 <!-- Community stats bar --> 5256 <div class="gallery__live-bar"> 5257 <div class="gallery__live-badge">
5258 <span class="gallery__live-dot"></span> 5259 <span data-i18n="gallery_live_badge">Live</span> 5260 </div> 5261 <div class="gallery__stat"> 5262 <div class="gallery__stat-value">2.4<span>M</span></div> 5263 <div class="gallery__stat-label" data-i18n="gallery_stat_videos_label">Videos Generated</div> 5264 </div> 5265 <div class="gallery__stat-sep"></div> 5266 <div class="gallery__stat"> 5267 <div class="gallery__stat-value">184<span>K</span></div> 5268 <div class="gallery__stat-label" data-i18n="gallery_stat_creators_label">Active Creators</div> 5269 </div> 5270 <div class="gallery__stat-sep"></div> 5271 <div class="gallery__stat"> 5272 <div class="gallery__stat-value">97<span>%</span></div> 5273 <div class="gallery__stat-label" data-i18n="gallery_stat_rating_label">Satisfaction Rate</div> 5274 </div> 5275 <div class="gallery__stat-sep"></div> 5276 <div class="gallery__stat"> 5277 <div class="gallery__stat-value">48<span>+</span></div> 5278 <div class="gallery__stat-label" data-i18n="gallery_stat_countries_label">Countries</div> 5279 </div> 5280 </div> 5281 5282 <!-- Load more --> 5283 <div class="gallery__load-more"> 5284 <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn--load"> 5285 <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"> 5286 <path d="M8 3v10M4 9l4 4 4-4" stroke-linecap="round" stroke-linejoin="round"/> 5287 </svg> 5288 <span data-i18n="gallery_load_more">Load More Videos</span> 5289 </a> 5290 </div> 5291 5292 </div> 5293 </section> 5294 5295
5295<script type="6c18279ba6d93a40249c492f-text/javascript"> 5296 (function () { 5297 // ââ Gallery scroll reveal ââ 5298 const gItems = document.querySelectorAll('[data-gitem]'); 5299 const gObs = new IntersectionObserver(entries => { 5300 entries.forEach(e => { 5301 if (e.isIntersecting) { 5302 e.target.classList.add('in-view'); 5303 gObs.unobserve(e.target); 5304 } 5305 }); 5306 }, { threshold: 0.08 }); 5307 gItems.forEach(i => gObs.observe(i)); 5308 5309 // ââ Filter logic ââ 5310 const filters = document.querySelectorAll('[data-gfilter]'); 5311 filters.forEach(f => { 5312 f.addEventListener('click', () => { 5313 filters.forEach(x => x.classList.remove('is-active')); 5314 f.classList.add('is-active'); 5315 5316 const cat = f.dataset.gfilter; 5317 gItems.forEach(item => { 5318 const match = cat === 'all' || item.dataset.cat === cat; 5319 item.style.transition = 'opacity 0.35s ease, transform 0.35s ease'; 5320 item.style.opacity = match ? '1' : '0.15'; 5321 item.style.transform = match ? 'scale(1)' : 'scale(0.96)'; 5322 item.style.pointerEvents = match ? 'auto' : 'none'; 5323 }); 5324 }); 5325 }); 5326 })(); 5327 </script>
5327 5328 5329 <!-- â¼â¼â¼ SECTION 8 â FAQ ACCORDION â¼â¼â¼ --> 5330 <style> 5331 5332 /* âââââââââââââââââââââââââââââââââââââââââââ 5333 FAQ SECTION 5334 âââââââââââââââââââââââââââââââââââââââââââ */ 5335 .faq { 5336 position: relative; 5337 padding-block: var(--section-pad); 5338 overflow: hidden; 5339 background: var(--c-bg-2); 5340 } 5341 5342 /* Edge fades */ 5343 .faq::before, 5344 .faq::after { 5345 content: ''; 5346 position: absolute; 5347 left: 0; right: 0; height: 100px; 5348 pointer-events: none; z-index: 1; 5349 } 5350 .faq::before { top: 0; background: linear-gradient(to bottom, var(--c-bg), transparent); } 5351 .faq::after { bottom: 0; background: linear-gradient(to top, var(--c-bg), transparent); } 5352 5353 /* Subtle dot-grid bg */ 5354 .faq__dots { 5355 position: absolute; 5356 inset: 0; 5357 background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px); 5358 background-size: 28px 28px; 5359 mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 100%); 5360 pointer-events: none; 5361 } 5362 5363 /* ââ Layout: two-column ââ */ 5364 .faq__inner { 5365 position: relative; 5366 z-index: 2; 5367 display: grid; 5368 grid-template-columns: 1fr 1.6fr; 5369 gap: clamp(3rem, 7vw, 7rem); 5370 align-items: start; 5371 } 5372 5373 /* ââ LEFT â sticky header ââ */ 5374 .faq__aside { 5375 position: sticky; 5376 top: 6rem; 5377 } 5378 5379 .faq__label { 5380 display: inline-flex; 5381 align-items: center; 5382 gap: 0.6rem; 5383 font-family: var(--font-mono); 5384 font-size: var(--text-xs); 5385 color: var(--c-accent-3); 5386 text-transform: uppercase; 5387 letter-spacing: 0.14em; 5388 margin-bottom: 1.25rem; 5389 } 5390 5391 .faq__label-line { 5392 width: 32px; height: 1px; 5393 background: var(--c-accent-3); 5394 opacity: 0.5; 5395 } 5396 5397 .faq__title { 5398 font-family: var(--font-display); 5399 font-size: clamp(2.5rem, 5vw, 4.5rem); 5400 line-height: 0.9; 5401 text-transform: uppercase; 5402 color: var(--c-white); 5403 letter-spacing: 0.02em; 5404 margin-bottom: 1.5rem; 5405 } 5406 5407 .faq__title em { 5408 font-style: normal; 5409 color: var(--c-accent-3); 5410 } 5411 5412 .faq__aside-desc { 5413 font-size: var(--text-base); 5414 color: var(--c-text-muted); 5415 line-height: 1.7; 5416 margin-bottom: 2rem; 5417 } 5418 5419 /* Category filters on left */ 5420 .faq__cats { 5421 display: flex; 5422 flex-direction: column; 5423 gap: 0.4rem; 5424 margin-bottom: 2.5rem; 5425 } 5426 5427 .faq__cat { 5428 display: flex; 5429 align-items: center; 5430 gap: 0.6rem; 5431 padding: 0.55rem 0.85rem; 5432 border-radius: var(--r-md); 5433 font-size: var(--text-sm); 5434 color: var(--c-text-dim); 5435 cursor: pointer; 5436 transition: all var(--t-fast) var(--ease); 5437 border: 1px solid transparent; 5438 } 5439 5440 .faq__cat-dot { 5441 width: 6px; height: 6px; 5442 border-radius: 50%; 5443 flex-shrink: 0; 5444 transition: all var(--t-base) var(--ease); 5445 } 5446 5447 .faq__cat:hover { 5448 color: var(--c-text-muted); 5449 background: rgba(255,255,255,0.03); 5450 } 5451 5452 .faq__cat.is-active { 5453 color: var(--c-accent-3); 5454 background: rgba(0,194,255,0.06); 5455 border-color: rgba(0,194,255,0.2); 5456 } 5457 5458 /* Still stuck? CTA card */ 5459 .faq__contact-card { 5460 background: rgba(0,0,0,0.3); 5461 border: 1px solid var(--c-border-hi); 5462 border-radius: var(--r-xl); 5463 padding: 1.5rem; 5464 } 5465 5466 .faq__contact-title { 5467 font-family: var(--font-display); 5468 font-size: 1.4rem; 5469 text-transform: uppercase; 5470 color: var(--c-white); 5471 letter-spacing: 0.04em; 5472 margin-bottom: 0.5rem; 5473 } 5474 5475 .faq__contact-desc { 5476 font-size: var(--text-sm); 5477 color: var(--c-text-muted); 5478 line-height: 1.6; 5479 margin-bottom: 1.1rem; 5480 } 5481 5482 .faq__contact-actions { 5483 display: flex; 5484 gap: 0.6rem; 5485 flex-wrap: wrap; 5486 } 5487 5488 .btn--faq-contact { 5489 display: inline-flex; 5490 align-items: center; 5491 gap: 0.4rem; 5492 padding: 0.55rem 1.1rem; 5493 border-radius: var(--r-full); 5494 font-size: var(--text-xs); 5495 font-weight: 600; 5496 letter-spacing: 0.04em; 5497 transition: all var(--t-base) var(--ease); 5498 } 5499 5500 .btn--faq-contact--primary { 5501 background: var(--c-accent-3); 5502 color: var(--c-black); 5503 } 5504 5505 .btn--faq-contact--primary:hover { 5506 background: #33cfff; 5507 box-shadow: 0 0 24px rgba(0,194,255,0.3); 5508 transform: translateY(-1px); 5509 } 5510 5511 .btn--faq-contact--ghost { 5512 border: 1px solid var(--c-border-hi); 5513 color: var(--c-text-muted); 5514 } 5515 5516 .btn--faq-contact--ghost:hover { 5517 border-color: var(--c-border-hi); 5518 color: var(--c-white); 5519 background: rgba(255,255,255,0.04); 5520 } 5521 5522 /* ââ RIGHT â accordion list ââ */ 5523 .faq__list { 5524 display: flex; 5525 flex-direction: column; 5526 gap: 0; 5527 } 5528 5529 /* Category group heading */ 5530 .faq__group-label { 5531 font-family: var(--font-mono); 5532 font-size: 0.62rem; 5533 text-transform: uppercase; 5534 letter-spacing: 0.12em; 5535 color: var(--c-text-dim); 5536 padding: 1.5rem 0 0.6rem; 5537 border-top: 1px solid var(--c-border); 5538 margin-top: 0.5rem; 5539 display: flex; 5540 align-items: center; 5541 gap: 0.6rem; 5542 } 5543 5544 .faq__group-label:first-child { 5545 border-top: none; 5546 padding-top: 0; 5547 margin-top: 0; 5548 } 5549 5550 .faq__group-label-dot { 5551 width: 5px; height: 5px; 5552 border-radius: 50%; 5553 flex-shrink: 0; 5554 } 5555 5556 /* Accordion item */ 5557 .faq__item { 5558 border-bottom: 1px solid var(--c-border); 5559 opacity: 0; 5560 transform: translateY(16px); 5561 transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); 5562 } 5563 5564 .faq__item.in-view { 5565 opacity: 1; 5566 transform: translateY(0); 5567 } 5568 5569 /* Stagger delays */ 5570 .faq__item:nth-child(1) { transition-delay: 0.03s; } 5571 .faq__item:nth-child(2) { transition-delay: 0.07s; } 5572 .faq__item:nth-child(3) { transition-delay: 0.11s; } 5573 .faq__item:nth-child(4) { transition-delay: 0.15s; } 5574 .faq__item:nth-child(5) { transition-delay: 0.05s; } 5575 .faq__item:nth-child(6) { transition-delay: 0.09s; } 5576 .faq__item:nth-child(7) { transition-delay: 0.13s; } 5577 .faq__item:nth-child(8) { transition-delay: 0.17s; } 5578 .faq__item:nth-child(9) { transition-delay: 0.06s; } 5579 .faq__item:nth-child(10) { transition-delay: 0.10s; } 5580 .faq__item:nth-child(11) { transition-delay: 0.14s; } 5581 .faq__item:nth-child(12) { transition-delay: 0.18s; } 5582 5583 /* Trigger button */ 5584 .faq__trigger { 5585 width: 100%; 5586 display: flex; 5587 align-items: center; 5588 justify-content: space-between; 5589 gap: 1.5rem; 5590 padding: 1.35rem 0; 5591 text-align: left; 5592 cursor: pointer; 5593 background: none; 5594 border: none; 5595 transition: color var(--t-fast); 5596 } 5597 5598 .faq__trigger:hover .faq__question { color: var(--c-white); } 5599 5600 .faq__trigger-left { 5601 display: flex; 5602 align-items: center; 5603 gap: 1rem; 5604 flex: 1; 5605 } 5606 5607 /* Number indicator */ 5608 .faq__num {
5609 font-family: var(--font-mono); 5610 font-size: 0.65rem; 5611 color: var(--c-text-dim); 5612 width: 20px; 5613 flex-shrink: 0; 5614 transition: color var(--t-base); 5615 } 5616 5617 .faq__item.is-open .faq__num { color: var(--c-accent-3); } 5618 5619 .faq__question { 5620 font-size: var(--text-base); 5621 font-weight: 500; 5622 color: var(--c-text-muted); 5623 line-height: 1.4; 5624 transition: color var(--t-fast); 5625 } 5626 5627 .faq__item.is-open .faq__question { color: var(--c-white); } 5628 5629 /* +/- icon */ 5630 .faq__icon { 5631 width: 28px; 5632 height: 28px; 5633 border-radius: 50%; 5634 border: 1px solid var(--c-border); 5635 display: grid; 5636 place-items: center; 5637 flex-shrink: 0; 5638 transition: all var(--t-base) var(--ease); 5639 color: var(--c-text-dim); 5640 } 5641 5642 .faq__item.is-open .faq__icon { 5643 border-color: var(--c-accent-3); 5644 background: rgba(0,194,255,0.08); 5645 color: var(--c-accent-3); 5646 transform: rotate(45deg); 5647 } 5648 5649 .faq__icon svg { width: 12px; height: 12px; transition: transform var(--t-base) var(--ease); } 5650 5651 /* Answer panel */ 5652 .faq__answer { 5653 display: grid; 5654 grid-template-rows: 0fr; 5655 transition: grid-template-rows 0.45s var(--ease); 5656 } 5657 5658 .faq__item.is-open .faq__answer { 5659 grid-template-rows: 1fr; 5660 } 5661 5662 .faq__answer-inner { 5663 overflow: hidden; 5664 } 5665 5666 .faq__answer-content { 5667 padding: 0 0 1.5rem 2.5rem; 5668 font-size: var(--text-sm); 5669 color: var(--c-text-muted); 5670 line-height: 1.8; 5671 } 5672 5673 .faq__answer-content p + p { margin-top: 0.75rem; } 5674 5675 .faq__answer-content a { 5676 color: var(--c-accent-3); 5677 text-decoration: underline; 5678 text-underline-offset: 3px; 5679 } 5680 5681 .faq__answer-content a:hover { color: var(--c-white); } 5682 5683 /* Highlight callout inside answer */ 5684 .faq__callout { 5685 display: flex; 5686 align-items: flex-start; 5687 gap: 0.6rem; 5688 margin-top: 0.85rem; 5689 padding: 0.75rem 1rem; 5690 background: rgba(0,194,255,0.05); 5691 border: 1px solid rgba(0,194,255,0.15); 5692 border-radius: var(--r-md); 5693 font-size: var(--text-xs); 5694 color: var(--c-accent-3); 5695 line-height: 1.6; 5696 } 5697 5698 .faq__callout svg { width: 14px; height: 14px; flex-shrink: 0;
5698 margin-top: 1px; } 5699 5700 /* Tag chip in answer */ 5701 .faq__chip { 5702 display: inline-block; 5703 padding: 0.12rem 0.5rem; 5704 border-radius: var(--r-full); 5705 font-family: var(--font-mono); 5706 font-size: 0.6rem; 5707 background: rgba(212,255,0,0.08); 5708 color: var(--c-accent); 5709 border: 1px solid rgba(212,255,0,0.2); 5710 margin-right: 0.3rem; 5711 } 5712 5713 /* Search bar */ 5714 .faq__search { 5715 position: relative; 5716 margin-bottom: 1.5rem; 5717 z-index: 2; 5718 } 5719 5720 .faq__search-input { 5721 width: 100%; 5722 background: var(--c-surface); 5723 border: 1px solid var(--c-border-hi); 5724 border-radius: var(--r-full); 5725 padding: 0.75rem 1rem 0.75rem 3rem; 5726 font-size: var(--text-sm); 5727 color: var(--c-text); 5728 outline: none; 5729 transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base); 5730 } 5731 5732 .faq__search-input::placeholder { color: var(--c-text-dim); } 5733 5734 .faq__search-input:focus { 5735 border-color: var(--c-accent-3); 5736 box-shadow: 0 0 0 3px rgba(0,194,255,0.1); 5737 } 5738 5739 .faq__search-icon { 5740 position: absolute; 5741 left: 1rem; 5742 top: 50%; 5743 transform: translateY(-50%); 5744 color: var(--c-text-dim); 5745 pointer-events: none; 5746 } 5747 5748 .faq__search-icon svg { width: 16px; height: 16px; } 5749 5750 /* Responsive */ 5751 @media (max-width: 900px) { 5752 .faq__inner { grid-template-columns: 1fr; } 5753 .faq__aside { position: static; } 5754 .faq__cats { flex-direction: row; flex-wrap: wrap; } 5755 } 5756 5757 </style> 5758 5759 <section class="faq" id="faq" aria-label="Frequently Asked Questions"> 5760 <div class="faq__dots" aria-hidden="true"></div> 5761 5762 <div class="container"> 5763 <div class="faq__inner"> 5764 5765 <!-- LEFT â sticky sidebar --> 5766 <div class="faq__aside"> 5767 <div class="faq__label"> 5768 <span class="faq__label-line"></span> 5769 <span data-i18n="faq_section_label">FAQ</span> 5770 <span class="faq__label-line"></span> 5771 </div> 5772 <h2 class="faq__title"><span data-i18n="faq_title_line1">Got</span><br><em data-i18n="faq_title_accent">Questions?</em><br><span data-i18n="faq_title_line3">We Got Answers.</span></h2> 5773 <p class="faq__aside-desc" data-i18n="faq_aside_desc">Everything you need to know about generating AI videos. Can't find the answer? Reach out to our team.</p> 5774 5775 <!-- Category filter list --> 5776 <div class="faq__cats" role="list"> 5777 <div class="faq__cat is-active" data-faqcat="all" role="listitem"> 5778 <span class="faq__cat-dot" style="background:var(--c-accent-3)"></span> 5779 <span data-i18n="faq_cat_all">All Questions</span> 5780 </div> 5781 <div class="faq__cat" data-faqcat="getting-started" role="listitem"> 5782 <span class="faq__cat-dot" style="background:#d4ff00"></span> 5783 <span data-i18n="faq_cat_getting_started">Getting Started</span> 5784 </div> 5785 <div class="faq__cat" data-faqcat="models" role="listitem"> 5786 <span class="faq__cat-dot" style="background:#00c2ff"></span> 5787 <span data-i18n="faq_cat_models">Models & Generation</span> 5788 </div> 5789 <div class="faq__cat" data-faqcat="pricing" role="listitem"> 5790 <span class="faq__cat-dot" style="background:#ff4d00"></span> 5791 <span data-i18n="faq_cat_pricing">Pricing & Plans</span> 5792 </div> 5793 <div class="faq__cat" data-faqcat="privacy" role="listitem"> 5794 <span class="faq__cat-dot" style="background:#a78bfa"></span> 5795 <span data-i18n="faq_cat_privacy">Privacy & Ownership</span> 5796 </div> 5797 </div> 5798 5799 <!-- Contact card --> 5800 <div class="faq__contact-card"> 5801 <h3 class="faq__contact-title" data-i18n="faq_contact_title">Still Stuck?</h3> 5802 <p class="faq__contact-desc" data-i18n="faq_contact_desc">Our team responds within 24 hours. We're happy to help with any use case or technical question.</p> 5803 <div class="faq__contact-actions"> 5804 <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn--faq-contact btn--faq-contact--primary"> 5805 <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5"> 5806 <path d="M2 3h10a1 1 0 011 1v6a1 1 0 01-1 1H2a1 1 0 01-1-1V4a1 1 0 011-1z"/> 5807 <path d="M1 4l6 4 6-4"/> 5808 </svg>
5809 <span data-i18n="faq_contact_email">Email Us</span> 5810 </a> 5811 <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn--faq-contact btn--faq-contact--ghost" data-i18n="faq_contact_discord">Discord</a> 5812 </div> 5813 </div> 5814 </div> 5815 5816 <!-- RIGHT â accordion --> 5817 <div class="faq__right"> 5818 5819 <!-- Search --> 5820 <div class="faq__search"> 5821 <span class="faq__search-icon"> 5822 <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"> 5823 <circle cx="7" cy="7" r="4.5"/> 5824 <path d="M11 11l3 3" stroke-linecap="round"/> 5825 </svg> 5826 </span> 5827 <input class="faq__search-input" type="search" data-i18n-placeholder="faq_search_placeholder" placeholder="Search questionsâ¦" id="faq-search" aria-label="Search FAQ"/> 5828 </div> 5829 5830 <!-- Accordion list --> 5831 <div class="faq__list" id="faq-list"> 5832 5833 <!-- GROUP: Getting Started --> 5834 <div class="faq__group-label"> 5835 <span class="faq__group-label-dot" style="background:#d4ff00"></span> 5836 <span data-i18n="faq_group_getting_started">Getting Started</span> 5837 </div> 5838 5839 <div class="faq__item" data-faqitem data-cat="getting-started"> 5840 <button class="faq__trigger" aria-expanded="false"> 5841 <div class="faq__trigger-left"> 5842 <span class="faq__num">01</span> 5843 <span class="faq__question" data-i18n="faq_q1">
5843What is an AI video generator and how does it work?</span> 5844 </div> 5845 <div class="faq__icon" aria-hidden="true"> 5846 <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"> 5847 <path d="M6 2v8M2 6h8"/> 5848 </svg> 5849 </div> 5850 </button> 5851 <div class="faq__answer" role="region"> 5852 <div class="faq__answer-inner"> 5853 <div class="faq__answer-content" data-i18n="faq_a1_combined"> 5854 <p>An AI video generator takes a text prompt or image as input and uses trained deep-learning models to synthesize short video clips. You describe what you want â the scene, mood, camera movement, style â and the model renders matching video frames in sequence.</p> 5855 <p>Our platform routes your request to the most suitable model category (TextâVideo, ImageâVideo, Cinematic, etc.) and returns a result in seconds. No timeline editor, no keyframes â just a prompt and a clip.</p> 5856 <div class="faq__callout"> 5857 <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="7" cy="7" r="5.5"/><path d="M7 5v2.5L8.5 9"/></svg> 5858 Average generation time: 3â8 seconds depending on model and clip length. 5859 </div> 5860 </div> 5861 </div> 5862 </div> 5863 </div> 5864 5865 <div class="faq__item" data-faqitem data-cat="getting-started"> 5866 <button class="faq__trigger" aria-expanded="false"> 5867 <div class="faq__trigger-left"> 5868 <span class="faq__num">02</span> 5869 <span class="faq__question" data-i18n="faq_q2">Do I need any technical skills or video editing experience?</span> 5870 </div> 5871 <div class="faq__icon" aria-hidden="true"> 5872 <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 2v8M2 6h8"/></svg> 5873 </div> 5874 </button> 5875 <div class="faq__answer" role="region"> 5876 <div class="faq__answer-inner"> 5877 <div class="faq__answer-content" data-i18n="faq_a2"> 5878 <p>None at all. If you can type a sentence, you can generate a video. The platform is designed around clear defaults and guided steps â no timeline, no codec settings, no rendering queue to manage.</p> 5879 <p>For more advanced users, you can fine-tune motion, lighting, aspect ratio, frame rate, and style presets. But it's entirely optional â the smart defaults produce great results right out of the box.</p> 5880 </div> 5881 </div> 5882 </div> 5883 </div> 5884 5885 <div class="faq__item" data-faqitem data-cat="getting-started"> 5886 <button class="faq__trigger" aria-expanded="false"> 5887 <div class="faq__trigger-left"> 5888 <span class="faq__num">03</span> 5889 <span class="faq__question" data-i18n="faq_q3">How do I write a good video prompt?</span> 5890 </div> 5891 <div class="faq__icon" aria-hidden="true"> 5892 <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 2v8M2 6h8"/></svg> 5893 </div> 5894 </button> 5895 <div class="faq__answer" role="region"> 5896 <div class="faq__answer-inner"> 5897 <div class="faq__answer-content" data-i18n="faq_a3"> 5898 <p>The best prompts include four elements: <strong>subject</strong>, <strong>environment</strong>, <strong>camera movement</strong>, and <strong>style/mood</strong>.</p> 5899 <p>Example: <em style="color:var(--c-accent);font-style:normal">"A lone astronaut walks through a dusty red canyon, slow push-in shot, golden hour lighting, cinematic, 24mm lens."</em></p> 5900 <p>You can also browse our Prompt Library for 50+ ready-to-use starters and adapt them to your idea.</p> 5901 <div class="faq__callout"> 5902 <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="7" cy="7" r="5.5"/><path d="M7 5v2.5L8.5 9"/></svg> 5903 Tip: camera motion words like "dolly-in", "orbit", "pan left" dramatically improve results. 5904 </div> 5905 </div> 5906 </div> 5907 </div> 5908 </div> 5909 </div> 5910 5911 <!-- GROUP: Models & Generation --> 5912 <div class="faq__group-label">
5913 <span class="faq__group-label-dot" style="background:#00c2ff"></span> 5914 Models & Generation 5915 </div> 5916 5917 <div class="faq__item" data-faqitem data-cat="models"> 5918 <button class="faq__trigger" aria-expanded="false"> 5919 <div class="faq__trigger-left"> 5920 <span class="faq__num">04</span> 5921 <span class="faq__question" data-i18n="faq_q4">Which AI model should I use for my video?</span> 5922 </div> 5923 <div class="faq__icon" aria-hidden="true"> 5924 <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 2v8M2 6h8"/></svg> 5925 </div> 5926 </button> 5927 <div class="faq__answer" role="region"> 5928 <div class="faq__answer-inner"> 5929 <div class="faq__answer-content" data-i18n="faq_a4"> 5930 <p>Use <span class="faq__chip">TextâVideo</span> for prompt-driven scene generation. Use <span class="faq__chip">ImageâVideo</span> when you have a reference photo to animate. Choose <span class="faq__chip">Cinematic</span> for dramatic camera movement and film-grade output. <span class="faq__chip">Anime</span> is optimized for illustrated, stylized, or fantasy aesthetics.</p> 5931 <p>Not sure? Enable <strong>Auto-Recommend</strong> and the platform picks the best model based on your prompt content, input type, and goal â no guesswork needed.</p> 5932 </div> 5933 </div> 5934 </div> 5935 </div> 5936 5937 <div class="faq__item" data-faqitem data-cat="models"> 5938 <button class="faq__trigger" aria-expanded="false"> 5939 <div class="faq__trigger-left"> 5940 <span class="faq__num">05</span> 5941 <span class="faq__question" data-i18n="faq_q5">How long can the generated videos be?</span> 5942 </div> 5943 <div class="faq__icon" aria-hidden="true"> 5944 <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 2v8M2 6h8"/></svg> 5945 </div> 5946 </button> 5947 <div class="faq__answer" role="region"> 5948 <div class="faq__answer-inner"> 5949 <div class="faq__answer-content" data-i18n="faq_a5"> 5950 <p>Clip length ranges from 3 seconds up to 12 seconds depending on the model and your plan. Short clips (3â5s) are ideal for loops and social content. Longer clips (9â12s) work well for cinematic scenes and storytelling sequences.</p> 5951 <p>You can chain multiple clips together in post-production to create longer narratives â our Blueprint templates include guidance on doing this effectively.</p> 5952 </div> 5953 </div> 5954 </div> 5955 </div> 5956 5957 <div class="faq__item" data-faqitem data-cat="models"> 5958 <button class="faq__trigger" aria-expanded="false"> 5959 <div class="faq__trigger-left"> 5960 <span class="faq__num">06</span> 5961 <span class="faq__question" data-i18n="faq_q6">Can I keep a character consistent across multiple clips?</span> 5962 </div> 5963 <div class="faq__icon" aria-hidden="true"> 5964 <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 2v8M2 6h8"/></svg> 5965 </div> 5966 </button> 5967 <div class="faq__answer" role="region"> 5968 <div class="faq__answer-inner"> 5969 <div class="faq__answer-content" data-i18n="faq_a6"> 5970 <p>Yes â this is what <strong style="color:var(--c-text)">Character Consistency Mode</strong> is built for. Upload a reference image of your character and the model will preserve their appearance, outfit, and key features across every clip you generate in that session.</p> 5971 <p>It's available on Creator and Studio plans and is particularly powerful for series content, branded avatars, and multi-scene stories.</p> 5972 <div class="faq__callout"> 5973 <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="7" cy="7" r="5.5"/><path d="M7 5v2.5L8.5 9"/></svg> 5974 For best results, use a clean front-facing reference image with neutral lighting. 5975 </div> 5976 </div> 5977 </div> 5978 </div> 5979 </div> 5980 5981 <!-- GROUP: Pricing & Plans --> 5982 <div class="faq__group-label">
5983 <span class="faq__group-label-dot" style="background:#ff4d00"></span> 5984 Pricing & Plans 5985 </div> 5986 5987 <div class="faq__item" data-faqitem data-cat="pricing"> 5988 <button class="faq__trigger" aria-expanded="false"> 5989 <div class="faq__trigger-left"> 5990 <span class="faq__num">07</span> 5991 <span class="faq__question" data-i18n="faq_q7">Is there a free plan? What does it include?</span> 5992 </div> 5993 <div class="faq__icon" aria-hidden="true"> 5994 <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 2v8M2 6h8"/></svg> 5995 </div> 5996 </button> 5997 <div class="faq__answer" role="region"> 5998 <div class="faq__answer-inner"> 5999 <div class="faq__answer-content" data-i18n="faq_a7"> 6000 <p>Yes. The free plan gives you a daily generation allowance with standard speed and access to core models â enough to explore the platform and generate your first clips without a credit card.</p> 6001 <p>Free plan outputs include a watermark. Upgrading to a paid plan removes watermarks, increases your daily generation limit, unlocks faster processing, and adds access to Character Consistency and advanced export formats.</p> 6002 </div> 6003 </div> 6004 </div> 6005 </div> 6006 6007 <div class="faq__item" data-faqitem data-cat="pricing"> 6008 <button class="faq__trigger" aria-expanded="false"> 6009 <div class="faq__trigger-left"> 6010 <span class="faq__num">08</span> 6011 <span class="faq__question" data-i18n="faq_q8">How do credits work and do they roll over?</span> 6012 </div> 6013 <div class="faq__icon" aria-hidden="true"> 6014 <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 2v8M2 6h8"/></svg> 6015 </div> 6016 </button> 6017 <div class="faq__answer" role="region"> 6018 <div class="faq__answer-inner"> 6019 <div class="faq__answer-content" data-i18n="faq_a8"> 6020 <p>Each generation costs a set number of credits depending on clip length, resolution, and model. Shorter clips at standard resolution cost fewer credits; 4K cinematic clips cost more.</p> 6021 <p>Unused monthly credits roll over to the next month (up to a 2x cap of your plan allowance). You can also purchase top-up credit packs at any time without changing your plan tier.</p> 6022 </div> 6023 </div> 6024 </div> 6025 </div> 6026 6027 <div class="faq__item" data-faqitem data-cat="pricing"> 6028 <button class="faq__trigger" aria-expanded="false"> 6029 <div class="faq__trigger-left"> 6030 <span class="faq__num">09</span> 6031 <span class="faq__question" data-i18n="faq_q9">Can I use the videos commercially?</span> 6032 </div> 6033 <div class="faq__icon" aria-hidden="true"> 6034 <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 2v8M2 6h8"/></svg> 6035 </div> 6036 </button> 6037 <div class="faq__answer" role="region"> 6038 <div class="faq__answer-inner"> 6039 <div class="faq__answer-content" data-i18n="faq_a9"> 6040 <p>Yes â all paid plan outputs come with a full commercial license. You can use them in ads, client projects, social media, websites, and any commercial context.</p> 6041 <p>Free plan outputs are limited to personal and non-commercial use. If you're generating for a client or a campaign, upgrade to Creator or Studio.</p> 6042 </div> 6043 </div> 6044 </div> 6045 </div> 6046 6047 <!-- GROUP: Privacy & Ownership --> 6048 <div class="faq__group-label">
6049 <span class="faq__group-label-dot" style="background:#a78bfa"></span> 6050 Privacy & Ownership 6051 </div> 6052 6053 <div class="faq__item" data-faqitem data-cat="privacy"> 6054 <button class="faq__trigger" aria-expanded="false"> 6055 <div class="faq__trigger-left"> 6056 <span class="faq__num">10</span> 6057 <span class="faq__question" data-i18n="faq_q10">Do you use my prompts or uploads to train your AI models?</span> 6058 </div> 6059 <div class="faq__icon" aria-hidden="true"> 6060 <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 2v8M2 6h8"/></svg> 6061 </div> 6062 </button> 6063 <div class="faq__answer" role="region"> 6064 <div class="faq__answer-inner"> 6065 <div class="faq__answer-content" data-i18n="faq_a10"> 6066 <p>No â your prompts, uploaded images, and generated videos are never used to train or fine-tune AI models without your explicit opt-in consent.</p> 6067 <p>Studio plan users can additionally enable private generation mode, which prevents any metadata from being logged beyond what's needed for delivery. Your data is yours.</p> 6068 </div> 6069 </div> 6070 </div> 6071 </div> 6072 6073 <div class="faq__item" data-faqitem data-cat="privacy"> 6074 <button class="faq__trigger" aria-expanded="false"> 6075 <div class="faq__trigger-left"> 6076 <span class="faq__num">11</span> 6077 <span class="faq__question" data-i18n="faq_q11">Who owns the videos I generate?</span> 6078 </div> 6079 <div class="faq__icon" aria-hidden="true"> 6080 <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 2v8M2 6h8"/></svg> 6081 </div> 6082 </button> 6083 <div class="faq__answer" role="region"> 6084 <div class="faq__answer-inner"> 6085 <div class="faq__answer-content" data-i18n="faq_a11"> 6086 <p>You do. All outputs generated on paid plans are fully owned by you upon creation. We claim no intellectual property rights over your generated videos.</p> 6087 <p>Free plan outputs carry a platform attribution requirement â you're welcome to share them, just keep the credit. Upgrade to remove this requirement and get clean commercial ownership.</p> 6088 </div> 6089 </div> 6090 </div> 6091 </div> 6092 6093 <div class="faq__item" data-faqitem data-cat="privacy"> 6094 <button class="faq__trigger" aria-expanded="false"> 6095 <div class="faq__trigger-left"> 6096 <span class="faq__num">12</span> 6097 <span class="faq__question" data-i18n="faq_q12">Are there content restrictions? What does "uncensored" mean here?</span> 6098 </div> 6099 <div class="faq__icon" aria-hidden="true"> 6100 <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 2v8M2 6h8"/></svg> 6101 </div> 6102 </button> 6103 <div class="faq__answer" role="region"> 6104 <div class="faq__answer-inner"> 6105 <div class="faq__answer-content" data-i18n="faq_a12"> 6106 <p>"Uncensored" means fewer style restrictions and broader creative flexibility â not the absence of rules. We do enforce responsible-use policies that prohibit non-consensual content, real-person sexual content, illegal material, and content designed to cause harm.</p> 6107 <p>Within those bounds,to use this free AI video generator with no restrictions,you have wide creative latitude: graphic fiction, mature themes, experimental art, and niche aesthetics that mainstream tools typically block are generally supported.</p> 6108 </div> 6109 </div> 6110 </div> 6111 </div> 6112 6113 </div><!-- /.faq__list --> 6114 </div><!-- /.faq__right --> 6115 6116 </div><!-- /.faq__inner --> 6117 </div> 6118 </section> 6119 6120
6120<script type="6c18279ba6d93a40249c492f-text/javascript"> 6121 (function () { 6122 6123 // ââ Accordion ââ 6124 const items = document.querySelectorAll('[data-faqitem]'); 6125 6126 items.forEach(item => { 6127 const trigger = item.querySelector('.faq__trigger'); 6128 trigger.addEventListener('click', () => { 6129 const isOpen = item.classList.contains('is-open'); 6130 // Close all 6131 items.forEach(i => { 6132 i.classList.remove('is-open'); 6133 i.querySelector('.faq__trigger').setAttribute('aria-expanded', 'false'); 6134 }); 6135 // Toggle clicked 6136 if (!isOpen) { 6137 item.classList.add('is-open'); 6138 trigger.setAttribute('aria-expanded', 'true'); 6139 // Smooth scroll into view if needed 6140 const rect = item.getBoundingClientRect(); 6141 if (rect.top < 80) { 6142 item.scrollIntoView({ behavior: 'smooth', block: 'start' }); 6143 } 6144 } 6145 }); 6146 }); 6147 6148 // ââ Category filter ââ 6149 const cats = document.querySelectorAll('[data-faqcat]'); 6150 cats.forEach(cat => { 6151 cat.addEventListener('click', () => { 6152 cats.forEach(c => c.classList.remove('is-active')); 6153 cat.classList.add('is-active'); 6154 const selected = cat.dataset.faqcat; 6155 items.forEach(item => { 6156 const match = selected === 'all' || item.dataset.cat === selected; 6157 item.style.display = match ? '' : 'none'; 6158 // Close open items when filtering 6159 if (!match) { 6160 item.classList.remove('is-open'); 6161 item.querySelector('.faq__trigger').setAttribute('aria-expanded', 'false'); 6162 } 6163 }); 6164 // Hide group labels with no visible children 6165 document.querySelectorAll('.faq__group-label').forEach(label => { 6166 let next = label.nextElementSibling; 6167 let hasVisible = false; 6168 while (next && !next.classList.contains('faq__group-label')) { 6169 if (next.style.display !== 'none') hasVisible = true; 6170 next = next.nextElementSibling; 6171 } 6172 label.style.display = hasVisible ? '' : 'none'; 6173 }); 6174 }); 6175 }); 6176 6177 // ââ Live search ââ 6178 const searchInput = document.getElementById('faq-search'); 6179 searchInput.addEventListener('input', () => { 6180 const q = searchInput.value.toLowerCase().trim(); 6181 items.forEach(item => { 6182 const q_text = item.querySelector('.faq__question').textContent.toLowerCase(); 6183 const a_text = item.querySelector('.faq__answer-content').textContent.toLowerCase(); 6184 const match = !q || q_text.includes(q) || a_text.includes(q); 6185 item.style.display = match ? '' : 'none'; 6186 }); 6187 }); 6188 6189 // ââ Scroll reveal ââ 6190 const faqObs = new IntersectionObserver(entries => { 6191 entries.forEach(e => { 6192 if (e.isIntersecting) { 6193 e.target.classList.add('in-view'); 6194 faqObs.unobserve(e.target); 6195 } 6196 }); 6197 }, { threshold: 0.1 }); 6198 6199 items.forEach(i => faqObs.observe(i)); 6200 6201 // Open first item by default 6202 if (items.length) { 6203 items[0].classList.add('is-open'); 6204 items[0].querySelector('.faq__trigger').setAttribute('aria-expanded', 'true'); 6205 } 6206 6207 })(); 6208 </script>
6208 6209 6210 <!-- â¼â¼â¼ SECTION 9 â JOIN THE CREATORS CTA BANNER â¼â¼â¼ --> 6211 <style> 6212 6213 /* âââââââââââââââââââââââââââââââââââââââââââ 6214 JOIN CREATORS â CTA BANNER 6215 âââââââââââââââââââââââââââââââââââââââââââ */ 6216 .join { 6217 position: relative; 6218 padding-block: var(--section-pad); 6219 overflow: hidden; 6220 } 6221 6222 /* ââ Full-bleed inner banner ââ */ 6223 .join__banner { 6224 position: relative; 6225 border-radius: calc(var(--r-xl) * 1.5); 6226 overflow: hidden; 6227 padding: clamp(3.5rem, 8vw, 7rem) clamp(2rem, 6vw, 6rem); 6228 isolation: isolate; 6229 } 6230 6231 /* Multi-layer background */ 6232 .join__banner-bg { 6233 position: absolute; 6234 inset: 0; 6235 background: linear-gradient(135deg, 6236 #0c1400 0%, 6237 #0f1c00 20%, 6238 #0a1000 40%, 6239 #050800 70%, 6240 #0a0d00 100% 6241 ); 6242 z-index: 0; 6243 } 6244 6245 /* Animated conic gradient mesh */ 6246 .join__mesh { 6247 position: absolute; 6248 inset: -20%; 6249 background: conic-gradient( 6250 from 220deg at 25% 60%, 6251 rgba(212,255,0,0.18) 0deg, 6252 transparent 60deg, 6253 rgba(255,77,0,0.08) 120deg, 6254 transparent 180deg, 6255 rgba(0,194,255,0.06) 240deg, 6256 transparent 300deg, 6257 rgba(212,255,0,0.10) 360deg 6258 ); 6259 animation: join-spin 18s linear infinite; 6260 z-index: 0; 6261 } 6262 6263 @keyframes join-spin { 6264 to { transform: rotate(360deg); } 6265 } 6266 6267 /* Grid overlay */ 6268 .join__grid-lines { 6269 position: absolute; 6270 inset: 0; 6271 background-image: 6272 linear-gradient(rgba(212,255,0,0.04) 1px, transparent 1px), 6273 linear-gradient(90deg, rgba(212,255,0,0.04) 1px, transparent 1px); 6274 background-size: 50px 50px; 6275 mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 20%, transparent 80%); 6276 z-index: 0; 6277 } 6278 6279 /* Glow orbs */ 6280 .join__orb { 6281 position: absolute; 6282 border-radius: 50%; 6283 filter: blur(80px); 6284 pointer-events: none; 6285 z-index: 0; 6286 } 6287 6288 .join__orb--1 { 6289 width: 500px; height: 500px; 6290 background: radial-gradient(circle, rgba(212,255,0,0.2) 0%, transparent 65%); 6291 top: -150px; left: -80px; 6292 animation: orb-float-1 10s ease-in-out infinite alternate; 6293 } 6294 6295 .join__orb--2 { 6296 width: 350px; height: 350px; 6297 background: radial-gradient(circle, rgba(255,77,0,0.12) 0%, transparent 65%); 6298 bottom: -100px; right: 5%; 6299 animation: orb-float-2 13s ease-in-out infinite alternate; 6300 } 6301 6302 .join__orb--3 { 6303 width: 250px; height: 250px; 6304 background: radial-gradient(circle, rgba(0,194,255,0.1) 0%, transparent 65%); 6305 top: 30%; right: 25%; 6306 animation: orb-float-1 16s ease-in-out infinite alternate-reverse; 6307 } 6308 6309 @keyframes orb-float-1 { 6310 from { transform: translate(0, 0) scale(1); } 6311 to { transform: translate(40px, 30px) scale(1.1); } 6312 } 6313 6314 @keyframes orb-float-2 { 6315 from { transform: translate(0, 0) scale(1); } 6316 to { transform: translate(-30px, -40px) scale(1.15); } 6317 } 6318 6319 /* Border glow */ 6320 .join__banner::before { 6321 content: ''; 6322 position: absolute; 6323 inset: 0; 6324 border-radius: inherit; 6325 border: 1px solid rgba(212,255,0,0.2); 6326 pointer-events: none; 6327 z-index: 3; 6328 } 6329 6330 /* Corner accents */ 6331 .join__corner { 6332 position: absolute; 6333 width: 60px; 6334 height: 60px; 6335 z-index: 3; 6336 pointer-events: none; 6337 } 6338 6339 .join__corner--tl { top: 0; left: 0; 6340 border-top: 2px solid rgba(212,255,0,0.6); 6341 border-left: 2px solid rgba(212,255,0,0.6); 6342 border-radius: calc(var(--r-xl) * 1.5) 0 0 0; 6343 } 6344 .join__corner--tr { top: 0; right: 0; 6345 border-top: 2px solid rgba(212,255,0,0.3); 6346 border-right: 2px solid rgba(212,255,0,0.3); 6347 border-radius: 0 calc(var(--r-xl) * 1.5) 0 0; 6348 } 6349 .join__corner--bl { bottom: 0; left: 0; 6350 border-bottom: 2px solid rgba(212,255,0,0.3); 6351 border-left: 2px solid rgba(212,255,0,0.3); 6352 border-radius: 0 0 0 calc(var(--r-xl) * 1.5); 6353 } 6354 .join__corner--br { bottom: 0; right: 0; 6355 border-bottom: 2px solid rgba(212,255,0,0.6); 6356 border-right: 2px solid rgba(212,255,0,0.6); 6357 border-radius: 0 0 calc(var(--r-xl) * 1.5) 0; 6358 } 6359 6360 /* ââ Inner content layout ââ */ 6361 .join__content { 6362 position: relative; 6363 z-index: 2; 6364 display: grid; 6365 grid-template-columns: 1fr auto; 6366 gap: clamp(2rem, 5vw, 5rem); 6367 align-items: center; 6368 } 6369 6370 /* LEFT â copy */ 6371 .join__left {} 6372 6373 .join__eyebrow { 6374 display: inline-flex; 6375 align-items: center; 6376 gap: 0.6rem; 6377 font-family: var(--font-mono); 6378 font-size: var(--text-xs); 6379 color: var(--c-accent); 6380 text-transform: uppercase; 6381 letter-spacing: 0.14em; 6382 margin-bottom: 1.5rem; 6383 opacity: 0; 6384 transform: translateY(16px); 6385 animation: join-up 0.7s var(--ease) 0.1s forwards; 6386 } 6387 6388 .join__eyebrow-dot { 6389 width: 6px; height: 6px; 6390 background: var(--c-accent); 6391 border-radius: 50%; 6392 animation: pulse 2s ease-in-out infinite; 6393 } 6394 6395 .join__title { 6396 font-family: var(--font-display); 6397 font-size: clamp(3rem, 7vw, 6.5rem); 6398 line-height: 0.88; 6399 text-transform: uppercase; 6400 color: var(--c-white); 6401 letter-spacing: 0.02em; 6402 margin-bottom: 1.5rem; 6403 opacity: 0; 6404 transform: translateY(20px); 6405 animation: join-up 0.8s var(--ease) 0.2s forwards; 6406 } 6407 6408 .join__title-accent { 6409 color: var(--c-accent); 6410 display: block; 6411 position: relative; 6412 } 6413 6414 /* Underline stroke on accent line */ 6415 .join__title-accent::after { 6416 content: ''; 6417 position: absolute; 6418 bottom: 4px; 6419 left: 0; 6420 height: 3px; 6421 background: var(--c-accent-2); 6422 border-radius: 2px; 6423 width: 0; 6424 transition: width 1s var(--ease) 1s; 6425 } 6426 6427 .join__banner.in-view .join__title-accent::after { 6428 width: 60%; 6429 } 6430 6431 .join__desc { 6432 font-size: var(--text-lg); 6433 color: rgba(255,255,255,0.55); 6434 line-height: 1.65; 6435 max-width: 520px; 6436 margin-bottom: 2.5rem; 6437 opacity: 0; 6438 transform: translateY(16px); 6439 animation: join-up 0.8s var(--ease) 0.35s forwards; 6440 } 6441 6442 .join__desc strong { color: rgba(255,255,255,0.85); } 6443 6444 /* Social proof row */ 6445 .join__proof { 6446 display: flex; 6447 align-items: center; 6448 gap: 1.5rem; 6449 margin-bottom: 2.5rem; 6450 flex-wrap: wrap; 6451 opacity: 0; 6452 transform: translateY(16px); 6453 animation: join-up 0.8s var(--ease) 0.45s forwards; 6454 } 6455 6456 .join__avatars { 6457 display: flex; 6458 } 6459 6460 .join__avatar { 6461 width: 34px; 6462 height: 34px; 6463 border-radius: 50%; 6464 border: 2px solid rgba(10,10,10,0.8); 6465 margin-left: -10px; 6466 display: grid; 6467 place-items: center; 6468 font-size: 0.58rem; 6469 font-weight: 700; 6470 color: rgba(255,255,255,0.7); 6471 flex-shrink: 0; 6472 font-family: var(--font-mono); 6473 } 6474 6475 .join__avatar:first-child { margin-left: 0; } 6476 6477 .join__proof-text { 6478 font-size: var(--text-sm); 6479 color: rgba(255,255,255,0.45); 6480 line-height: 1.4; 6481 } 6482 6483 .join__proof-text strong { color: var(--c-accent); } 6484 6485 /* Stars */ 6486 .join__stars { 6487 display: flex; 6488 gap: 2px; 6489 margin-bottom: 0.2rem; 6490 } 6491 6492 .join__star { 6493 color: var(--c-accent); 6494 font-size: 0.75rem; 6495 } 6496 6497 /* CTA buttons */ 6498 .join__ctas { 6499 display: flex; 6500 align-items: center; 6501 gap: 1rem; 6502 flex-wrap: wrap; 6503 opacity: 0; 6504 transform: translateY(16px); 6505 animation: join-up 0.8s var(--ease) 0.55s forwards; 6506 } 6507 6508 .btn--join-primary { 6509 display: inline-flex; 6510 align-items: center; 6511 gap: 0.6rem; 6512 padding: 1rem 2.25rem; 6513 background: var(--c-accent); 6514 color: var(--c-black); 6515 border-radius: var(--r-full); 6516 font-size: var(--text-base); 6517 font-weight: 800; 6518 letter-spacing: 0.03em; 6519 transition: all var(--t-base) var(--ease); 6520 position: relative; 6521 overflow: hidden; 6522 } 6523 6524 /* Shimmer sweep */ 6525 .btn--join-primary::after { 6526 content: ''; 6527 position: absolute; 6528 top: 0; left: -100%; 6529 width: 60%; 6530 height: 100%; 6531 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); 6532 transition: left 0.5s var(--ease); 6533 } 6534 6535 .btn--join-primary:hover::after { left: 150%; } 6536 6537 .btn--join-primary:hover { 6538 background: #e8ff33; 6539 box-shadow: 0 0 50px rgba(212,255,0,0.45), 0 8px 24px rgba(0,0,0,0.4); 6540 transform: translateY(-2px); 6541 } 6542 6543 .btn--join-primary:active { transform: translateY(0); } 6544 6545 .btn--join-outline { 6546 display: inline-flex; 6547 align-items: center; 6548 gap: 0.5rem; 6549 padding: 1rem 2rem; 6550 border: 1px solid rgba(255,255,255,0.2); 6551 color: rgba(255,255,255,0.6); 6552 border-radius: var(--r-full); 6553 font-size: var(--text-base); 6554 font-weight: 500; 6555 transition: all var(--t-base) var(--ease); 6556 } 6557 6558 .btn--join-outline:hover { 6559 border-color: rgba(255,255,255,0.5); 6560 color: var(--c-white); 6561 background: rgba(255,255,255,0.05); 6562 } 6563 6564 .btn--join-outline svg { width: 16px; height: 16px; transition: transform var(--t-base) var(--ease); } 6565 .btn--join-outline:hover svg { transform: translateX(3px); } 6566 6567 /* Fine print */ 6568 .join__fine { 6569 margin-top: 1rem; 6570 font-size: var(--text-xs); 6571 color: rgba(255,255,255,0.25); 6572 font-family: var(--font-mono); 6573 letter-spacing: 0.05em; 6574 opacity: 0; 6575 animation: join-up 0.8s var(--ease) 0.7s forwards; 6576 } 6577 6578 /* RIGHT â feature list / stats panel */ 6579 .join__right { 6580 display: flex; 6581 flex-direction: column; 6582 gap: 1rem; 6583 min-width: 260px; 6584 opacity: 0; 6585 transform: translateX(30px); 6586 animation: join-right 0.9s var(--ease) 0.4s forwards; 6587 } 6588
6589 @keyframes join-right { 6590 to { opacity: 1; transform: translateX(0); } 6591 } 6592 6593 /* Stat tiles */ 6594 .join__stat-tile { 6595 background: rgba(255,255,255,0.04); 6596 border: 1px solid rgba(255,255,255,0.08); 6597 border-radius: var(--r-lg); 6598 padding: 1.1rem 1.4rem; 6599 display: flex; 6600 align-items: center; 6601 gap: 1rem; 6602 transition: all var(--t-base) var(--ease); 6603 } 6604 6605 .join__stat-tile:hover { 6606 background: rgba(212,255,0,0.05); 6607 border-color: rgba(212,255,0,0.2); 6608 } 6609 6610 .join__stat-tile-icon { 6611 width: 36px; 6612 height: 36px; 6613 border-radius: var(--r-md); 6614 display: grid; 6615 place-items: center; 6616 flex-shrink: 0; 6617 } 6618 6619 .join__stat-tile-icon svg { width: 18px; height: 18px; } 6620 6621 .join__stat-tile-val { 6622 font-family: var(--font-display); 6623 font-size: 1.6rem; 6624 line-height: 1; 6625 color: var(--c-white); 6626 letter-spacing: 0.04em; 6627 } 6628 6629 .join__stat-tile-val span { color: var(--c-accent); } 6630 6631 .join__stat-tile-label { 6632 font-size: var(--text-xs); 6633 color: rgba(255,255,255,0.35); 6634 margin-top: 0.15rem; 6635 font-family: var(--font-mono); 6636 text-transform: uppercase; 6637 letter-spacing: 0.08em; 6638 } 6639 6640 /* Feature checklist */ 6641 .join__checklist { 6642 background: rgba(255,255,255,0.03); 6643 border: 1px solid rgba(255,255,255,0.07); 6644 border-radius: var(--r-lg); 6645 padding: 1.25rem 1.4rem; 6646 display: flex; 6647 flex-direction: column; 6648 gap: 0.65rem; 6649 } 6650 6651 .join__check-item { 6652 display: flex; 6653 align-items: center; 6654 gap: 0.65rem; 6655 font-size: var(--text-sm); 6656 color: rgba(255,255,255,0.5); 6657 transition: color var(--t-fast); 6658 } 6659 6660 .join__check-item:hover { color: rgba(255,255,255,0.8); } 6661 6662 .join__check-icon { 6663 width: 18px; 6664 height: 18px; 6665 border-radius: 50%; 6666 background: rgba(212,255,0,0.12); 6667 border: 1px solid rgba(212,255,0,0.3); 6668 display: grid; 6669 place-items: center; 6670 flex-shrink: 0; 6671 } 6672 6673 .join__check-icon svg { width: 9px; height: 9px; } 6674 6675 /* Animation keyframe */ 6676 @keyframes join-up { 6677 to { opacity: 1; transform: translateY(0); } 6678 } 6679 6680 /* Scroll-triggered class */ 6681 .join__banner { opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } 6682 .join__banner.in-view { opacity: 1; transform: translateY(0); } 6683 6684 /* Responsive */ 6685 @media (max-width: 900px) { 6686 .join__content { grid-template-columns: 1fr; } 6687 .join__right { flex-direction: row; flex-wrap: wrap; min-width: unset; } 6688 .join__stat-tile { flex: 1; min-width: 140px; } 6689 .join__checklist { flex: 100%; flex-direction: row; flex-wrap: wrap; gap: 0.5rem; } 6690 } 6691 6692 @media (max-width: 540px) { 6693 .join__ctas { flex-direction: column; align-items: stretch; } 6694 .btn--join-primary, .btn--join-outline { justify-content: center; } 6695 .join__right { flex-direction: column; } 6696 } 6697 6698 </style> 6699 6700 <section class="join" id="join" aria-label="Join the Creators"> 6701 <div class="container"> 6702 6703 <div class="join__banner" data-join-banner> 6704 6705 <!-- Background layers --> 6706 <div class="join__banner-bg" aria-hidden="true"></div> 6707 <div class="join__mesh" aria-hidden="true"></div> 6708 <div class="join__grid-lines" aria-hidden="true"></div> 6709 6710 <!-- Glow orbs --> 6711 <div class="join__orb join__orb--1" aria-hidden="true"></div> 6712 <div class="join__orb join__orb--2" aria-hidden="true"></div> 6713 <div class="join__orb join__orb--3" aria-hidden="true"></div> 6714 6715 <!-- Corner accents --> 6716 <div class="join__corner join__corner--tl" aria-hidden="true"></div> 6717 <div class="join__corner join__corner--tr" aria-hidden="true"></div> 6718 <div class="join__corner join__corner--bl" aria-hidden="true"></div> 6719 <div class="join__corner join__corner--br" aria-hidden="true"></div> 6720 6721 <!-- Content --> 6722 <div class="join__content"> 6723 6724 <!-- LEFT â copy --> 6725 <div class="join__left"> 6726 6727 <div class="join__eyebrow">
6728 <span class="join__eyebrow-dot"></span> 6729 <span data-i18n="join_eyebrow">184,000+ Creators & Growing</span> 6730 </div> 6731 6732 <h2 class="join__title"> 6733 <span data-i18n="join_title_line1">Join the Creators</span> 6734 <span class="join__title-accent" data-i18n="join_title_accent">Shaping the Future</span> 6735 <span data-i18n="join_title_line3">of AI Video.</span> 6736 </h2> 6737 6738 <p class="join__desc" data-i18n="join_desc"> 6739 From solo creators to global studios â <strong>Pixwith AI</strong> is where the next generation of video is being made. Start free, generate instantly, own everything you create. 6740 </p> 6741 6742 <!-- Social proof --> 6743 <div class="join__proof"> 6744 <div class="join__avatars" aria-hidden="true"> 6745 <div class="join__avatar" style="background:linear-gradient(135deg,#1e3a2f,#0a2018)">AK</div> 6746 <div class="join__avatar" style="background:linear-gradient(135deg,#1a1a3a,#0a0a20)">MR</div> 6747 <div class="join__avatar" style="background:linear-gradient(135deg,#3a1a1a,#200a0a)">SL</div> 6748 <div class="join__avatar" style="background:linear-gradient(135deg,#2a1a00,#140d00)">JX</div> 6749 <div class="join__avatar" style="background:linear-gradient(135deg,#0f0a1a,#07050d)">YK</div> 6750 <div class="join__avatar" style="background:rgba(212,255,0,0.15); border-color:rgba(212,255,0,0.3); color:var(--c-accent);">+</div> 6751 </div> 6752 <div class="join__proof-text"> 6753 <div class="join__stars"> 6754 <span class="join__star">â </span> 6755 <span class="join__star">â </span> 6756 <span class="join__star">â </span> 6757 <span class="join__star">â </span> 6758 <span class="join__star">â </span> 6759 </div> 6760 <strong>4.9/5</strong> from 12,000+ reviews 6761 </div> 6762 </div> 6763 6764 <!-- CTAs --> 6765 <div class="join__ctas"> 6766 <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn--join-primary" data-i18n="join_cta_primary"> 6767 <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> 6768 <path d="M3 3.5L13 8L3 12.5V3.5Z" fill="currentColor"/> 6769 </svg> 6770 Start Generating â Free 6771 </a> 6772 <a href="#pricing" class="btn--join-outline" data-i18n="join_cta_secondary"> 6773 View Plans 6774 <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"> 6775 <path d="M3 8h10M8 3l5 5-5 5" stroke-linecap="round" stroke-linejoin="round"/> 6776 </svg> 6777 </a> 6778 </div> 6779 6780 <p class="join__fine" data-i18n="join_fine">No credit card required · Cancel anytime · Free tier always available</p> 6781 6782 </div><!-- /.join__left --> 6783 6784 <!-- RIGHT â stats + checklist --> 6785 <div class="join__right"> 6786 6787 <div class="join__stat-tile"> 6788 <div class="join__stat-tile-icon" style="background:rgba(212,255,0,0.1)"> 6789 <svg viewBox="0 0 18 18" fill="none" stroke="#d4ff00" stroke-width="1.5"> 6790 <path d="M3 3.5L15 9L3 14.5V3.5Z"/> 6791 </svg> 6792 </div> 6793 <div> 6794 <div class="join__stat-tile-val">2.4<span>M</span></div> 6795 <div class="join__stat-tile-label" data-i18n="join_stat_videos_label">Videos Generated</div> 6796 </div> 6797 </div> 6798 6799 <div class="join__stat-tile"> 6800 <div class="join__stat-tile-icon" style="background:rgba(0,194,255,0.1)"> 6801 <svg viewBox="0 0 18 18" fill="none" stroke="#00c2ff" stroke-width="1.5"> 6802 <circle cx="9" cy="7" r="3.5"/> 6803 <path d="M2 17c0-3.87 3.13-7 7-7h0c3.87 0 7 3.13 7 7"/> 6804 </svg> 6805 </div> 6806 <div> 6807 <div class="join__stat-tile-val">184<span>K</span></div> 6808 <div class="join__stat-tile-label" data-i18n="join_stat_creators_label">Active Creators</div> 6809 </div> 6810 </div> 6811 6812 <div class="join__stat-tile"> 6813 <div class="join__stat-tile-icon" style="background:rgba(255,77,0,0.1)"> 6814 <svg viewBox="0 0 18 18" fill="none" stroke="#ff4d00" stroke-width="1.5"> 6815 <path d="M9 2l2.09 4.26L16 7.27l-3.5 3.41.83 4.81L9 13.25l-4.33 2.27.83-4.8
68151L2 7.27l4.91-.01L9 2z"/> 6816 </svg> 6817 </div> 6818 <div> 6819 <div class="join__stat-tile-val">4.9<span>â </span></div> 6820 <div class="join__stat-tile-label" data-i18n="join_stat_rating_label">Avg Rating</div> 6821 </div> 6822 </div> 6823 6824 <div class="join__checklist"> 6825 <div class="join__check-item"> 6826 <div class="join__check-icon"> 6827 <svg viewBox="0 0 9 9" fill="none" stroke="#d4ff00" stroke-width="1.8" stroke-linecap="round"> 6828 <path d="M1.5 4.5L3.5 6.5L7.5 2.5"/> 6829 </svg> 6830 </div> 6831 <span data-i18n="join_check_1">Free tier â no card needed</span> 6832 </div> 6833 <div class="join__check-item"> 6834 <div class="join__check-icon"> 6835 <svg viewBox="0 0 9 9" fill="none" stroke="#d4ff00" stroke-width="1.8" stroke-linecap="round"> 6836 <path d="M1.5 4.5L3.5 6.5L7.5 2.5"/> 6837 </svg> 6838 </div> 6839 <span data-i18n="join_check_2">6+ AI models in one workspace</span> 6840 </div> 6841 <div class="join__check-item"> 6842 <div class="join__check-icon"> 6843 <svg viewBox="0 0 9 9" fill="none" stroke="#d4ff00" stroke-width="1.8" stroke-linecap="round"> 6844 <path d="M1.5 4.5L3.5 6.5L7.5 2.5"/> 6845 </svg> 6846 </div> 6847 <span data-i18n="join_check_3">You own everything you create</span> 6848 </div> 6849 <div class="join__check-item"> 6850 <div class="join__check-icon"> 6851 <svg viewBox="0 0 9 9" fill="none" stroke="#d4ff00" stroke-width="1.8" stroke-linecap="round"> 6852 <path d="M1.5 4.5L3.5 6.5L7.5 2.5"/> 6853 </svg> 6854 </div> 6855 <span data-i18n="join_check_4">Export-ready in MP4, WebM, GIF</span> 6856 </div> 6857 <div class="join__check-item"> 6858 <div class="join__check-icon"> 6859 <svg viewBox="0 0 9 9" fill="none" stroke="#d4ff00" stroke-width="1.8" stroke-linecap="round"> 6860 <path d="M1.5 4.5L3.5 6.5L7.5 2.5"/> 6861 </svg> 6862 </div> 6863 <span data-i18n="join_check_5">Cancel anytime â no lock-in</span> 6864 </div> 6865 </div> 6866 6867 </div><!-- /.join__right --> 6868 6869 </div><!-- /.join__content --> 6870 </div><!-- /.join__banner --> 6871 6872 </div> 6873 </section> 6874 6875
6875<script type="6c18279ba6d93a40249c492f-text/javascript"> 6876 // Scroll reveal for join banner 6877 (function () { 6878 const banner = document.querySelector('[data-join-banner]'); 6879 if (!banner) return; 6880 const obs = new IntersectionObserver(entries => { 6881 entries.forEach(e => { 6882 if (e.isIntersecting) { 6883 e.target.classList.add('in-view'); 6884 obs.unobserve(e.target); 6885 } 6886 }); 6887 }, { threshold: 0.15 }); 6888 obs.observe(banner); 6889 })(); 6890 </script>
6890 6891 6892 <!-- â¼â¼â¼ SECTION 10 â PRICING â¼â¼â¼ --> 6893 <style> 6894 6895 /* âââââââââââââââââââââââââââââââââââââââââââ 6896 PRICING SECTION 6897 âââââââââââââââââââââââââââââââââââââââââââ */ 6898 .pricing { 6899 position: relative; 6900 padding-block: var(--section-pad); 6901 overflow: hidden; 6902 background: var(--c-bg-2); 6903 } 6904 6905 .pricing::before, 6906 .pricing::after { 6907 content: ''; 6908 position: absolute; 6909 left: 0; right: 0; height: 120px; 6910 pointer-events: none; z-index: 1; 6911 } 6912 .pricing::before { top: 0; background: linear-gradient(to bottom, var(--c-bg), transparent); } 6913 .pricing::after { bottom: 0; background: linear-gradient(to top, var(--c-bg), transparent); } 6914 6915 /* Ambient background glow */ 6916 .pricing__glow { 6917 position: absolute; 6918 width: 700px; height: 700px; 6919 border-radius: 50%; 6920 background: radial-gradient(circle, rgba(212,255,0,0.06) 0%, transparent 65%); 6921 top: 50%; left: 50%; 6922 transform: translate(-50%, -50%); 6923 pointer-events: none; 6924 } 6925 6926 /* ââ Header ââ */ 6927 .pricing__header { 6928 position: relative; 6929 z-index: 2; 6930 text-align: center; 6931 margin-bottom: clamp(3rem, 6vw, 5rem); 6932 } 6933 6934 .pricing__label { 6935 display: inline-flex; 6936 align-items: center; 6937 gap: 0.6rem; 6938 font-family: var(--font-mono); 6939 font-size: var(--text-xs); 6940 color: var(--c-accent); 6941 text-transform: uppercase; 6942 letter-spacing: 0.14em; 6943 margin-bottom: 1.25rem; 6944 } 6945 6946 .pricing__label-line { width: 32px; height: 1px; background: var(--c-accent); opacity: 0.5; } 6947 6948 .pricing__title { 6949 font-family: var(--font-display); 6950 font-size: clamp(2.8rem, 6vw, 5.5rem); 6951 line-height: 0.92; 6952 text-transform: uppercase; 6953 color: var(--c-white); 6954 letter-spacing: 0.02em; 6955 margin-bottom: 1.25rem; 6956 } 6957 6958 .pricing__title em { font-style: normal; color: var(--c-accent); } 6959 6960 .pricing__subtitle { 6961 font-size: var(--text-lg); 6962 color: var(--c-text-muted); 6963 max-width: 480px; 6964 margin-inline: auto; 6965 line-height: 1.6; 6966 } 6967 6968 /* ââ Billing Toggle ââ */ 6969 .pricing__toggle { 6970 display: inline-flex; 6971 align-items: center; 6972 gap: 0.85rem; 6973 margin-top: 2rem; 6974 padding: 0.35rem; 6975 background: var(--c-surface); 6976 border: 1px solid var(--c-border); 6977 border-radius: var(--r-full); 6978 } 6979 6980 .pricing__toggle-label { 6981 font-size: var(--text-sm); 6982 color: var(--c-text-muted); 6983 padding: 0 0.6rem; 6984 cursor: pointer; 6985 transition: color var(--t-fast); 6986 } 6987 6988 .pricing__toggle-label.is-active { color: var(--c-white); font-weight: 600; } 6989 6990 .pricing__toggle-switch { 6991 position: relative; 6992 width: 44px; height: 24px; 6993 background: var(--c-bg-3); 6994 border: 1px solid var(--c-border-hi); 6995 border-radius: var(--r-full); 6996 cursor: pointer; 6997 transition: background var(--t-base); 6998 flex-shrink: 0; 6999 } 7000 7001 .pricing__toggle-switch.is-annual { background: var(--c-accent); } 7002 7003 .pricing__toggle-knob { 7004 position: absolute; 7005 top: 3px; left: 3px; 7006 width: 16px; height: 16px; 7007 background: var(--c-white); 7008 border-radius: 50%; 7009 transition: transform var(--t-base) var(--ease); 7010 box-shadow: 0 1px 4px rgba(0,0,0,0.4); 7011 } 7012 7013 .pricing__toggle-switch.is-annual .pricing__toggle-knob { 7014 transform: translateX(20px); 7015 } 7016 7017 .pricing__toggle-switch.is-annual .pricing__toggle-knob { background: var(--c-black); } 7018 7019 .pricing__save-badge { 7020 display: inline-flex; 7021 align-items: center; 7022 padding: 0.2rem 0.6rem; 7023 background: rgba(212,255,0,0.12); 7024 border: 1px solid rgba(212,255,0,0.3); 7025 border-radius: var(--r-full); 7026 font-family: var(--font-mono); 7027 font-size: 0.6rem; 7028 color: var(--c-accent); 7029 letter-spacing: 0.06em; 7030 text-transform: uppercase; 7031 white-space: nowrap; 7032 } 7033 7034 /* ââ Plans Grid ââ */ 7035 .pricing__grid { 7036 position: relative; 7037 z-index: 2; 7038 display: grid; 7039 grid-template-columns: repeat(3, 1fr); 7040 gap: 1.25rem; 7041 align-items: start; 7042 margin-top: 3rem; 7043 } 7044 7045 /* Plan card */ 7046 .plan { 7047 position: relative;
7048 border-radius: var(--r-xl); 7049 border: 1px solid var(--c-border); 7050 background: var(--c-surface); 7051 padding: 2rem; 7052 overflow: hidden; 7053 opacity: 0; 7054 transform: translateY(28px); 7055 transition: opacity 0.65s var(--ease), transform 0.65s var(--ease), 7056 border-color var(--t-base), box-shadow var(--t-slow); 7057 } 7058 7059 .plan.in-view { opacity: 1; transform: translateY(0); } 7060 .plan:nth-child(1) { transition-delay: 0.05s; } 7061 .plan:nth-child(2) { transition-delay: 0.14s; } 7062 .plan:nth-child(3) { transition-delay: 0.23s; } 7063 7064 .plan:hover { 7065 border-color: var(--c-border-hi); 7066 box-shadow: var(--shadow-lg); 7067 transform: translateY(-4px) !important; 7068 } 7069 7070 /* FEATURED plan â Pro / Creator */ 7071 .plan--featured { 7072 border-color: rgba(212,255,0,0.35); 7073 background: linear-gradient(160deg, #111800 0%, #0c1100 50%, #080c00 100%); 7074 transform: translateY(-8px) !important; 7075 } 7076 7077 .plan--featured.in-view { transform: translateY(-8px) !important; } 7078 7079 .plan--featured:hover { 7080 border-color: rgba(212,255,0,0.6); 7081 box-shadow: 0 0 60px rgba(212,255,0,0.12), var(--shadow-lg); 7082 transform: translateY(-14px) !important; 7083 } 7084 7085 /* Glow behind featured */ 7086 .plan--featured::before { 7087 content: ''; 7088 position: absolute; 7089 inset: 0; 7090 background: radial-gradient(circle at 50% 0%, rgba(212,255,0,0.08) 0%, transparent 60%); 7091 pointer-events: none; 7092 } 7093 7094 /* Popular badge */ 7095 .plan__popular { 7096 position: absolute; 7097 top: -1px; left: 50%; 7098 transform: translateX(-50%); 7099 padding: 0.3rem 1.1rem; 7100 background: var(--c-accent); 7101 color: var(--c-black); 7102 font-family: var(--font-mono); 7103 font-size: 0.62rem; 7104 font-weight: 700; 7105 text-transform: uppercase; 7106 letter-spacing: 0.1em; 7107 border-radius: 0 0 var(--r-md) var(--r-md); 7108 } 7109 7110 /* Plan header */ 7111 .plan__header { margin-bottom: 1.75rem; padding-top: 0.5rem; } 7112 7113 .plan__name { 7114 font-family: var(--font-display); 7115 font-size: 1.5rem; 7116 text-transform: uppercase; 7117 letter-spacing: 0.06em; 7118 color: var(--c-white); 7119 margin-bottom: 0.4rem; 7120 } 7121 7122 .plan__tagline { 7123 font-size: var(--text-xs); 7124 color: var(--c-text-dim); 7125 font-family: var(--font-mono); 7126 letter-spacing: 0.06em; 7127 } 7128 7129 /* Price block */ 7130 .plan__price { 7131 margin-bottom: 1.75rem; 7132 padding-bottom: 1.75rem; 7133 border-bottom: 1px solid var(--c-border); 7134 } 7135 7136 .plan__amount { 7137 display: flex; 7138 align-items: flex-start; 7139 gap: 0.15rem; 7140 line-height: 1; 7141 margin-bottom: 0.35rem; 7142 } 7143 7144 .plan__currency { 7145 font-family: var(--font-display); 7146 font-size: 1.4rem; 7147 color: var(--c-text-muted); 7148 margin-top: 0.6rem; 7149 letter-spacing: 0; 7150 } 7151 7152 .plan__number { 7153 font-family: var(--font-display); 7154 font-size: clamp(3rem, 5vw, 4rem); 7155 color: var(--c-white); 7156 letter-spacing: -0.02em; 7157 } 7158 7159 .plan--featured .plan__number { color: var(--c-accent); } 7160 7161 .plan__period { 7162 font-size: var(--text-xs); 7163 color: var(--c-text-dim); 7164 font-family: var(--font-mono); 7165 letter-spacing: 0.06em; 7166 align-self: flex-end; 7167 margin-bottom: 0.3rem; 7168 } 7169 7170 .plan__annual-note { 7171 font-size: var(--text-xs); 7172 color: var(--c-text-dim); 7173 font-family: var(--font-mono); 7174 letter-spacing: 0.04em; 7175 min-height: 1.2rem; 7176 } 7177 7178 .plan__annual-note.has-discount { color: var(--c-accent); } 7179 7180 /* CTA button */ 7181 .plan__cta { 7182 display: block; 7183 width: 100%; 7184 padding: 0.9rem; 7185 border-radius: var(--r-full); 7186 text-align: center; 7187 font-size: var(--text-sm); 7188 font-weight: 700; 7189 letter-spacing: 0.04em; 7190 margin-bottom: 1.75rem; 7191 transition: all var(--t-base) var(--ease); 7192 } 7193 7194 .plan__cta--outline { 7195 border: 1px solid var(--c-border-hi); 7196 color: var(--c-text-muted); 7197 } 7198 7199 .plan__cta--outline:hover { 7200 border-color: var(--c-white); 7201 color: var(--c-white); 7202 background: rgba(255,255,255,0.05); 7203 } 7204 7205 .plan__cta--primary { 7206 background: var(--c-accent); 7207 color: var(--c-black); 7208 position: relative; 7209 overflow: hidden; 7210 } 7211 7212 .plan__cta--primary::after { 7213 content: ''; 7214 position: absolute; 7215 top: 0; left: -100%; 7216 width: 60%; 7217 height: 100%; 7218 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); 7219 transition: left 0.5s var(--ease); 7220 } 7221 7222 .plan__cta--primary:hover::after { left: 150%; } 7223 7224 .plan__cta--primary:hover { 7225 background: #e8ff33; 7226 box-shadow: 0 0 30px rgba(212,255,0,0.35); 7227 transform: translateY(-1px); 7228 } 7229 7230 .plan__cta--enterprise { 7231 border: 1px solid rgba(167,139,250,0.4); 7232 color: #a78bfa; 7233 } 7234 7235 .plan__cta--enterprise:hover { 7236 background: rgba(167,139,250,0.08); 7237 border-color: #a78bfa; 7238 transform: translateY(-1px); 7239 } 7240 7241 /* Feature list */ 7242 .plan__features { 7243 display: flex; 7244 flex-direction: column; 7245 gap: 0.75rem; 7246 } 7247 7248 .plan__feature { 7249 display: flex; 7250 align-items: flex-start; 7251 gap: 0.65rem; 7252 font-size: var(--text-sm); 7253 color: var(--c-text-muted); 7254 line-height: 1.4; 7255 } 7256 7257 .plan__feature-icon { 7258 width: 18px; height: 18px; 7259 border-radius: 50%; 7260 display: grid; 7261 place-items: center; 7262 flex-shrink: 0;
7263 margin-top: 1px; 7264 } 7265 7266 .plan__feature-icon svg { width: 9px; height: 9px; } 7267 7268 .plan__feature-icon--check { 7269 background: rgba(212,255,0,0.1); 7270 border: 1px solid rgba(212,255,0,0.25); 7271 } 7272 7273 .plan__feature-icon--check svg { stroke: var(--c-accent); } 7274 7275 .plan__feature-icon--purple { 7276 background: rgba(167,139,250,0.1); 7277 border: 1px solid rgba(167,139,250,0.25); 7278 } 7279 7280 .plan__feature-icon--purple svg { stroke: #a78bfa; } 7281 7282 .plan__feature-icon--muted { 7283 background: rgba(255,255,255,0.04); 7284 border: 1px solid var(--c-border); 7285 } 7286 7287 .plan__feature-icon--muted svg { stroke: var(--c-text-dim); } 7288 7289 .plan__feature-label { flex: 1; } 7290 .plan__feature-label strong { color: var(--c-text); font-weight: 500; } 7291 7292 .plan__feature-badge { 7293 font-family: var(--font-mono); 7294 font-size: 0.55rem; 7295 padding: 0.1rem 0.45rem; 7296 border-radius: var(--r-full); 7297 background: rgba(212,255,0,0.1); 7298 color: var(--c-accent); 7299 border: 1px solid rgba(212,255,0,0.2); 7300 text-transform: uppercase; 7301 letter-spacing: 0.06em; 7302 flex-shrink: 0; 7303 align-self: center; 7304 } 7305 7306 .plan__feature-divider { 7307 height: 1px; 7308 background: var(--c-border); 7309 margin: 0.25rem 0; 7310 } 7311 7312 /* Credit display */ 7313 .plan__credits { 7314 display: flex; 7315 align-items: center; 7316 gap: 0.6rem; 7317 padding: 0.65rem 0.85rem; 7318 background: rgba(0,0,0,0.25); 7319 border: 1px solid var(--c-border); 7320 border-radius: var(--r-md); 7321 margin-bottom: 1rem; 7322 } 7323 7324 .plan__credits-icon { 7325 width: 28px; height: 28px; 7326 border-radius: var(--r-sm); 7327 display: grid; 7328 place-items: center; 7329 flex-shrink: 0; 7330 } 7331 7332 .plan__credits-icon svg { width: 14px; height: 14px; } 7333 7334 .plan__credits-val { 7335 font-family: var(--font-display); 7336 font-size: 1.2rem; 7337 color: var(--c-white); 7338 letter-spacing: 0.04em; 7339 } 7340 7341 .plan__credits-label { 7342 font-size: var(--text-xs); 7343 color: var(--c-text-dim); 7344 font-family: var(--font-mono); 7345 text-transform: uppercase; 7346 letter-spacing: 0.06em; 7347 } 7348 7349 /* Enterprise plan wide card */ 7350 .plan--enterprise { 7351 grid-column: span 3; 7352 background: linear-gradient(100deg, #0f0a1a 0%, #0a0a18 50%, #08060f 100%); 7353 border-color: rgba(167,139,250,0.2); 7354 padding: 2rem 2.5rem; 7355 } 7356 7357 .plan--enterprise:hover { 7358 border-color: rgba(167,139,250,0.45); 7359 box-shadow: 0 0 50px rgba(167,139,250,0.08), var(--shadow-lg); 7360 } 7361 7362 .plan--enterprise .plan__inner { 7363 display: grid; 7364 grid-template-columns: 1fr 1fr 1fr; 7365 gap: 2rem; 7366 align-items: center; 7367 } 7368 7369 .plan--enterprise .plan__features { 7370 grid-template-columns: 1fr 1fr; 7371 display: grid; 7372 gap: 0.6rem; 7373 } 7374 7375 /* Comparison note */ 7376 .pricing__compare { 7377 position: relative; 7378 z-index: 2; 7379 text-align: center; 7380 margin-top: 2.5rem; 7381 } 7382 7383 .pricing__compare a { 7384 font-size: var(--text-sm); 7385 color: var(--c-text-dim); 7386 text-decoration: underline; 7387 text-underline-offset: 3px; 7388 transition: color var(--t-fast); 7389 } 7390 7391 .pricing__compare a:hover { color: var(--c-accent-3); } 7392 7393 /* Guarantee strip */ 7394 .pricing__guarantee { 7395 position: relative; 7396 z-index: 2; 7397 display: flex; 7398 align-items: center; 7399 justify-content: center; 7400 gap: 2rem; 7401 margin-top: 3rem; 7402 padding: 1.25rem 2rem; 7403 border: 1px solid var(--c-border); 7404 border-radius: var(--r-full); 7405 flex-wrap: wrap; 7406 } 7407 7408 .pricing__guarantee-item { 7409 display: flex; 7410 align-items: center; 7411 gap: 0.5rem; 7412 font-size: var(--text-xs); 7413 color: var(--c-text-muted); 7414 font-family: var(--font-mono); 7415 text-transform: uppercase; 7416 letter-spacing: 0.08em; 7417 } 7418 7419 .pricing__guarantee-item svg { width: 14px; height: 14px; color: var(--c-accent); } 7420 7421 /* Responsive */ 7422 @media (max-width: 960px) { 7423 .pricing__grid { grid-template-columns: 1fr; } 7424 .plan--featured { transform: none !important; } 7425 .plan--featured.in-view { transform: translateY(-4px) !important; } 7426 .plan--enterprise { grid-column: span 1; } 7427 .plan--enterprise .plan__inner { grid-template-columns: 1fr; } 7428 .plan--enterprise .plan__features { grid-template-columns: 1fr; } 7429 } 7430 7431 @media (max-width: 540px) { 7432 .pricing__guarantee { flex-direction: column; gap: 1rem;
7432 border-radius: var(--r-xl); } 7433 } 7434 7435 </style> 7436 7437 <section class="pricing" id="pricing" aria-label="Pricing Plans"> 7438 <div class="pricing__glow" aria-hidden="true"></div> 7439 <div class="container"> 7440 7441 <!-- Header --> 7442 <div class="pricing__header"> 7443 <div class="pricing__label"> 7444 <span class="pricing__label-line"></span> 7445 <span data-i18n="pricing_section_label">Pricing</span> 7446 <span class="pricing__label-line"></span> 7447 </div> 7448 <h2 class="pricing__title"><span data-i18n="pricing_title_line1">Simple Pricing.</span><br><em data-i18n="pricing_title_accent">Serious Output.</em></h2> 7449 <p class="pricing__subtitle" data-i18n="pricing_subtitle">Start free. Scale when you're ready. Every plan includes full model access and commercial licensing.</p> 7450 7451 <!-- Billing toggle --> 7452 <div class="pricing__toggle" id="billing-toggle"> 7453 <span class="pricing__toggle-label is-active" id="toggle-monthly" data-i18n="pricing_toggle_monthly">Monthly</span> 7454 <div class="pricing__toggle-switch" id="toggle-switch"> 7455 <div class="pricing__toggle-knob"></div> 7456 </div> 7457 <span class="pricing__toggle-label" id="toggle-annual" data-i18n="pricing_toggle_annual">Annual</span> 7458 <span class="pricing__save-badge" data-i18n="pricing_save_badge">Save 30%</span> 7459 </div> 7460 </div> 7461 7462 <!-- Plans grid --> 7463 <div class="pricing__grid"> 7464 7465 <!-- FREE plan --> 7466 <div class="plan" data-plan> 7467 <div class="plan__header"> 7468 <div class="plan__name" data-i18n="plan_free_name">Free</div> 7469 <div class="plan__tagline" data-i18n="plan_free_tagline">Try it â no card needed</div> 7470 </div> 7471 7472 <div class="plan__price"> 7473 <div class="plan__amount"> 7474 <span class="plan__currency">$</span> 7475 <span class="plan__number">0</span> 7476 <span class="plan__period">/mo</span> 7477 </div> 7478 <div class="plan__annual-note"> </div> 7479 </div> 7480 7481 <div class="plan__credits"> 7482 <div class="plan__credits-icon" style="background:rgba(255,255,255,0.06)"> 7483 <svg viewBox="0 0 14 14" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="1.5"> 7484 <path d="M3 3.5L11 7L3 10.5V3.5Z"/> 7485 </svg> 7486 </div> 7487 <div> 7488 <div class="plan__credits-val">25</div> 7489 <div class="plan__credits-label" data-i18n="plan_free_credits_label">Credits / day</div> 7490 </div> 7491 </div> 7492 7493 <a href="https://pixwith.video-generator.ai/pricing" target="_blank" rel="nofollow" class="plan__cta plan__cta--outline" data-i18n="plan_free_cta">Get Started Free</a> 7494 7495 <div class="plan__features"> 7496 <div class="plan__feature"> 7497 <div class="plan__feature-icon plan__feature-icon--check"> 7498 <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg> 7499 </div> 7500 <span class="plan__feature-label" data-i18n="plan_free_f1">Text â Video & Image â Video</span> 7501 </div> 7502 <div class="plan__feature"> 7503 <div class="plan__feature-icon plan__feature-icon--check"> 7504 <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg> 7505 </div> 7506 <span class="plan__feature-label" data-i18n="plan_free_f2">Up to 720p resolution</span> 7507 </div> 7508 <div class="plan__feature"> 7509 <div class="plan__feature-icon plan__feature-icon--check"> 7510 <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg> 7511 </div> 7512 <span class="plan__feature-label" data-i18n="plan_free_f3">Core model access</span> 7513 </div> 7514 <div class="plan__feature"> 7515 <div class="plan__feature-icon plan__feature-icon--check"> 7516 <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg> 7517 </div>
7518 <span class="plan__feature-label" data-i18n="plan_free_f4">Community prompt library</span> 7519 </div> 7520 <div class="plan__feature-divider"></div> 7521 <div class="plan__feature"> 7522 <div class="plan__feature-icon plan__feature-icon--muted"> 7523 <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M2 2l5 5M7 2L2 7"/></svg> 7524 </div> 7525 <span class="plan__feature-label" style="color:var(--c-text-dim)" data-i18n="plan_free_f5">Watermark on exports</span> 7526 </div> 7527 <div class="plan__feature"> 7528 <div class="plan__feature-icon plan__feature-icon--muted"> 7529 <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M2 2l5 5M7 2L2 7"/></svg> 7530 </div> 7531 <span class="plan__feature-label" style="color:var(--c-text-dim)" data-i18n="plan_free_f6">Personal use only</span> 7532 </div> 7533 </div> 7534 </div> 7535 7536 <!-- CREATOR plan â FEATURED --> 7537 <div class="plan plan--featured" data-plan> 7538 <div class="plan__popular" data-i18n="pricing_popular_badge">Most Popular</div> 7539 7540 <div class="plan__header"> 7541 <div class="plan__name" data-i18n="plan_creator_name">Creator</div> 7542 <div class="plan__tagline" data-i18n="plan_creator_tagline">For regular creators & freelancers</div> 7543 </div> 7544 7545 <div class="plan__price"> 7546 <div class="plan__amount"> 7547 <span class="plan__currency">$</span> 7548 <span class="plan__number" data-monthly="29" data-annual="20">29</span> 7549 <span class="plan__period">/mo</span> 7550 </div> 7551 <div class="plan__annual-note" id="creator-annual-note"> </div> 7552 </div> 7553 7554 <div class="plan__credits"> 7555 <div class="plan__credits-icon" style="background:rgba(212,255,0,0.1)"> 7556 <svg viewBox="0 0 14 14" fill="none" stroke="#d4ff00" stroke-width="1.5"> 7557 <path d="M3 3.5L11 7L3 10.5V3.5Z"/> 7558 </svg> 7559 </div> 7560 <div> 7561 <div class="plan__credits-val" style="color:var(--c-accent)">500</div> 7562 <div class="plan__credits-label" data-i18n="plan_creator_credits_label">Credits / month</div> 7563 </div> 7564 </div> 7565 7566 <a href="https://pixwith.video-generator.ai/pricing" target="_blank" rel="nofollow" class="plan__cta plan__cta--primary" data-i18n="plan_creator_cta">Start Creator Plan</a> 7567 7568 <div class="plan__features"> 7569 <div class="plan__feature"> 7570 <div class="plan__feature-icon plan__feature-icon--check"> 7571 <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg> 7572 </div> 7573 <span class="plan__feature-label" data-i18n="plan_creator_f1"><strong>All Free features</strong>, plus:</span> 7574 </div> 7575 <div class="plan__feature"> 7576 <div class="plan__feature-icon plan__feature-icon--check"> 7577 <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg> 7578 </div> 7579 <span class="plan__feature-label" data-i18n="plan_creator_f2">Up to 1080p Full HD</span> 7580 <span class="plan__feature-badge">HD</span> 7581 </div> 7582 <div class="plan__feature"> 7583 <div class="plan__feature-icon plan__feature-icon--check"> 7584 <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg> 7585 </div> 7586 <span class="plan__feature-label" data-i18n="plan_creator_f3">No watermarks</span> 7587 </div> 7588 <div class="plan__feature"> 7589 <div class="plan__feature-icon plan__feature-icon--check"> 7590 <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg> 7591 </div>
7592 <span class="plan__feature-label" data-i18n="plan_creator_f4">Commercial license</span> 7593 </div> 7594 <div class="plan__feature"> 7595 <div class="plan__feature-icon plan__feature-icon--check"> 7596 <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg> 7597 </div> 7598 <span class="plan__feature-label" data-i18n="plan_creator_f5">All 6+ AI models</span> 7599 </div> 7600 <div class="plan__feature"> 7601 <div class="plan__feature-icon plan__feature-icon--check"> 7602 <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg> 7603 </div> 7604 <span class="plan__feature-label" data-i18n="plan_creator_f6">Character consistency mode</span> 7605 <span class="plan__feature-badge" data-i18n="plan_creator_badge_new">New</span> 7606 </div> 7607 <div class="plan__feature"> 7608 <div class="plan__feature-icon plan__feature-icon--check"> 7609 <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg> 7610 </div> 7611 <span class="plan__feature-label" data-i18n="plan_creator_f7">Priority generation speed</span> 7612 </div> 7613 <div class="plan__feature"> 7614 <div class="plan__feature-icon plan__feature-icon--check"> 7615 <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg> 7616 </div> 7617 <span class="plan__feature-label" data-i18n="plan_creator_f8">Credits roll over (up to 2Ã)</span> 7618 </div> 7619 </div> 7620 </div> 7621 7622 <!-- STUDIO plan --> 7623 <div class="plan" data-plan> 7624 <div class="plan__header"> 7625 <div class="plan__name" data-i18n="plan_studio_name">Studio</div> 7626 <div class="plan__tagline" data-i18n="plan_studio_tagline">For teams & power creators</div> 7627 </div> 7628 7629 <div class="plan__price"> 7630 <div class="plan__amount"> 7631 <span class="plan__currency">$</span> 7632 <span class="plan__number" data-monthly="89" data-annual="62">89</span> 7633 <span class="plan__period">/mo</span> 7634 </div> 7635 <div class="plan__annual-note" id="studio-annual-note"> </div> 7636 </div> 7637 7638 <div class="plan__credits"> 7639 <div class="plan__credits-icon" style="background:rgba(167,139,250,0.1)"> 7640 <svg viewBox="0 0 14 14" fill="none" stroke="#a78bfa" stroke-width="1.5"> 7641 <path d="M3 3.5L11 7L3 10.5V3.5Z"/> 7642 </svg> 7643 </div> 7644 <div> 7645 <div class="plan__credits-val" style="color:#a78bfa">2,000</div> 7646 <div class="plan__credits-label" data-i18n="plan_studio_credits_label">Credits / month</div> 7647 </div> 7648 </div> 7649 7650 <a href="https://pixwith.video-generator.ai/pricing" target="_blank" rel="nofollow" class="plan__cta plan__cta--outline" style="border-color:rgba(167,139,250,0.4);color:#a78bfa;" data-i18n="plan_studio_cta">Start Studio Plan</a> 7651 7652 <div class="plan__features"> 7653 <div class="plan__feature"> 7654 <div class="plan__feature-icon plan__feature-icon--purple"> 7655 <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg> 7656 </div> 7657 <span class="plan__feature-label" data-i18n="plan_studio_f1"><strong>All Creator features</strong>, plus:</span> 7658 </div> 7659 <div class="plan__feature"> 7660 <div class="plan__feature-icon plan__feature-icon--purple"> 7661 <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg> 7662 </div> 7663 <span class="plan__feature-label" data-i18n="plan_
7663studio_f2">Up to 4K resolution</span> 7664 <span class="plan__feature-badge" style="background:rgba(167,139,250,0.1);color:#a78bfa;border-color:rgba(167,139,250,0.25)">4K</span> 7665 </div> 7666 <div class="plan__feature"> 7667 <div class="plan__feature-icon plan__feature-icon--purple"> 7668 <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg> 7669 </div> 7670 <span class="plan__feature-label" data-i18n="plan_studio_f3">Private generation mode</span> 7671 </div> 7672 <div class="plan__feature"> 7673 <div class="plan__feature-icon plan__feature-icon--purple"> 7674 <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg> 7675 </div> 7676 <span class="plan__feature-label" data-i18n="plan_studio_f4">Batch export & bulk download</span> 7677 </div> 7678 <div class="plan__feature"> 7679 <div class="plan__feature-icon plan__feature-icon--purple"> 7680 <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg> 7681 </div> 7682 <span class="plan__feature-label" data-i18n="plan_studio_f5">5 team member seats</span> 7683 </div> 7684 <div class="plan__feature"> 7685 <div class="plan__feature-icon plan__feature-icon--purple"> 7686 <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg> 7687 </div> 7688 <span class="plan__feature-label" data-i18n="plan_studio_f6">Dedicated support</span> 7689 </div> 7690 <div class="plan__feature"> 7691 <div class="plan__feature-icon plan__feature-icon--purple"> 7692 <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg> 7693 </div> 7694 <span class="plan__feature-label" data-i18n="plan_studio_f7">API access (beta)</span> 7695 <span class="plan__feature-badge" style="background:rgba(167,139,250,0.1);color:#a78bfa;border-color:rgba(167,139,250,0.25)" data-i18n="plan_studio_badge_beta">Beta</span> 7696 </div> 7697 </div> 7698 </div> 7699 7700 <!-- ENTERPRISE â full width --> 7701 <div class="plan plan--enterprise" data-plan> 7702 <div class="plan__inner"> 7703 <div> 7704 <div class="plan__name" style="font-size:2rem" data-i18n="plan_enterprise_name">Enterprise</div> 7705 <div class="plan__tagline" style="margin-bottom:0.75rem" data-i18n="plan_enterprise_tagline">Custom volume, SLA, dedicated infrastructure</div> 7706 <p style="font-size:var(--text-sm);color:var(--c-text-muted);line-height:1.65;max-width:380px;" data-i18n="plan_enterprise_desc">For studios, agencies, and platforms generating at scale. Custom credit pools, SSO, priority SLA, and white-label options available.</p> 7707 </div> 7708 <div class="plan__features"> 7709 <div class="plan__feature"> 7710 <div class="plan__feature-icon plan__feature-icon--purple"> 7711 <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg> 7712 </div> 7713 <span class="plan__feature-label" data-i18n="plan_enterprise_f1">Unlimited credits (custom)</span> 7714 </div> 7715 <div class="plan__feature"> 7716 <div class="plan__feature-icon plan__feature-icon--purple"> 7717 <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg> 7718 </div> 7719 <span class="plan__feature-label" data-i18n="plan_enterprise_f2">Dedicated GPU infrastructure</span> 7720 </div> 7721 <div class="plan__feature"> 7722 <div class="plan__feature-icon plan__feature-icon--purple"> 7723 <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg> 7724 </div>
7725 <span class="plan__feature-label" data-i18n="plan_enterprise_f3">SSO & advanced security</span> 7726 </div> 7727 <div class="plan__feature"> 7728 <div class="plan__feature-icon plan__feature-icon--purple"> 7729 <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg> 7730 </div> 7731 <span class="plan__feature-label" data-i18n="plan_enterprise_f4">White-label options</span> 7732 </div> 7733 <div class="plan__feature"> 7734 <div class="plan__feature-icon plan__feature-icon--purple"> 7735 <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg> 7736 </div> 7737 <span class="plan__feature-label" data-i18n="plan_enterprise_f5">Priority SLA & onboarding</span> 7738 </div> 7739 <div class="plan__feature"> 7740 <div class="plan__feature-icon plan__feature-icon--purple"> 7741 <svg viewBox="0 0 9 9" fill="none" stroke-width="1.8" stroke-linecap="round"><path d="M1.5 4.5L3.5 6.5L7.5 2.5"/></svg> 7742 </div> 7743 <span class="plan__feature-label" data-i18n="plan_enterprise_f6">Full API & webhook access</span> 7744 </div> 7745 </div> 7746 <div style="display:flex;flex-direction:column;gap:0.75rem;
7746align-items:flex-start"> 7747 <div style="font-family:var(--font-display);font-size:2.5rem;color:#a78bfa;letter-spacing:0.04em;line-height:1" data-i18n="plan_enterprise_custom_label">Custom</div> 7748 <div style="font-size:var(--text-xs);color:var(--c-text-dim);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.08em" data-i18n="plan_enterprise_pricing_label">Pricing</div> 7749 <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="plan__cta plan__cta--enterprise" style="width:auto;padding:0.9rem 2rem;margin:0.5rem 0 0" data-i18n="plan_enterprise_cta">Talk to Sales</a> 7750 <div style="font-size:var(--text-xs);color:var(--c-text-dim);font-family:var(--font-mono)" data-i18n="plan_enterprise_response">Response within 24h</div> 7751 </div> 7752 </div> 7753 </div> 7754 7755 </div><!-- /.pricing__grid --> 7756 7757 <!-- Compare note --> 7758 <div class="pricing__compare"> 7759 <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" data-i18n="pricing_compare_link">See full feature comparison â</a> 7760 </div> 7761 7762 <!-- Guarantee strip --> 7763 <div class="pricing__guarantee"> 7764 <div class="pricing__guarantee-item"> 7765 <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5"> 7766 <path d="M7 1L2 4v4c0 2.76 2.24 5 5 5s5-2.24 5-5V4L7 1z"/> 7767 <path d="M5 7l1.5 1.5L9 5.5" stroke-linecap="round" stroke-linejoin="round"/> 7768 </svg> 7769 <span data-i18n="pricing_guarantee_1">30-day money-back guarantee</span> 7770 </div> 7771 <div class="pricing__guarantee-item"> 7772 <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5"> 7773 <rect x="2" y="4" width="10" height="7" rx="1"/> 7774 <path d="M5 4V3a2 2 0 014 0v1"/> 7775 </svg> 7776 <span data-i18n="pricing_guarantee_2">No credit card for free tier</span> 7777 </div> 7778 <div class="pricing__guarantee-item"> 7779 <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5"> 7780 <path d="M7 1v12M1 7h12"/> 7781 </svg> 7782 <span data-i18n="pricing_guarantee_3">Cancel or change plan anytime</span> 7783 </div> 7784 <div class="pricing__guarantee-item"> 7785 <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5"> 7786 <circle cx="7" cy="7" r="5.5"/> 7787 <path d="M7 4.5v3l2 1.5"/> 7788 </svg> 7789 <span data-i18n="pricing_guarantee_4">Unused credits roll over</span> 7790 </div> 7791 </div> 7792 7793 </div> 7794 </section> 7795 7796
7796<script type="6c18279ba6d93a40249c492f-text/javascript"> 7797 (function () { 7798 // ââ Plan cards scroll reveal ââ 7799 const plans = document.querySelectorAll('[data-plan]'); 7800 const planObs = new IntersectionObserver(entries => { 7801 entries.forEach(e => { 7802 if (e.isIntersecting) { e.target.classList.add('in-view'); planObs.unobserve(e.target); } 7803 }); 7804 }, { threshold: 0.1 }); 7805 plans.forEach(p => planObs.observe(p)); 7806 7807 // ââ Billing toggle ââ 7808 const toggle = document.getElementById('toggle-switch'); 7809 const monthly = document.getElementById('toggle-monthly'); 7810 const annual = document.getElementById('toggle-annual'); 7811 const cnote = document.getElementById('creator-annual-note'); 7812 const snote = document.getElementById('studio-annual-note'); 7813 let isAnnual = false; 7814 7815 function updatePricing() { 7816 document.querySelectorAll('[data-monthly]').forEach(el => { 7817 const m = el.dataset.monthly; 7818 const a = el.dataset.annual; 7819 el.textContent = isAnnual ? a : m; 7820 }); 7821 cnote.textContent = isAnnual ? 'Billed $240/yr â save $108' : ''; 7822 cnote.classList.toggle('has-discount', isAnnual); 7823 snote.textContent = isAnnual ? 'Billed $744/yr â save $324' : ''; 7824 snote.classList.toggle('has-discount', isAnnual); 7825 monthly.classList.toggle('is-active', !isAnnual); 7826 annual.classList.toggle('is-active', isAnnual); 7827 toggle.classList.toggle('is-annual', isAnnual); 7828 } 7829 7830 toggle.addEventListener('click', () => { isAnnual = !isAnnual; updatePricing(); }); 7831 monthly.addEventListener('click', () => { isAnnual = false; updatePricing(); }); 7832 annual.addEventListener('click', () => { isAnnual = true; updatePricing(); }); 7833 })(); 7834 </script>
7834 7835 7836 <!-- â¼â¼â¼ SECTION 11 â LEARN MORE / BLOG EDITORIAL CARDS â¼â¼â¼ --> 7837 <style> 7838 7839 /* âââââââââââââââââââââââââââââââââââââââââââ 7840 LEARN MORE â BLOG / EDITORIAL 7841 âââââââââââââââââââââââââââââââââââââââââââ */ 7842 .learn { 7843 position: relative; 7844 padding-block: var(--section-pad); 7845 overflow: hidden; 7846 } 7847 7848 .learn__header { 7849 display: grid; 7850 grid-template-columns: 1fr auto; 7851 align-items: end; 7852 gap: 2rem; 7853 margin-bottom: clamp(3rem, 6vw, 5rem); 7854 position: relative; 7855 z-index: 2; 7856 } 7857 7858 .learn__label { 7859 display: inline-flex; 7860 align-items: center; 7861 gap: 0.6rem; 7862 font-family: var(--font-mono); 7863 font-size: var(--text-xs); 7864 color: var(--c-accent-2); 7865 text-transform: uppercase; 7866 letter-spacing: 0.14em; 7867 margin-bottom: 1.25rem; 7868 } 7869 7870 .learn__label-line { width: 32px; height: 1px; background: var(--c-accent-2); opacity: 0.5; } 7871 7872 .learn__title { 7873 font-family: var(--font-display); 7874 font-size: clamp(2.8rem, 6vw, 5rem); 7875 line-height: 0.92; 7876 text-transform: uppercase; 7877 color: var(--c-white); 7878 letter-spacing: 0.02em; 7879 } 7880 7881 .learn__title em { font-style: normal; color: var(--c-accent-2); } 7882 7883 /* ââ Cards grid ââ */ 7884 .learn__grid { 7885 position: relative; 7886 z-index: 2; 7887 display: grid; 7888 grid-template-columns: repeat(12, 1fr); 7889 gap: 1.25rem; 7890 } 7891 7892 /* Featured (wide) */ 7893 .article--featured { grid-column: span 7; } 7894 /* Standard */ 7895 .article--sm { grid-column: span 5; } 7896 .article--third { grid-column: span 4; } 7897 7898 /* Article card base */ 7899 .article { 7900 position: relative; 7901 border-radius: var(--r-xl); 7902 border: 1px solid var(--c-border); 7903 background: var(--c-surface); 7904 overflow: hidden; 7905 cursor: pointer; 7906 opacity: 0; 7907 transform: translateY(24px); 7908 transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), 7909 border-color var(--t-base), box-shadow var(--t-slow); 7910 } 7911 7912 .article.in-view { opacity: 1; transform: translateY(0); } 7913 .article:nth-child(1) { transition-delay: 0.04s; } 7914 .article:nth-child(2) { transition-delay: 0.12s; } 7915 .article:nth-child(3) { transition-delay: 0.08s; } 7916 .article:nth-child(4) { transition-delay: 0.14s; } 7917 .article:nth-child(5) { transition-delay: 0.20s; } 7918 7919 .article:hover { 7920 border-color: var(--c-border-hi); 7921 box-shadow: var(--shadow-lg); 7922 transform: translateY(-5px) !important; 7923 } 7924 7925 /* Thumb */ 7926 .article__thumb { 7927 position: relative; 7928 overflow: hidden; 7929 } 7930 7931 .article--featured .article__thumb { aspect-ratio: 16/9; } 7932 .article--sm .article__thumb { aspect-ratio: 4/3; } 7933 .article--third .article__thumb { aspect-ratio: 3/2; } 7934 7935 .article__thumb-bg { 7936 position: absolute; 7937 inset: 0; 7938 transition: transform 0.7s var(--ease); 7939 } 7940 7941 .article:hover .article__thumb-bg { transform: scale(1.06); } 7942 7943 /* Category badge on thumb */ 7944 .article__cat { 7945 position: absolute; 7946 top: 1rem; left: 1rem; 7947 padding: 0.28rem 0.75rem; 7948 border-radius: var(--r-full); 7949 font-family: var(--font-mono); 7950 font-size: 0.6rem; 7951 text-transform: uppercase; 7952 letter-spacing: 0.1em; 7953 backdrop-filter: blur(10px); 7954 -webkit-backdrop-filter: blur(10px); 7955 border: 1px solid; 7956 z-index: 2; 7957 } 7958 7959 /* Read time */ 7960 .article__read { 7961 position: absolute; 7962 bottom: 1rem; right: 1rem; 7963 font-family: var(--font-mono); 7964 font-size: 0.58rem; 7965 color: rgba(255,255,255,0.5); 7966 background: rgba(0,0,0,0.55); 7967 padding: 0.18rem 0.5rem; 7968 border-radius: var(--r-sm); 7969 backdrop-filter: blur(4px); 7970 } 7971 7972 /* Arrow overlay */ 7973 .article__arrow { 7974 position: absolute; 7975 bottom: 1rem; left: 1rem; 7976 width: 36px; height: 36px; 7977 background: rgba(255,255,255,0.1); 7978 border: 1px solid rgba(255,255,255,0.2); 7979 border-radius: 50%; 7980 display: grid; 7981 place-items: center; 7982 opacity: 0; 7983 transform: scale(0.8); 7984 transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), 7985 background var(--t-base); 7986 backdrop-filter: blur(8px); 7987 } 7988 7989 .article:hover .article__arrow { 7990 opacity: 1; 7991 transform: scale(1); 7992 background: var(--c-accent); 7993 border-color: var(--c-accent); 7994 } 7995 7996 .article__arrow svg { width: 14px; height: 14px; } 7997 .article:hover .article__arrow svg { stroke: var(--c-black); } 7998 7999 /* Body */ 8000 .article__body { padding: 1.5rem 1.75rem 1.75rem; } 8001 8002 .article__meta { 8003 display: flex; 8004 align-items: center; 8005 gap: 0.75rem; 8006 margin-bottom: 0.75rem; 8007 font-family: var(--font-mono); 8008 font-size: 0.6rem; 8009 color: var(--c-text-dim); 8010 text-transform: uppercase; 8011 letter-spacing: 0.08em; 8012 } 8013 8014 .article__meta-sep { opacity: 0.4; } 8015 8016 .article__title { 8017 font-family: var(--font-display); 8018 font-size: clamp(1.2rem, 2.2vw, 1.6rem); 8019 line-height: 1; 8020 text-transform: uppercase; 8021 letter-spacing: 0.03em; 8022 color: var(--c-white); 8023 margin-bottom: 0.65rem; 8024 transition: color var(--t-fast); 8025 } 8026 8027 .article:hover .article__title { color: var(--c-accent-2); } 8028 8029 .article__excerpt { 8030 font-size: var(--text-sm); 8031 color: var(--c-text-muted); 8032 line-height: 1.65; 8033 margin-bottom: 1.1rem; 8034 display: -webkit-box; 8035 -webkit-line-clamp: 3; 8036 -webkit-box-orient: vertical; 8037 overflow: hidden; 8038 } 8039 8040 .article--third .article__excerpt { -webkit-line-clamp: 2; } 8041 8042 .article__footer { 8043 display: flex; 8044 align-items: center; 8045 justify-content: space-between; 8046 gap: 1rem; 8047 padding-top: 0.85rem; 8048 border-top: 1px solid var(--c-border); 8049 } 8050 8051 .article__author { 8052 display: flex; 8053 align-items: center; 8054 gap: 0.5rem; 8055 font-size: var(--text-xs); 8056 color: var(--c-text-dim); 8057 } 8058 8059 .article__author-avatar { 8060 width: 22px; height: 22px; 8061 border-radius: 50%; 8062 display: grid; 8063 place-items: center; 8064 font-size: 0.5rem; 8065 font-weight: 700; 8066 flex-shrink: 0; 8067 } 8068 8069 .article__tag { 8070 font-family: var(--font-mono); 8071 font-size: 0.58rem; 8072 padding: 0.18rem 0.5rem; 8073 border-radius: var(--r-full); 8074 border: 1px solid var(--c-border); 8075 color: var(--c-text-dim); 8076 text-transform: uppercase; 8077 letter-spacing: 0.06em; 8078 transition: all var(--t-fast); 8079 } 8080 8081 .article:hover .article__tag { border-color: var(--c-accent-2); color: var(--c-accent-2); } 8082 8083 /* Newsletter mini strip at bottom of learn */ 8084 .learn__newsletter { 8085 position: relative; 8086 z-index: 2; 8087 margin-top: 3rem; 8088 display: flex; 8089 align-items: center; 8090 gap: 1.5rem; 8091 padding: 1.5rem 2rem; 8092 background: rgba(255,77,0,0.04); 8093 border: 1px solid rgba(255,77,0,0.15);
8094 border-radius: var(--r-xl); 8095 flex-wrap: wrap; 8096 } 8097 8098 .learn__newsletter-icon { 8099 width: 44px; height: 44px; 8100 background: rgba(255,77,0,0.1); 8101 border-radius: var(--r-md); 8102 display: grid; 8103 place-items: center; 8104 flex-shrink: 0; 8105 } 8106 8107 .learn__newsletter-icon svg { width: 20px; height: 20px; } 8108 8109 .learn__newsletter-copy { flex: 1; min-width: 200px; } 8110 8111 .learn__newsletter-title { 8112 font-family: var(--font-display); 8113 font-size: 1.3rem; 8114 text-transform: uppercase; 8115 color: var(--c-white); 8116 letter-spacing: 0.04em; 8117 margin-bottom: 0.2rem; 8118 } 8119 8120 .learn__newsletter-desc { 8121 font-size: var(--text-xs); 8122 color: var(--c-text-muted); 8123 } 8124 8125 .learn__newsletter-form { 8126 display: flex; 8127 gap: 0.5rem; 8128 flex-shrink: 0; 8129 flex-wrap: wrap; 8130 } 8131 8132 .learn__newsletter-input { 8133 background: var(--c-surface); 8134 border: 1px solid var(--c-border-hi); 8135 border-radius: var(--r-full); 8136 padding: 0.65rem 1.25rem; 8137 font-size: var(--text-sm); 8138 color: var(--c-text); 8139 outline: none; 8140 width: 220px; 8141 transition: border-color var(--t-base), box-shadow var(--t-base); 8142 } 8143 8144 .learn__newsletter-input::placeholder { color: var(--c-text-dim); } 8145 .learn__newsletter-input:focus { border-color: var(--c-accent-2); box-shadow: 0 0 0 3px rgba(255,77,0,0.1); } 8146 8147 .learn__newsletter-btn { 8148 padding: 0.65rem 1.35rem; 8149 background: var(--c-accent-2); 8150 color: var(--c-bg); 8151 border-radius: var(--r-full); 8152 font-size: var(--text-sm); 8153 font-weight: 700; 8154 letter-spacing: 0.04em; 8155 transition: all var(--t-base) var(--ease); 8156 white-space: nowrap; 8157 } 8158 8159 .learn__newsletter-btn:hover { 8160 background: #ff6820; 8161 box-shadow: 0 0 24px rgba(255,77,0,0.35); 8162 transform: translateY(-1px); 8163 } 8164 8165 /* Responsive */ 8166 @media (max-width: 1000px) { 8167 .article--featured, .article--sm { grid-column: span 12; } 8168 .article--third { grid-column: span 6; } 8169 .learn__header { grid-template-columns: 1fr; } 8170 } 8171 8172 @media (max-width: 600px) { 8173 .article--third { grid-column: span 12; } 8174 .learn__grid { grid-template-columns: 1fr; } 8175 } 8176 8177 </style> 8178 8179 <section class="learn" id="learn" aria-label="Learn More â Editorial"> 8180 <div class="container"> 8181 8182 <div class="learn__header"> 8183 <div> 8184 <div class="learn__label"> 8185 <span class="learn__label-line"></span> 8186 <span data-i18n="learn_section_label">Learn More</span> 8187 <span class="learn__label-line"></span> 8188 </div> 8189 <h2 class="learn__title"><span data-i18n="learn_title_line1">Guides, Tips &</span><br><em data-i18n="learn_title_accent">Deep Dives</em></h2> 8190 </div> 8191 <a href="/blog/" target="_blank" rel="nofollow" class="btn btn--ghost" style="white-space:nowrap" data-i18n="learn_view_all">View All Articles</a> 8192 </div> 8193 8194 <div class="learn__grid"> 8195 8196 <!-- FEATURED article --> 8197 <div class="article article--featured" data-article> 8198 <div class="article__thumb"> 8199 <div class="article__thumb-bg" style="background:linear-gradient(140deg,#0d1a0a 0%,#162600 35%,#0a1200 70%,#050900 100%);"> 8200 <svg style="position:absolute;inset:0;width:100%;height:100%" viewBox="0 0 600 338" preserveAspectRatio="xMidYMid slice" fill="none"> 8201 <circle cx="500" cy="80" r="180" fill="rgba(212,255,0,0.06)"/> 8202 <circle cx="120" cy="280" r="120" fill="rgba(212,255,0,0.04)"/> 8203 <rect x="180" y="80" width="240" height="160" rx="8" stroke="rgba(212,255,0,0.1)" stroke-width="0.8" fill="none" transform="rotate(8,300,160)"/> 8204 <line x1="0" y1="169" x2="600" y2="169" stroke="rgba(212,255,0,0.06)" stroke-width="0.5"/> 8205 <line x1="300" y1="0" x2="300" y2="338" stroke="rgba(212,255,0,0.06)" stroke-width="0.5"/> 8206 </svg> 8207 </div> 8208 <div class="article__cat" style="background:rgba(212,255,0,0.1);border-color:rgba(212,255,0,0.3);color:#d4ff00;" data-i18n="article_1_cat">Guide</div>
8209 <span class="article__read"><span data-i18n="article_1_read_num">12</span> <span data-i18n="article_read_min">min read</span></span> 8210 <div class="article__arrow"> 8211 <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"> 8212 <path d="M2 7h10M7 2l5 5-5 5"/> 8213 </svg> 8214 </div> 8215 </div> 8216 <div class="article__body"> 8217 <div class="article__meta"> 8218 <span data-i18n="article_1_date">Feb 18, 2026</span> 8219 <span class="article__meta-sep">·</span> 8220 <span data-i18n="article_1_topic">Prompt Craft</span> 8221 </div> 8222 <h3 class="article__title" data-i18n="article_1_title">The Ultimate Guide to Writing AI Video Prompts That Actually Work</h3> 8223 <p class="article__excerpt" data-i18n="article_1_excerpt">Most AI video prompts fail for the same three reasons. Learn how to structure subject, environment, camera movement, and mood into prompts that consistently produce cinematic results â with 20 worked examples across every model category.</p> 8224 <div class="article__footer"> 8225 <div class="article__author"> 8226 <div class="article__author-avatar" style="background:linear-gradient(135deg,#1e3a2f,#0a2018)">AK</div> 8227 <span data-i18n="article_1_author">Alex Kim · Lead Creator</span> 8228 </div> 8229 <span class="article__tag" data-i18n="article_1_tag">Featured</span> 8230 </div> 8231 </div> 8232 </div> 8233 8234 <!-- Standard article --> 8235 <div class="article article--sm" data-article> 8236 <div class="article__thumb"> 8237 <div class="article__thumb-bg" style="background:linear-gradient(140deg,#0a0d1a 0%,#0f1433 40%,#060812 100%);"> 8238 <svg style="position:absolute;inset:0;width:100%;height:100%" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" fill="none"> 8239 <circle cx="300" cy="80" r="120" fill="rgba(0,194,255,0.07)"/> 8240 <circle cx="80" cy="230" r="80" fill="rgba(167,139,250,0.05)"/> 8241 <ellipse cx="200" cy="150" rx="140" ry="80" stroke="rgba(0,194,255,0.1)" stroke-width="0.6" fill="none"/> 8242 </svg> 8243 </div> 8244 <div class="article__cat" style="background:rgba(0,194,255,0.1);border-color:rgba(0,194,255,0.3);color:#00c2ff;" data-i18n="article_2_cat">Tutorial</div> 8245 <span class="article__read"><span data-i18n="article_2_read_num">8</span> <span data-i18n="article_read_min">min read</span></span> 8246 <div class="article__arrow"> 8247 <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M2 7h10M7 2l5 5-5 5"/></svg> 8248 </div> 8249 </div> 8250 <div class="article__body"> 8251 <div class="article__meta"> 8252 <span data-i18n="article_2_date">Feb 14, 2026</span> 8253 <span class="article__meta-sep">·</span> 8254 <span data-i18n="article_2_topic">Character Mode</span> 8255 </div> 8256 <h3 class="article__title" data-i18n="article_2_title">How to Build a Character-Consistent Video Series in 6 Steps</h3> 8257 <p class="article__excerpt" data-i18n="article_2_excerpt">Character Consistency Mode unlocks a new class of content â serialized AI video. Here's the exact workflow for creating multi-clip stories where your character looks the same in every scene.</p> 8258 <div class="article__footer"> 8259 <div class="article__author"> 8260 <div class="article__author-avatar" style="background:linear-gradient(135deg,#1a0a3a,#0a0520)">MR</div> 8261 <span data-i18n="article_2_author">Mira Rui · Character Specialist</span> 8262 </div> 8263 <span class="article__tag" data-i18n="article_2_tag">Tutorial</span> 8264 </div> 8265 </div> 8266 </div> 8267 8268 <!-- Three third-width articles --> 8269 <div class="article article--third" data-article> 8270 <div class="article__thumb"> 8271 <div class="article__thumb-bg" style="background:linear-gradient(140deg,#1a0a00 0%,#2a1400 40%,#0d0600 100%);"> 8272 <svg style="position:absolute;inset:0;width:100%;
8272height:100%" viewBox="0 0 300 200" preserveAspectRatio="xMidYMid slice" fill="none"> 8273 <path d="M30 150 Q150 60 270 130" stroke="rgba(255,77,0,0.15)" stroke-width="1" fill="none"/> 8274 <circle cx="150" cy="100" r="60" fill="rgba(255,77,0,0.06)"/> 8275 </svg> 8276 </div> 8277 <div class="article__cat" style="background:rgba(255,77,0,0.1);border-color:rgba(255,77,0,0.3);color:#ff4d00;" data-i18n="article_3_cat">Comparison</div> 8278 <span class="article__read"><span data-i18n="article_3_read_num">6</span> <span data-i18n="article_read_min">min read</span></span> 8279 <div class="article__arrow"><svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M2 7h10M7 2l5 5-5 5"/></svg></div> 8280 </div> 8281 <div class="article__body"> 8282 <div class="article__meta"><span data-i18n="article_3_date">Feb 10, 2026</span><span class="article__meta-sep">·</span><span data-i18n="article_3_topic">Models</span></div> 8283 <h3 class="article__title" data-i18n="article_3_title">TextâVideo vs Cinematic Model: When to Use Which</h3> 8284 <p class="article__excerpt" data-i18n="article_3_excerpt">A practical breakdown of output differences, use cases, and when Auto-Recommend gets it right vs when you should override it.</p> 8285 <div class="article__footer"> 8286 <div class="article__author"> 8287 <div class="article__author-avatar" style="background:linear-gradient(135deg,#2a0a00,#140500)">JP</div> 8288 <span data-i18n="article_3_author">Jake Park</span> 8289 </div> 8290 <span class="article__tag" data-i18n="article_3_tag">Guide</span> 8291 </div> 8292 </div> 8293 </div> 8294 8295 <div class="article article--third" data-article> 8296 <div class="article__thumb"> 8297 <div class="article__thumb-bg" style="background:linear-gradient(140deg,#0f0a1a 0%,#1a0f2a 40%,#070510 100%);"> 8298 <svg style="position:absolute;inset:0;width:100%;height:100%" viewBox="0 0 300 200" preserveAspectRatio="xMidYMid slice" fill="none"> 8299 <path d="M50 100 L150 30 L250 100 L150 170 Z" stroke="rgba(167,139,250,0.12)" stroke-width="0.8" fill="rgba(167,139,250,0.03)"/> 8300 <circle cx="150" cy="100" r="40" fill="rgba(167,139,250,0.06)"/> 8301 </svg> 8302 </div> 8303 <div class="article__cat" style="background:rgba(167,139,250,0.1);border-color:rgba(167,139,250,0.3);color:#a78bfa;" data-i18n="article_4_cat">Workflow</div> 8304 <span class="article__read"><span data-i18n="article_4_read_num">5</span> <span data-i18n="article_read_min">min read</span></span> 8305 <div class="article__arrow"><svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M2 7h10M7 2l5 5-5 5"/></svg></div> 8306 </div> 8307 <div class="article__body"> 8308 <div class="article__meta"><span data-i18n="article_4_date">Feb 6, 2026</span><span class="article__meta-sep">·</span><span data-i18n="article_4_topic">Social Media</span></div> 8309 <h3 class="article__title" data-i18n="article_4_title">The 3-Second Hook: AI Video for Reels & TikTok</h3> 8310 <p class="article__excerpt" data-i18n="article_4_excerpt">Vertical format, looping strategy, and prompt formulas that drive retention on short-form platforms.</p> 8311 <div class="article__footer"> 8312 <div class="article__author"> 8313 <div class="article__author-avatar" style="background:linear-gradient(135deg,#1a0a3a,#0a0520)">SC</div> 8314 <span data-i18n="article_4_author">Sofia Chen</span> 8315 </div> 8316 <span class="article__tag" data-i18n="article_4_tag">Tips</span> 8317 </div> 8318 </div> 8319 </div> 8320 8321 <div class="article article--third" data-article> 8322 <div class="article__thumb"> 8323 <div class="article__thumb-bg" style="background:linear-gradient(140deg,#0a1a18 0%,#0a2a24 40%,#050e0c 100%);"> 8324 <svg style="position:absolute;inset:0;width:100%;
8324height:100%" viewBox="0 0 300 200" preserveAspectRatio="xMidYMid slice" fill="none"> 8325 <circle cx="150" cy="100" r="70" stroke="rgba(0,255,180,0.1)" stroke-width="0.6" fill="none"/> 8326 <circle cx="150" cy="100" r="40" fill="rgba(0,255,180,0.05)"/> 8327 <path d="M80 100 Q150 40 220 100 Q150 160 80 100Z" stroke="rgba(0,255,180,0.1)" stroke-width="0.5" fill="none"/> 8328 </svg> 8329 </div> 8330 <div class="article__cat" style="background:rgba(0,255,180,0.08);border-color:rgba(0,255,180,0.25);color:#00ffb4;" data-i18n="article_5_cat">Deep Dive</div> 8331 <span class="article__read"><span data-i18n="article_5_read_num">9</span> <span data-i18n="article_read_min">min read</span></span> 8332 <div class="article__arrow"><svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M2 7h10M7 2l5 5-5 5"/></svg></div> 8333 </div> 8334 <div class="article__body"> 8335 <div class="article__meta"><span data-i18n="article_5_date">Feb 2, 2026</span><span class="article__meta-sep">·</span><span data-i18n="article_5_topic">Technology</span></div> 8336 <h3 class="article__title" data-i18n="article_5_title">Inside the Models: How AI Video Generation Actually Works</h3> 8337 <p class="article__excerpt" data-i18n="article_5_excerpt">A non-technical breakdown of diffusion models, temporal consistency, and why some prompts render beautifully while others fall apart.</p> 8338 <div class="article__footer"> 8339 <div class="article__author"> 8340 <div class="article__author-avatar" style="background:linear-gradient(135deg,#003a2a,#001a12)">DV</div> 8341 <span data-i18n="article_5_author">Dev Voss</span> 8342 </div> 8343 <span class="article__tag" data-i18n="article_5_tag">Deep Dive</span> 8344 </div> 8345 </div> 8346 </div> 8347 8348 </div><!-- /.learn__grid --> 8349 8350 <!-- Newsletter strip --> 8351 <div class="learn__newsletter"> 8352 <div class="learn__newsletter-icon"> 8353 <svg viewBox="0 0 20 20" fill="none" stroke="#ff4d00" stroke-width="1.5"> 8354 <path d="M3 5h14a1 1 0 011 1v8a1 1 0 01-1 1H3a1 1 0 01-1-1V6a1 1 0 011-1z"/> 8355 <path d="M2 6l8 6 8-6"/> 8356 </svg> 8357 </div> 8358 <div class="learn__newsletter-copy"> 8359 <div class="learn__newsletter-title" data-i18n="newsletter_title">Stay Ahead of AI Video</div> 8360 <div class="learn__newsletter-desc" data-i18n="newsletter_desc">New guides, model updates and creator tips â weekly, no spam.</div> 8361 </div> 8362 <div class="learn__newsletter-form"> 8363 <input class="learn__newsletter-input" type="email" data-i18n-placeholder="newsletter_placeholder" placeholder="[email protected]" aria-label="Email address"/> 8364 <button class="learn__newsletter-btn" data-i18n="newsletter_btn">Subscribe</button> 8365 </div> 8366 </div> 8367 8368 </div> 8369 </section> 8370 8371
8371<script type="6c18279ba6d93a40249c492f-text/javascript"> 8372 const articleEls = document.querySelectorAll('[data-article]'); 8373 const artObs = new IntersectionObserver(entries => { 8374 entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in-view'); artObs.unobserve(e.target); } }); 8375 }, { threshold: 0.1 }); 8376 articleEls.forEach(a => artObs.observe(a)); 8377 </script>
8377 8378 8379 8380 <!-- â¼â¼â¼ FOOTER CTA + FOOTER â¼â¼â¼ --> 8381 <style> 8382 8383 /* âââââââââââââââââââââââââââââââââââââââââââ 8384 FOOTER CTA 8385 âââââââââââââââââââââââââââââââââââââââââââ */ 8386 .footer-cta { 8387 position: relative; 8388 padding-block: clamp(5rem, 10vw, 9rem); 8389 overflow: hidden; 8390 text-align: center; 8391 } 8392 8393 /* Large glowing background text */ 8394 .footer-cta__ghost { 8395 position: absolute; 8396 top: 50%; left: 50%; 8397 transform: translate(-50%, -50%); 8398 font-family: var(--font-display); 8399 font-size: clamp(5rem, 15vw, 14rem); 8400 line-height: 1; 8401 text-transform: uppercase; 8402 letter-spacing: 0.04em; 8403 color: rgba(212,255,0,0.04); 8404 white-space: nowrap; 8405 pointer-events: none; 8406 user-select: none; 8407 z-index: 0; 8408 } 8409 8410 /* Radial glow */ 8411 .footer-cta__glow { 8412 position: absolute; 8413 top: 50%; left: 50%; 8414 transform: translate(-50%, -50%); 8415 width: 600px; height: 400px; 8416 background: radial-gradient(ellipse, rgba(212,255,0,0.08) 0%, transparent 65%); 8417 pointer-events: none; 8418 z-index: 0; 8419 } 8420 8421 .footer-cta__inner { 8422 position: relative; 8423 z-index: 2; 8424 } 8425 8426 .footer-cta__label { 8427 display: inline-flex; 8428 align-items: center; 8429 gap: 0.5rem; 8430 font-family: var(--font-mono); 8431 font-size: var(--text-xs); 8432 color: var(--c-accent); 8433 text-transform: uppercase; 8434 letter-spacing: 0.14em; 8435 margin-bottom: 1.5rem; 8436 } 8437 8438 .footer-cta__label-dot { 8439 width: 5px; height: 5px; 8440 background: var(--c-accent); 8441 border-radius: 50%; 8442 animation: pulse 2s ease-in-out infinite; 8443 } 8444 8445 .footer-cta__title { 8446 font-family: var(--font-display); 8447 font-size: clamp(3.5rem, 9vw, 8rem); 8448 line-height: 0.88; 8449 text-transform: uppercase; 8450 color: var(--c-white); 8451 letter-spacing: 0.02em; 8452 margin-bottom: 1.75rem; 8453 } 8454 8455 .footer-cta__title em { 8456 font-style: normal; 8457 color: var(--c-accent); 8458 -webkit-text-stroke: 0px; 8459 } 8460 8461 .footer-cta__sub { 8462 font-size: var(--text-lg); 8463 color: var(--c-text-muted); 8464 max-width: 480px; 8465 margin-inline: auto; 8466 line-height: 1.6; 8467 margin-bottom: 2.5rem; 8468 } 8469 8470 .footer-cta__buttons { 8471 display: flex; 8472 align-items: center; 8473 justify-content: center; 8474 gap: 1rem; 8475 flex-wrap: wrap; 8476 } 8477 8478 .btn--fcta-primary { 8479 display: inline-flex; 8480 align-items: center; 8481 gap: 0.6rem; 8482 padding: 1.1rem 2.5rem; 8483 background: var(--c-accent); 8484 color: var(--c-black); 8485 border-radius: var(--r-full); 8486 font-size: var(--text-base); 8487 font-weight: 800; 8488 letter-spacing: 0.03em; 8489 transition: all var(--t-base) var(--ease); 8490 position: relative; 8491 overflow: hidden; 8492 } 8493 8494 .btn--fcta-primary::after { 8495 content: ''; 8496 position: absolute; 8497 top: 0; left: -100%; 8498 width: 60%; 8499 height: 100%; 8500 background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); 8501 transition: left 0.5s var(--ease); 8502 } 8503 8504 .btn--fcta-primary:hover::after { left: 150%; } 8505 8506 .btn--fcta-primary:hover { 8507 background: #e8ff33; 8508 box-shadow: 0 0 60px rgba(212,255,0,0.4), 0 12px 32px rgba(0,0,0,0.4); 8509 transform: translateY(-3px); 8510 } 8511 8512 .btn--fcta-ghost { 8513 display: inline-flex; 8514 align-items: center; 8515 gap: 0.5rem; 8516 padding: 1.1rem 2.25rem; 8517 border: 1px solid rgba(255,255,255,0.18); 8518 color: rgba(255,255,255,0.55); 8519 border-radius: var(--r-full); 8520 font-size: var(--text-base); 8521 font-weight: 500; 8522 transition: all var(--t-base) var(--ease); 8523 } 8524 8525 .btn--fcta-ghost:hover { 8526 border-color: rgba(255,255,255,0.45); 8527 color: var(--c-white); 8528 } 8529 8530 .footer-cta__fine { 8531 margin-top: 1.25rem; 8532 font-size: var(--text-xs); 8533 color: var(--c-text-dim); 8534 font-family: var(--font-mono); 8535 letter-spacing: 0.06em; 8536 } 8537 8538 /* âââââââââââââââââââââââââââââââââââââââââââ 8539 FOOTER 8540 âââââââââââââââââââââââââââââââââââââââââââ */ 8541 .footer { 8542 position: relative; 8543 background: #050505; 8544 border-top: 1px solid var(--c-border); 8545 padding-top: 4rem; 8546 overflow: hidden; 8547 } 8548 8549 /* Top section */ 8550 .footer__top { 8551 display: grid; 8552 grid-template-columns: 1.6fr repeat(4, 1fr); 8553 gap: 3rem; 8554 padding-bottom: 3.5rem; 8555 border-bottom: 1px solid var(--c-border); 8556 } 8557 8558 /* Brand column */ 8559 .footer__brand-logo { 8560 display: flex; 8561 align-items: center; 8562 gap: 0.6rem; 8563 margin-bottom: 1.25rem; 8564 text-decoration: none; 8565 } 8566 8567 .footer__brand-icon { 8568 width: 34px; height: 34px; 8569 background: var(--c-accent); 8570 border-radius: var(--r-md); 8571 display: grid; 8572 place-items: center; 8573 } 8574 8575 .footer__brand-icon svg { width: 16px; height: 16px; } 8576 8577 .footer__brand-name { 8578 font-family: var(--font-display); 8579 font-size: 1.1rem; 8580 text-transform: uppercase; 8581 letter-spacing: 0.06em; 8582 color: var(--c-white); 8583 } 8584 8585 .footer__brand-desc { 8586 font-size: var(--text-sm); 8587 color: var(--c-text-dim); 8588 line-height: 1.65; 8589 max-width: 280px; 8590 margin-bottom: 1.5rem; 8591 } 8592 8593 /* Social links */ 8594 .footer__socials { 8595 display: flex; 8596 gap: 0.5rem; 8597 } 8598 8599 .footer__social { 8600 width: 34px; height: 34px; 8601 border-radius: var(--r-md); 8602 border: 1px solid var(--c-border); 8603 display: grid; 8604 place-items: center; 8605 color: var(--c-text-dim); 8606 transition: all var(--t-base) var(--ease); 8607 } 8608 8609 .footer__social:hover { 8610 border-color: var(--c-accent); 8611 color: var(--c-accent); 8612 background: rgba(212,255,0,0.06); 8613 } 8614 8615 .footer__social svg { width: 14px; height: 14px; } 8616 8617 /* Nav column */
8618 .footer__col {} 8619 8620 .footer__col-title { 8621 font-family: var(--font-mono); 8622 font-size: 0.62rem; 8623 text-transform: uppercase; 8624 letter-spacing: 0.12em; 8625 color: var(--c-text-muted); 8626 margin-bottom: 1.25rem; 8627 } 8628 8629 .footer__links { 8630 display: flex; 8631 flex-direction: column; 8632 gap: 0.65rem; 8633 } 8634 8635 .footer__link { 8636 font-size: var(--text-sm); 8637 color: var(--c-text-dim); 8638 transition: color var(--t-fast); 8639 display: flex; 8640 align-items: center; 8641 gap: 0.4rem; 8642 } 8643 8644 .footer__link:hover { color: var(--c-white); } 8645 8646 .footer__link-badge { 8647 font-family: var(--font-mono); 8648 font-size: 0.5rem; 8649 padding: 0.08rem 0.4rem; 8650 background: rgba(212,255,0,0.1); 8651 color: var(--c-accent); 8652 border: 1px solid rgba(212,255,0,0.2); 8653 border-radius: var(--r-full); 8654 text-transform: uppercase; 8655 letter-spacing: 0.06em; 8656 } 8657 8658 /* Status indicator */ 8659 .footer__status { 8660 display: inline-flex; 8661 align-items: center; 8662 gap: 0.5rem; 8663 padding: 0.35rem 0.85rem; 8664 background: rgba(0,255,130,0.06); 8665 border: 1px solid rgba(0,255,130,0.2); 8666 border-radius: var(--r-full); 8667 font-family: var(--font-mono); 8668 font-size: 0.6rem; 8669 color: #00e87a; 8670 text-transform: uppercase; 8671 letter-spacing: 0.08em; 8672 margin-bottom: 0.75rem; 8673 } 8674 8675 .footer__status-dot { 8676 width: 5px; height: 5px; 8677 background: #00e87a; 8678 border-radius: 50%; 8679 animation: pulse 2s ease-in-out infinite; 8680 } 8681 8682 /* Bottom bar */ 8683 .footer__bottom { 8684 display: flex; 8685 align-items: center; 8686 justify-content: space-between; 8687 gap: 1.5rem; 8688 padding-block: 1.5rem; 8689 flex-wrap: wrap; 8690 } 8691 8692 .footer__copy { 8693 font-size: var(--text-xs); 8694 color: var(--c-text-dim); 8695 font-family: var(--font-mono); 8696 } 8697 8698 .footer__copy a { color: var(--c-accent); text-decoration: none; } 8699 .footer__copy a:hover { text-decoration: underline; } 8700 8701 .footer__legal { 8702 display: flex; 8703 gap: 1.5rem; 8704 flex-wrap: wrap; 8705 } 8706 8707 .footer__legal a { 8708 font-size: var(--text-xs); 8709 color: var(--c-text-dim); 8710 font-family: var(--font-mono); 8711 text-underline-offset: 3px; 8712 transition: color var(--t-fast); 8713 } 8714 8715 .footer__legal a:hover { color: var(--c-text-muted); } 8716 8717 .footer__locale { 8718 display: flex; 8719 align-items: center; 8720 gap: 0.4rem; 8721 font-family: var(--font-mono); 8722 font-size: var(--text-xs); 8723 color: var(--c-text-dim); 8724 cursor: pointer; 8725 transition: color var(--t-fast); 8726 } 8727 8728 .footer__locale:hover { color: var(--c-text-muted); } 8729 .footer__locale svg { width: 12px; height: 12px; } 8730 8731 /* Responsive */ 8732 @media (max-width: 960px) { 8733 .footer__top { grid-template-columns: 1fr 1fr; gap: 2rem; } 8734 .footer__brand { grid-column: span 2; } 8735 } 8736 8737 @media (max-width: 540px) { 8738 .footer__top { grid-template-columns: 1fr 1fr; } 8739 .footer__brand { grid-column: span 2; } 8740 .footer__bottom { flex-direction: column; align-items: flex-start; gap: 0.75rem; } 8741 .footer-cta__title { font-size: clamp(3rem, 12vw, 5rem); } 8742 } 8743 8744 </style> 8745 8746 <!-- Footer CTA --> 8747 <section class="footer-cta" aria-label="Final call to action"> 8748 <div class="footer-cta__ghost" aria-hidden="true">Generate</div> 8749 <div class="footer-cta__glow" aria-hidden="true"></div> 8750 <div class="container"> 8751 <div class="footer-cta__inner"> 8752 <div class="footer-cta__label"> 8753 <span class="footer-cta__label-dot"></span> 8754 <span data-i18n="footer_cta_label">Start Today â It's Free</span> 8755 </div> 8756 <h2 class="footer-cta__title"> 8757 <span data-i18n="footer_cta_title_line1">Your Next Video</span><br><span data-i18n="footer_cta_title_line2">Starts With <em>One Prompt.</em></span> 8758 </h2> 8759 <p class="footer-cta__sub" data-i18n="footer_cta_sub">No editor. No render queue. No creative block. Just describe what you see in your head â and generate it.</p> 8760 <div class="footer-cta__buttons"> 8761 <a href="https://pixwith.video-generator.ai/" target="_blank" rel="nofollow" class="btn--fcta-primary" data-i18n="footer_cta_primary">
8762 <svg width="16" height="16" viewBox="0 0 16 16" fill="none"> 8763 <path d="M3 3.5L13 8L3 12.5V3.5Z" fill="currentColor"/> 8764 </svg> 8765 Start Generating Free 8766 </a> 8767 <a href="#how" class="btn--fcta-ghost" data-i18n="footer_cta_ghost_btn">See How It Works</a> 8768 </div> 8769 <p class="footer-cta__fine" data-i18n="footer_cta_fine">No credit card · Free tier always available · Cancel anytime</p> 8770 </div> 8771 </div> 8772 </section> 8773 8774 <!-- Footer --> 8775 <footer class="footer" role="contentinfo"> 8776 <div class="container"> 8777 8778 <div class="footer__top"> 8779 8780 <!-- Brand --> 8781 <div class="footer__brand"> 8782 <a href="/" class="footer__brand-logo" aria-label="video-generator.ai"> 8783 <div class="footer__brand-icon"> 8784 <svg viewBox="0 0 16 16" fill="none"> 8785 <path d="M3 3.5L13 8L3 12.5V3.5Z" fill="#0a0a0a"/> 8786 </svg> 8787 </div> 8788 <span class="footer__brand-name">video-generator.ai</span> 8789 </a> 8790 <p class="footer__brand-desc" data-i18n="footer_brand_desc">The AI video generator built for creators who want control. Generate, refine, and ship video at the speed of thought.</p> 8791 <div class="footer__status"> 8792 <span class="footer__status-dot"></span> 8793 <span data-i18n="footer_status_text">All systems operational</span> 8794 </div> 8795 <div class="footer__socials"> 8796 <!-- X / Twitter --> 8797 <a href="#" class="footer__social" aria-label="X / Twitter"> 8798 <svg viewBox="0 0 14 14" fill="currentColor"><path d="M8.05 6.14L12.43 1H11.4L7.59 5.5 4.55 1H1.12l4.6 6.7L1.12 13h1.03l4.03-4.7 3.21 4.7H12.9L8.05 6.14zm-1.43 1.67L6.12 7.2 2.2 1.8h1.54l3.04 4.36 1.5 2.16-3.24 3.78H5.8l2.82-3.29z"/></svg> 8799 </a> 8800 <!-- Instagram --> 8801 <a href="#" class="footer__social" aria-label="Instagram"> 8802 <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.2"><rect x="2" y="2" width="10" height="10" rx="3"/><circle cx="7" cy="7" r="2.5"/><circle cx="10.2" cy="3.8" r="0.6" fill="currentColor" stroke="none"/></svg> 8803 </a> 8804 <!-- Discord --> 8805 <a href="#" class="footer__social" aria-label="Discord"> 8806 <svg viewBox="0 0 14 14" fill="currentColor"><path d="M11.28 2.37A10.9 10.9 0 008.7 1.6a.04.04 0 00-.04.02c-.12.21-.25.49-.34.7a10.07 10.07 0 00-3.03 0 7.3 7.3 0 00-.35-.7.04.04 0 00-.04-.02A10.86 10.86 0 002.3 2.37a.04.04 0 00-.02.02C.84 4.62.45 6.82.64 9a.04.04 0 00.02.03 10.97 10.97 0 003.3 1.67.04.04 0 00.05-.02c.25-.35.48-.72.67-1.1a.04.04 0 00-.02-.06 7.2 7.2 0 01-1.03-.5.04.04 0 010-.07c.07-.05.14-.11.2-.16a.04.04 0 01.05 0c2.16 1 4.5 1 6.64 0a.04.04 0 01.05 0c.07.06.14.11.2.16a.04.04 0 010 .07c-.33.2-.67.37-1.03.5a.04.04 0 00-.02.06c.2.38.43.75.67 1.1a.04.04 0 00.05.02A10.93 10.93 0 0013.34 9a.04.04 0 00.02-.03c.22-2.5-.37-4.68-1.06-6.6a.04.04 0 00-.02-.02zM5.02 7.65c-.65 0-1.18-.6-1.18-1.34s.52-1.34 1.18-1.34c.66 0 1.19.6 1.18 1.34 0 .74-.52 1.34-1.18 1.34zm4.38 0c-.65 0-1.18-.6-1.18-1.34s.52-1.34 1.18-1.34c.66 0 1.19.6 1.18 1.34 0 .74-.52 1.34-1.18 1.34z"/></svg> 8807 </a> 8808 <!-- YouTube --> 8809 <a href="#" class="footer__social" aria-label="YouTube"> 8810 <svg viewBox="0 0 14 14" fill="currentColor"><path d="M12.8 4.1s-.13-.9-.52-1.3c-.5-.52-1.05-.52-1.3-.55C9.07 2.1 7 2.1 7 2.1s-2.07 0-3.98.15c-.25.03-.8.03-1.3.55-.4.4-.52 1.3-.52 1.3S1.06 5.12 1.06 6.14v.95c0 1.02.14 2.04.14 2.04s.13.9.52 1.3c.5.52 1.16.5 1.45.56C4.17 11.1 7 11.1 7 11.1s2.07 0 3.98-.17c.25-.03.8-.04 1.3-.56.4-.4.52-1.3.52-1.3s.14-1.02.14-2.04v-.95C12.94 5.12 12.8 4.1 12.8 4.1zM5.8 8.57V5.4l3.5 1.6-3.5 1.57z"/></svg> 8811 </a> 8812 </div> 8813 </div> 8814 8815 <!-- Product --> 8816 <div class="footer__col"> 8817 <div class="footer__col-title" data-i18n="footer_col_product">Product</div> 8818 <div class="footer__links"> 8819 <a href="#features" class="footer__link" data-i18n="footer_link_features">Features</a> 8820 <a href="#blueprints" class="footer__link" data-i18n="footer_link_blueprints">Blueprints</a> 8821 <a href="#gallery" class="footer__link" data-i18n="footer_link_gallery">Gallery</a> 8822 <a href="#pricing" class="footer__link" data-i18n="footer_link_pricing">Pricing</a> 8823 <a href="https://pixwith.video-generator.ai/api" class="footer__link" rel="nofollow" target="_blank"><span data-i18n="footer_link_api">API</span> <span class="footer__link-badge" data-i18n="footer_link_api_badge">Beta</span></a> 8824 <a href="#" class="footer__link" data-i18n="footer_link_changelog">Changelog</a> 8825 </div> 8826 </div> 8827 8828 <!-- Models -->
8829 <div class="footer__col"> 8830 <div class="footer__col-title" data-i18n="footer_col_models">AI video tools</div> 8831 <div class="footer__links"> 8832 <a href="/text-to-video/" class="footer__link" target="_blank" data-i18n="footer_link_text2video">Text to Video</a> 8833 <a href="https://video-generator.ai/ai-image-to-video-generator/" class="footer__link" target="_blank" data-i18n="footer_link_img2video">Image to Video</a> 8834 <a href="/ai-video-extender/" class="footer__link" target="_blank" data-i18n="footer_link_cinematic">video extender</a> 8835 <a href="/ai-video-to-video-generator/" class="footer__link" target="_blank" data-i18n="footer_link_anime">Video to Video</a> 8836 <a href="/ai-motion-control/" class="footer__link" target="_blank" data-i18n="footer_link_character">Motion Control</a> 8837 <a href="/free-ai-talking-avatar-video-generator/" class="footer__link" target="_blank" data-i18n="footer_link_abstract">Talking Avatar</a> 8838 </div> 8839 </div> 8840 8841 <!-- Resources --> 8842 <div class="footer__col"> 8843 <div class="footer__col-title" data-i18n="footer_col_resources">Resources</div> 8844 <div class="footer__links"> 8845 <a href="/blog/" class="footer__link" target="_blank" rel="nofollow" data-i18n="footer_link_blog">Blog</a> 8846 <a href="#" class="footer__link" data-i18n="footer_link_prompt_lib">Prompt Library</a> 8847 <a href="#faq" class="footer__link" data-i18n="footer_link_faq">FAQ</a> 8848 <a href="#" class="footer__link" data-i18n="footer_link_docs">Documentation</a> 8849 <a href="#" class="footer__link" data-i18n="footer_link_community">Community</a> 8850 <a href="#" class="footer__link" data-i18n="footer_link_discord">Discord</a> 8851 </div> 8852 </div> 8853 8854 <!-- Company --> 8855 <div class="footer__col"> 8856 <div class="footer__col-title" data-i18n="footer_col_company">Company</div> 8857 <div class="footer__links"> 8858 <a href="https://video-generator.ai/about-us/" class="footer__link" rel="nofollow" target="_blank" data-i18n="footer_link_about">About</a> 8859 <a href="#" class="footer__link" data-i18n="footer_link_careers">Careers</a> 8860 <a href="#" class="footer__link" data-i18n="footer_link_press">Press Kit</a> 8861 <a href="https://video-generator.ai/contact-us/" class="footer__link" rel="nofollow" target="_blank" data-i18n="footer_link_contact">Contact</a> 8862 <a href="https://pixwith.video-generator.ai/affiliate" class="footer__link" rel="nofollow" target="_blank" data-i18n="footer_link_affiliates">Affiliates</a> 8863 </div> 8864 </div> 8865 8866 </div><!-- /.footer__top --> 8867 8868 <!-- Bottom bar --> 8869 <div class="footer__bottom"> 8870 <div class="footer__copy"> 8871 © 2026 <a href="/">video-generator.ai</a>. <span data-i18n="footer_copy_right">All rights reserved.</span> 8872 </div> 8873 <div class="footer__legal"> 8874 <a href="https://video-generator.ai/privacy-policy/" rel="nofollow" target="_blank" data-i18n="footer_privacy">Privacy Policy</a> 8875 <a href="https://video-generator.ai/terms-of-service/" rel="nofollow" target="_blank" data-i18n="footer_terms">Terms of Service</a> 8876 <a href="https://video-generator.ai/content-guidelines/" rel="nofollow" target="_blank" data-i18n="footer_content_guide">Content Guidelines</a> 8877 <a href="https://video-generator.ai/content-ownership-usage-policy/" rel="nofollow" target="_blank" data-i18n="footer_content_policy">Content Policy</a> 8878 </div> 8879 <div class="footer__locale"> 8880 <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.2"> 8881 <circle cx="6" cy="6" r="4.5"/> 8882 <path d="M6 1.5C6 1.5 4.5 3.5 4.5 6s1.5 4.5 1.5 4.5M6 1.5C6 1.5 7.5 3.5 7.5 6S6 10.5 6 10.5M2 4.5h8M2 7.5h8"/> 8883 </svg> 8884 <span class="footer__locale-text">English (EN)</span> 8885 <div class="lang-picker"> 8886 <button data-lang-btn="en" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('en')" style="background:none;border:1px solid rgba(255,255,255,0.15);color:#888;padding:0.2rem 0.45rem;border-radius:4px;cursor:pointer;font-size:0.65rem;font-family:var(--font-mono);letter-spacing:0.06em;" data-cf-modified-6c18279ba6d93a40249c492f-="">EN</button> 8887 <button data-lang-btn="es" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('es')" style="background:none;border:1px solid rgba(255,255,255,0.15);color:#888;padding:0.2rem 0.45rem;border-radius:4px;cursor:pointer;font-size:0.65rem;font-family:var(--font-mono);letter-spacing:0.06em;" data-cf-modified-6c18279ba6d93a40249c492f-="">ES</button> 8888 <button data-lang-btn="hi" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('hi')" style="background:none;border:1px solid rgba(255,255,255,0.15);color:#888;padding:0.2rem 0.45rem;border-radius:4px;cursor:pointer;font-size:0.65rem;font-family:var(--font-mono);letter-spacing:0.06em;" data-cf-modified-6c18279ba6d93a40249c492f-="">HI</button> 8889 <button data-lang-btn="ru" onclick="if (!window.__cfRLUnblockHandlers) return false; selectLang('ru')" style="background:none;border:1px solid rgba(255,255,255,0.15);color:#888;padding:0.2rem 0.45rem;border-radius:4px;cursor:pointer;font-size:0.65rem;font-family:var(--font-mono);letter-spacing:0.06em;" data-cf-modified-6c18279ba6d93a40249c492f-="">RU</button> 8890 </div> 8891 </div> 8892 </div> 8893 8894 </div> 8895 </footer> 8896 8897 <!-- i18n â Language Switcher. 8898 defer (not blocking): these still need to all be present for the 8899 DOMContentLoaded auto-detect in i18n.js (saved/browser language â 8900 in-place translation for returning visitors), but they no longer 8901 need to block HTML parsing/paint to do that. --> 8902
8902<script data-cfasync="false" defer src="translations/en.js"></script>
8902 8903
8903<script data-cfasync="false" defer src="translations/es.js"></script>
8903 8904
8904<script data-cfasync="false" defer src="translations/fr.js"></script>
8904 8905
8905<script data-cfasync="false" defer src="translations/de.js"></script>
8905 8906
8906<script data-cfasync="false" defer src="translations/jp.js"></script>
8906 8907
8907<script data-cfasync="false" defer src="translations/hi.js"></script>
8907 8908
8908<script data-cfasync="false" defer src="translations/ru.js"></script>
8908 8909
8909<script data-cfasync="false" defer src="i18n.js"></script>
8909 8910 8911
8911<script type="6c18279ba6d93a40249c492f-text/javascript"> 8912 // ââ Language Dropdown Logic âââââââââââââââââââââââââââââââââââââââââââââââ 8913 const LANG_META = { 8914 en: { label: 'EN', flag: 'ðºð¸', name: 'English' }, 8915 es: { label: 'ES', flag: 'ðªð¸', name: 'Español' }, 8916 fr: { label: 'FR', flag: 'ð«ð·', name: 'Français' }, 8917 de: { label: 'DE', flag: 'ð©ðª', name: 'Deutsch' }, 8918 ja: { label: 'JA', flag: 'ð¯ðµ', name: 'æ¥æ¬èª' }, 8919 hi: { label: 'HI', flag: 'ð®ð³', name: 'हिनà¥à¤¦à¥' }, 8920 ru: { label: 'RU', flag: 'ð·ðº', name: 'Ð ÑÑÑкий' }, 8921 }; 8922 8923 function openDropdown(id) { 8924 const wrap = document.getElementById(id); 8925 if (!wrap) return; 8926 const trigger = wrap.querySelector('.lang-dropdown__trigger'); 8927 const menu = wrap.querySelector('.lang-dropdown__menu'); 8928 const isOpen = menu.classList.contains('is-open'); 8929 // Close all others first 8930 document.querySelectorAll('.lang-dropdown__menu').forEach(m => m.classList.remove('is-open')); 8931 document.querySelectorAll('.lang-dropdown__trigger').forEach(t => t.setAttribute('aria-expanded','false')); 8932 if (!isOpen) { 8933 menu.classList.add('is-open'); 8934 trigger.setAttribute('aria-expanded', 'true'); 8935 } 8936 } 8937 8938 function selectLang(lang, dropdownSuffix) { 8939 const paths = { en: '/', es: '/es/', fr: '/fr/', de: '/de/', ja: '/ja/', hi: '/hi/', ru: '/ru/', ar: '/ar/', zh: '/zh/', pt: '/pt/' }; 8940 if (paths[lang]) { 8941 // Fade out smoothly before navigating â hides browser page-load flash 8942 const overlay = document.getElementById('page-transition-overlay'); 8943 if (overlay) { 8944 overlay.classList.add('fade-out'); 8945 setTimeout(() => { window.location.href = paths[lang]; }, 220); 8946 } else { 8947 window.location.href = paths[lang]; 8948 } 8949 } else { 8950 applyLang(lang); 8951 } 8952 } 8953 8954 window.addEventListener('popstate', function(e) { 8955 if (e.state && e.state.lang) applyLang(e.state.lang); 8956 }); 8957 8958 function syncDropdownLabels(lang) { 8959 const meta = LANG_META[lang] || LANG_META['en']; 8960 // Update all trigger labels 8961 document.querySelectorAll('.lang-dropdown__label').forEach(el => el.textContent = meta.label); 8962 // Update active item highlight 8963 document.querySelectorAll('.lang-dropdown__item').forEach(item => { 8964 item.classList.toggle('is-active', item.dataset.langBtn === lang); 8965 }); 8966 } 8967 8968 // Wire triggers 8969 document.addEventListener('DOMContentLoaded', () => { 8970 ['lang-dropdown-desktop', 'lang-dropdown-mobile'].forEach(id => { 8971 const wrap = document.getElementById(id); 8972 if (!wrap) return; 8973 wrap.querySelector('.lang-dropdown__trigger').addEventListener('click', (e) => { 8974 e.stopPropagation(); 8975 openDropdown(id); 8976 }); 8977 }); 8978 8979 // Close on outside click 8980 document.addEventListener('click', () => { 8981 document.querySelectorAll('.lang-dropdown__menu').forEach(m => m.classList.remove('is-open')); 8982 document.querySelectorAll('.lang-dropdown__trigger').forEach(t => t.setAttribute('aria-expanded','false')); 8983 }); 8984 8985 // Sync labels to whatever lang is active at load 8986 syncDropdownLabels('en'); 8987 8988 // translations/en.js + i18n.js are deferred, so applyLang only 8989 // becomes available once deferred scripts run (just before this 8990 // DOMContentLoaded handler fires) â safe to call here. 8991 applyLang('en'); 8992 history.replaceState({ lang: 'en' }, '', window.location.pathname); 8993 }); 8994 </script>
8994 8995</body> 8996</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.