1499 lines
48 KiB
HTML
1499 lines
48 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Huashu Design · Here's to the Agents (v10)</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..700;1,8..60,300..700&family=Noto+Serif+SC:wght@300;400;500;600&family=Inter:wght@100;200;300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg: #000000;
|
|
--ink: #FFFFFF;
|
|
--ink-80: rgba(255,255,255,0.82);
|
|
--ink-60: rgba(255,255,255,0.58);
|
|
--muted: rgba(255,255,255,0.40);
|
|
--dim: rgba(255,255,255,0.18);
|
|
--hairline: rgba(255,255,255,0.12);
|
|
--accent: #D97757; /* terracotta — 致敬 Anthropic 血统 */
|
|
--accent-deep: #B85D3D;
|
|
|
|
/* Claude Design palette — Act 0 专用 */
|
|
--cd-bg: #F5F4F0;
|
|
--cd-panel: #FFFFFF;
|
|
--cd-ink: #1A1918;
|
|
--cd-dim: #8B867E;
|
|
--cd-hair: rgba(0,0,0,0.08);
|
|
--cd-hair-strong: rgba(0,0,0,0.16);
|
|
--cd-green: #2D4A3A;
|
|
--cd-green-deep: #1E3428;
|
|
--cd-green-soft: #3F5E4D;
|
|
|
|
--serif-en: "Source Serif 4", "Tiempos Headline", Georgia, serif;
|
|
--sans: "Inter", -apple-system, "PingFang SC", "HarmonyOS Sans SC", system-ui, sans-serif;
|
|
--mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
|
|
}
|
|
html, body {
|
|
margin: 0; padding: 0;
|
|
background: #000;
|
|
overflow: hidden;
|
|
font-family: var(--sans);
|
|
color: var(--ink);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
|
|
.stage {
|
|
position: fixed;
|
|
top: 50%; left: 50%;
|
|
width: 1920px; height: 1080px;
|
|
transform-origin: center center;
|
|
background: var(--bg);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.scene {
|
|
position: absolute; inset: 0;
|
|
display: flex; align-items: center; justify-content: center;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
will-change: opacity, transform;
|
|
}
|
|
.scene.visible { visibility: visible; }
|
|
|
|
/* ============ Act 1 ============ */
|
|
.act1 {
|
|
flex-direction: column;
|
|
gap: 40px;
|
|
}
|
|
.hero-line {
|
|
font-family: var(--sans);
|
|
font-size: 132px;
|
|
font-weight: 200;
|
|
letter-spacing: -0.045em;
|
|
color: var(--ink);
|
|
text-align: center;
|
|
line-height: 1.02;
|
|
will-change: transform, opacity, font-variation-settings;
|
|
}
|
|
.hero-line .accent { color: var(--accent); font-weight: inherit; }
|
|
|
|
.not-line {
|
|
font-family: var(--sans);
|
|
font-size: 96px;
|
|
font-weight: 200;
|
|
letter-spacing: -0.035em;
|
|
color: var(--ink);
|
|
text-align: center;
|
|
line-height: 1.08;
|
|
}
|
|
.not-line .strike {
|
|
color: var(--muted);
|
|
text-decoration: line-through;
|
|
text-decoration-thickness: 3px;
|
|
text-decoration-color: var(--accent);
|
|
}
|
|
|
|
/* ============ Abstract GUI icons (no real product screenshots) ============ */
|
|
.gui-glyph {
|
|
position: absolute;
|
|
opacity: 0;
|
|
will-change: opacity, transform, filter;
|
|
}
|
|
.gui-glyph.click {
|
|
/* Mouse cursor arrow */
|
|
width: 120px; height: 120px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.gui-glyph.click::before {
|
|
content: '';
|
|
width: 40px; height: 40px;
|
|
border: 2px solid var(--muted);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
animation: clickring 0.8s ease-out forwards;
|
|
animation-play-state: paused;
|
|
}
|
|
@keyframes clickring {
|
|
0% { transform: scale(0.5); opacity: 0.8; }
|
|
100% { transform: scale(2.2); opacity: 0; }
|
|
}
|
|
.gui-glyph.click svg { width: 56px; height: 56px; position: relative; z-index: 2; }
|
|
|
|
.gui-glyph.drag {
|
|
/* Slider */
|
|
width: 400px; height: 48px;
|
|
display: flex; align-items: center;
|
|
gap: 0;
|
|
}
|
|
.gui-glyph.drag .track {
|
|
flex: 1;
|
|
height: 3px;
|
|
background: var(--hairline);
|
|
border-radius: 2px;
|
|
position: relative;
|
|
}
|
|
.gui-glyph.drag .fill {
|
|
position: absolute;
|
|
height: 100%;
|
|
background: var(--muted);
|
|
width: 30%;
|
|
border-radius: 2px;
|
|
}
|
|
.gui-glyph.drag .thumb {
|
|
position: absolute;
|
|
width: 24px; height: 24px;
|
|
background: var(--ink);
|
|
border: 1px solid var(--muted);
|
|
border-radius: 50%;
|
|
top: 50%;
|
|
left: 30%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.gui-glyph.folder {
|
|
/* Window frame w/ file list */
|
|
width: 420px; height: 260px;
|
|
background: rgba(255,255,255,0.02);
|
|
border: 1px solid var(--hairline);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
.gui-glyph.folder .head {
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--hairline);
|
|
display: flex; gap: 8px;
|
|
}
|
|
.gui-glyph.folder .head .dot {
|
|
width: 9px; height: 9px; border-radius: 50%;
|
|
background: var(--hairline);
|
|
}
|
|
.gui-glyph.folder .row {
|
|
padding: 10px 16px;
|
|
font-family: var(--mono);
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid var(--hairline);
|
|
}
|
|
.gui-glyph.folder .row:last-child { border-bottom: none; }
|
|
.gui-glyph.folder .row .meta {
|
|
color: var(--dim);
|
|
}
|
|
|
|
/* ============ Act 2 ============ */
|
|
.act2 {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.terminal {
|
|
width: 1180px;
|
|
border-radius: 16px;
|
|
background: rgba(20, 20, 20, 1);
|
|
border: 1px solid var(--hairline);
|
|
overflow: hidden;
|
|
box-shadow:
|
|
0 0 0 1px rgba(255,255,255,0.02),
|
|
0 60px 120px -30px rgba(217,119,87,0.15);
|
|
}
|
|
.tty-head {
|
|
display: flex; align-items: center; gap: 9px;
|
|
padding: 18px 22px;
|
|
background: rgba(255,255,255,0.02);
|
|
border-bottom: 1px solid var(--hairline);
|
|
}
|
|
.tty-head .d {
|
|
width: 13px; height: 13px; border-radius: 50%;
|
|
background: var(--hairline);
|
|
}
|
|
.tty-head .d.red { background: #5a2a2a; }
|
|
.tty-head .d.yellow { background: #5a4a2a; }
|
|
.tty-head .d.green { background: #2a5a35; }
|
|
.tty-title {
|
|
margin-left: 16px;
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
font-family: var(--mono);
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.tty-body {
|
|
padding: 44px 36px;
|
|
font-family: var(--mono);
|
|
font-size: 26px;
|
|
line-height: 1.6;
|
|
color: rgba(255,255,255,0.86);
|
|
min-height: 160px;
|
|
}
|
|
.prompt { color: var(--accent); margin-right: 12px; }
|
|
.typed { white-space: pre; }
|
|
.cursor {
|
|
display: inline-block;
|
|
width: 12px; height: 28px;
|
|
background: var(--accent);
|
|
vertical-align: -5px;
|
|
margin-left: 3px;
|
|
}
|
|
|
|
/* Gallery (v6 structure, dark theme) */
|
|
.gallery-viewport {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
perspective: 2400px;
|
|
perspective-origin: 50% 45%;
|
|
}
|
|
.gallery-canvas {
|
|
position: absolute;
|
|
top: 50%; left: 50%;
|
|
width: 4320px;
|
|
height: 2520px;
|
|
transform-origin: center center;
|
|
transform-style: preserve-3d;
|
|
will-change: transform;
|
|
display: grid;
|
|
grid-template-columns: repeat(8, 1fr);
|
|
gap: 40px;
|
|
padding: 60px;
|
|
}
|
|
.gallery-card {
|
|
background: #1a1a1a;
|
|
border-radius: 14px;
|
|
padding: 6px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--hairline);
|
|
box-shadow:
|
|
0 20px 60px -20px rgba(0, 0, 0, 0.6),
|
|
0 6px 18px -6px rgba(0, 0, 0, 0.4);
|
|
aspect-ratio: 16 / 9;
|
|
will-change: opacity, filter;
|
|
}
|
|
.gallery-card.depth-near {
|
|
box-shadow:
|
|
0 32px 80px -22px rgba(0, 0, 0, 0.8),
|
|
0 10px 24px -8px rgba(217, 119, 87, 0.12);
|
|
}
|
|
.gallery-card.depth-far {
|
|
box-shadow:
|
|
0 14px 40px -16px rgba(0, 0, 0, 0.4),
|
|
0 4px 12px -4px rgba(0, 0, 0, 0.25);
|
|
}
|
|
.gallery-card img {
|
|
width: 100%; height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
border-radius: 9px;
|
|
}
|
|
|
|
/* Overlay statements (on top of gallery) */
|
|
.over-statement {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
pointer-events: none;
|
|
z-index: 50;
|
|
opacity: 0;
|
|
}
|
|
.over-statement .text {
|
|
font-family: var(--sans);
|
|
font-size: 84px;
|
|
font-weight: 200;
|
|
letter-spacing: -0.035em;
|
|
color: var(--ink);
|
|
text-align: center;
|
|
line-height: 1.08;
|
|
text-shadow: 0 8px 40px rgba(0,0,0,0.8);
|
|
padding: 0 40px;
|
|
max-width: 1400px;
|
|
}
|
|
.over-statement .text .accent { color: var(--accent); }
|
|
|
|
/* ============ Act 3 ============ */
|
|
.act3 {
|
|
flex-direction: column;
|
|
gap: 0;
|
|
}
|
|
.statement-big {
|
|
font-family: var(--sans);
|
|
font-size: 160px;
|
|
font-weight: 100;
|
|
letter-spacing: -0.05em;
|
|
color: var(--ink);
|
|
text-align: center;
|
|
line-height: 1;
|
|
will-change: opacity, transform, font-variation-settings;
|
|
}
|
|
.statement-big .accent { color: var(--accent); font-weight: inherit; }
|
|
|
|
.brand-wordmark {
|
|
font-family: var(--sans);
|
|
font-size: 140px;
|
|
font-weight: 100;
|
|
font-variation-settings: "wght" 100;
|
|
letter-spacing: -0.045em;
|
|
color: var(--ink);
|
|
text-align: center;
|
|
line-height: 1;
|
|
will-change: font-variation-settings, opacity, transform;
|
|
}
|
|
.brand-wordmark .accent { color: var(--accent); font-weight: inherit; }
|
|
|
|
.farewell-quote {
|
|
margin-top: 44px;
|
|
font-family: var(--serif-en);
|
|
font-style: italic;
|
|
font-weight: 300;
|
|
font-size: 36px;
|
|
color: var(--accent);
|
|
letter-spacing: 0.005em;
|
|
text-align: center;
|
|
will-change: opacity, transform;
|
|
}
|
|
|
|
.farewell-cn {
|
|
margin-top: 18px;
|
|
font-family: var(--serif-en);
|
|
font-weight: 300;
|
|
font-size: 18px;
|
|
color: var(--muted);
|
|
letter-spacing: 0.24em;
|
|
text-align: center;
|
|
}
|
|
|
|
.brand-url {
|
|
margin-top: 48px;
|
|
font-size: 14px;
|
|
color: var(--muted);
|
|
font-family: var(--mono);
|
|
letter-spacing: 0.16em;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Watermark (subtle, always on during Act 2/3) */
|
|
.watermark {
|
|
position: absolute;
|
|
bottom: 28px;
|
|
right: 36px;
|
|
font-family: var(--mono);
|
|
font-size: 10px;
|
|
letter-spacing: 0.24em;
|
|
text-transform: uppercase;
|
|
color: rgba(255,255,255,0.22);
|
|
z-index: 100;
|
|
opacity: 0;
|
|
transition: opacity 0.6s;
|
|
pointer-events: none;
|
|
}
|
|
.watermark.visible { opacity: 1; }
|
|
|
|
/* ============ Act 0 — Claude Design 致敬（+讽刺） ============ */
|
|
.act0 {
|
|
background: #0a0a0a;
|
|
}
|
|
.cd-browser {
|
|
position: absolute;
|
|
top: 50%; left: 50%;
|
|
width: 1640px;
|
|
height: 920px;
|
|
transform: translate(-50%, -50%);
|
|
background: var(--cd-bg);
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
box-shadow:
|
|
0 0 0 1px rgba(255,255,255,0.04),
|
|
0 60px 160px -40px rgba(0,0,0,0.8),
|
|
0 24px 60px -20px rgba(0,0,0,0.6);
|
|
will-change: transform, opacity, filter;
|
|
}
|
|
.cd-chrome {
|
|
display: flex; align-items: center;
|
|
height: 48px;
|
|
padding: 0 18px;
|
|
background: #EDEBE5;
|
|
border-bottom: 1px solid var(--cd-hair);
|
|
gap: 14px;
|
|
}
|
|
.cd-traffic { display: flex; gap: 8px; }
|
|
.cd-traffic .d {
|
|
width: 12px; height: 12px; border-radius: 50%;
|
|
background: #D9D4CB;
|
|
}
|
|
.cd-traffic .d.r { background: #E8A5A0; }
|
|
.cd-traffic .d.y { background: #E8D0A0; }
|
|
.cd-traffic .d.g { background: #A5D0B0; }
|
|
.cd-urlbar {
|
|
flex: 1;
|
|
max-width: 520px;
|
|
margin: 0 auto;
|
|
height: 28px;
|
|
background: #F9F7F2;
|
|
border: 1px solid var(--cd-hair);
|
|
border-radius: 6px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-family: var(--sans);
|
|
font-size: 13px;
|
|
color: var(--cd-dim);
|
|
letter-spacing: 0;
|
|
}
|
|
.cd-urlbar .lock {
|
|
width: 10px; height: 10px;
|
|
margin-right: 8px;
|
|
border: 1.5px solid var(--cd-dim);
|
|
border-radius: 2px;
|
|
position: relative;
|
|
}
|
|
.cd-urlbar .lock::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -5px; left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 6px; height: 6px;
|
|
border: 1.5px solid var(--cd-dim);
|
|
border-bottom: none;
|
|
border-radius: 3px 3px 0 0;
|
|
}
|
|
.cd-tabs-row {
|
|
display: flex;
|
|
height: 42px;
|
|
padding: 0 24px;
|
|
background: var(--cd-bg);
|
|
border-bottom: 1px solid var(--cd-hair);
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
.cd-tab {
|
|
height: 28px;
|
|
padding: 0 14px;
|
|
display: flex; align-items: center;
|
|
font-family: var(--sans);
|
|
font-size: 12px;
|
|
color: var(--cd-dim);
|
|
border-radius: 6px;
|
|
gap: 8px;
|
|
white-space: nowrap;
|
|
}
|
|
.cd-tab.active {
|
|
background: #FFFFFF;
|
|
color: var(--cd-ink);
|
|
font-weight: 500;
|
|
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
|
|
}
|
|
.cd-tab .dot {
|
|
width: 6px; height: 6px; border-radius: 50%;
|
|
background: var(--cd-green);
|
|
}
|
|
.cd-topbar-right {
|
|
margin-left: auto;
|
|
display: flex; align-items: center; gap: 12px;
|
|
font-family: var(--sans);
|
|
font-size: 12px;
|
|
color: var(--cd-dim);
|
|
}
|
|
.cd-topbar-right .btn {
|
|
padding: 6px 12px;
|
|
background: var(--cd-ink);
|
|
color: #FFFFFF;
|
|
border-radius: 6px;
|
|
font-weight: 500;
|
|
}
|
|
.cd-topbar-right .btn.ghost {
|
|
background: transparent;
|
|
color: var(--cd-ink);
|
|
border: 1px solid var(--cd-hair-strong);
|
|
}
|
|
|
|
.cd-body {
|
|
display: grid;
|
|
grid-template-columns: 440px 1fr;
|
|
height: calc(920px - 48px - 42px);
|
|
}
|
|
|
|
/* Chat panel */
|
|
.cd-chat {
|
|
background: var(--cd-bg);
|
|
border-right: 1px solid var(--cd-hair);
|
|
padding: 28px 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
overflow: hidden;
|
|
}
|
|
.cd-msg { display: flex; gap: 10px; align-items: flex-start; }
|
|
.cd-avatar {
|
|
width: 26px; height: 26px;
|
|
border-radius: 50%;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-family: var(--sans);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
flex-shrink: 0;
|
|
}
|
|
.cd-avatar.user {
|
|
background: #E8E4DC;
|
|
color: var(--cd-ink);
|
|
}
|
|
.cd-avatar.claude {
|
|
background: var(--cd-ink);
|
|
color: #FFFFFF;
|
|
}
|
|
.cd-bubble {
|
|
font-family: var(--sans);
|
|
font-size: 13px;
|
|
line-height: 1.55;
|
|
color: var(--cd-ink);
|
|
max-width: 100%;
|
|
}
|
|
.cd-bubble .dim { color: var(--cd-dim); }
|
|
|
|
.cd-tweaks {
|
|
margin-top: auto;
|
|
padding: 16px 18px;
|
|
background: #FFFFFF;
|
|
border: 1px solid var(--cd-hair);
|
|
border-radius: 10px;
|
|
}
|
|
.cd-tweaks-title {
|
|
font-family: var(--sans);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--cd-dim);
|
|
margin-bottom: 14px;
|
|
}
|
|
.cd-tweak-row {
|
|
display: flex; align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 12px;
|
|
}
|
|
.cd-tweak-row:last-child { margin-bottom: 0; }
|
|
.cd-tweak-label {
|
|
font-family: var(--sans);
|
|
font-size: 12px;
|
|
color: var(--cd-ink);
|
|
width: 72px;
|
|
flex-shrink: 0;
|
|
}
|
|
.cd-tweak-track {
|
|
flex: 1;
|
|
height: 4px;
|
|
background: #E8E4DC;
|
|
border-radius: 2px;
|
|
position: relative;
|
|
}
|
|
.cd-tweak-thumb {
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 16px; height: 16px;
|
|
background: #FFFFFF;
|
|
border: 1.5px solid var(--cd-ink);
|
|
border-radius: 50%;
|
|
transform: translate(-50%, -50%);
|
|
will-change: left;
|
|
}
|
|
.cd-color-dots {
|
|
display: flex; gap: 6px;
|
|
}
|
|
.cd-color-dot {
|
|
width: 16px; height: 16px;
|
|
border-radius: 50%;
|
|
border: 1.5px solid transparent;
|
|
cursor: default;
|
|
}
|
|
.cd-color-dot.active {
|
|
border-color: var(--cd-ink);
|
|
}
|
|
|
|
.cd-input {
|
|
margin-top: 14px;
|
|
height: 40px;
|
|
padding: 0 14px;
|
|
background: #FFFFFF;
|
|
border: 1px solid var(--cd-hair);
|
|
border-radius: 8px;
|
|
display: flex; align-items: center;
|
|
font-family: var(--sans);
|
|
font-size: 12px;
|
|
color: var(--cd-dim);
|
|
}
|
|
|
|
/* Canvas panel */
|
|
.cd-canvas {
|
|
background: #FAF9F5;
|
|
padding: 40px;
|
|
overflow: hidden;
|
|
display: flex; align-items: center; justify-content: center;
|
|
position: relative;
|
|
}
|
|
.cd-poster {
|
|
width: 780px;
|
|
aspect-ratio: 4 / 3;
|
|
background: var(--cd-green);
|
|
border-radius: 8px;
|
|
padding: 48px 56px;
|
|
color: #F5F2E8;
|
|
display: grid;
|
|
grid-template-columns: 1.2fr 1fr;
|
|
gap: 48px;
|
|
box-shadow: 0 40px 80px -30px rgba(0,0,0,0.4);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.cd-poster::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -60px; right: -60px;
|
|
width: 220px; height: 220px;
|
|
background: radial-gradient(circle, rgba(245,242,232,0.10), transparent 70%);
|
|
}
|
|
.cd-poster-left { position: relative; z-index: 2; }
|
|
.cd-poster-eyebrow {
|
|
font-family: var(--sans);
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
letter-spacing: 0.22em;
|
|
text-transform: uppercase;
|
|
opacity: 0.65;
|
|
margin-bottom: 28px;
|
|
}
|
|
.cd-poster-title {
|
|
font-family: var(--serif-en);
|
|
font-size: 76px;
|
|
font-weight: 500;
|
|
line-height: 0.95;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 20px;
|
|
}
|
|
.cd-poster-sub {
|
|
font-family: var(--sans);
|
|
font-size: 14px;
|
|
opacity: 0.75;
|
|
line-height: 1.5;
|
|
margin-bottom: 40px;
|
|
}
|
|
.cd-poster-pines {
|
|
display: flex; gap: 10px;
|
|
opacity: 0.35;
|
|
}
|
|
.cd-pine {
|
|
width: 0; height: 0;
|
|
border-left: 10px solid transparent;
|
|
border-right: 10px solid transparent;
|
|
border-bottom: 20px solid #F5F2E8;
|
|
position: relative;
|
|
}
|
|
.cd-pine::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -24px; left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 3px; height: 6px;
|
|
background: #F5F2E8;
|
|
}
|
|
.cd-schedule {
|
|
background: rgba(245,242,232,0.08);
|
|
border: 1px solid rgba(245,242,232,0.15);
|
|
border-radius: 6px;
|
|
padding: 20px 22px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
.cd-schedule-title {
|
|
font-family: var(--sans);
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
opacity: 0.6;
|
|
margin-bottom: 14px;
|
|
}
|
|
.cd-schedule-row {
|
|
display: flex; justify-content: space-between;
|
|
font-family: var(--sans);
|
|
font-size: 12px;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid rgba(245,242,232,0.10);
|
|
}
|
|
.cd-schedule-row:last-child { border-bottom: none; }
|
|
.cd-schedule-row .time { opacity: 0.65; font-variant-numeric: tabular-nums; }
|
|
|
|
/* Caption for Act 0 */
|
|
.cd-caption {
|
|
position: absolute;
|
|
bottom: 100px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-family: var(--sans);
|
|
font-size: 88px;
|
|
font-weight: 200;
|
|
letter-spacing: -0.035em;
|
|
color: var(--ink);
|
|
text-align: center;
|
|
opacity: 0;
|
|
z-index: 60;
|
|
text-shadow: 0 10px 50px rgba(0,0,0,0.9);
|
|
will-change: opacity, transform;
|
|
}
|
|
.cd-caption .period { color: var(--accent); }
|
|
|
|
/* Act 0.5 — pivot */
|
|
.act05 {
|
|
flex-direction: column;
|
|
}
|
|
.pivot-line {
|
|
font-family: var(--sans);
|
|
font-size: 112px;
|
|
font-weight: 200;
|
|
letter-spacing: -0.04em;
|
|
color: var(--ink);
|
|
text-align: center;
|
|
line-height: 1.05;
|
|
will-change: opacity, transform, font-variation-settings;
|
|
}
|
|
.pivot-line .accent { color: var(--accent); font-weight: inherit; }
|
|
.pivot-line .faint { color: var(--muted); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="stage" id="stage">
|
|
|
|
<div class="watermark" id="watermark">Created by Huashu-Design</div>
|
|
|
|
<!-- ========== Act 0: Claude Design 致敬 ========== -->
|
|
<div class="scene act0" id="act0ClaudeDesign">
|
|
<div class="cd-browser" id="cdBrowser">
|
|
<!-- Chrome bar -->
|
|
<div class="cd-chrome">
|
|
<div class="cd-traffic">
|
|
<span class="d r"></span><span class="d y"></span><span class="d g"></span>
|
|
</div>
|
|
<div class="cd-urlbar"><span class="lock"></span>claude.ai/design</div>
|
|
<div style="width: 56px;"></div>
|
|
</div>
|
|
<!-- Tabs row -->
|
|
<div class="cd-tabs-row">
|
|
<div class="cd-tab active"><span class="dot"></span>Company offsite html</div>
|
|
<div class="cd-tab">Dashboard exploration</div>
|
|
<div class="cd-tab">Landing v2</div>
|
|
<div class="cd-topbar-right">
|
|
<span>100%</span>
|
|
<span class="btn ghost">Export</span>
|
|
<span class="btn">Share</span>
|
|
</div>
|
|
</div>
|
|
<!-- Body: split chat + canvas -->
|
|
<div class="cd-body">
|
|
<div class="cd-chat">
|
|
<div class="cd-msg">
|
|
<div class="cd-avatar user">Y</div>
|
|
<div class="cd-bubble">Make a welcome guide for our company retreat.</div>
|
|
</div>
|
|
<div class="cd-msg">
|
|
<div class="cd-avatar claude">C</div>
|
|
<div class="cd-bubble">I've designed a 1-page landscape welcome guide for your planning day. It includes a branded cover with pine trees, a two-column schedule, and activity cards.<br/><br/><span class="dim">Toggle the Tweaks to adjust accent color, headline size, and density.</span></div>
|
|
</div>
|
|
<div class="cd-tweaks">
|
|
<div class="cd-tweaks-title">Tweaks</div>
|
|
<div class="cd-tweak-row">
|
|
<div class="cd-tweak-label">Accent</div>
|
|
<div class="cd-color-dots">
|
|
<div class="cd-color-dot" style="background:#2D4A3A;" id="cdDot1"></div>
|
|
<div class="cd-color-dot active" style="background:#D97757;" id="cdDot2"></div>
|
|
<div class="cd-color-dot" style="background:#3F5E8A;" id="cdDot3"></div>
|
|
<div class="cd-color-dot" style="background:#8B6F4A;" id="cdDot4"></div>
|
|
</div>
|
|
</div>
|
|
<div class="cd-tweak-row">
|
|
<div class="cd-tweak-label">Headline</div>
|
|
<div class="cd-tweak-track"><div class="cd-tweak-thumb" id="cdThumb1" style="left: 58%;"></div></div>
|
|
</div>
|
|
<div class="cd-tweak-row">
|
|
<div class="cd-tweak-label">Density</div>
|
|
<div class="cd-tweak-track"><div class="cd-tweak-thumb" id="cdThumb2" style="left: 40%;"></div></div>
|
|
</div>
|
|
</div>
|
|
<div class="cd-input">Describe what you want next…</div>
|
|
</div>
|
|
<div class="cd-canvas">
|
|
<div class="cd-poster" id="cdPoster">
|
|
<div class="cd-poster-left">
|
|
<div class="cd-poster-eyebrow">Anthropic Labs · Planning Day</div>
|
|
<div class="cd-poster-title">HEMLARK<br/>RETREAT '26</div>
|
|
<div class="cd-poster-sub">June 14 · Full Day<br/>Pine Valley Lodge</div>
|
|
<div class="cd-poster-pines">
|
|
<div class="cd-pine"></div>
|
|
<div class="cd-pine"></div>
|
|
<div class="cd-pine"></div>
|
|
<div class="cd-pine"></div>
|
|
</div>
|
|
</div>
|
|
<div class="cd-schedule">
|
|
<div class="cd-schedule-title">Schedule</div>
|
|
<div class="cd-schedule-row"><span>Breakfast</span><span class="time">9:00</span></div>
|
|
<div class="cd-schedule-row"><span>Kickoff</span><span class="time">10:00</span></div>
|
|
<div class="cd-schedule-row"><span>Workshops</span><span class="time">10:30</span></div>
|
|
<div class="cd-schedule-row"><span>Lunch</span><span class="time">12:30</span></div>
|
|
<div class="cd-schedule-row"><span>Hike</span><span class="time">14:00</span></div>
|
|
<div class="cd-schedule-row"><span>Dinner</span><span class="time">18:00</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="cd-caption" id="cdCaption">It's beautiful<span class="period">.</span></div>
|
|
</div>
|
|
|
|
<!-- ========== Act 0.5: Pivot ========== -->
|
|
<div class="scene act05" id="act05Pivot">
|
|
<div class="pivot-line" id="pivotLine">
|
|
But it isn't the <span class="accent">future</span>.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========== Act 1 ========== -->
|
|
<div class="scene act1" id="act1a">
|
|
<div class="hero-line" id="heroLine">
|
|
Here's to the <span class="accent">Agents</span>.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="scene act1" id="act1b">
|
|
<!-- "Not the ones who click." + abstract mouse -->
|
|
<div class="gui-glyph click" id="glyphClick" style="left: 50%; top: 62%; transform: translate(-50%, -50%);">
|
|
<svg viewBox="0 0 24 24" fill="none">
|
|
<path d="M4 2l6 18 3-8 8-3L4 2z" stroke="rgba(255,255,255,0.55)" stroke-width="1.4" fill="rgba(255,255,255,0.12)" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<div class="not-line" id="notLine1" style="position: absolute; top: 28%; left: 50%; transform: translateX(-50%); white-space: nowrap;">
|
|
Not the ones who <span class="strike">click</span>.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="scene act1" id="act1c">
|
|
<!-- "Not the ones who drag." + slider -->
|
|
<div class="gui-glyph drag" id="glyphDrag" style="left: 50%; top: 62%; transform: translate(-50%, -50%);">
|
|
<div class="track">
|
|
<div class="fill"></div>
|
|
<div class="thumb" id="sliderThumb"></div>
|
|
</div>
|
|
</div>
|
|
<div class="not-line" id="notLine2" style="position: absolute; top: 28%; left: 50%; transform: translateX(-50%); white-space: nowrap;">
|
|
Not the ones who <span class="strike">drag</span>.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="scene act1" id="act1d">
|
|
<!-- "Not the ones who wait..." + folder window -->
|
|
<div class="gui-glyph folder" id="glyphFolder" style="left: 50%; top: 62%; transform: translate(-50%, -50%);">
|
|
<div class="head">
|
|
<span class="d"></span><span class="d"></span><span class="d"></span>
|
|
</div>
|
|
<div class="row"><span>design-v1.fig</span><span class="meta">42 KB</span></div>
|
|
<div class="row"><span>design-v2-final.fig</span><span class="meta">58 KB</span></div>
|
|
<div class="row"><span>design-v2-FINAL-final.fig</span><span class="meta">61 KB</span></div>
|
|
<div class="row"><span>design-v3.fig</span><span class="meta">65 KB</span></div>
|
|
</div>
|
|
<div class="not-line" id="notLine3" style="position: absolute; top: 22%; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 72px;">
|
|
Not the ones who <span class="strike">wait for you to open the file</span>.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========== Act 2 ========== -->
|
|
<div class="scene act2" id="act2Terminal">
|
|
<div class="terminal" id="terminal">
|
|
<div class="tty-head">
|
|
<span class="d red"></span>
|
|
<span class="d yellow"></span>
|
|
<span class="d green"></span>
|
|
<span class="tty-title">huashu — claude code</span>
|
|
</div>
|
|
<div class="tty-body">
|
|
<span class="prompt">$</span><span class="typed" id="typed"></span><span class="cursor" id="cursor"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="scene" id="act2Gallery">
|
|
<div class="gallery-viewport">
|
|
<div class="gallery-canvas" id="galleryCanvas"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="over-statement" id="overStmt1">
|
|
<div class="text">The ones who design<br/>while you <span class="accent">sleep</span>.</div>
|
|
</div>
|
|
|
|
<div class="over-statement" id="overStmt2">
|
|
<div class="text">The ones who ship<br/>while you're in a <span class="accent">meeting</span>.</div>
|
|
</div>
|
|
|
|
<!-- ========== Act 3 ========== -->
|
|
<div class="scene act3" id="act3Medium">
|
|
<div class="statement-big" id="stmtMedium">
|
|
<span class="accent">Agent</span> is the<br/>new medium.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="scene act3" id="act3Brand">
|
|
<div class="brand-wordmark" id="wordmark">huashu<span class="accent">-</span>design</div>
|
|
<div class="farewell-quote" id="farewell">For them, we built this.</div>
|
|
<div class="farewell-cn" id="farewellCn">· 为 他 们 · 我 们 造 了 这 个 ·</div>
|
|
<div class="brand-url" id="url">huasheng.ai/huashu-design-hero</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
// ---------- Fit stage ----------
|
|
const stage = document.getElementById('stage');
|
|
function rescale() {
|
|
const s = Math.min(window.innerWidth / 1920, window.innerHeight / 1080);
|
|
stage.style.transform = `translate(-50%, -50%) scale(${s})`;
|
|
}
|
|
rescale();
|
|
window.addEventListener('resize', rescale);
|
|
|
|
const SLIDE_FILES = [
|
|
'preview-01-cover.png','preview-02-quote.png','preview-03-intro.png','preview-04-toc.png',
|
|
'preview-05-divider-1.png','preview-06-seldon.png','preview-07-human-psych-limit.png','preview-08-ai-vs-human.png',
|
|
'preview-09-divider-2.png','preview-10-personas.png','preview-11-four-puzzles.png','preview-12-phenomena-1-2.png',
|
|
'preview-13-phenomena-3-4.png','preview-14-five-voices.png','preview-15-divider-3.png','preview-16-persona-selection.png',
|
|
'preview-17-persona-space.png','preview-18-emergent-misalignment.png','preview-19-inoculation.png','preview-20-emotion.png',
|
|
'preview-21-dosage.png','preview-22-steering.png','preview-23-expression-vs-impact.png','preview-24-concept-injection.png',
|
|
'preview-25-consciousness-prob.png','preview-26-divider-4.png','preview-27-cot-faithfulness.png','preview-28-alignment-faking.png',
|
|
'preview-29-divider-5.png','preview-30-open-questions.png','preview-31-giving-back.png','preview-32-closing.png',
|
|
];
|
|
const BASE = '../../../2026.04-AI心理学/演讲PPT-北大/';
|
|
|
|
// ---------- Build gallery ----------
|
|
const COLS = 8, ROWS = 6, COUNT = COLS * ROWS;
|
|
const galleryCanvas = document.getElementById('galleryCanvas');
|
|
const galleryCards = [];
|
|
for (let i = 0; i < COUNT; i++) {
|
|
const slideIdx = i % 32;
|
|
const card = document.createElement('div');
|
|
card.className = 'gallery-card';
|
|
const zIdx = Math.sin(i * 1.7) * 22 + Math.cos(i * 0.73) * 14;
|
|
if (zIdx > 12) card.classList.add('depth-near');
|
|
else if (zIdx < -12) card.classList.add('depth-far');
|
|
const img = document.createElement('img');
|
|
img.src = BASE + SLIDE_FILES[slideIdx];
|
|
img.onerror = () => { img.src = BASE + 'preview-01-cover.png'; };
|
|
card.appendChild(img);
|
|
galleryCanvas.appendChild(card);
|
|
galleryCards.push(card);
|
|
}
|
|
for (let i = 0; i < 32; i++) {
|
|
const im = new Image();
|
|
im.src = BASE + SLIDE_FILES[i];
|
|
}
|
|
|
|
// ---------- Easings ----------
|
|
const easeOut = t => 1 - Math.pow(1 - t, 3);
|
|
const expoOut = t => (t <= 0) ? 0 : (t >= 1) ? 1 : 1 - Math.pow(2, -10 * t);
|
|
const easeInOut = t => t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t+2, 3)/2;
|
|
function lerp(time, start, end, fromV, toV, easing) {
|
|
if (time <= start) return fromV;
|
|
if (time >= end) return toV;
|
|
let p = (time - start) / (end - start);
|
|
if (easing) p = easing(p);
|
|
return fromV + (toV - fromV) * p;
|
|
}
|
|
function clampLerp(time, start, end) {
|
|
if (time <= start) return 0;
|
|
if (time >= end) return 1;
|
|
return (time - start) / (end - start);
|
|
}
|
|
|
|
// ---------- Timeline (30s) ----------
|
|
const T = {
|
|
DURATION: 30.0,
|
|
|
|
// ===== Act 0: Claude Design 致敬 (0 - 4s) =====
|
|
a0_in: [0.3, 1.2], // browser fade + scale in
|
|
a0_hold: [1.2, 3.4], // tweaks 自动动
|
|
a0_out: [3.4, 4.0], // browser 退场
|
|
|
|
cd_tweak_anim: [1.4, 3.3], // tweaks thumb 自动拖动窗口
|
|
cd_accent_switch: [2.1, 2.5], // accent color dot 切换到深绿
|
|
|
|
cd_caption_in: [1.6, 2.2],
|
|
cd_caption_hold:[2.2, 3.3],
|
|
cd_caption_out: [3.3, 3.8],
|
|
|
|
// ===== Act 0.5: Pivot (3.9 - 5.2s) =====
|
|
a05_in: [3.9, 4.6],
|
|
a05_hold: [4.6, 4.9],
|
|
a05_out: [4.9, 5.3],
|
|
|
|
// ===== Act 1 (shifted +5s) =====
|
|
a1a_in: [5.3, 6.3], // "Here's to the Agents."
|
|
a1a_hold:[6.3, 7.8],
|
|
a1a_out: [7.8, 8.3],
|
|
|
|
a1b_in: [8.2, 8.9], // "Not the ones who click."
|
|
a1b_hold:[8.9, 10.3],
|
|
a1b_out: [10.3, 10.8],
|
|
|
|
a1c_in: [10.7, 11.3], // "Not the ones who drag."
|
|
a1c_hold:[11.3, 12.5],
|
|
a1c_out: [12.5, 13.0],
|
|
|
|
a1d_in: [12.9, 13.5], // "Not the ones who wait..."
|
|
a1d_hold:[13.5, 15.2],
|
|
a1d_out: [15.2, 15.7],
|
|
|
|
// ===== Act 2 (shifted +5s) =====
|
|
a2tty_in: [15.6, 16.2], // terminal in
|
|
a2type: [16.4, 18.6],
|
|
a2tty_out:[18.9, 19.4],
|
|
|
|
a2gal_in: [19.1, 19.9], // gallery ripple start
|
|
ripple: [19.9, 21.6],
|
|
panStart: 20.2,
|
|
a2gal_out:[25.5, 26.2],
|
|
|
|
// Overlay statements on gallery
|
|
stmt1: [21.7, 23.4], // "design while you sleep"
|
|
stmt2: [23.7, 25.4], // "ship while you're in a meeting"
|
|
|
|
// ===== Act 3 (shifted +5s) =====
|
|
a3med_in: [26.1, 27.0], // "Agent is the new medium"
|
|
a3med_hold:[27.0, 28.0],
|
|
a3med_out:[28.0, 28.4],
|
|
|
|
a3brand_in: [28.3, 29.0],
|
|
brand_morph: [28.7, 29.4],
|
|
a3farewell_in: [29.0, 29.6],
|
|
a3cn_in: [29.3, 29.8],
|
|
a3url_in: [29.5, 30.0],
|
|
};
|
|
|
|
// ---------- Elements ----------
|
|
const scenes = {
|
|
a0: document.getElementById('act0ClaudeDesign'),
|
|
a05: document.getElementById('act05Pivot'),
|
|
a1a: document.getElementById('act1a'),
|
|
a1b: document.getElementById('act1b'),
|
|
a1c: document.getElementById('act1c'),
|
|
a1d: document.getElementById('act1d'),
|
|
a2tty: document.getElementById('act2Terminal'),
|
|
a2gal: document.getElementById('act2Gallery'),
|
|
a3med: document.getElementById('act3Medium'),
|
|
a3brand: document.getElementById('act3Brand'),
|
|
};
|
|
const cdBrowser = document.getElementById('cdBrowser');
|
|
const cdCaption = document.getElementById('cdCaption');
|
|
const cdThumb1 = document.getElementById('cdThumb1');
|
|
const cdThumb2 = document.getElementById('cdThumb2');
|
|
const cdDot1 = document.getElementById('cdDot1');
|
|
const cdDot2 = document.getElementById('cdDot2');
|
|
const cdPoster = document.getElementById('cdPoster');
|
|
const pivotLine = document.getElementById('pivotLine');
|
|
const overs = {
|
|
stmt1: document.getElementById('overStmt1'),
|
|
stmt2: document.getElementById('overStmt2'),
|
|
};
|
|
const heroLine = document.getElementById('heroLine');
|
|
const notLine1 = document.getElementById('notLine1');
|
|
const notLine2 = document.getElementById('notLine2');
|
|
const notLine3 = document.getElementById('notLine3');
|
|
const glyphClick = document.getElementById('glyphClick');
|
|
const glyphDrag = document.getElementById('glyphDrag');
|
|
const sliderThumb = document.getElementById('sliderThumb');
|
|
const glyphFolder = document.getElementById('glyphFolder');
|
|
const terminal = document.getElementById('terminal');
|
|
const typed = document.getElementById('typed');
|
|
const cursor = document.getElementById('cursor');
|
|
const stmtMedium = document.getElementById('stmtMedium');
|
|
const wordmark = document.getElementById('wordmark');
|
|
const farewell = document.getElementById('farewell');
|
|
const farewellCn = document.getElementById('farewellCn');
|
|
const urlEl = document.getElementById('url');
|
|
const watermark = document.getElementById('watermark');
|
|
|
|
const COMMAND = '/huashu-design 做一份发布会PPT';
|
|
|
|
// ---------- Gallery transforms ----------
|
|
const GALLERY_TILT = 'perspective(2400px) rotateX(14deg) rotateY(-10deg) rotateZ(-2deg)';
|
|
const GALLERY_SCALE = 0.94;
|
|
function galleryTransform(dx, dy, extraScale = 1) {
|
|
return `translate(-50%, -50%) translate(${dx}px, ${dy}px) scale(${GALLERY_SCALE * extraScale}) ${GALLERY_TILT}`;
|
|
}
|
|
|
|
// ---------- Helpers to show/hide scenes ----------
|
|
function showScene(key, opacity) {
|
|
const el = scenes[key];
|
|
if (opacity > 0.001) el.classList.add('visible');
|
|
else el.classList.remove('visible');
|
|
el.style.opacity = opacity;
|
|
}
|
|
|
|
function showOver(key, opacity) {
|
|
const el = overs[key];
|
|
el.style.opacity = opacity;
|
|
}
|
|
|
|
// ---------- Render ----------
|
|
function render(t) {
|
|
// ============ Act 0: Claude Design 致敬 ============
|
|
if (t < T.a0_out[1]) {
|
|
let op;
|
|
if (t < T.a0_in[1]) op = lerp(t, T.a0_in[0], T.a0_in[1], 0, 1, expoOut);
|
|
else if (t < T.a0_out[0]) op = 1;
|
|
else op = lerp(t, T.a0_out[0], T.a0_out[1], 1, 0, easeOut);
|
|
showScene('a0', op);
|
|
|
|
// Browser: subtle breathing scale + exit shrink
|
|
const scaleIn = lerp(t, T.a0_in[0], T.a0_in[1], 0.94, 1.0, expoOut);
|
|
let scaleOut = 1.0;
|
|
let blurOut = 0;
|
|
if (t >= T.a0_out[0]) {
|
|
const p = clampLerp(t, T.a0_out[0], T.a0_out[1]);
|
|
scaleOut = 1.0 - 0.08 * p;
|
|
blurOut = 6 * p;
|
|
}
|
|
const finalScale = Math.min(scaleIn, scaleOut);
|
|
cdBrowser.style.transform = `translate(-50%, -50%) scale(${finalScale})`;
|
|
cdBrowser.style.filter = blurOut > 0.1 ? `blur(${blurOut}px)` : '';
|
|
|
|
// Tweaks thumb 自动拖动（模拟用户在调节）
|
|
const tw = clampLerp(t, T.cd_tweak_anim[0], T.cd_tweak_anim[1]);
|
|
// Headline slider: 58% → 72% → 62%
|
|
let headlinePct;
|
|
if (tw < 0.5) headlinePct = 58 + (72 - 58) * easeInOut(tw * 2);
|
|
else headlinePct = 72 + (62 - 72) * easeInOut((tw - 0.5) * 2);
|
|
cdThumb1.style.left = headlinePct + '%';
|
|
// Density slider: 40% → 55%
|
|
const densityPct = 40 + 15 * easeInOut(tw);
|
|
cdThumb2.style.left = densityPct + '%';
|
|
|
|
// Accent 从橙切换到深绿（模拟用户在选色）
|
|
const switched = t >= T.cd_accent_switch[0];
|
|
if (switched) {
|
|
cdDot1.classList.add('active');
|
|
cdDot2.classList.remove('active');
|
|
// Poster 颜色跟着变
|
|
cdPoster.style.background = 'var(--cd-green)';
|
|
} else {
|
|
cdDot1.classList.remove('active');
|
|
cdDot2.classList.add('active');
|
|
cdPoster.style.background = '#B85D3D';
|
|
}
|
|
|
|
// Caption "It's beautiful."
|
|
let capOp = 0;
|
|
if (t >= T.cd_caption_in[0] && t < T.cd_caption_out[1]) {
|
|
if (t < T.cd_caption_in[1]) capOp = clampLerp(t, T.cd_caption_in[0], T.cd_caption_in[1]);
|
|
else if (t < T.cd_caption_out[0]) capOp = 1;
|
|
else capOp = 1 - clampLerp(t, T.cd_caption_out[0], T.cd_caption_out[1]);
|
|
}
|
|
const capRise = lerp(t, T.cd_caption_in[0], T.cd_caption_in[1], 14, 0, expoOut);
|
|
cdCaption.style.opacity = capOp;
|
|
cdCaption.style.transform = `translateX(-50%) translateY(${capRise}px)`;
|
|
} else {
|
|
showScene('a0', 0);
|
|
}
|
|
|
|
// ============ Act 0.5: Pivot — "But it isn't the future." ============
|
|
if (t >= T.a05_in[0] - 0.1 && t < T.a05_out[1]) {
|
|
let op;
|
|
if (t < T.a05_in[1]) op = lerp(t, T.a05_in[0], T.a05_in[1], 0, 1, expoOut);
|
|
else if (t < T.a05_out[0]) op = 1;
|
|
else op = lerp(t, T.a05_out[0], T.a05_out[1], 1, 0, easeOut);
|
|
showScene('a05', op);
|
|
|
|
const rise = lerp(t, T.a05_in[0], T.a05_in[1], 16, 0, expoOut);
|
|
pivotLine.style.transform = `translate3d(0, ${rise}px, 0)`;
|
|
|
|
// Subtle weight morph on "But it isn't the future."
|
|
const morph = expoOut(clampLerp(t, T.a05_in[0], T.a05_in[1] + 0.3));
|
|
const w = 120 + (300 - 120) * morph;
|
|
pivotLine.style.fontVariationSettings = `"wght" ${w.toFixed(0)}`;
|
|
pivotLine.style.fontWeight = Math.round(w);
|
|
} else {
|
|
showScene('a05', 0);
|
|
}
|
|
|
|
// ============ Act 1a: "Here's to the Agents." ============
|
|
if (t >= T.a1a_in[0] - 0.1 && t < T.a1a_out[1]) {
|
|
let op;
|
|
if (t < T.a1a_in[1]) op = lerp(t, T.a1a_in[0], T.a1a_in[1], 0, 1, expoOut);
|
|
else if (t < T.a1a_out[0]) op = 1;
|
|
else op = lerp(t, T.a1a_out[0], T.a1a_out[1], 1, 0, easeOut);
|
|
showScene('a1a', op);
|
|
|
|
// Weight morph 100 → 400 on "Here's to the Agents."
|
|
const morph = expoOut(clampLerp(t, T.a1a_in[0], T.a1a_in[1] + 0.6));
|
|
const w = 100 + (400 - 100) * morph;
|
|
heroLine.style.fontVariationSettings = `"wght" ${w.toFixed(0)}`;
|
|
heroLine.style.fontWeight = Math.round(w);
|
|
|
|
// Subtle rise
|
|
const rise = lerp(t, T.a1a_in[0], T.a1a_in[1], 18, 0, expoOut);
|
|
heroLine.style.transform = `translate3d(0, ${rise}px, 0)`;
|
|
} else {
|
|
showScene('a1a', 0);
|
|
}
|
|
|
|
// ============ Act 1b: Not the ones who click. ============
|
|
if (t >= T.a1b_in[0] - 0.1 && t < T.a1b_out[1]) {
|
|
let op;
|
|
if (t < T.a1b_in[1]) op = lerp(t, T.a1b_in[0], T.a1b_in[1], 0, 1, expoOut);
|
|
else if (t < T.a1b_out[0]) op = 1;
|
|
else op = lerp(t, T.a1b_out[0], T.a1b_out[1], 1, 0, easeOut);
|
|
showScene('a1b', op);
|
|
|
|
// Animate the click glyph: appear, then trigger click ring + shake
|
|
const glyphIn = clampLerp(t, T.a1b_in[0] + 0.15, T.a1b_in[1]);
|
|
glyphClick.style.opacity = expoOut(glyphIn);
|
|
|
|
// Shake at mid-hold
|
|
const clickT = t - (T.a1b_in[1] + 0.3);
|
|
if (clickT > 0 && clickT < 0.4) {
|
|
glyphClick.style.transform = `translate(-50%, -50%) translate(${Math.sin(clickT * 60) * 3}px, 0)`;
|
|
} else {
|
|
glyphClick.style.transform = `translate(-50%, -50%)`;
|
|
}
|
|
|
|
// Strike the word "click" at halfway through hold
|
|
const strikeOn = t >= T.a1b_in[1] + 0.5;
|
|
notLine1.classList.toggle('struck', strikeOn);
|
|
} else {
|
|
showScene('a1b', 0);
|
|
glyphClick.style.opacity = 0;
|
|
}
|
|
|
|
// ============ Act 1c: Not the ones who drag. ============
|
|
if (t >= T.a1c_in[0] - 0.1 && t < T.a1c_out[1]) {
|
|
let op;
|
|
if (t < T.a1c_in[1]) op = lerp(t, T.a1c_in[0], T.a1c_in[1], 0, 1, expoOut);
|
|
else if (t < T.a1c_out[0]) op = 1;
|
|
else op = lerp(t, T.a1c_out[0], T.a1c_out[1], 1, 0, easeOut);
|
|
showScene('a1c', op);
|
|
|
|
const glyphIn = clampLerp(t, T.a1c_in[0] + 0.15, T.a1c_in[1]);
|
|
glyphDrag.style.opacity = expoOut(glyphIn);
|
|
|
|
// Animate slider thumb 30% → 70% position during hold
|
|
const dragT = clampLerp(t, T.a1c_hold[0], T.a1c_hold[1] - 0.2);
|
|
const leftPct = 30 + 40 * easeInOut(dragT);
|
|
sliderThumb.style.left = leftPct + '%';
|
|
const fillEl = glyphDrag.querySelector('.fill');
|
|
if (fillEl) fillEl.style.width = leftPct + '%';
|
|
} else {
|
|
showScene('a1c', 0);
|
|
glyphDrag.style.opacity = 0;
|
|
}
|
|
|
|
// ============ Act 1d: Not the ones who wait for you to open the file. ============
|
|
if (t >= T.a1d_in[0] - 0.1 && t < T.a1d_out[1]) {
|
|
let op;
|
|
if (t < T.a1d_in[1]) op = lerp(t, T.a1d_in[0], T.a1d_in[1], 0, 1, expoOut);
|
|
else if (t < T.a1d_out[0]) op = 1;
|
|
else op = lerp(t, T.a1d_out[0], T.a1d_out[1], 1, 0, easeOut);
|
|
showScene('a1d', op);
|
|
|
|
const glyphIn = clampLerp(t, T.a1d_in[0] + 0.15, T.a1d_in[1]);
|
|
glyphFolder.style.opacity = expoOut(glyphIn);
|
|
} else {
|
|
showScene('a1d', 0);
|
|
glyphFolder.style.opacity = 0;
|
|
}
|
|
|
|
// ============ Act 2 Terminal ============
|
|
if (t >= T.a2tty_in[0] - 0.1 && t < T.a2tty_out[1]) {
|
|
let op;
|
|
if (t < T.a2tty_in[1]) op = lerp(t, T.a2tty_in[0], T.a2tty_in[1], 0, 1, expoOut);
|
|
else if (t < T.a2tty_out[0]) op = 1;
|
|
else op = lerp(t, T.a2tty_out[0], T.a2tty_out[1], 1, 0, easeOut);
|
|
showScene('a2tty', op);
|
|
|
|
const rise = lerp(t, T.a2tty_in[0], T.a2tty_in[1], 28, 0, expoOut);
|
|
terminal.style.transform = `translate3d(0, ${rise}px, 0)`;
|
|
|
|
// Typing
|
|
if (t < T.a2type[0]) typed.textContent = '';
|
|
else if (t < T.a2type[1]) {
|
|
const p = (t - T.a2type[0]) / (T.a2type[1] - T.a2type[0]);
|
|
const n = Math.floor(p * COMMAND.length);
|
|
typed.textContent = COMMAND.slice(0, n);
|
|
} else typed.textContent = COMMAND;
|
|
|
|
cursor.style.opacity = (Math.floor(t * 2.5) % 2 === 0) ? 1 : 0.25;
|
|
} else {
|
|
showScene('a2tty', 0);
|
|
}
|
|
|
|
// ============ Act 2 Gallery + statements ============
|
|
if (t >= T.a2gal_in[0] - 0.1 && t < T.a2gal_out[1]) {
|
|
let op;
|
|
if (t < T.a2gal_in[1]) op = lerp(t, T.a2gal_in[0], T.a2gal_in[1], 0, 1, expoOut);
|
|
else if (t < T.a2gal_out[0]) op = 1;
|
|
else op = lerp(t, T.a2gal_out[0], T.a2gal_out[1], 1, 0, easeOut);
|
|
showScene('a2gal', op);
|
|
|
|
// Pan
|
|
const panT = Math.max(0, t - T.panStart);
|
|
const panX = Math.sin(panT * 0.12) * 180 - panT * 6;
|
|
const panY = Math.cos(panT * 0.09) * 100 - panT * 4;
|
|
const cX = Math.max(-600, Math.min(600, panX));
|
|
const cY = Math.max(-400, Math.min(400, panY));
|
|
|
|
// Ripple
|
|
const inRipple = t < T.ripple[1];
|
|
const rippleP = clampLerp(t, T.ripple[0], T.ripple[1]);
|
|
const galScale = inRipple ? (1.25 - 0.31 * expoOut(rippleP)) : 1.0;
|
|
galleryCanvas.style.transform = galleryTransform(cX, cY, galScale);
|
|
|
|
// Per-card ripple entry
|
|
galleryCards.forEach((card, i) => {
|
|
let entryOp = 1;
|
|
if (inRipple) {
|
|
const col = i % COLS, row = Math.floor(i / COLS);
|
|
const dc = col - (COLS - 1) / 2, dr = row - (ROWS - 1) / 2;
|
|
const dist = Math.sqrt(dc * dc + dr * dr);
|
|
const maxDist = Math.sqrt(((COLS - 1) / 2) ** 2 + ((ROWS - 1) / 2) ** 2);
|
|
const delay = (dist / maxDist) * 0.8;
|
|
const localT = Math.max(0, (t - T.ripple[0] - delay) / 0.7);
|
|
entryOp = expoOut(Math.min(1, localT));
|
|
}
|
|
|
|
// Dim when statements are active
|
|
const stmt1Active = t >= T.stmt1[0] && t < T.stmt1[1];
|
|
const stmt2Active = t >= T.stmt2[0] && t < T.stmt2[1];
|
|
const dimAmount = stmt1Active || stmt2Active ? 0.55 : 0;
|
|
|
|
if (dimAmount > 0) {
|
|
card.style.opacity = entryOp * (1 - dimAmount);
|
|
card.style.filter = `brightness(${1 - 0.3 * dimAmount}) saturate(${1 - 0.4 * dimAmount})`;
|
|
} else {
|
|
card.style.opacity = entryOp < 1 ? entryOp : '';
|
|
card.style.filter = '';
|
|
}
|
|
});
|
|
} else {
|
|
showScene('a2gal', 0);
|
|
}
|
|
|
|
// Overlay statement 1: "design while you sleep"
|
|
{
|
|
let op = 0;
|
|
if (t >= T.stmt1[0] && t < T.stmt1[1]) {
|
|
const inP = expoOut(clampLerp(t, T.stmt1[0], T.stmt1[0] + 0.4));
|
|
const outP = easeOut(clampLerp(t, T.stmt1[1] - 0.4, T.stmt1[1]));
|
|
op = inP * (1 - outP);
|
|
}
|
|
showOver('stmt1', op);
|
|
}
|
|
// Overlay statement 2: "ship while meeting"
|
|
{
|
|
let op = 0;
|
|
if (t >= T.stmt2[0] && t < T.stmt2[1]) {
|
|
const inP = expoOut(clampLerp(t, T.stmt2[0], T.stmt2[0] + 0.4));
|
|
const outP = easeOut(clampLerp(t, T.stmt2[1] - 0.4, T.stmt2[1]));
|
|
op = inP * (1 - outP);
|
|
}
|
|
showOver('stmt2', op);
|
|
}
|
|
|
|
// ============ Act 3 Medium ============
|
|
if (t >= T.a3med_in[0] - 0.1 && t < T.a3med_out[1]) {
|
|
let op;
|
|
if (t < T.a3med_in[1]) op = lerp(t, T.a3med_in[0], T.a3med_in[1], 0, 1, expoOut);
|
|
else if (t < T.a3med_out[0]) op = 1;
|
|
else op = lerp(t, T.a3med_out[0], T.a3med_out[1], 1, 0, easeOut);
|
|
showScene('a3med', op);
|
|
|
|
const morph = expoOut(clampLerp(t, T.a3med_in[0], T.a3med_in[1] + 0.4));
|
|
const w = 100 + (300 - 100) * morph;
|
|
stmtMedium.style.fontVariationSettings = `"wght" ${w.toFixed(0)}`;
|
|
stmtMedium.style.fontWeight = Math.round(w);
|
|
|
|
const rise = lerp(t, T.a3med_in[0], T.a3med_in[1], 24, 0, expoOut);
|
|
stmtMedium.style.transform = `translate3d(0, ${rise}px, 0)`;
|
|
} else {
|
|
showScene('a3med', 0);
|
|
}
|
|
|
|
// ============ Act 3 Brand ============
|
|
if (t >= T.a3brand_in[0] - 0.1) {
|
|
const op = clampLerp(t, T.a3brand_in[0], T.a3brand_in[1]);
|
|
showScene('a3brand', op);
|
|
|
|
// Wordmark weight morph
|
|
const morphP = expoOut(clampLerp(t, T.brand_morph[0], T.brand_morph[1]));
|
|
const wght = 100 + (700 - 100) * morphP;
|
|
wordmark.style.fontVariationSettings = `"wght" ${wght.toFixed(0)}`;
|
|
wordmark.style.fontWeight = Math.round(wght);
|
|
|
|
const wRise = lerp(t, T.a3brand_in[0], T.a3brand_in[1], 20, 0, expoOut);
|
|
wordmark.style.transform = `translate3d(0, ${wRise}px, 0)`;
|
|
|
|
// Farewell quote
|
|
const fOp = clampLerp(t, T.a3farewell_in[0], T.a3farewell_in[1]);
|
|
const fRise = lerp(t, T.a3farewell_in[0], T.a3farewell_in[1], 12, 0, expoOut);
|
|
farewell.style.opacity = fOp;
|
|
farewell.style.transform = `translate3d(0, ${fRise}px, 0)`;
|
|
|
|
// CN subtitle
|
|
const cnOp = clampLerp(t, T.a3cn_in[0], T.a3cn_in[1]);
|
|
farewellCn.style.opacity = cnOp;
|
|
|
|
// URL
|
|
const uOp = clampLerp(t, T.a3url_in[0], T.a3url_in[1]);
|
|
urlEl.style.opacity = uOp;
|
|
} else {
|
|
showScene('a3brand', 0);
|
|
}
|
|
|
|
// Watermark: visible during Act 2-3
|
|
if (t >= T.a2tty_in[0] && t < T.DURATION - 0.2) {
|
|
watermark.classList.add('visible');
|
|
} else {
|
|
watermark.classList.remove('visible');
|
|
}
|
|
}
|
|
|
|
// ---------- Driver ----------
|
|
let manualT = null;
|
|
let startMs = null;
|
|
let hasFinishedOnce = false;
|
|
function tick(now) {
|
|
if (manualT != null) render(manualT);
|
|
else {
|
|
if (startMs == null) startMs = now;
|
|
const elapsed = (now - startMs) / 1000;
|
|
const recording = window.__recording === true;
|
|
let t;
|
|
if (recording) {
|
|
// Non-looping: clamp at DURATION, hold on final frame
|
|
t = Math.min(elapsed, T.DURATION - 0.001);
|
|
if (elapsed >= T.DURATION && !hasFinishedOnce) hasFinishedOnce = true;
|
|
} else {
|
|
t = elapsed % T.DURATION;
|
|
}
|
|
render(t);
|
|
}
|
|
requestAnimationFrame(tick);
|
|
}
|
|
requestAnimationFrame(tick);
|
|
|
|
// For frame-accurate rendering
|
|
window.__setTime = function(t) {
|
|
manualT = t;
|
|
render(t);
|
|
};
|
|
window.__resume = function() { manualT = null; startMs = null; };
|
|
window.__duration = T.DURATION;
|
|
window.__render = render;
|
|
window.__ready = true;
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|