haiany
/
huashu-design
-ын хуулбар https://github.com/alchaincyf/huashu-design.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134
							<!doctype html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8" />
<title>huashu-design · c3 motion design（中文版）</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;700&family=Inter:wght@100;200;300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&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);
  --hair-strong: rgba(255,255,255,0.22);
  --accent: #D97757;
  --accent-deep: #B85D3D;
  --accent-dim: rgba(217,119,87,0.25);
  --serif-cn: "Noto Serif SC", "Songti SC", "STSong", serif;
  --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;
}

/* Subtle film grain overlay, 2% */
.stage::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  z-index: 200;
}

/* Watermark */
.watermark-tl {
  position: absolute;
  top: 40px; left: 56px;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.16);
  z-index: 50;
  text-transform: none;
  font-weight: 500;
}
.watermark-br {
  position: absolute;
  bottom: 32px; right: 48px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: rgba(255,255,255,0.22);
  z-index: 100;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.6s;
}
.watermark-br.visible { opacity: 1; }

/* Scene container */
.scene {
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
  will-change: opacity;
}
.scene.visible { visibility: visible; }

/* ============ Split layout ============ */
.split {
  position: absolute; inset: 0;
}
.split-top {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 48%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.split-bottom {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 52%;
}

/* Horizontal divider hairline */
.split-divider {
  position: absolute;
  left: 160px; right: 160px;
  top: 48%;
  height: 1px;
  background: var(--hairline);
  z-index: 5;
}

/* Section label (top-left of each half) */
.panel-label {
  position: absolute;
  top: 32px;
  left: 160px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--muted);
  text-transform: uppercase;
}
.split-bottom .panel-label { top: 32px; }
.panel-label .accent { color: var(--accent); font-weight: 500; }

/* ============ Top: Timeline ============ */
.timeline-wrap {
  width: 1600px;
  position: relative;
  margin-top: 40px;
}
.timeline-track {
  position: relative;
  height: 2px;
  background: var(--hairline);
  width: 100%;
}
.timeline-track .fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(217,119,87,0.4) 100%);
  width: 0%;
  will-change: width;
}

/* Tick marks */
.tick {
  position: absolute;
  width: 1px;
  height: 10px;
  background: var(--muted);
  top: -4px;
  transform: translateX(-0.5px);
}
.tick.major { height: 14px; top: -6px; background: var(--ink-60); }
.tick-label {
  position: absolute;
  top: 18px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1em;
  transform: translateX(-50%);
}

/* Playhead */
.playhead {
  position: absolute;
  top: -28px;
  left: 0;
  width: 2px;
  height: 58px;
  background: var(--accent);
  transform: translateX(-1px);
  will-change: transform;
  z-index: 10;
  box-shadow: 0 0 20px rgba(217,119,87,0.5);
}
.playhead::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 14px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(217,119,87,0.6);
}
.playhead::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 6px;
  background: var(--bg);
  border-radius: 50%;
  z-index: 2;
}

/* API capsules on timeline */
.api-capsule {
  position: absolute;
  top: -92px;
  transform: translateX(-50%);
  padding: 10px 20px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink-60);
  letter-spacing: 0.02em;
  transition: none;
  will-change: color, border-color, transform, box-shadow;
  white-space: nowrap;
}
.api-capsule.lit {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 30px rgba(217,119,87,0.35);
}
.api-capsule .tiny {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.2em;
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
  opacity: 0.7;
}
.api-capsule.lit .tiny { color: var(--accent); opacity: 0.9; }

/* Tick connector (short vertical line from capsule to timeline) */
.capsule-stem {
  position: absolute;
  top: -48px;
  width: 1px;
  height: 44px;
  background: var(--hairline);
  transform: translateX(-0.5px);
  z-index: 1;
}
.capsule-stem.lit { background: var(--accent); }

