|
|
@@ -1,1498 +0,0 @@
|
|
|
-<!doctype html>
|
|
|
-<html lang="zh-Hans">
|
|
|
-<head>
|
|
|
-<meta charset="utf-8" />
|
|
|
-<title>huashu-design · 敬 Agent 时代（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">帮我做一份公司团建的欢迎手册。</div>
|
|
|
- </div>
|
|
|
- <div class="cd-msg">
|
|
|
- <div class="cd-avatar claude">C</div>
|
|
|
- <div class="cd-bubble">我帮你设计了一份横版单页欢迎手册，包含带松树插画的品牌封面、双列日程表和活动卡片。<br/><br/><span class="dim">拖动 Tweaks 可以调整强调色、标题大小和密度。</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">告诉我下一步想要什么…</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">它做得确实好<span class="period">。</span></div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- ========== Act 0.5: Pivot ========== -->
|
|
|
- <div class="scene act05" id="act05Pivot">
|
|
|
- <div class="pivot-line" id="pivotLine">
|
|
|
- 但那不是<span class="accent">未来</span>。
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- ========== Act 1 ========== -->
|
|
|
- <div class="scene act1" id="act1a">
|
|
|
- <div class="hero-line" id="heroLine">
|
|
|
- 敬 <span class="accent">Agent</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;">
|
|
|
- 不是那些<span class="strike">点击</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;">
|
|
|
- 不是那些<span class="strike">拖拽</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;">
|
|
|
- 不是那些<span class="strike">等你打开文件</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">是那些在你<span class="accent">睡觉</span>时<br/>设计的。</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="over-statement" id="overStmt2">
|
|
|
- <div class="text">是那些在你<span class="accent">开会</span>时<br/>交付的。</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- ========== Act 3 ========== -->
|
|
|
- <div class="scene act3" id="act3Medium">
|
|
|
- <div class="statement-big" id="stmtMedium">
|
|
|
- <span class="accent">Agent</span> 是<br/>新的媒介。
|
|
|
- </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">为他们，我们造了这个。</div>
|
|
|
- <div class="farewell-cn" id="farewellCn">· FOR THE AGENTS · WE BUILT THIS ·</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>
|
alchain