| 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8" /> |
| 5 | <title>Build Minimal · Luxury Whitespace</title> |
| 6 | <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&display=swap" rel="stylesheet" /> |
| 7 | <style> |
| 8 | /* |
| 9 | * frame-build-minimal — luxury-minimal whitespace hero. |
| 10 | * Visual style distilled from huashu-design "Build Studio" philosophy (MIT, © alchaincyf). |
| 11 | * Rebuilt as a self-contained CSS @keyframes timeline for html-video / Hyperframes. |
| 12 | * Timeline (5s @ 60fps): corner marks draw -> eyebrow fades -> hero word reveals letter |
| 13 | * by letter -> gold line extends -> description fades -> thin indicators rise & breathe. |
| 14 | */ |
| 15 | * { margin: 0; padding: 0; box-sizing: border-box; } |
| 16 | body { |
| 17 | width: 1920px; height: 1080px; overflow: hidden; |
| 18 | background: #FAFAF8; color: #1A1A18; |
| 19 | font-family: 'Inter', sans-serif; position: relative; |
| 20 | } |
| 21 | |
| 22 | /* warm radial wash */ |
| 23 | .wash { position: absolute; inset: 0; z-index: 0; |
| 24 | background: radial-gradient(ellipse 1300px 700px at 32% 42%, rgba(212,165,116,0.07) 0%, transparent 70%); |
| 25 | opacity: 0; animation: washIn 1.4s ease-out forwards; } |
| 26 | @keyframes washIn { to { opacity: 1; } } |
| 27 | |
| 28 | /* corner marks (draw in) */ |
| 29 | .corner { position: absolute; z-index: 2; opacity: 0; animation: cornerIn 0.8s ease-out 0.2s forwards; } |
| 30 | .corner-tl { top: 72px; left: 72px; } |
| 31 | .corner-br { bottom: 72px; right: 72px; transform: rotate(180deg); } |
| 32 | @keyframes cornerIn { to { opacity: 1; } } |
| 33 | |
| 34 | /* side labels */ |
| 35 | .side-label { position: absolute; font-weight: 400; font-size: 12px; letter-spacing: 6px; |
| 36 | text-transform: uppercase; color: #CBC7C0; z-index: 2; opacity: 0; animation: fade 1s ease-out 1.8s forwards; } |
| 37 | .side-left { left: 72px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: center; } |
| 38 | .side-right { right: 72px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: center; } |
| 39 | @keyframes fade { to { opacity: 1; } } |
| 40 | |
| 41 | /* center stack */ |
| 42 | .center { position: absolute; inset: 0; display: flex; flex-direction: column; |
| 43 | align-items: center; justify-content: center; margin-top: -40px; z-index: 1; } |
| 44 | .eyebrow { font-weight: 400; font-size: 15px; letter-spacing: 9px; text-transform: uppercase; |
| 45 | color: #B0ACA4; margin-bottom: 40px; opacity: 0; animation: fadeUp 0.9s ease-out 0.5s forwards; } |
| 46 | .hero { font-weight: 200; font-size: 220px; letter-spacing: -7px; color: #1A1A18; line-height: 1; } |
| 47 | .hero .ch { display: inline-block; opacity: 0; transform: translateY(30px); |
| 48 | animation: chReveal 0.7s cubic-bezier(0.16,1,0.3,1) forwards; } |
| 49 | @keyframes chReveal { to { opacity: 1; transform: translateY(0); } } |
| 50 | .gold-line { width: 0; height: 1px; background: #D4A574; margin: 48px auto 44px; opacity: 0.8; |
| 51 | animation: goldGrow 1s cubic-bezier(0.16,1,0.3,1) 1.9s forwards; } |
| 52 | @keyframes goldGrow { to { width: 88px; } } |
| 53 | .desc { font-weight: 300; font-size: 21px; color: #A8A4A0; letter-spacing: 0.3px; line-height: 2; |
| 54 | max-width: 640px; text-align: center; opacity: 0; animation: fadeUp 1s ease-out 2.2s forwards; } |
| 55 | @keyframes fadeUp { 0%{opacity:0;transform:translateY(22px)} 100%{opacity:1;transform:translateY(0)} } |
| 56 | |
| 57 | /* thin indicators (rise + slow breathe) */ |
| 58 | .indicators { position: absolute; bottom: 96px; left: 50%; transform: translateX(-50%); |
| 59 | display: flex; gap: 26px; align-items: flex-end; z-index: 2; } |
| 60 | .ind { width: 1.5px; background: #D8D4CE; transform: scaleY(0); transform-origin: bottom; |
| 61 | animation: indRise 0.6s cubic-bezier(0.16,1,0.3,1) forwards, breathe 4s ease-in-out 3s infinite; } |
| 62 | .ind.gold { background: #D4A574; width: 2px; opacity: 0.85; } |
| 63 | @keyframes indRise { to { transform: scaleY(1); } } |
| 64 | @keyframes breathe { 0%,100%{opacity:1} 50%{opacity:0.45} } |
| 65 | |
| 66 | .whisper { position: absolute; top: 72px; right: 132px; font-weight: 200; font-size: 30px; |
| 67 | color: #D4A574; opacity: 0; z-index: 2; animation: fade 1.2s ease-out 2.6s forwards; } |
| 68 | |
| 69 | @media (prefers-reduced-motion: reduce) { |
| 70 | * { animation: none !important; } |
| 71 | .wash,.corner,.side-label,.eyebrow,.desc,.whisper{opacity:1} |
| 72 | .hero .ch{opacity:1;transform:none}.gold-line{width:88px}.ind{transform:scaleY(1)} |
| 73 | } |
| 74 | </style> |
| 75 | </head> |
| 76 | <body> |
| 77 | <div class="wash"></div> |
| 78 | |
| 79 | <svg class="corner corner-tl" width="26" height="26" viewBox="0 0 26 26" fill="none"> |
| 80 | <path d="M0 0L0 26" stroke="#D4A574" stroke-width="0.6" opacity="0.45"/> |
| 81 | <path d="M0 0L26 0" stroke="#D4A574" stroke-width="0.6" opacity="0.45"/> |
| 82 | </svg> |
| 83 | <svg class="corner corner-br" width="26" height="26" viewBox="0 0 26 26" fill="none"> |
| 84 | <path d="M0 0L0 26" stroke="#D4A574" stroke-width="0.6" opacity="0.45"/> |
| 85 | <path d="M0 0L26 0" stroke="#D4A574" stroke-width="0.6" opacity="0.45"/> |
| 86 | </svg> |
| 87 | |
| 88 | <div class="side-label side-left">Open Design</div> |
| 89 | <div class="side-label side-right">Self-Evolving</div> |
| 90 | <div class="whisper">◇</div> |
| 91 | |
| 92 | <div class="center"> |
| 93 | <div class="eyebrow">Design Agent</div> |
| 94 | <!-- .ch spans are revealed one by one; staggered via inline animation-delay --> |
| 95 | <div class="hero" id="hero"> |
| 96 | <span class="ch" style="animation-delay:.6s">A</span><span class="ch" style="animation-delay:.68s">g</span><span class="ch" style="animation-delay:.76s">e</span><span class="ch" style="animation-delay:.84s">n</span><span class="ch" style="animation-delay:.92s">t</span> |
| 97 | </div> |
| 98 | <div class="gold-line"></div> |
| 99 | <div class="desc">Every use is an evolution.<br>From craft, to assist, to self-evolving.</div> |
| 100 | </div> |
| 101 | |
| 102 | <div class="indicators"> |
| 103 | <div class="ind" style="height:24px;animation-delay:2.4s,3.0s"></div> |
| 104 | <div class="ind" style="height:34px;animation-delay:2.46s,3.1s"></div> |
| 105 | <div class="ind gold" style="height:44px;animation-delay:2.52s,3.2s"></div> |
| 106 | <div class="ind" style="height:28px;animation-delay:2.58s,3.3s"></div> |
| 107 | <div class="ind" style="height:38px;animation-delay:2.64s,3.4s"></div> |
| 108 | <div class="ind gold" style="height:48px;animation-delay:2.7s,3.5s"></div> |
| 109 | <div class="ind" style="height:30px;animation-delay:2.76s,3.6s"></div> |
| 110 | </div> |
| 111 | </body> |
| 112 | </html> |
| 113 |