Spaces:
Sleeping
Sleeping
Commercial overhaul: clean glass+taillight boundaries (conforming split), model-locked AI render (ControlNet img2img + paint tint), gesture control, workshop disassembly, part info cards, pro UI + new How-it-works
9032518 verified | <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <title>Chat CAD — promo animation</title> | |
| <style> | |
| :root{--bg:#0a0d13;--line:#1d2635;--txt:#dbe4f0;--dim:#7e8ba0;--acc:#3b82f6;--cy:#22d3ee;--ok:#34d399; | |
| --mono:'Cascadia Code',Consolas,monospace} | |
| *{box-sizing:border-box;margin:0;padding:0} | |
| body{background:#05070b;display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:'Segoe UI',system-ui,sans-serif} | |
| /* 16:9 stage — record this box */ | |
| #stage{position:relative;width:1280px;height:720px;background: | |
| radial-gradient(900px 400px at 70% -10%,rgba(59,130,246,.13),transparent), | |
| radial-gradient(600px 300px at 10% 110%,rgba(34,211,238,.09),transparent),var(--bg); | |
| overflow:hidden;border:1px solid var(--line)} | |
| /* engineering grid */ | |
| #stage:before{content:'';position:absolute;inset:0; | |
| background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px), | |
| linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px); | |
| background-size:40px 40px} | |
| .brand{position:absolute;top:28px;left:36px;display:flex;gap:12px;align-items:center;z-index:5} | |
| .logo{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,#2563eb,#4f8ef7); | |
| display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:14px} | |
| .brand b{color:#fff;font-size:16px;display:block} | |
| .brand span{color:var(--dim);font-size:10.5px;letter-spacing:1.6px} | |
| /* chat bubble */ | |
| .chat{position:absolute;top:96px;left:36px;width:330px;z-index:5} | |
| .bubble{background:#121826;border:1px solid var(--line);border-radius:12px;padding:14px 16px; | |
| color:var(--txt);font-size:15px;opacity:0;animation:pop .5s .4s forwards} | |
| .bubble .u{color:var(--cy);font:600 10.5px var(--mono);letter-spacing:1.2px;display:block;margin-bottom:6px} | |
| .type{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;width:0; | |
| animation:type 1.6s steps(24) .8s forwards} | |
| .caret{display:inline-block;width:2px;height:16px;background:var(--cy);vertical-align:-2px; | |
| animation:blink .7s step-end infinite} | |
| .reply{margin-top:10px;background:#101b14;border:1px solid #234432;border-radius:12px;padding:12px 16px; | |
| font:12.5px var(--mono);color:#9fd6ae;opacity:0;animation:pop .5s 2.8s forwards} | |
| .reply b{color:var(--ok)} | |
| /* metric chips */ | |
| .chips{position:absolute;left:36px;bottom:118px;display:flex;flex-direction:column;gap:10px;z-index:5} | |
| .chip{background:#0f1420;border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:8px; | |
| padding:9px 14px;color:var(--txt);font-size:13px;opacity:0;transform:translateX(-14px)} | |
| .chip b{font-family:var(--mono);color:var(--cy)} | |
| .chip:nth-child(1){animation:slide .5s 3.4s forwards} | |
| .chip:nth-child(2){animation:slide .5s 4.0s forwards} | |
| .chip:nth-child(3){animation:slide .5s 4.6s forwards} | |
| .chip:nth-child(4){animation:slide .5s 5.2s forwards} | |
| /* car scene */ | |
| .scene{position:absolute;right:0;top:60px;width:860px;height:560px;z-index:4} | |
| svg{width:100%;height:100%} | |
| .body-line{fill:none;stroke:var(--cy);stroke-width:2.4;stroke-dasharray:2600;stroke-dashoffset:2600; | |
| animation:draw 2.4s .9s forwards ease-in-out} | |
| .body-fill{fill:url(#press);opacity:0;animation:fade 1.2s 3.4s forwards} | |
| .wheel{fill:none;stroke:var(--cy);stroke-width:2.4;stroke-dasharray:400;stroke-dashoffset:400; | |
| animation:draw 1.2s 2.2s forwards} | |
| .wheel-fill{fill:#0d1420;opacity:0;animation:fade 1s 3.4s forwards} | |
| .flow{fill:none;stroke:rgba(34,211,238,.55);stroke-width:1.6;stroke-dasharray:36 22;opacity:0; | |
| animation:fade .8s 4.6s forwards, stream 1.1s linear 4.6s infinite} | |
| /* explode phase */ | |
| .part{animation-fill-mode:forwards} | |
| .p-glass{animation:exGlass 1s 7.4s forwards ease-in-out} | |
| .p-w1{animation:exW1 1s 7.7s forwards ease-in-out} | |
| .p-w2{animation:exW2 1s 8.0s forwards ease-in-out} | |
| .tag{font:600 11px var(--mono);fill:var(--dim);opacity:0} | |
| .t1{animation:fade .4s 8.6s forwards}.t2{animation:fade .4s 8.8s forwards}.t3{animation:fade .4s 9.0s forwards} | |
| /* closing line */ | |
| .tagline{position:absolute;left:0;right:0;bottom:34px;text-align:center;z-index:6} | |
| .tagline h1{color:#fff;font-size:30px;font-weight:750;letter-spacing:-.4px;opacity:0; | |
| animation:rise .8s 9.6s forwards} | |
| .tagline h1 em{color:var(--cy);font-style:normal} | |
| .tagline p{color:var(--dim);font-size:14px;margin-top:6px;opacity:0;animation:rise .8s 10.1s forwards} | |
| .stamp{position:absolute;top:30px;right:36px;font:600 10.5px var(--mono);color:var(--dim); | |
| letter-spacing:1.4px;border:1px solid var(--line);border-radius:99px;padding:6px 14px;z-index:5} | |
| @keyframes type{to{width:100%}} | |
| @keyframes blink{50%{opacity:0}} | |
| @keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} | |
| @keyframes slide{to{opacity:1;transform:none}} | |
| @keyframes draw{to{stroke-dashoffset:0}} | |
| @keyframes fade{to{opacity:1}} | |
| @keyframes stream{to{stroke-dashoffset:-58}} | |
| @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} | |
| @keyframes exGlass{to{transform:translate(40px,-90px)}} | |
| @keyframes exW1{to{transform:translate(-70px,120px)}} | |
| @keyframes exW2{to{transform:translate(90px,120px)}} | |
| /* loop the whole thing */ | |
| #stage.loop *{animation-play-state:running} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="stage"> | |
| <div class="brand"><div class="logo">CC</div> | |
| <div><b>Chat CAD</b><span>GENERATIVE CAR-DESIGN STUDIO</span></div></div> | |
| <div class="stamp">AI PHYSICS · REAL SOLVERS</div> | |
| <div class="chat"> | |
| <div class="bubble"><span class="u">YOU</span> | |
| <span class="type">"Design a sleek coupe, lower the roof."</span><span class="caret"></span></div> | |
| <div class="reply">geometry morphed · aero evaluated<br/><b>Cd = 0.271</b> (graph-neural surrogate, <1 s)</div> | |
| </div> | |
| <div class="chips"> | |
| <div class="chip">Surface pressure field <b>Cp</b> painted on body</div> | |
| <div class="chip">Wall shear + crash response, on demand</div> | |
| <div class="chip">Verified against <b>OpenFOAM</b> k-ω SST</div> | |
| <div class="chip">Hands-free control: <b>gesture</b> rotate · zoom · explode</div> | |
| </div> | |
| <div class="scene"> | |
| <svg viewBox="0 0 860 560"> | |
| <defs> | |
| <linearGradient id="press" x1="0" y1="0" x2="1" y2="0"> | |
| <stop offset="0" stop-color="#d43d2a" stop-opacity=".85"/> | |
| <stop offset=".28" stop-color="#f5a623" stop-opacity=".75"/> | |
| <stop offset=".55" stop-color="#2ecc71" stop-opacity=".7"/> | |
| <stop offset="1" stop-color="#2471d6" stop-opacity=".8"/> | |
| </linearGradient> | |
| </defs> | |
| <!-- streamlines --> | |
| <path class="flow" d="M20 190 C 180 185, 300 165, 430 160 S 720 175, 840 165"/> | |
| <path class="flow" style="animation-delay:.9s,4.8s" d="M20 250 C 170 248, 290 238, 420 236 S 730 250, 840 245"/> | |
| <path class="flow" style="animation-delay:1s,5.0s" d="M20 380 C 180 382, 320 392, 450 394 S 740 385, 840 390"/> | |
| <!-- car body (side profile, drawn then pressure-filled) --> | |
| <g class="part p-glass"> | |
| <path class="body-line" style="stroke-dasharray:900;stroke-dashoffset:900;animation-delay:1.6s" | |
| d="M300 232 L330 198 C 360 172, 420 168, 470 176 L520 190 L512 232 Z"/> | |
| <path class="body-fill" style="fill:#16233a;animation-delay:3.4s" | |
| d="M300 232 L330 198 C 360 172, 420 168, 470 176 L520 190 L512 232 Z"/> | |
| <text class="tag t1" x="418" y="150">glass_0</text> | |
| </g> | |
| <path class="body-line" d="M120 330 C 130 300, 160 268, 220 252 L300 238 L330 202 | |
| C 362 174, 424 170, 474 178 L524 192 C 600 200, 660 214, 700 240 C 730 258, 742 286, 738 316 | |
| L730 342 L640 348 M560 350 L320 352 M240 354 L150 352 C 128 350, 118 342, 120 330 Z"/> | |
| <path class="body-fill" d="M120 330 C 130 300, 160 268, 220 252 L300 238 L330 202 | |
| C 362 174, 424 170, 474 178 L524 192 C 600 200, 660 214, 700 240 C 730 258, 742 286, 738 316 | |
| L730 342 L640 348 L560 350 L320 352 L240 354 L150 352 C 128 350, 118 342, 120 330 Z"/> | |
| <g class="part p-w1"> | |
| <circle class="wheel" cx="280" cy="352" r="46"/><circle class="wheel-fill" cx="280" cy="352" r="44"/> | |
| <circle class="wheel" style="animation-delay:2.5s" cx="280" cy="352" r="20"/> | |
| <text class="tag t2" x="240" y="425">wheel_fl</text> | |
| </g> | |
| <g class="part p-w2"> | |
| <circle class="wheel" cx="600" cy="352" r="46"/><circle class="wheel-fill" cx="600" cy="352" r="44"/> | |
| <circle class="wheel" style="animation-delay:2.6s" cx="600" cy="352" r="20"/> | |
| <text class="tag t3" x="565" y="425">wheel_rl</text> | |
| </g> | |
| <!-- Cd callout --> | |
| <g opacity="0" style="animation:fade .6s 3.6s forwards"> | |
| <line x1="640" y1="205" x2="700" y2="150" stroke="#3b82f6" stroke-width="1.4"/> | |
| <rect x="700" y="120" width="128" height="46" rx="7" fill="#0f1420" stroke="#243044"/> | |
| <text x="716" y="140" fill="#8a94a6" font-size="10.5" font-family="Consolas,monospace">DRAG COEFFICIENT</text> | |
| <text x="716" y="158" fill="#22d3ee" font-size="15" font-weight="700" font-family="Consolas,monospace">Cd 0.271</text> | |
| </g> | |
| </svg> | |
| </div> | |
| <div class="tagline"> | |
| <h1>Chat. Sketch. Gesture. <em>Simulate.</em></h1> | |
| <p>A browser-native car-design studio with machine-learned CFD in the loop.</p> | |
| </div> | |
| </div> | |
| <script> | |
| // seamless loop: restart every 13 s (screen-record one or two loops) | |
| setInterval(()=>{ const s=document.getElementById('stage'); | |
| const c=s.cloneNode(true); s.parentNode.replaceChild(c,s); }, 13000); | |
| </script> | |
| </body> | |
| </html> | |