| 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8" /> |
| 5 | <title>Bold Signal · Colored Card on Dark</title> |
| 6 | <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet" /> |
| 7 | <style> |
| 8 | /* |
| 9 | * frame-bold-signal — bold colored card on a dark gradient. |
| 10 | * Visual style distilled from the frontend-slides "Bold Signal" preset (MIT, © Zara Zhang). |
| 11 | * Rebuilt as a self-contained CSS @keyframes timeline for html-video / Hyperframes. |
| 12 | * Timeline (4s @ 60fps): dark stage -> big section number rolls in -> nav breadcrumb fades |
| 13 | * -> orange card slides in from right -> title rises -> footer marks fade. |
| 14 | */ |
| 15 | * { margin: 0; padding: 0; box-sizing: border-box; } |
| 16 | body { |
| 17 | width: 1920px; height: 1080px; overflow: hidden; |
| 18 | background: #1a1a1a; |
| 19 | background-image: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%); |
| 20 | color: #fff; font-family: 'Space Grotesk', sans-serif; position: relative; |
| 21 | } |
| 22 | |
| 23 | /* big section number, top-left */ |
| 24 | .section-no { position: absolute; top: 88px; left: 96px; font-family: 'Archivo Black', sans-serif; |
| 25 | font-size: 96px; line-height: 1; color: #fff; opacity: 0; transform: translateY(-30px); |
| 26 | animation: rollIn 0.7s cubic-bezier(0.16,1,0.3,1) 0.2s forwards; } |
| 27 | .section-no .dim { opacity: 0.3; } |
| 28 | @keyframes rollIn { to { opacity: 1; transform: translateY(0); } } |
| 29 | |
| 30 | /* nav breadcrumb, top-right */ |
| 31 | .nav { position: absolute; top: 104px; right: 96px; display: flex; gap: 28px; |
| 32 | font-size: 18px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; } |
| 33 | .nav span { opacity: 0; animation: fade 0.5s ease-out forwards; color: #fff; } |
| 34 | .nav span.dim { opacity: 0; } |
| 35 | .nav span.active { color: #FF5722; } |
| 36 | @keyframes fade { to { opacity: 0.35; } } |
| 37 | @keyframes fadeActive { to { opacity: 1; } } |
| 38 | .nav span.active { animation: fadeActive 0.5s ease-out forwards; } |
| 39 | |
| 40 | /* the orange focal card */ |
| 41 | .card { position: absolute; right: 0; top: 240px; width: 1180px; height: 600px; |
| 42 | background: #FF5722; color: #1a1a1a; border-radius: 36px 0 0 36px; |
| 43 | padding: 96px 110px; display: flex; flex-direction: column; justify-content: flex-end; |
| 44 | transform: translateX(110%); animation: cardSlide 0.9s cubic-bezier(0.16,1,0.3,1) 0.6s forwards; |
| 45 | box-shadow: -40px 30px 90px rgba(255,87,34,0.18); } |
| 46 | @keyframes cardSlide { to { transform: translateX(0); } } |
| 47 | .card-label { font-size: 20px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; |
| 48 | opacity: 0; animation: fadeUp 0.6s ease-out 1.15s forwards; } |
| 49 | .card-title { font-family: 'Archivo Black', sans-serif; font-size: 130px; line-height: 0.94; |
| 50 | letter-spacing: -2px; margin-top: 28px; opacity: 0; |
| 51 | animation: fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) 1.3s forwards; } |
| 52 | @keyframes fadeUp { 0%{opacity:0;transform:translateY(28px)} 100%{opacity:1;transform:translateY(0)} } |
| 53 | |
| 54 | /* footer marks */ |
| 55 | .footer { position: absolute; bottom: 80px; left: 96px; display: flex; gap: 16px; align-items: center; |
| 56 | font-size: 16px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: #fff; |
| 57 | opacity: 0; animation: fade 0.6s ease-out 1.6s forwards; } |
| 58 | .footer .tick { width: 40px; height: 3px; background: #FF5722; } |
| 59 | |
| 60 | @media (prefers-reduced-motion: reduce) { |
| 61 | * { animation: none !important; } |
| 62 | .section-no{opacity:1;transform:none}.nav span{opacity:0.35}.nav span.active{opacity:1} |
| 63 | .card{transform:translateX(0)}.card-label,.card-title{opacity:1;transform:none}.footer{opacity:1} |
| 64 | } |
| 65 | </style> |
| 66 | </head> |
| 67 | <body> |
| 68 | <div class="section-no">01<span class="dim">/04</span></div> |
| 69 | |
| 70 | <div class="nav"> |
| 71 | <span class="active" style="animation-delay:.4s">Signal</span> |
| 72 | <span class="dim" style="animation-delay:.5s">Build</span> |
| 73 | <span class="dim" style="animation-delay:.6s">Ship</span> |
| 74 | <span class="dim" style="animation-delay:.7s">Scale</span> |
| 75 | </div> |
| 76 | |
| 77 | <div class="card"> |
| 78 | <div class="card-label">Launch · 2026</div> |
| 79 | <div class="card-title">Bring your<br>own agent.</div> |
| 80 | </div> |
| 81 | |
| 82 | <div class="footer"><span class="tick"></span> html-video · Bold Signal</div> |
| 83 | </body> |
| 84 | </html> |
| 85 |