1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="preconnect" href="https://cdn.shopify.com/" crossorigin="anonymous"/><link rel="dns-prefetch" href="https://cdn.shopify.com/"/><link rel="preload" href="https://cdn.shopify.com/static/fonts/inter/v4/styles.css" as="style"/><link rel="stylesheet" href="https://cdn.shopify.com/static/fonts/inter/v4/styles.css"/></head><body><style> 2 @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,[email protected],400;12..96,500;12..96,600;12..96,700&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap'); 3 4 :root { 5 --font-display: 'Bricolage Grotesque', Georgia, serif; 6 --font-body: 'Plus Jakarta Sans', system-ui, sans-serif; 7 --accent: #d3b18c; 8 --accent-light: #e5d4be; 9 --black: #0a0a0a; 10 --gray-900: #171717; 11 --gray-700: #404040; 12 --gray-500: #737373; 13 --gray-300: #d4d4d4; 14 --white: #fafafa; 15 } 16 17 * { 18 margin: 0; 19 padding: 0; 20 box-sizing: border-box; 21 } 22 23 html { 24 scroll-behavior: smooth; 25 } 26 27 body { 28 font-family: var(--font-body); 29 line-height: 1.6; 30 color: var(--white); 31 background: var(--black); 32 min-height: 100vh; 33 } 34 35 h1, h2, h3, .logo { 36 font-family: var(--font-display); 37 } 38 39 /* Light rays background */ 40 .light-rays-bg { 41 position: fixed; 42 top: 0; 43 left: 0; 44 right: 0; 45 bottom: 0; 46 z-index: 0; 47 pointer-events: none; 48 } 49 50 /* Nav */ 51 .nav { 52 position: fixed; 53 top: 0; 54 left: 0; 55 right: 0; 56 z-index: 100; 57 padding: 1rem 2rem; 58 display: flex; 59 justify-content: space-between; 60 align-items: center; 61 background: rgba(10, 10, 10, 0.8); 62 backdrop-filter: blur(8px); 63 border-bottom: 1px solid rgba(255,255,255,0.05); 64 } 65 66 .logo { 67 font-size: 1.35rem; 68 font-weight: 600; 69 color: var(--white); 70 text-decoration: none; 71 letter-spacing: -0.01em; 72 display: flex; 73 align-items: center; 74 gap: 0.5rem; 75 } 76 77 .logo-icon { 78 width: 1.5rem; 79 height: 1.5rem; 80 color: var(--white); 81 } 82 83 .nav-links { 84 display: flex; 85 gap: 2rem; 86 align-items: center; 87 } 88 89 .nav-link { 90 color: var(--gray-500); 91 text-decoration: none; 92 font-size: 0.9rem; 93 transition: color 0.2s; 94 } 95 96 .nav-link:hover { 97 color: var(--white); 98 } 99 100 /* Hero */ 101 .hero { 102 min-height: 100vh; 103 display: flex; 104 flex-direction: column; 105 justify-content: center; 106 align-items: center; 107 text-align: center; 108 padding: 6rem 2rem; 109 max-width: 800px; 110 margin: 0 auto; 111 position: relative; 112 z-index: 1; 113 } 114 115 .hero h1 { 116 font-size: clamp(2.75rem, 7vw, 4.5rem); 117 font-weight: 700; 118 line-height: 1.05; 119 letter-spacing: -0.02em; 120 margin-bottom: 1.5rem; 121 } 122 123 .hero h1 span { 124 color: var(--accent); 125 font-style: italic; 126 } 127 128 .hero-subtitle { 129 font-size: 1.1rem; 130 color: var(--gray-500); 131 max-width: 480px; 132 margin-bottom: 3rem; 133 line-height: 1.7; 134 } 135 136 .btn { 137 display: inline-block; 138 padding: 0.875rem 2rem; 139 font-size: 1rem; 140 font-weight: 500; 141 text-decoration: none; 142 border-radius: 8px; 143 transition: all 0.2s; 144 border: none; 145 cursor: pointer; 146 font-family: inherit; 147 } 148 149 .btn-primary { 150 background: var(--accent); 151 color: var(--black); 152 } 153 154 .btn-primary:hover { 155 background: var(--accent-light); 156 } 157 158 .btn-ghost { 159 background: transparent; 160 color: var(--gray-500); 161 border: 1px solid var(--gray-700); 162 } 163 164 .btn-ghost:hover { 165 color: var(--white); 166 border-color: var(--gray-500); 167 } 168 169 .cta-group { 170 display: flex; 171 gap: 1rem; 172 flex-wrap: wrap; 173 justify-content: center; 174 } 175 176 /* Demo Video */ 177 .demo-section { 178 padding: 2rem 2rem 6rem; 179 max-width: 700px; 180 margin: 0 auto; 181 position: relative; 182 z-index: 1; 183 } 184 185 .demo-label { 186 text-align: center; 187 font-size: 0.8rem; 188 text-transform: uppercase; 189 letter-spacing: 0.15em; 190 color: var(--gray-500); 191 margin-bottom: 1.5rem; 192 } 193 194 .demo-frame { 195 position: relative; 196 border-radius: 16px; 197 overflow: hidden; 198 border: 1px solid rgba(211, 177, 140, 0.15); 199 box-shadow: 200 0 0 0 1px rgba(211, 177, 140, 0.05), 201 0 25px 60px -15px rgba(0, 0, 0, 0.5), 202 0 0 40px rgba(211, 177, 140, 0.06); 203 } 204 205 .demo-frame video { 206 display: block; 207 width: 100%; 208 aspect-ratio: 16 / 9; 209 object-fit: cover; 210 background: var(--gray-900); 211 } 212 213 .demo-poster { 214 position: relative; 215 cursor: pointer; 216 width: 100%; 217 aspect-ratio: 16 / 9; 218 } 219 220 .demo-poster img { 221 display: block; 222 width: 100%; 223 height: 100%; 224 object-fit: cover; 225 } 226 227 .demo-play-btn { 228 position: absolute; 229 top: 50%; 230 left: 50%; 231 transform: translate(-50%, -50%); 232 width: 80px; 233 height: 80px; 234 background: rgba(0, 0, 0, 0.6); 235 border: 2px solid rgba(255, 255, 255, 0.25); 236 border-radius: 50%; 237 display: flex; 238 align-items: center; 239 justify-content: center; 240 transition: all 0.25s; 241 backdrop-filter: blur(4px); 242 } 243 244 .demo-poster:hover .demo-play-btn { 245 background: rgba(211, 177, 140, 0.8); 246 border-color: var(--accent); 247 transform: translate(-50%, -50%) scale(1.08); 248 } 249 250 .demo-play-btn svg { 251 width: 28px; 252 height: 28px; 253 fill: white; 254 margin-left: 4px; 255 } 256 257 /* Features */ 258 .features { 259 padding: 6rem 2rem; 260 max-width: 900px; 261 margin: 0 auto; 262 border-top: 1px solid rgba(255,255,255,0.05); 263 position: relative; 264 z-index: 1; 265 } 266 267 .features-grid { 268 display: grid; 269 grid-template-columns: repeat(3, 1fr); 270 gap: 3rem; 271 } 272 273 .feature { 274 text-align: left; 275 } 276 277 .feature h3 { 278 font-size: 1.05rem; 279 font-weight: 600; 280 margin-bottom: 0.5rem; 281 letter-spacing: -0.01em; 282 } 283 284 .feature p { 285 font-size: 0.925rem; 286 color: var(--gray-500); 287 line-height: 1.65; 288 } 289 290 /* Install Form */ 291 .install-section { 292 padding: 6rem 2rem; 293 text-align: center; 294 border-top: 1px solid rgba(255,255,255,0.05); 295 position: relative; 296 z-index: 1; 297 } 298 299 .install-section h2 { 300 font-size: 2rem; 301 font-weight: 600; 302 margin-bottom: 0.75rem; 303 letter-spacing: -0.02em; 304 } 305 306 .install-section p { 307 color: var(--gray-500); 308 margin-bottom: 2rem; 309 font-size: 1.05rem; 310 } 311 312 .install-form { 313 max-width: 400px; 314 margin: 0 auto; 315 } 316 317 .install-form.show { 318 display: block; 319 } 320 321 .form-group { 322 margin-bottom: 1rem; 323 text-align: left; 324 } 325 326 .form-group label { 327 display: block; 328 margin-bottom: 0.5rem; 329 font-size: 0.875rem; 330 color: var(--gray-300); 331 } 332 333 .form-input { 334 width: 100%; 335 padding: 0.75rem 1rem; 336 font-size: 1rem; 337 font-family: inherit; 338 background: var(--gray-900); 339 border: 1px solid var(--gray-700); 340 border-radius: 8px; 341 color: var(--white); 342 transition: border-color 0.2s; 343 } 344 345 .form-input:focus { 346 outline: none; 347 border-color: var(--accent); 348 } 349 350 .form-input::placeholder { 351 color: var(--gray-500); 352 } 353 354 .help-text { 355 font-size: 0.8rem; 356 color: var(--gray-500); 357 margin-top: 0.5rem; 358 } 359 360 .button-group { 361 display: flex; 362 gap: 0.75rem; 363 justify-content: center; 364 margin-top: 1.5rem; 365 } 366 367 /* Footer */ 368 .footer { 369 padding: 2rem; 370 text-align: center; 371 border-top: 1px solid rgba(255,255,255,0.05); 372 position: relative; 373 z-index: 1; 374 } 375 376 .footer-links { 377 display: flex; 378 gap: 2rem; 379 justify-content: center; 380 margin-bottom: 1rem; 381 } 382 383 .footer-link { 384 color: var(--gray-500); 385 text-decoration: none; 386 font-size: 0.875rem; 387 } 388 389 .footer-link:hover { 390 color: var(--white); 391 } 392 393 .footer-copy { 394 color: var(--gray-700); 395 font-size: 0.8rem; 396 } 397 398 /* Responsive */ 399 @media (max-width: 768px) { 400 .nav-links { 401 gap: 1rem; 402 } 403 404 .features-grid { 405 grid-template-columns: 1fr; 406 gap: 2rem; 407 } 408 409 .cta-group { 410 flex-direction: column; 411 align-items: center; 412 } 413 414 .button-group { 415 flex-direction: column; 416 } 417 } 418 </style><div class="light-rays-bg"></div><nav class="nav"><a href="/" class="logo">
418<svg class="logo-icon" viewBox="0 0 375 374.999991" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M 154.535156 153.984375 C 136.453125 172.066406 136.453125 201.484375 154.535156 219.5625 C 172.617188 237.648438 202.039062 237.652344 220.121094 219.570312 C 238.203125 201.488281 238.203125 172.058594 220.121094 153.976562 C 202.039062 135.894531 172.617188 135.898438 154.535156 153.984375 Z M 264.8125 282.640625 C 267.515625 279.941406 270.035156 277.136719 272.441406 274.253906 C 259.558594 280.292969 245.582031 283.726562 231.265625 284.066406 C 206.164062 284.679688 168.007812 276.324219 128.816406 233.246094 C 128.582031 233.011719 128.3125 232.824219 128.074219 232.585938 C 103.613281 208.125 103.617188 168.320312 128.082031 143.855469 C 139.570312 132.371094 154.453125 126.335938 169.539062 125.648438 C 152.722656 115.679688 135.226562 110.574219 117.648438 110.964844 C 95.753906 111.464844 74.679688 120.542969 58.191406 136.132812 L 54.878906 139.445312 C 53.15625 141.234375 51.445312 143.011719 49.847656 144.933594 L 49.589844 144.734375 L 0.015625 194.308594 L 88.355469 282.648438 C 137.007812 331.296875 216.164062 331.292969 264.8125 282.640625 Z M 286.675781 92.34375 L 375.019531 180.683594 L 325.449219 230.257812 L 325.1875 230.058594 C 323.589844 231.980469 321.878906 233.757812 320.160156 235.546875 L 316.84375 238.859375 C 300.355469 254.449219 279.28125 263.527344 257.390625 264.027344 C 239.808594 264.417969 222.3125 259.3125 205.496094 249.34375 C 220.582031 248.65625 235.464844 242.625 246.953125 231.136719 C 271.417969 206.671875 271.421875 166.867188 246.960938 142.40625 C 246.722656 142.167969 246.453125 141.980469 246.21875 141.746094 C 207.027344 98.671875 168.871094 90.3125 143.773438 90.925781 C 129.453125 91.265625 115.480469 94.695312 102.59375 100.734375 C 105 97.855469 107.523438 95.050781 110.222656 92.351562 C 158.875 43.699219 238.027344 43.695312 286.675781 92.34375"></path></svg></a><div class="nav-links"><a href="https://envision-demo-preview.myshopify.com/" target="_blank" rel="noopener noreferrer" class="nav-link">Demo Store</a><a href="/privacy" class="nav-link">Privacy</a></div></nav><section class="hero"><h1>Virtual try-on<br/><span>for your store</span></h1><p class="hero-subtitle">Let customers see themselves wearing your products. AI-powered try-on that boosts conversions and reduces returns.</p><div class="cta-group"><button class="btn btn-primary">Get Started</button></div></section><section class="demo-section"><p class="demo-label">See it in action</p><div class="demo-frame"><div class="demo-poster"><img src="/Thumbnail.png" alt="Envision demo video"/><div class="demo-play-btn"><svg viewBox="0 0 24 24"><polygon points="6,3 20,12 6,21"></polygon></svg></div></div></div></section><section id="features" class="features"><div class="features-grid"><div class="feature"><h3>Boost conversions</h3><p>Shoppers who visualize products on themselves buy with more confidence.</p></div><div class="feature"><h3>Reduce returns</h3><p>Better purchasing decisions mean fewer items coming back.</p></div><div class="feature"><h3>Privacy first</h3><p>Customer photos are processed in real-time and never stored.</p></div></div></section><section class="install-section"><h2>Ready to get started?</h2><p>Add virtual try-on to your Shopify store in minutes.</p><button class="btn btn-primary">Install Envision</button></section><footer class="footer"><div class="footer-links"><a href="https://envision-demo-preview.myshopify.com/" target="_blank" rel="noopener noreferrer" class="footer-link">Demo Store</a><a href="/privacy" class="footer-link">Privacy</a></div><p class="footer-copy">© <!-- -->2026<!-- --> Envision · Powered by Nanobanana AI</p></footer>
418<script>((storageKey2, restoreKey) => { 419 if (!window.history.state || !window.history.state.key) { 420 let key = Math.random().toString(32).slice(2); 421 window.history.replaceState({ key }, ""); 422 } 423 try { 424 let positions = JSON.parse(sessionStorage.getItem(storageKey2) || "{}"); 425 let storedY = positions[restoreKey || window.history.state.key]; 426 if (typeof storedY === "number") { 427 window.scrollTo(0, storedY); 428 } 429 } catch (error) { 430 console.error(error); 431 sessionStorage.removeItem(storageKey2); 432 } 433 })("react-router-scroll-positions", null)</script>
433<link rel="modulepreload" href="/assets/entry.client-DABY7OgJ.js"/><link rel="modulepreload" href="/assets/chunk-EPOLDU6W-BBknADq0.js"/><link rel="modulepreload" href="/assets/index-B1wfbgpd.js"/><link rel="modulepreload" href="/assets/root-wV0s5DD8.js"/><link rel="modulepreload" href="/assets/route-D9orPM6N.js"/><link rel="modulepreload" href="/assets/preload-helper-ckwbz45p.js"/>
433<script>window.__reactRouterContext = {"basename":"/","future":{"unstable_optimizeDeps":false,"unstable_subResourceIntegrity":false,"unstable_trailingSlashAwareDataRequests":false,"v8_middleware":false,"v8_splitRouteModules":false,"v8_viteEnvironmentApi":false},"routeDiscovery":{"mode":"lazy","manifestPath":"/__manifest"},"ssr":true,"isSpaMode":false};window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());</script>
433<script type="module" async="">; 434import * as route0 from "/assets/root-wV0s5DD8.js"; 435import * as route1 from "/assets/route-D9orPM6N.js"; 436 window.__reactRouterManifest = { 437 "entry": { 438 "module": "/assets/entry.client-DABY7OgJ.js", 439 "imports": [ 440 "/assets/chunk-EPOLDU6W-BBknADq0.js", 441 "/assets/index-B1wfbgpd.js" 442 ], 443 "css": [] 444 }, 445 "routes": { 446 "root": { 447 "id": "root", 448 "path": "", 449 "hasAction": false, 450 "hasLoader": false, 451 "hasClientAction": false, 452 "hasClientLoader": false, 453 "hasClientMiddleware": false, 454 "hasErrorBoundary": false, 455 "module": "/assets/root-wV0s5DD8.js", 456 "imports": [ 457 "/assets/chunk-EPOLDU6W-BBknADq0.js", 458 "/assets/index-B1wfbgpd.js" 459 ], 460 "css": [] 461 }, 462 "routes/_index": { 463 "id": "routes/_index", 464 "parentId": "root", 465 "index": true, 466 "hasAction": false, 467 "hasLoader": true, 468 "hasClientAction": false, 469 "hasClientLoader": false, 470 "hasClientMiddleware": false, 471 "hasErrorBoundary": false, 472 "module": "/assets/route-D9orPM6N.js", 473 "imports": [ 474 "/assets/preload-helper-ckwbz45p.js", 475 "/assets/chunk-EPOLDU6W-BBknADq0.js" 476 ], 477 "css": [] 478 } 479 }, 480 "url": "/assets/manifest-3ce5910c.js", 481 "version": "3ce5910c" 482}; 483 window.__reactRouterRouteModules = {"root":route0,"routes/_index":route1}; 484 485import("/assets/entry.client-DABY7OgJ.js");</script>
485</body></html><!--$-->
485<script>window.__reactRouterContext.streamController.enqueue("[{\"_1\":2,\"_5\":-5,\"_6\":-5},\"loaderData\",{\"_3\":4},\"routes/_index\",{},\"actionData\",\"errors\"]\n");</script>
485<!--$-->
485<script>window.__reactRouterContext.streamController.close();</script>
485<!--/$--><!--/$-->
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.