/* ============ Bottom: Driven stage ============ */
.driven-stage {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

.viz {
  position: absolute;
  top: 46%; left: 50%;
  transform: translate(-50%, -50%);
  width: 1000px; height: 400px;
  opacity: 0;
  will-change: opacity;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* viz 1: useTime — clock */
.viz-clock {
  position: relative;
  width: 280px; height: 280px;
  border: 1.5px solid var(--hair-strong);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.viz-clock .tickmark {
  position: absolute;
  width: 1px;
  height: 8px;
  background: var(--muted);
  top: 10px;
  left: 50%;
  transform-origin: 50% 130px;
}
.viz-clock .tickmark.q {
  width: 2px;
  height: 14px;
  background: var(--ink-60);
}
.viz-clock .hand-h {
  position: absolute;
  width: 3px; height: 80px;
  background: var(--ink);
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(30deg);
  border-radius: 2px;
  will-change: transform;
}
.viz-clock .hand-m {
  position: absolute;
  width: 2px; height: 110px;
  background: var(--ink-80);
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(120deg);
  border-radius: 2px;
  will-change: transform;
}
.viz-clock .hand-s {
  position: absolute;
  width: 1.5px; height: 120px;
  background: var(--accent);
  left: 50%;
  bottom: 50%;
  transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(0deg);
  border-radius: 2px;
  will-change: transform;
  box-shadow: 0 0 10px rgba(217,119,87,0.4);
}
.viz-clock .center-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  z-index: 5;
  box-shadow: 0 0 10px rgba(217,119,87,0.6);
}
.viz-clock-label {
  position: absolute;
  bottom: -48px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.viz-clock-label .val {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* viz 2: interpolate — morph box */
.viz-morph {
  display: flex;
  gap: 80px;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.morph-box {
  width: 260px; height: 260px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.morph-rect {
  background: var(--accent);
  border-radius: 4px;
  will-change: width, height, background, border-radius, transform;
  box-shadow: 0 0 40px rgba(217,119,87,0.25);
}
.morph-label {
  position: absolute;
  bottom: -48px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.morph-label .val { color: var(--accent); font-variant-numeric: tabular-nums; }
.morph-arrow {
  font-family: var(--mono);
  font-size: 28px;
  color: var(--muted);
  letter-spacing: 0.2em;
}

/* viz 3: Easing — curves */
.viz-curves {
  position: relative;
  width: 720px; height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.curves-svg {
  width: 100%; height: 100%;
}
.curve-label {
  position: absolute;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.08em;
  white-space: nowrap;
}
/* viewBox 720x320 → right edge ≈ 680 of 720 → 94%. Vertical:
   y=40 is visual top (output value 1), y=260 is bottom (value 0).
   Labels go at right side, vertically aligned with where each curve
   approaches its asymptote at t≈0.7.
   expoOut at t=0.7 ~ 0.99 (≈ y=42)
   cubicOut at t=0.7 ~ 0.973 (≈ y=46)
   linear at t=0.7 ~ 0.7 (≈ y=106)
   So spatial order top→bottom: expoOut, cubicOut, linear
*/
.curve-label.l-expo   { top:  6%; right: 4%; color: var(--accent); }
.curve-label.l-cubic  { top: 16%; right: 4%; color: rgba(255,255,255,0.78); }
.curve-label.l-linear { top: 36%; right: 4%; color: rgba(255,255,255,0.42); }

.curve-dot {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 14px rgba(217,119,87,0.6);
  will-change: left, top;
}

/* viz 4: useSprite — choreographed grid */
.viz-sprites {
  display: grid;
  grid-template-columns: repeat(6, 60px);
  grid-template-rows: repeat(4, 60px);
  gap: 18px;
  justify-content: center;
  align-content: center;
  padding: 40px 0;
}
.sprite {
  width: 60px; height: 60px;
  background: var(--hairline);
  border: 1px solid var(--dim);
  will-change: transform, opacity, background;
  opacity: 0;
  border-radius: 2px;
}

.sprite-label {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.sprite-label .val { color: var(--accent); font-variant-numeric: tabular-nums; }

/* ============ Scene 0: Opening title ============ */
.scene-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.scene-intro .title {
  font-family: var(--serif-cn);
  font-size: 108px;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.05;
  will-change: opacity, transform, font-weight;
}
.scene-intro .title .accent { color: var(--accent); }
.scene-intro .sub {
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--muted);
  letter-spacing: 0.3em;
}

/* ============ Scene 2: Brand reveal (米色面板标准动作) ============ */
.scene-brand {
  background: transparent;
  pointer-events: none;
  z-index: 150;
}
.brand-panel {
  position: absolute;
  inset: 0;
  background: #F5F4F0;
  transform: translateY(100%);
  will-change: transform;
}
.brand-wordmark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 20px));
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 72px;
  font-weight: 100;
  font-variation-settings: "wght" 100;
  letter-spacing: -0.01em;
  color: #1A1918;
  text-align: center;
  line-height: 1;
  opacity: 0;
  white-space: nowrap;
  will-change: opacity, transform, font-weight, font-variation-settings;
}
.brand-wordmark .accent { color: #D97757; font-weight: inherit; }
.brand-line {
  position: absolute;
  top: calc(50% + 60px);
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  width: 0px;
  background: #D97757;
  will-change: width;
}

/* ============ Replay button (hidden during record) ============ */
.replay-btn {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 32px;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-60);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
  z-index: 300;
}
.replay-btn.visible {
  opacity: 1;
  pointer-events: auto;
}
</style>
</head>
<body>

<div class="stage" id="stage">

  <!-- Top-left watermark (always on) -->
  <div class="watermark-tl">HUASHU · DESIGN</div>

  <!-- ============ Scene 0: Intro (0 → 1.6s) ============ -->
  <div class="scene scene-intro" id="scene-intro">
    <div class="title" id="introTitle">时间轴 <span class="accent">=</span> 代码</div>
    <div class="sub" id="introSub">TIMELINE · MOTION · ENGINE</div>
  </div>

  <!-- ============ Scene 1: Split view (1.6 → 8.2s) ============ -->
  <div class="scene" id="scene-main">
    <div class="split">

      <!-- TOP: Timeline -->
      <div class="split-top">
        <div class="panel-label">TIMELINE · <span class="accent">PLAYHEAD</span></div>
        <div class="timeline-wrap">
          <div class="timeline-track">
            <div class="fill" id="timelineFill"></div>

            <!-- Tick marks (10 ticks for 10s) -->
            <div class="tick" style="left: 0%;"></div>
            <div class="tick major" style="left: 0%;"></div>
            <div class="tick" style="left: 10%;"></div>
            <div class="tick major" style="left: 20%;"></div>
            <div class="tick" style="left: 30%;"></div>
            <div class="tick major" style="left: 40%;"></div>
            <div class="tick" style="left: 50%;"></div>
            <div class="tick major" style="left: 60%;"></div>
            <div class="tick" style="left: 70%;"></div>
            <div class="tick major" style="left: 80%;"></div>
            <div class="tick" style="left: 90%;"></div>
            <div class="tick major" style="left: 100%;"></div>

            <div class="tick-label" style="left: 0%;">0s</div>
            <div class="tick-label" style="left: 20%;">2s</div>
            <div class="tick-label" style="left: 40%;">4s</div>
            <div class="tick-label" style="left: 60%;">6s</div>
            <div class="tick-label" style="left: 80%;">8s</div>
            <div class="tick-label" style="left: 100%;">10s</div>

            <!-- API capsules anchored at their trigger points -->
            <!-- Scene-main spans 1.6→8.2; timeline maps 0→10s globally for clarity.
                 cap positions here mirror when each API is "active" on the lower viz. -->
            <!-- useTime: global t = 1.8 → 3.3 → center ~2.5s → 25% -->
            <div class="capsule-stem" id="stem-time" style="left: 18%;"></div>
            <div class="api-capsule" id="cap-time" style="left: 18%;">
              <span class="tiny">01</span>useTime
            </div>

            <!-- interpolate: 3.5 → 5s → center 4.2s → 42% -->
            <div class="capsule-stem" id="stem-interp" style="left: 38%;"></div>
            <div class="api-capsule" id="cap-interp" style="left: 38%;">
              <span class="tiny">02</span>interpolate
            </div>

            <!-- Easing: 5 → 6.5s → center 5.7s → 57% -->
            <div class="capsule-stem" id="stem-easing" style="left: 58%;"></div>
            <div class="api-capsule" id="cap-easing" style="left: 58%;">
              <span class="tiny">03</span>Easing
            </div>

            <!-- useSprite: 6.5 → 8s → center 7.2s → 72% -->
            <div class="capsule-stem" id="stem-sprite" style="left: 80%;"></div>
            <div class="api-capsule" id="cap-sprite" style="left: 80%;">
              <span class="tiny">04</span>useSprite
            </div>

            <!-- Playhead -->
            <div class="playhead" id="playhead"></div>
          </div>
        </div>
      </div>

      <!-- Divider -->
      <div class="split-divider"></div>

      <!-- BOTTOM: Driven stage -->
      <div class="split-bottom">
        <div class="panel-label">DRIVEN · <span class="accent">STAGE</span></div>
        <div class="driven-stage">

          <!-- viz 1: useTime — clock -->
          <div class="viz" id="viz-time">
            <div class="viz-clock" id="clockRoot">
              <!-- 12 tick marks -->
              <div class="tickmark q" style="transform: translate(-50%, 0) rotate(0deg);"></div>
              <div class="tickmark" style="transform: translate(-50%, 0) rotate(30deg);"></div>
              <div class="tickmark" style="transform: translate(-50%, 0) rotate(60deg);"></div>
              <div class="tickmark q" style="transform: translate(-50%, 0) rotate(90deg);"></div>
              <div class="tickmark" style="transform: translate(-50%, 0) rotate(120deg);"></div>
              <div class="tickmark" style="transform: translate(-50%, 0) rotate(150deg);"></div>
              <div class="tickmark q" style="transform: translate(-50%, 0) rotate(180deg);"></div>
              <div class="tickmark" style="transform: translate(-50%, 0) rotate(210deg);"></div>
              <div class="tickmark" style="transform: translate(-50%, 0) rotate(240deg);"></div>
              <div class="tickmark q" style="transform: translate(-50%, 0) rotate(270deg);"></div>
              <div class="tickmark" style="transform: translate(-50%, 0) rotate(300deg);"></div>
              <div class="tickmark" style="transform: translate(-50%, 0) rotate(330deg);"></div>

              <div class="hand-h" id="handH"></div>
              <div class="hand-m" id="handM"></div>
              <div class="hand-s" id="handS"></div>
              <div class="center-dot"></div>

              <div class="viz-clock-label">
                t = <span class="val" id="timeVal">0.00s</span>
              </div>
            </div>
          </div>

          <!-- viz 2: interpolate — morph -->
          <div class="viz" id="viz-interp">
            <div class="viz-morph">
              <div class="morph-box">
                <div class="morph-rect" id="morphFrom" style="width: 80px; height: 80px; background: var(--hair-strong); border-radius: 2px;"></div>
                <div class="morph-label">FROM · <span class="val">0 → 100</span></div>
              </div>
              <div class="morph-arrow">──────→</div>
              <div class="morph-box">
                <div class="morph-rect" id="morphTo"></div>
                <div class="morph-label">INTERPOLATE · <span class="val" id="interpVal">0.00</span></div>
              </div>
            </div>
          </div>

          <!-- viz 3: Easing — 3 curves drawn in parallel -->
          <div class="viz" id="viz-easing">
            <div class="viz-curves">
              <svg class="curves-svg" viewBox="0 0 720 320" preserveAspectRatio="none">
                <!-- Grid -->
                <line x1="60" y1="260" x2="680" y2="260" stroke="rgba(255,255,255,0.18)" stroke-width="1"/>
                <line x1="60" y1="260" x2="60" y2="40" stroke="rgba(255,255,255,0.18)" stroke-width="1"/>

                <!-- Axis labels -->
                <text x="50" y="266" text-anchor="end" fill="rgba(255,255,255,0.4)" font-family="JetBrains Mono, monospace" font-size="11">0</text>
                <text x="50" y="48" text-anchor="end" fill="rgba(255,255,255,0.4)" font-family="JetBrains Mono, monospace" font-size="11">1</text>
                <text x="680" y="282" text-anchor="end" fill="rgba(255,255,255,0.4)" font-family="JetBrains Mono, monospace" font-size="11">t</text>

                <!-- Curves -->
                <path id="pathLinear" d="M 60 260 L 60 260" stroke="rgba(255,255,255,0.42)" stroke-width="1.5" fill="none" stroke-linecap="round"/>
                <path id="pathCubic" d="M 60 260 L 60 260" stroke="rgba(255,255,255,0.75)" stroke-width="1.8" fill="none" stroke-linecap="round"/>
                <path id="pathExpo" d="M 60 260 L 60 260" stroke="#D97757" stroke-width="2.2" fill="none" stroke-linecap="round"/>
              </svg>
              <div class="curve-label l-linear">linear</div>
              <div class="curve-label l-cubic">cubicOut</div>
              <div class="curve-label l-expo">expoOut</div>
            </div>
          </div>

          <!-- viz 4: useSprite — 24 sprites -->
          <div class="viz" id="viz-sprite">
            <div class="viz-sprites" id="spriteGrid">
              <!-- 24 sprites (6x4), filled by JS -->
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

  <!-- ============ Scene 2: Brand reveal (米色面板, 8.0 → 10s) ============ -->
  <div class="scene scene-brand" id="scene-brand">
    <div class="brand-panel" id="brandPanel"></div>
    <div class="brand-wordmark" id="wordmark">huashu<span class="accent">-</span>design</div>
    <div class="brand-line" id="brandLine"></div>
  </div>

  <!-- Bottom-right watermark -->
  <div class="watermark-br" id="watermarkBR">V2 · 2026</div>

  <!-- Replay button (hidden during recording) -->
  <button class="replay-btn no-record" id="replayBtn">REPLAY</button>

</div>

<script>
(function() {
  // =============== Timing ===============
  const T = {
    DURATION: 10.0,

    // Scene 0: intro
    intro_in:  [0.0, 0.5],
    intro_out: [1.3, 1.6],

    // Scene 1: main (timeline + driven stage)
    main_in:   [1.5, 1.9],     // fade in
    // Playhead sweeps from 0% (at t=1.6) to 100% (at t=8.2).
    // API activations use GLOBAL time. Their capsule position is placed so
    // that playhead passes under the capsule right when the API peaks.
    main_t0:   1.6,
    main_t_end: 8.2,
    main_out:  [8.0, 8.4],

    // API activations (GLOBAL time)
    // Each API: [activate_start, peak, deactivate_end]
    // Capsule x% = (peak - 1.6) / (8.2 - 1.6) * 100
    useTime:     [2.0, 2.8, 3.6],   // capsule @ ~18%
    interpolate: [3.6, 4.1, 4.8],   // capsule @ ~38%
    Easing:      [4.8, 5.4, 6.2],   // capsule @ ~58%
    useSprite:   [6.2, 6.9, 7.9],   // capsule @ ~80%

    // Scene 2: Brand reveal (米色面板 standard, last 2s of T=10)
    // [T-2.0 → T-1.7]: main fade 1→0 (already handled by main_out 8.0-8.4)
    // [T-1.7 → T-1.3]: beige panel translateY 100%→0, expoOut
    // [T-1.3 → T-0.7]: wordmark weight 100→500 + y:20→0 + opacity 0→1, expoOut
    // [T-0.7 → T-0.3]: orange line width 0→280px, cubicOut
    // [T-0.3 → T]: hold
    brand_panel:  [8.3, 8.7],
    brand_word:   [8.7, 9.3],
    brand_line:   [9.3, 9.7],
  };

  // =============== Easings ===============
  const expoOut = t => (t >= 1 ? 1 : 1 - Math.pow(2, -10 * t));
  const expoIn  = t => (t <= 0 ? 0 : Math.pow(2, 10 * (t - 1)));
  const cubicOut = t => 1 - Math.pow(1 - t, 3);
  const cubicIn  = t => t * t * t;
  const cubicInOut = t => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
  const easeInOut  = cubicInOut;
  const linear = t => t;

  // =============== Utils ===============
  const clamp = (v, lo = 0, hi = 1) => Math.max(lo, Math.min(hi, v));
  const clampLerp = (t, t0, t1) => clamp((t - t0) / (t1 - t0));
  function lerp(t, t0, t1, v0, v1, easing = linear) {
    const p = clampLerp(t, t0, t1);
    return v0 + (v1 - v0) * easing(p);
  }

  // =============== DOM refs ===============
  const scenes = {
    intro: document.getElementById('scene-intro'),
    main: document.getElementById('scene-main'),
    brand: document.getElementById('scene-brand'),
  };
  const introTitle = document.getElementById('introTitle');
  const introSub = document.getElementById('introSub');

  const timelineFill = document.getElementById('timelineFill');
  const playhead = document.getElementById('playhead');

  const capTime = document.getElementById('cap-time');
  const capInterp = document.getElementById('cap-interp');
  const capEasing = document.getElementById('cap-easing');
  const capSprite = document.getElementById('cap-sprite');

  const stemTime = document.getElementById('stem-time');
  const stemInterp = document.getElementById('stem-interp');
  const stemEasing = document.getElementById('stem-easing');
  const stemSprite = document.getElementById('stem-sprite');

  const vizTime = document.getElementById('viz-time');
  const vizInterp = document.getElementById('viz-interp');
  const vizEasing = document.getElementById('viz-easing');
  const vizSprite = document.getElementById('viz-sprite');

  const handS = document.getElementById('handS');
  const handM = document.getElementById('handM');
  const handH = document.getElementById('handH');
  const timeVal = document.getElementById('timeVal');

  const morphTo = document.getElementById('morphTo');
  const interpVal = document.getElementById('interpVal');

  const pathLinear = document.getElementById('pathLinear');
  const pathCubic = document.getElementById('pathCubic');
  const pathExpo = document.getElementById('pathExpo');

  const spriteGrid = document.getElementById('spriteGrid');
  const wordmark = document.getElementById('wordmark');
  const brandLine = document.getElementById('brandLine');
  const brandPanel = document.getElementById('brandPanel');
  const watermarkBR = document.getElementById('watermarkBR');
  const replayBtn = document.getElementById('replayBtn');

  // Build 24 sprites (6x4 grid)
  const SPRITE_COLS = 6, SPRITE_ROWS = 4;
  const spriteEls = [];
  for (let r = 0; r < SPRITE_ROWS; r++) {
    for (let c = 0; c < SPRITE_COLS; c++) {
      const el = document.createElement('div');
      el.className = 'sprite';
      // center distance for ripple
      const dc = c - (SPRITE_COLS - 1) / 2;
      const dr = r - (SPRITE_ROWS - 1) / 2;
      const dist = Math.sqrt(dc * dc + dr * dr);
      const maxDist = Math.sqrt(((SPRITE_COLS - 1) / 2) ** 2 + ((SPRITE_ROWS - 1) / 2) ** 2);
      el.dataset.delay = (dist / maxDist).toFixed(3);
      spriteGrid.appendChild(el);
      spriteEls.push(el);
    }
  }

  // =============== Scene helpers ===============
  function showScene(el, opacity) {
    if (opacity > 0.001) el.classList.add('visible');
    else el.classList.remove('visible');
    el.style.opacity = opacity;
  }

  // =============== API activation logic ===============
  function apiState(t_local, api) {
    // Returns { on: bool, strength: 0-1 }
    const [a, peak, b] = T[api];
    if (t_local < a || t_local > b) return { on: false, strength: 0 };
    if (t_local < peak) {
      return { on: true, strength: expoOut(clampLerp(t_local, a, peak)) };
    } else {
      return { on: true, strength: 1 - cubicIn(clampLerp(t_local, peak, b)) };
    }
  }

  // =============== Draw easing curves progressively ===============
  function easingPath(easingFn, progress) {
    // progress 0-1 draws the curve from left to right
    // x range: 60 → 680, y range: 260 (0) → 40 (1)
    const X0 = 60, X1 = 680, Y0 = 260, Y1 = 40;
    const steps = Math.max(2, Math.floor(progress * 80));
    let d = `M ${X0} ${Y0}`;
    for (let i = 1; i <= steps; i++) {
      const t = (i / 80) * progress;
      const x = X0 + (X1 - X0) * t;
      const y = Y0 + (Y1 - Y0) * easingFn(t);
      d += ` L ${x.toFixed(2)} ${y.toFixed(2)}`;
    }
    return d;
  }

  // =============== Render ===============
  function render(t) {
    // ============ Scene 0: Intro ============
    if (t < T.main_in[1]) {
      let op = 0;
      if (t < T.intro_in[1]) op = clampLerp(t, T.intro_in[0], T.intro_in[1]);
      else if (t < T.intro_out[0]) op = 1;
      else op = 1 - clampLerp(t, T.intro_out[0], T.intro_out[1]);
      showScene(scenes.intro, op);

      // weight morph + rise
      const morphP = expoOut(clampLerp(t, T.intro_in[0], T.intro_in[1] + 0.3));
      const w = 150 + (400 - 150) * morphP;
      introTitle.style.fontWeight = Math.round(w);
      const rise = lerp(t, T.intro_in[0], T.intro_in[1], 16, 0, expoOut);
      introTitle.style.transform = `translate3d(0, ${rise}px, 0)`;
      introSub.style.opacity = clampLerp(t, T.intro_in[1], T.intro_in[1] + 0.4);
    } else {
      showScene(scenes.intro, 0);
    }

    // ============ Scene 1: Main (split view) ============
    if (t >= T.main_in[0] - 0.1 && t < T.main_out[1]) {
      let op;
      if (t < T.main_in[1]) op = clampLerp(t, T.main_in[0], T.main_in[1]);
      else if (t < T.main_out[0]) op = 1;
      else op = 1 - clampLerp(t, T.main_out[0], T.main_out[1]);
      showScene(scenes.main, op);

      // Playhead sweeps 0% → 100% across the window [main_t0, main_t_end]
      const phP = clampLerp(t, T.main_t0, T.main_t_end);
      const phPct = phP * 100;
      playhead.style.left = phPct + '%';
      // Keep: use t directly for API state
      const t_local_clamped = t;

      // Timeline fill
      timelineFill.style.width = phPct + '%';

      // API capsules: lit state driven by apiState
      const stTime = apiState(t_local_clamped, 'useTime');
      const stInterp = apiState(t_local_clamped, 'interpolate');
      const stEasing = apiState(t_local_clamped, 'Easing');
      const stSprite = apiState(t_local_clamped, 'useSprite');

      setLit(capTime, stemTime, stTime);
      setLit(capInterp, stemInterp, stInterp);
      setLit(capEasing, stemEasing, stEasing);
      setLit(capSprite, stemSprite, stSprite);

      // Viz opacities — each viz only visible during its API's window
      vizTime.style.opacity = stTime.on ? stTime.strength : 0;
      vizInterp.style.opacity = stInterp.on ? stInterp.strength : 0;
      vizEasing.style.opacity = stEasing.on ? stEasing.strength : 0;
      vizSprite.style.opacity = stSprite.on ? stSprite.strength : 0;

      // ========= viz 1: clock =========
      // Continuous rotation (not just when active) so transition looks natural
      // But only animate hands when api is near-active, to avoid wasted cpu
      {
        const [a, _peak, b] = T.useTime;
        // Second hand: one revolution over the active window
        const localP = clampLerp(t_local_clamped, a, b);
        // Multi-revolution: 1.5 turns over the window
        const sDeg = localP * 540;
        const mDeg = localP * 180 + 120;
        const hDeg = localP * 60 + 30;
        handS.style.transform = `translateX(-50%) rotate(${sDeg}deg)`;
        handM.style.transform = `translateX(-50%) rotate(${mDeg}deg)`;
        handH.style.transform = `translateX(-50%) rotate(${hDeg}deg)`;

        // Display value as t in seconds mapping 0→1.50
        const displayVal = (localP * 1.5).toFixed(2);
        timeVal.textContent = displayVal + 's';
      }

      // ========= viz 2: interpolate =========
      {
        const [a, _peak, b] = T.interpolate;
        const localP = clampLerp(t_local_clamped, a, b);
        const eased = easeInOut(localP);
        // morph from 80×80 black → 220×160 orange, rounded
        const W = 80 + (240 - 80) * eased;
        const H = 80 + (160 - 80) * eased;
        const bright = Math.round(30 + (217 - 30) * eased);
        const brightG = Math.round(30 + (119 - 30) * eased);
        const brightB = Math.round(30 + (87 - 30) * eased);
        const rad = 2 + (20 - 2) * eased;
        morphTo.style.width = W + 'px';
        morphTo.style.height = H + 'px';
        morphTo.style.background = `rgb(${bright}, ${brightG}, ${brightB})`;
        morphTo.style.borderRadius = rad + 'px';
        interpVal.textContent = eased.toFixed(2);
      }

      // ========= viz 3: easing curves =========
      {
        const [a, _peak, b] = T.Easing;
        const localP = clampLerp(t_local_clamped, a, b);
        pathLinear.setAttribute('d', easingPath(linear, localP));
        pathCubic.setAttribute('d', easingPath(cubicOut, localP));
        pathExpo.setAttribute('d', easingPath(expoOut, localP));
      }

      // ========= viz 4: sprites =========
      {
        const [a, _peak, b] = T.useSprite;
        const localP = clampLerp(t_local_clamped, a, b);
        for (const el of spriteEls) {
          const delay = parseFloat(el.dataset.delay);
          const spriteLocalT = clamp((localP - delay * 0.5) / 0.5, 0, 1);
          const op = expoOut(spriteLocalT);
          el.style.opacity = op;
          const scale = 0.5 + 0.5 * op;
          const y = (1 - op) * 14;
          el.style.transform = `translateY(${y}px) scale(${scale})`;
          el.style.background = op > 0.85 ? 'var(--accent)' : 'var(--hairline)';
        }
      }
    } else {
      showScene(scenes.main, 0);
    }

    // ============ Scene 2: Brand reveal (米色面板标准动作) ============
    if (t >= T.brand_panel[0] - 0.1) {
      showScene(scenes.brand, 1);

      // [T-1.7 → T-1.3]: beige panel slides up, expoOut
      const panelP = expoOut(clampLerp(t, T.brand_panel[0], T.brand_panel[1]));
      brandPanel.style.transform = `translateY(${(1 - panelP) * 100}%)`;

      // [T-1.3 → T-0.7]: wordmark weight 100→500 + y:20→0 + opacity:0→1, expoOut
      const wordP = expoOut(clampLerp(t, T.brand_word[0], T.brand_word[1]));
      const w = 100 + (500 - 100) * wordP;
      wordmark.style.fontVariationSettings = `"wght" ${w.toFixed(0)}`;
      wordmark.style.fontWeight = Math.round(w);
      wordmark.style.opacity = wordP;
      const wRise = (1 - wordP) * 20;
      wordmark.style.transform = `translate(-50%, calc(-50% + ${wRise}px))`;

      // [T-0.7 → T-0.3]: orange line expands 0→280px, cubicOut
      const lineP = cubicOut(clampLerp(t, T.brand_line[0], T.brand_line[1]));
      brandLine.style.width = (lineP * 280) + 'px';
    } else {
      showScene(scenes.brand, 0);
      brandPanel.style.transform = 'translateY(100%)';
      wordmark.style.opacity = 0;
      brandLine.style.width = '0px';
    }

    // Watermark visible from start of main until end
    if (t >= T.main_in[0] && t < T.DURATION - 0.15) {
      watermarkBR.classList.add('visible');
    } else {
      watermarkBR.classList.remove('visible');
    }
  }

  function setLit(capsule, stem, state) {
    if (state.on && state.strength > 0.15) {
      capsule.classList.add('lit');
      stem.classList.add('lit');
      // Subtle scale pulse centered on peak (simplistic)
      const scale = 1.0 + state.strength * 0.06;
      capsule.style.transform = `translateX(-50%) scale(${scale})`;
    } else {
      capsule.classList.remove('lit');
      stem.classList.remove('lit');
      capsule.style.transform = 'translateX(-50%)';
    }
  }

  // =============== 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) {
        t = Math.min(elapsed, T.DURATION - 0.001);
        if (elapsed >= T.DURATION && !hasFinishedOnce) hasFinishedOnce = true;
      } else {
        t = elapsed % T.DURATION;
        // Show replay button when we've played at least once
        if (elapsed >= T.DURATION) {
          replayBtn.classList.add('visible');
        }
      }
      render(t);
    }
    requestAnimationFrame(tick);
  }

  // First paint signal for renderer
  document.fonts.ready.then(() => {
    render(0);
    requestAnimationFrame(() => {
      window.__ready = true;
      requestAnimationFrame(tick);
    });
  });

  // ========= Stage scaling (fit viewport) =========
  function fitStage() {
    const stage = document.getElementById('stage');
    const scaleX = window.innerWidth / 1920;
    const scaleY = window.innerHeight / 1080;
    const scale = Math.min(scaleX, scaleY);
    stage.style.transform = `translate(-50%, -50%) scale(${scale})`;
  }
  fitStage();
  window.addEventListener('resize', fitStage);

  // Replay
  replayBtn.addEventListener('click', () => {
    startMs = null;
    replayBtn.classList.remove('visible');
  });

  // =============== Expose for frame-accurate rendering ===============
  window.__setTime = (t) => { manualT = t; render(t); };
  window.__resume = () => { manualT = null; startMs = null; };
  window.__duration = T.DURATION;
  window.__render = render;
})();
</script>
</body>
</html>