wehub-resource-sync
070959e133
landing-page-staging / Deploy landing page to staging (push) Has been skipped
landing-page-ci / Validate landing page (push) Failing after 4s
visual-baseline / Capture visual baselines (push) Has been cancelled
bake-plugin-previews / Bake plugin previews (push) Has been cancelled
66 lines
3.5 KiB
HTML
66 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>VFX Text Cursor · Opening</title>
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<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" />
|
||
<style>
|
||
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; }
|
||
.vignette { position:absolute; inset:0; background: radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.8) 100%); z-index:1; }
|
||
.grain { position:absolute; inset:0; opacity:0.06; mix-blend-mode:overlay; pointer-events:none; z-index:2;
|
||
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"); }
|
||
.mono { font-family:'JetBrains Mono',ui-monospace,monospace; }
|
||
.chip { font-size:11px; letter-spacing:0.18em; text-transform:uppercase; }
|
||
@keyframes blink { 0%, 50% { opacity:1 } 51%, 100% { opacity:0 } }
|
||
.cursor { display:inline-block; width:18px; height:1.05em; background:#ff3b6f; margin-left:6px; vertical-align:text-bottom; animation: blink 1s steps(1) infinite;
|
||
box-shadow: 0 0 24px #ff3b6f, 0 0 8px #ff3b6f, 60px 0 80px rgba(255,59,111,0.6); }
|
||
.chroma {
|
||
text-shadow:
|
||
3px 0 #00d4ff,
|
||
-3px 0 #ff3b6f,
|
||
0 0 40px rgba(255,59,111,0.3);
|
||
}
|
||
.text-line { position:relative; }
|
||
/* directional light leaks */
|
||
.ray { position:absolute; mix-blend-mode:screen; pointer-events:none; z-index:1; }
|
||
.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); }
|
||
.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); }
|
||
.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); }
|
||
</style>
|
||
</head>
|
||
<body class="flex flex-col items-center justify-center relative">
|
||
|
||
<header class="absolute top-12 left-12 right-12 flex items-baseline justify-between chip opacity-50 z-10 mono">
|
||
<span>FRAME 01 · OPENING</span>
|
||
<span>VFX · TEXT CURSOR</span>
|
||
<span>00:03:21</span>
|
||
</header>
|
||
|
||
<!-- light rays -->
|
||
<div class="ray ray-1"></div>
|
||
<div class="ray ray-2"></div>
|
||
<div class="ray ray-3"></div>
|
||
|
||
<main class="relative z-10 text-center max-w-[1280px] px-12">
|
||
<h1 class="chroma font-black leading-[1.05] tracking-[-0.02em]" style="font-size:clamp(48px,7vw,108px)">
|
||
Markdown 是给作者的<br/>
|
||
中间过程, <span style="color:#ff3b6f">HTML</span> 才是<br/>
|
||
给读者的最终形态<span class="cursor"></span>
|
||
</h1>
|
||
<p class="mt-10 text-[22px] opacity-60 font-medium">
|
||
— Claude Code 团队, 2026
|
||
</p>
|
||
</main>
|
||
|
||
<div class="vignette"></div>
|
||
<div class="grain"></div>
|
||
|
||
<footer class="absolute bottom-12 left-12 right-12 flex items-baseline justify-between chip opacity-40 z-10 mono">
|
||
<span>HTML-ANYTHING · VFX-TEXT-CURSOR</span>
|
||
<span>HOT PINK × CYAN CHROMATIC</span>
|
||
<span>REC ●</span>
|
||
</footer>
|
||
</body>
|
||
</html>
|