| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-CN"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8" /> |
| 5 | <title>VFX Text Cursor · Opening</title> |
| 6 | <script src="https://cdn.tailwindcss.com"></script> |
| 7 | <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700;800;900&family=Noto+Sans+SC:wght@400;700;900&family=JetBrains+Mono&display=swap" rel="stylesheet" /> |
| 8 | <style> |
| 9 | body { font-family:'Inter Tight','Noto Sans SC',system-ui,sans-serif; background:#06070a; color:#f5f5f7; margin:0; min-height:100vh; overflow:hidden; position:relative; } |
| 10 | .vignette { position:absolute; inset:0; background: radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.8) 100%); z-index:1; } |
| 11 | .grain { position:absolute; inset:0; opacity:0.06; mix-blend-mode:overlay; pointer-events:none; z-index:2; |
| 12 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); } |
| 13 | .mono { font-family:'JetBrains Mono',ui-monospace,monospace; } |
| 14 | .chip { font-size:11px; letter-spacing:0.18em; text-transform:uppercase; } |
| 15 | @keyframes blink { 0%, 50% { opacity:1 } 51%, 100% { opacity:0 } } |
| 16 | .cursor { display:inline-block; width:18px; height:1.05em; background:#ff3b6f; margin-left:6px; vertical-align:text-bottom; animation: blink 1s steps(1) infinite; |
| 17 | box-shadow: 0 0 24px #ff3b6f, 0 0 8px #ff3b6f, 60px 0 80px rgba(255,59,111,0.6); } |
| 18 | .chroma { |
| 19 | text-shadow: |
| 20 | 3px 0 #00d4ff, |
| 21 | -3px 0 #ff3b6f, |
| 22 | 0 0 40px rgba(255,59,111,0.3); |
| 23 | } |
| 24 | .text-line { position:relative; } |
| 25 | /* directional light leaks */ |
| 26 | .ray { position:absolute; mix-blend-mode:screen; pointer-events:none; z-index:1; } |
| 27 | .ray-1 { top:30%; left:-10%; width:60%; height:6px; transform:rotate(-12deg); background:linear-gradient(90deg, transparent, rgba(255,59,111,0.6), transparent); filter: blur(8px); } |
| 28 | .ray-2 { top:55%; right:-10%; width:50%; height:4px; transform:rotate(15deg); background:linear-gradient(90deg, transparent, rgba(0,212,255,0.5), transparent); filter: blur(6px); } |
| 29 | .ray-3 { top:70%; left:10%; width:40%; height:3px; transform:rotate(-8deg); background:linear-gradient(90deg, transparent, rgba(255,181,71,0.5), transparent); filter: blur(5px); } |
| 30 | </style> |
| 31 | </head> |
| 32 | <body class="flex flex-col items-center justify-center relative"> |
| 33 | |
| 34 | <header class="absolute top-12 left-12 right-12 flex items-baseline justify-between chip opacity-50 z-10 mono"> |
| 35 | <span>FRAME 01 · OPENING</span> |
| 36 | <span>VFX · TEXT CURSOR</span> |
| 37 | <span>00:03:21</span> |
| 38 | </header> |
| 39 | |
| 40 | <!-- light rays --> |
| 41 | <div class="ray ray-1"></div> |
| 42 | <div class="ray ray-2"></div> |
| 43 | <div class="ray ray-3"></div> |
| 44 | |
| 45 | <main class="relative z-10 text-center max-w-[1280px] px-12"> |
| 46 | <h1 class="chroma font-black leading-[1.05] tracking-[-0.02em]" style="font-size:clamp(48px,7vw,108px)"> |
| 47 | Markdown 是给作者的<br/> |
| 48 | 中间过程, <span style="color:#ff3b6f">HTML</span> 才是<br/> |
| 49 | 给读者的最终形态<span class="cursor"></span> |
| 50 | </h1> |
| 51 | <p class="mt-10 text-[22px] opacity-60 font-medium"> |
| 52 | — Claude Code 团队, 2026 |
| 53 | </p> |
| 54 | </main> |
| 55 | |
| 56 | <div class="vignette"></div> |
| 57 | <div class="grain"></div> |
| 58 | |
| 59 | <footer class="absolute bottom-12 left-12 right-12 flex items-baseline justify-between chip opacity-40 z-10 mono"> |
| 60 | <span>HTML-ANYTHING · VFX-TEXT-CURSOR</span> |
| 61 | <span>HOT PINK × CYAN CHROMATIC</span> |
| 62 | <span>REC ●</span> |
| 63 | </footer> |
| 64 | </body> |
| 65 | </html> |
| 66 |