| 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8" /> |
| 5 | <title>Creative Voltage · Electric Split + Script</title> |
| 6 | <link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Space+Mono:wght@400;700&family=Caveat:wght@600&display=swap" rel="stylesheet" /> |
| 7 | <style> |
| 8 | /* |
| 9 | * frame-creative-voltage — electric-blue / dark split with a hand-drawn script accent. |
| 10 | * Visual style distilled from the frontend-slides "Creative Voltage" preset (MIT, © Zara Zhang). |
| 11 | * Rebuilt as a self-contained CSS/SVG @keyframes timeline for html-video / Hyperframes. |
| 12 | * Timeline (4.5s @ 60fps): blue + dark panels slide in offset -> display title rises -> |
| 13 | * handwritten script strokes itself in -> mono meta ticks fade -> underline dash sweeps. |
| 14 | */ |
| 15 | * { margin: 0; padding: 0; box-sizing: border-box; } |
| 16 | body { |
| 17 | width: 1920px; height: 1080px; overflow: hidden; |
| 18 | background: #0d0d14; color: #fff; |
| 19 | font-family: 'Syne', sans-serif; position: relative; |
| 20 | } |
| 21 | |
| 22 | /* offset split panels */ |
| 23 | .panel-l { position: absolute; left: 0; top: 0; bottom: 0; width: 47%; background: #2f4bff; |
| 24 | transform: translateX(-100%); animation: slideL 0.85s cubic-bezier(0.16,1,0.3,1) 0.1s forwards; } |
| 25 | .panel-r { position: absolute; right: 0; top: 0; bottom: 0; width: 53%; background: #0d0d14; |
| 26 | transform: translateX(100%); animation: slideR 0.85s cubic-bezier(0.16,1,0.3,1) 0.25s forwards; } |
| 27 | @keyframes slideL { to { transform: translateX(0); } } |
| 28 | @keyframes slideR { to { transform: translateX(0); } } |
| 29 | |
| 30 | /* electric noise glow on blue panel */ |
| 31 | .glow { position: absolute; left: 0; top: 0; bottom: 0; width: 47%; z-index: 1; pointer-events: none; |
| 32 | background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.16) 0%, transparent 55%); opacity: 0; |
| 33 | animation: fade 1.2s ease-out 0.9s forwards; } |
| 34 | @keyframes fade { to { opacity: 1; } } |
| 35 | |
| 36 | /* display title (right, dark) */ |
| 37 | .display { position: absolute; right: 110px; top: 300px; width: 760px; text-align: right; z-index: 4; |
| 38 | font-weight: 800; font-size: 132px; line-height: 0.96; letter-spacing: -3px; } |
| 39 | .display .ln { display: block; opacity: 0; transform: translateY(34px); |
| 40 | animation: up 0.7s cubic-bezier(0.16,1,0.3,1) forwards; } |
| 41 | .display .volt { color: #2f4bff; -webkit-text-stroke: 2px #6f86ff; } |
| 42 | @keyframes up { to { opacity: 1; transform: translateY(0); } } |
| 43 | |
| 44 | /* handwritten script accent (blue panel) */ |
| 45 | .script { position: absolute; left: 90px; top: 420px; z-index: 4; font-family: 'Caveat', cursive; |
| 46 | font-size: 120px; color: #fff; opacity: 0; transform: rotate(-7deg); |
| 47 | animation: scriptIn 0.8s ease-out 1.4s forwards; } |
| 48 | @keyframes scriptIn { 0%{opacity:0;transform:rotate(-7deg) translateY(20px) scale(0.9)} |
| 49 | 100%{opacity:1;transform:rotate(-7deg) translateY(0) scale(1)} } |
| 50 | .script-underline { position: absolute; left: 90px; top: 560px; z-index: 4; } |
| 51 | .script-underline path { stroke: #fff; stroke-width: 5; fill: none; stroke-linecap: round; |
| 52 | stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 0.9s ease-out 1.9s forwards; } |
| 53 | @keyframes draw { to { stroke-dashoffset: 0; } } |
| 54 | |
| 55 | /* mono meta line (top-left, on blue) */ |
| 56 | .meta { position: absolute; left: 90px; top: 96px; z-index: 4; font-family: 'Space Mono', monospace; |
| 57 | font-size: 18px; font-weight: 700; letter-spacing: 3px; color: rgba(255,255,255,0.85); |
| 58 | opacity: 0; animation: fade 0.6s ease-out 1.0s forwards; } |
| 59 | |
| 60 | /* mono caption bottom-right (on dark) */ |
| 61 | .caption { position: absolute; right: 110px; bottom: 96px; z-index: 4; font-family: 'Space Mono', monospace; |
| 62 | font-size: 18px; font-weight: 400; letter-spacing: 2px; color: rgba(255,255,255,0.55); |
| 63 | opacity: 0; animation: fade 0.6s ease-out 2.2s forwards; } |
| 64 | |
| 65 | @media (prefers-reduced-motion: reduce) { |
| 66 | * { animation: none !important; } |
| 67 | .panel-l,.panel-r{transform:translateX(0)}.glow,.meta,.caption{opacity:1} |
| 68 | .display .ln{opacity:1;transform:none} |
| 69 | .script{opacity:1;transform:rotate(-7deg)}.script-underline path{stroke-dashoffset:0} |
| 70 | } |
| 71 | </style> |
| 72 | </head> |
| 73 | <body> |
| 74 | <div class="panel-l"></div> |
| 75 | <div class="panel-r"></div> |
| 76 | <div class="glow"></div> |
| 77 | |
| 78 | <div class="meta">// CREATIVE_MODE · ON</div> |
| 79 | |
| 80 | <div class="display"> |
| 81 | <span class="ln" style="animation-delay:1.0s">Render</span> |
| 82 | <span class="ln volt" style="animation-delay:1.18s">any</span> |
| 83 | <span class="ln" style="animation-delay:1.36s">video.</span> |
| 84 | </div> |
| 85 | |
| 86 | <div class="script">make it move</div> |
| 87 | <svg class="script-underline" width="520" height="60" viewBox="0 0 520 60" fill="none"> |
| 88 | <path d="M8 40 C 140 12, 360 12, 512 34"/> |
| 89 | </svg> |
| 90 | |
| 91 | <div class="caption">html-video · creative voltage</div> |
| 92 | </body> |
| 93 | </html> |
| 94 |