Startsida Utforska Hjälp
Registrera dig Logga in
haiany
/
huashu-design
spegling av https://github.com/alchaincyf/huashu-design.git
1
0
Fork 0
Filer Ärenden 0 Wiki
Gren: master
Grenar Taggar
huashu-design
/
demos
/
c4-tweaks-en.html

c4-tweaks-en.html 30 KB
Permalänk Historik Rå

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989 
  1. <!doctype html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4. <meta charset="utf-8" />
    5. 

  5. <title>c4-tweaks · Slide. See it morph. (English)</title>
    6. 

  6. <link rel="preconnect" href="https://fonts.googleapis.com">
    7. 

  7. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    8. 

  8. <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&display=swap" rel="stylesheet">
    9. 

  9. <style>
    10. 

  10.   :root {
    11. 

  11.     --bg: #000000;
    12. 

  12.     --ink: #FFFFFF;
    13. 

  13.     --ink-80: rgba(255,255,255,0.82);
    14. 

  14.     --ink-60: rgba(255,255,255,0.58);
    15. 

  15.     --muted: rgba(255,255,255,0.40);
    16. 

  16.     --hairline: rgba(255,255,255,0.12);
    17. 

  17.     --accent: #D97757;
    18. 

  18.     --accent-deep: #B85D3D;
    19. 

  19. 

  20.     /* Mock landing page · warm variant (initial state) */
    21. 

  21.     --warm-bg: #F6EFE6;
    22. 

  22.     --warm-panel: #FFFFFF;
    23. 

  23.     --warm-ink: #1A1918;
    24. 

  24.     --warm-dim: #8B867E;
    25. 

  25.     --warm-hair: rgba(0,0,0,0.08);
    26. 

  26.     --warm-accent: #D97757;
    27. 

  27. 

  28.     /* Mock landing page · cool variant (after slider 1) */
    29. 

  29.     --cool-bg: #0E1620;
    30. 

  30.     --cool-panel: #17222E;
    31. 

  31.     --cool-ink: #E8EEF5;
    32. 

  32.     --cool-dim: #7A8A9B;
    33. 

  33.     --cool-hair: rgba(255,255,255,0.08);
    34. 

  34.     --cool-accent: #5A8CB8;
    35. 

  35. 

  36.     --serif-en: "Source Serif 4", Georgia, serif;
    37. 

  37.     --serif-cn: "Noto Serif SC", "Source Serif 4", Georgia, serif;
    38. 

  38.     --sans: "Inter", -apple-system, "PingFang SC", "HarmonyOS Sans SC", system-ui, sans-serif;
    39. 

  39.     --mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
    40. 

  40.   }
    41. 

  41.   html, body {
    42. 

  42.     margin: 0; padding: 0;
    43. 

  43.     background: #000;
    44. 

  44.     overflow: hidden;
    45. 

  45.     font-family: var(--sans);
    46. 

  46.     color: var(--ink);
    47. 

  47.     -webkit-font-smoothing: antialiased;
    48. 

  48.   }
    49. 

  49.   * { box-sizing: border-box; }
    50. 

  50. 

  51.   .stage {
    52. 

  52.     position: fixed;
    53. 

  53.     top: 50%; left: 50%;
    54. 

  54.     width: 1920px; height: 1080px;
    55. 

  55.     transform: translate(-50%, -50%);
    56. 

  56.     transform-origin: center center;
    57. 

  57.     background: var(--bg);
    58. 

  58.     overflow: hidden;
    59. 

  59.   }
    60. 

  60. 

  61.   /* Film grain */
    62. 

  62.   .grain {
    63. 

  63.     position: absolute; inset: 0;
    64. 

  64.     background-image:
    65. 

  65.       radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
    66. 

  66.     background-size: 3px 3px;
    67. 

  67.     opacity: 0.4;
    68. 

  68.     pointer-events: none;
    69. 

  69.     z-index: 2;
    70. 

  70.   }
    71. 

  71. 

  72.   /* Watermark */
    73. 

  73.   .watermark {
    74. 

  74.     position: absolute;
    75. 

  75.     top: 44px; left: 56px;
    76. 

  76.     font-family: var(--mono);
    77. 

  77.     font-size: 14px;
    78. 

  78.     font-weight: 500;
    79. 

  79.     letter-spacing: 0.2em;
    80. 

  80.     color: rgba(255,255,255,0.16);
    81. 

  81.     z-index: 10;
    82. 

  82.   }
    83. 

  83. 

  84.   .version-mark {
    85. 

  85.     position: absolute;
    86. 

  86.     bottom: 44px; right: 56px;
    87. 

  87.     font-family: var(--mono);
    88. 

  88.     font-size: 12px;
    89. 

  89.     letter-spacing: 0.2em;
    90. 

  90.     color: rgba(255,255,255,0.12);
    91. 

  91.     z-index: 10;
    92. 

  92.   }
    93. 

  93. 

  94.   /* ============ Main composition ============ */
    95. 

  95.   .composition {
    96. 

  96.     position: absolute;
    97. 

  97.     inset: 0;
    98. 

  98.     display: grid;
    99. 

  99.     grid-template-columns: 1080px 500px;
    100. 

  100.     gap: 80px;
    101. 

  101.     padding: 130px 120px 140px 140px;
    102. 

  102.     align-items: center;
    103. 

  103.     perspective: 2400px;
    104. 

  104.   }
    105. 

  105. 

  106.   /* ---- Design preview (left) ---- */
    107. 

  107.   .preview-frame {
    108. 

  108.     position: relative;
    109. 

  109.     width: 1080px;
    110. 

  110.     height: 800px;
    111. 

  111.     border-radius: 18px;
    112. 

  112.     overflow: hidden;
    113. 

  113.     transform-style: preserve-3d;
    114. 

  114.     transform: rotateX(6deg) rotateY(-4deg);
    115. 

  115.     box-shadow:
    116. 

  116.       0 50px 120px rgba(0,0,0,0.6),
    117. 

  117.       0 0 0 1px rgba(255,255,255,0.06);
    118. 

  118.     opacity: 0;
    119. 

  119.     will-change: opacity, transform, background;
    120. 

  120.     transition: background 280ms cubic-bezier(.2,.8,.2,1);
    121. 

  121.   }
    122. 

  122.   .preview-frame.warm {
    123. 

  123.     background: var(--warm-bg);
    124. 

  124.   }
    125. 

  125.   .preview-frame.cool {
    126. 

  126.     background: var(--cool-bg);
    127. 

  127.   }
    128. 

  128. 

  129.   /* Browser chrome top bar */
    130. 

  130.   .browser-chrome {
    131. 

  131.     display: flex;
    132. 

  132.     align-items: center;
    133. 

  133.     gap: 10px;
    134. 

  134.     padding: 16px 22px;
    135. 

  135.     border-bottom: 1px solid var(--warm-hair);
    136. 

  136.     background: var(--warm-panel);
    137. 

  137.     transition: all 280ms cubic-bezier(.2,.8,.2,1);
    138. 

  138.   }
    139. 

  139.   .cool .browser-chrome {
    140. 

  140.     background: var(--cool-panel);
    141. 

  141.     border-bottom-color: var(--cool-hair);
    142. 

  142.   }
    143. 

  143.   .dot {
    144. 

  144.     width: 11px; height: 11px; border-radius: 50%;
    145. 

  145.     background: rgba(0,0,0,0.14);
    146. 

  146.   }
    147. 

  147.   .cool .dot { background: rgba(255,255,255,0.14); }
    148. 

  148.   .url-bar {
    149. 

  149.     flex: 1;
    150. 

  150.     margin-left: 14px;
    151. 

  151.     padding: 6px 14px;
    152. 

  152.     border-radius: 6px;
    153. 

  153.     background: rgba(0,0,0,0.04);
    154. 

  154.     font-family: var(--mono);
    155. 

  155.     font-size: 12px;
    156. 

  156.     color: var(--warm-dim);
    157. 

  157.     letter-spacing: 0.05em;
    158. 

  158.     transition: all 280ms cubic-bezier(.2,.8,.2,1);
    159. 

  159.   }
    160. 

  160.   .cool .url-bar {
    161. 

  161.     background: rgba(255,255,255,0.04);
    162. 

  162.     color: var(--cool-dim);
    163. 

  163.   }
    164. 

  164. 

  165.   /* Hero content */
    166. 

  166.   .preview-body {
    167. 

  167.     padding: 54px 72px 60px 72px;
    168. 

  168.     color: var(--warm-ink);
    169. 

  169.     transition: color 280ms cubic-bezier(.2,.8,.2,1);
    170. 

  170.   }
    171. 

  171.   .cool .preview-body { color: var(--cool-ink); }
    172. 

  172. 

  173.   .preview-eyebrow {
    174. 

  174.     font-family: var(--mono);
    175. 

  175.     font-size: 11px;
    176. 

  176.     font-weight: 500;
    177. 

  177.     letter-spacing: 0.24em;
    178. 

  178.     text-transform: uppercase;
    179. 

  179.     color: var(--warm-accent);
    180. 

  180.     transition: color 280ms cubic-bezier(.2,.8,.2,1);
    181. 

  181.   }
    182. 

  182.   .cool .preview-eyebrow { color: var(--cool-accent); }
    183. 

  183. 

  184.   .preview-title {
    185. 

  185.     margin-top: 16px;
    186. 

  186.     font-family: var(--serif-en);
    187. 

  187.     font-weight: 400;
    188. 

  188.     font-size: 86px;
    189. 

  189.     line-height: 1.02;
    190. 

  190.     letter-spacing: -0.02em;
    191. 

  191.     transition: font-family 240ms cubic-bezier(.2,.8,.2,1),
    192. 

  192.                 font-weight 240ms cubic-bezier(.2,.8,.2,1),
    193. 

  193.                 letter-spacing 240ms cubic-bezier(.2,.8,.2,1);
    194. 

  194.   }
    195. 

  195.   .preview-title .em {
    196. 

  196.     color: var(--warm-accent);
    197. 

  197.     font-style: italic;
    198. 

  198.     transition: color 280ms cubic-bezier(.2,.8,.2,1);
    199. 

  199.   }
    200. 

  200.   .cool .preview-title .em { color: var(--cool-accent); }
    201. 

  201. 

  202.   .preview-frame.sans .preview-title {
    203. 

  203.     font-family: var(--sans);
    204. 

  204.     font-weight: 200;
    205. 

  205.     letter-spacing: -0.045em;
    206. 

  206.   }
    207. 

  207.   .preview-frame.sans .preview-title .em {
    208. 

  208.     font-style: normal;
    209. 

  209.   }
    210. 

  210. 

  211.   .preview-sub {
    212. 

  212.     margin-top: 24px;
    213. 

  213.     font-family: var(--serif-en);
    214. 

  214.     font-size: 20px;
    215. 

  215.     font-weight: 300;
    216. 

  216.     line-height: 1.6;
    217. 

  217.     max-width: 720px;
    218. 

  218.     color: var(--warm-dim);
    219. 

  219.     transition: color 280ms cubic-bezier(.2,.8,.2,1),
    220. 

  220.                 font-family 240ms cubic-bezier(.2,.8,.2,1);
    221. 

  221.   }
    222. 

  222.   .cool .preview-sub { color: var(--cool-dim); }
    223. 

  223.   .preview-frame.sans .preview-sub {
    224. 

  224.     font-family: var(--sans);
    225. 

  225.   }
    226. 

  226. 

  227.   /* Density cards grid */
    228. 

  228.   .card-grid {
    229. 

  229.     margin-top: 54px;
    230. 

  230.     display: grid;
    231. 

  231.     grid-template-columns: repeat(3, 1fr);
    232. 

  232.     gap: 18px;
    233. 

  233.     transition: grid-template-columns 280ms cubic-bezier(.2,.8,.2,1),
    234. 

  234.                 gap 280ms cubic-bezier(.2,.8,.2,1);
    235. 

  235.   }
    236. 

  236.   .preview-frame.dense .card-grid {
    237. 

  237.     grid-template-columns: repeat(3, 1fr);
    238. 

  238.     grid-auto-rows: minmax(72px, auto);
    239. 

  239.     gap: 10px;
    240. 

  240.   }
    241. 

  241. 

  242.   .card {
    243. 

  243.     padding: 22px 22px 24px 22px;
    244. 

  244.     border-radius: 10px;
    245. 

  245.     background: rgba(0,0,0,0.035);
    246. 

  246.     border: 1px solid var(--warm-hair);
    247. 

  247.     transition: all 280ms cubic-bezier(.2,.8,.2,1);
    248. 

  248.   }
    249. 

  249.   .cool .card {
    250. 

  250.     background: rgba(255,255,255,0.03);
    251. 

  251.     border-color: var(--cool-hair);
    252. 

  252.   }
    253. 

  253.   .preview-frame.dense .card {
    254. 

  254.     padding: 12px 14px;
    255. 

  255.   }
    256. 

  256. 

  257.   .card-icon {
    258. 

  258.     width: 28px; height: 28px;
    259. 

  259.     border-radius: 6px;
    260. 

  260.     background: var(--warm-accent);
    261. 

  261.     opacity: 0.16;
    262. 

  262.     margin-bottom: 14px;
    263. 

  263.     transition: all 280ms cubic-bezier(.2,.8,.2,1);
    264. 

  264.   }
    265. 

  265.   .cool .card-icon { background: var(--cool-accent); }
    266. 

  266.   .preview-frame.dense .card-icon {
    267. 

  267.     width: 18px; height: 18px;
    268. 

  268.     margin-bottom: 8px;
    269. 

  269.   }
    270. 

  270. 

  271.   .card-title {
    272. 

  272.     font-family: var(--serif-en);
    273. 

  273.     font-size: 18px;
    274. 

  274.     font-weight: 500;
    275. 

  275.     color: var(--warm-ink);
    276. 

  276.     letter-spacing: -0.005em;
    277. 

  277.     transition: color 280ms cubic-bezier(.2,.8,.2,1),
    278. 

  278.                 font-family 240ms cubic-bezier(.2,.8,.2,1),
    279. 

  279.                 font-size 280ms cubic-bezier(.2,.8,.2,1);
    280. 

  280.   }
    281. 

  281.   .cool .card-title { color: var(--cool-ink); }
    282. 

  282.   .preview-frame.sans .card-title {
    283. 

  283.     font-family: var(--sans);
    284. 

  284.     font-weight: 500;
    285. 

  285.   }
    286. 

  286.   .preview-frame.dense .card-title {
    287. 

  287.     font-size: 13px;
    288. 

  288.   }
    289. 

  289. 

  290.   .card-text {
    291. 

  291.     margin-top: 6px;
    292. 

  292.     font-family: var(--serif-en);
    293. 

  293.     font-size: 13px;
    294. 

  294.     line-height: 1.45;
    295. 

  295.     color: var(--warm-dim);
    296. 

  296.     transition: all 280ms cubic-bezier(.2,.8,.2,1);
    297. 

  297.   }
    298. 

  298.   .cool .card-text { color: var(--cool-dim); }
    299. 

  299.   .preview-frame.sans .card-text { font-family: var(--sans); }
    300. 

  300.   .preview-frame.dense .card-text {
    301. 

  301.     font-size: 11px;
    302. 

  302.     line-height: 1.3;
    303. 

  303.     opacity: 0.85;
    304. 

  304.   }
    305. 

  305. 

  306.   /* Extra cards (hidden in sparse mode) */
    307. 

  307.   .card.extra {
    308. 

  308.     opacity: 0;
    309. 

  309.     transform: scale(0.92);
    310. 

  310.     transition: opacity 240ms cubic-bezier(.2,.8,.2,1),
    311. 

  311.                 transform 240ms cubic-bezier(.2,.8,.2,1),
    312. 

  312.                 background 280ms cubic-bezier(.2,.8,.2,1),
    313. 

  313.                 border-color 280ms cubic-bezier(.2,.8,.2,1);
    314. 

  314.     pointer-events: none;
    315. 

  315.     max-height: 0;
    316. 

  316.     padding: 0;
    317. 

  317.     overflow: hidden;
    318. 

  318.   }
    319. 

  319.   .preview-frame.dense .card.extra {
    320. 

  320.     opacity: 1;
    321. 

  321.     transform: scale(1);
    322. 

  322.     max-height: 120px;
    323. 

  323.     padding: 12px 14px;
    324. 

  324.   }
    325. 

  325. 

  326.   /* ---- Slider panel (right) ---- */
    327. 

  327.   .slider-panel {
    328. 

  328.     position: relative;
    329. 

  329.     width: 500px;
    330. 

  330.     opacity: 0;
    331. 

  331.     will-change: opacity, transform;
    332. 

  332.     display: flex;
    333. 

  333.     flex-direction: column;
    334. 

  334.     gap: 64px;
    335. 

  335.   }
    336. 

  336. 

  337.   .anchor-line {
    338. 

  338.     position: absolute;
    339. 

  339.     top: -80px;
    340. 

  340.     left: 8px;
    341. 

  341.     font-family: var(--serif-en);
    342. 

  342.     font-weight: 400;
    343. 

  343.     font-size: 26px;
    344. 

  344.     letter-spacing: 0.02em;
    345. 

  345.     color: var(--ink-80);
    346. 

  346.     opacity: 0;
    347. 

  347.     will-change: opacity, transform;
    348. 

  348.   }
    349. 

  349.   .anchor-line .em {
    350. 

  350.     color: var(--accent);
    351. 

  351.     font-weight: 500;
    352. 

  352.   }
    353. 

  353. 

  354.   .slider-item {
    355. 

  355.     display: flex;
    356. 

  356.     flex-direction: column;
    357. 

  357.     gap: 18px;
    358. 

  358.   }
    359. 

  359. 

  360.   .slider-label {
    361. 

  361.     display: flex;
    362. 

  362.     align-items: baseline;
    363. 

  363.     justify-content: space-between;
    364. 

  364.   }
    365. 

  365.   .slider-name {
    366. 

  366.     font-family: var(--mono);
    367. 

  367.     font-size: 14px;
    368. 

  368.     font-weight: 500;
    369. 

  369.     letter-spacing: 0.18em;
    370. 

  370.     color: var(--ink-80);
    371. 

  371.     text-transform: uppercase;
    372. 

  372.   }
    373. 

  373.   .slider-value {
    374. 

  374.     font-family: var(--mono);
    375. 

  375.     font-size: 12px;
    376. 

  376.     letter-spacing: 0.14em;
    377. 

  377.     color: var(--muted);
    378. 

  378.   }
    379. 

  379. 

  380.   /* Track */
    381. 

  381.   .track {
    382. 

  382.     position: relative;
    383. 

  383.     width: 100%;
    384. 

  384.     height: 2px;
    385. 

  385.     background: var(--hairline);
    386. 

  386.   }
    387. 

  387.   .track-fill {
    388. 

  388.     position: absolute;
    389. 

  389.     top: 0; left: 0;
    390. 

  390.     height: 100%;
    391. 

  391.     width: 10%;
    392. 

  392.     background: var(--accent);
    393. 

  393.     will-change: width;
    394. 

  394.   }
    395. 

  395. 

  396.   /* Tick marks */
    397. 

  397.   .ticks {
    398. 

  398.     position: absolute;
    399. 

  399.     inset: -4px 0 -4px 0;
    400. 

  400.     display: flex;
    401. 

  401.     justify-content: space-between;
    402. 

  402.     pointer-events: none;
    403. 

  403.   }
    404. 

  404.   .tick {
    405. 

  405.     width: 1px;
    406. 

  406.     height: 10px;
    407. 

  407.     background: rgba(255,255,255,0.14);
    408. 

  408.   }
    409. 

  409. 

  410.   /* Knob */
    411. 

  411.   .knob {
    412. 

  412.     position: absolute;
    413. 

  413.     top: 50%;
    414. 

  414.     left: 10%;
    415. 

  415.     width: 26px; height: 26px;
    416. 

  416.     border-radius: 50%;
    417. 

  417.     background: var(--ink);
    418. 

  418.     transform: translate(-50%, -50%);
    419. 

  419.     box-shadow: 0 0 0 1px rgba(0,0,0,0.6),
    420. 

  420.                 0 8px 24px rgba(0,0,0,0.5);
    421. 

  421.     will-change: left, transform, box-shadow;
    422. 

  422.   }
    423. 

  423.   .knob.active {
    424. 

  424.     box-shadow: 0 0 0 2px var(--accent),
    425. 

  425.                 0 0 30px rgba(217,119,87,0.45),
    426. 

  426.                 0 8px 24px rgba(0,0,0,0.5);
    427. 

  427.   }
    428. 

  428. 

  429.   /* Cursor */
    430. 

  430.   .cursor {
    431. 

  431.     position: absolute;
    432. 

  432.     width: 20px; height: 20px;
    433. 

  433.     pointer-events: none;
    434. 

  434.     will-change: left, top, opacity;
    435. 

  435.     opacity: 0;
    436. 

  436.     z-index: 20;
    437. 

  437.   }
    438. 

  438.   .cursor svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8)); }
    439. 

  439. 

  440.   /* ---- Brand reveal ---- */
    441. 

  441.   /* Stage dimmer: fades the composition out just before the panel slides in */
    442. 

  442.   .stage-dimmer {
    443. 

  443.     position: absolute;
    444. 

  444.     inset: 0;
    445. 

  445.     background: #000000;
    446. 

  446.     opacity: 0;
    447. 

  447.     z-index: 40;
    448. 

  448.     pointer-events: none;
    449. 

  449.     will-change: opacity;
    450. 

  450.   }
    451. 

  451.   .brand-panel {
    452. 

  452.     position: absolute;
    453. 

  453.     inset: 0;
    454. 

  454.     background: #F5F4F0;
    455. 

  455.     transform: translateY(100%);
    456. 

  456.     display: flex;
    457. 

  457.     flex-direction: column;
    458. 

  458.     align-items: center;
    459. 

  459.     justify-content: center;
    460. 

  460.     z-index: 50;
    461. 

  461.     will-change: transform;
    462. 

  462.   }
    463. 

  463.   .brand-wordmark {
    464. 

  464.     font-family: var(--serif-en);
    465. 

  465.     font-size: 72px;
    466. 

  466.     font-weight: 100;
    467. 

  467.     font-variation-settings: "wght" 100;
    468. 

  468.     letter-spacing: -0.02em;
    469. 

  469.     color: #1A1918;
    470. 

  470.     text-align: center;
    471. 

  471.     line-height: 1;
    472. 

  472.     opacity: 0;
    473. 

  473.     transform: translateY(20px);
    474. 

  474.     will-change: opacity, transform, font-variation-settings, font-weight;
    475. 

  475.   }
    476. 

  476.   .brand-wordmark .accent { color: #D97757; font-weight: inherit; }
    477. 

  477. 

  478.   .brand-line {
    479. 

  479.     /* Flex-centered, 60px below wordmark (line-height 1 @ 72px → descender + 24 gap) */
    480. 

  480.     margin-top: 60px;
    481. 

  481.     height: 2px;
    482. 

  482.     width: 0;
    483. 

  483.     background: #D97757;
    484. 

  484.     align-self: center;
    485. 

  485.     will-change: width;
    486. 

  486.   }
    487. 

  487. 

  488. </style>
    489. 

  489. </head>
    490. 

  490. <body>
    491. 

  491. 

  492. <div class="stage" id="stage">
    493. 

  493. 

  494.   <div class="grain"></div>
    495. 

  495.   <div class="watermark">HUASHU · DESIGN</div>
    496. 

  496.   <div class="version-mark">V2 · 2026</div>
    497. 

  497. 

  498.   <div class="composition">
    499. 

  499. 

  500.     <!-- LEFT: design preview -->
    501. 

  501.     <div class="preview-frame warm" id="preview">
    502. 

  502.       <div class="browser-chrome">
    503. 

  503.         <span class="dot"></span><span class="dot"></span><span class="dot"></span>
    504. 

  504.         <div class="url-bar">yourbrand.design</div>
    505. 

  505.       </div>
    506. 

  506.       <div class="preview-body">
    507. 

  507.         <div class="preview-eyebrow">Agent Studio</div>
    508. 

  508.         <div class="preview-title">Built for <span class="em">them</span>.<br/>Who never sleep.</div>
    509. 

  509.         <div class="preview-sub">A design system that ships while you rest — ready before you open the file.</div>
    510. 

  510. 

  511.         <div class="card-grid" id="cardGrid">
    512. 

  512.           <div class="card">
    513. 

  513.             <div class="card-icon"></div>
    514. 

  514.             <div class="card-title">Brand Assets</div>
    515. 

  515.             <div class="card-text">Logos, palettes, type — one source of truth.</div>
    516. 

  516.           </div>
    517. 

  517.           <div class="card">
    518. 

  518.             <div class="card-icon"></div>
    519. 

  519.             <div class="card-title">Prototype</div>
    520. 

  520.             <div class="card-text">One sentence in, a clickable app out.</div>
    521. 

  521.           </div>
    522. 

  522.           <div class="card">
    523. 

  523.             <div class="card-icon"></div>
    524. 

  524.             <div class="card-title">Motion</div>
    525. 

  525.             <div class="card-text">Timeline is code. Swap 25 for 60 fps.</div>
    526. 

  526.           </div>
    527. 

  527.           <div class="card extra">
    528. 

  528.             <div class="card-icon"></div>
    529. 

  529.             <div class="card-title">Slides</div>
    530. 

  530.             <div class="card-text">HTML is PPTX.</div>
    531. 

  531.           </div>
    532. 

  532.           <div class="card extra">
    533. 

  533.             <div class="card-icon"></div>
    534. 

  534.             <div class="card-title">Infographic</div>
    535. 

  535.             <div class="card-text">Data in, magazine out.</div>
    536. 

  536.           </div>
    537. 

  537.           <div class="card extra">
    538. 

  538.             <div class="card-icon"></div>
    539. 

  539.             <div class="card-title">Review</div>
    540. 

  540.             <div class="card-text">Five axes. Honest punch list.</div>
    541. 

  541.           </div>
    542. 

  542.           <div class="card extra">
    543. 

  543.             <div class="card-icon"></div>
    544. 

  544.             <div class="card-title">Advisor</div>
    545. 

  545.             <div class="card-text">Three roads. You pick.</div>
    546. 

  546.           </div>
    547. 

  547.           <div class="card extra">
    548. 

  548.             <div class="card-icon"></div>
    549. 

  549.             <div class="card-title">Junior</div>
    550. 

  550.             <div class="card-text">Show first. Polish later.</div>
    551. 

  551.           </div>
    552. 

  552.           <div class="card extra">
    553. 

  553.             <div class="card-icon"></div>
    554. 

  554.             <div class="card-title">Protocol</div>
    555. 

  555.             <div class="card-text">Five steps. No skip.</div>
    556. 

  556.           </div>
    557. 

  557.         </div>
    558. 

  558.       </div>
    559. 

  559.     </div>
    560. 

  560. 

  561.     <!-- RIGHT: slider panel -->
    562. 

  562.     <div class="slider-panel" id="panel">
    563. 

  563. 

  564.       <div class="anchor-line" id="anchor">
    565. 

  565.         Slide. <span class="em">See it morph.</span>
    566. 

  566.       </div>
    567. 

  567. 

  568.       <!-- Slider 1 · palette -->
    569. 

  569.       <div class="slider-item">
    570. 

  570.         <div class="slider-label">
    571. 

  571.           <span class="slider-name">Palette</span>
    572. 

  572.           <span class="slider-value" id="val1">warm</span>
    573. 

  573.         </div>
    574. 

  574.         <div class="track">
    575. 

  575.           <div class="ticks">
    576. 

  576.             <span class="tick"></span><span class="tick"></span><span class="tick"></span>
    577. 

  577.             <span class="tick"></span><span class="tick"></span>
    578. 

  578.           </div>
    579. 

  579.           <div class="track-fill" id="fill1"></div>
    580. 

  580.           <div class="knob" id="knob1"></div>
    581. 

  581.         </div>
    582. 

  582.       </div>
    583. 

  583. 

  584.       <!-- Slider 2 · type -->
    585. 

  585.       <div class="slider-item">
    586. 

  586.         <div class="slider-label">
    587. 

  587.           <span class="slider-name">Type</span>
    588. 

  588.           <span class="slider-value" id="val2">serif</span>
    589. 

  589.         </div>
    590. 

  590.         <div class="track">
    591. 

  591.           <div class="ticks">
    592. 

  592.             <span class="tick"></span><span class="tick"></span><span class="tick"></span>
    593. 

  593.             <span class="tick"></span><span class="tick"></span>
    594. 

  594.           </div>
    595. 

  595.           <div class="track-fill" id="fill2"></div>
    596. 

  596.           <div class="knob" id="knob2"></div>
    597. 

  597.         </div>
    598. 

  598.       </div>
    599. 

  599. 

  600.       <!-- Slider 3 · density -->
    601. 

  601.       <div class="slider-item">
    602. 

  602.         <div class="slider-label">
    603. 

  603.           <span class="slider-name">Density</span>
    604. 

  604.           <span class="slider-value" id="val3">sparse</span>
    605. 

  605.         </div>
    606. 

  606.         <div class="track">
    607. 

  607.           <div class="ticks">
    608. 

  608.             <span class="tick"></span><span class="tick"></span><span class="tick"></span>
    609. 

  609.             <span class="tick"></span><span class="tick"></span>
    610. 

  610.           </div>
    611. 

  611.           <div class="track-fill" id="fill3"></div>
    612. 

  612.           <div class="knob" id="knob3"></div>
    613. 

  613.         </div>
    614. 

  614.       </div>
    615. 

  615. 

  616.     </div>
    617. 

  617. 

  618.     <!-- Cursor -->
    619. 

  619.     <div class="cursor" id="cursor">
    620. 

  620.       <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
    621. 

  621.         <path d="M2 2 L2 16 L6 12 L9 18 L11 17 L8 11 L14 11 Z"
    622. 

  622.               fill="white" stroke="#000" stroke-width="1.2" stroke-linejoin="round"/>
    623. 

  623.       </svg>
    624. 

  624.     </div>
    625. 

  625.   </div>
    626. 

  626. 

  627.   <!-- Stage dimmer (fades scene to black before panel sweeps in) -->
    628. 

  628.   <div class="stage-dimmer" id="stageDimmer"></div>
    629. 

  629. 

  630.   <!-- Brand reveal layer -->
    631. 

  631.   <div class="brand-panel" id="brandPanel">
    632. 

  632.     <div class="brand-wordmark" id="brandMark">huashu<span class="accent">-</span>design</div>
    633. 

  633.     <div class="brand-line" id="brandLine"></div>
    634. 

  634.   </div>
    635. 

  635. 

  636. </div>
    637. 

  637. 

  638. <script>
    639. 

  639. (function() {
    640. 

  640.   // ---------- Fit stage ----------
    641. 

  641.   const stage = document.getElementById('stage');
    642. 

  642.   function rescale() {
    643. 

  643.     const s = Math.min(window.innerWidth / 1920, window.innerHeight / 1080);
    644. 

  644.     stage.style.transform = `translate(-50%, -50%) scale(${s})`;
    645. 

  645.   }
    646. 

  646.   rescale();
    647. 

  647.   window.addEventListener('resize', rescale);
    648. 

  648. 

  649.   // ---------- Animation ----------
    650. 

  650.   const DURATION = 10.0; // seconds
    651. 

  651. 

  652.   const preview   = document.getElementById('preview');
    653. 

  653.   const panel     = document.getElementById('panel');
    654. 

  654.   const anchor    = document.getElementById('anchor');
    655. 

  655.   const cursor    = document.getElementById('cursor');
    656. 

  656. 

  657.   const knob1 = document.getElementById('knob1');
    658. 

  658.   const knob2 = document.getElementById('knob2');
    659. 

  659.   const knob3 = document.getElementById('knob3');
    660. 

  660.   const fill1 = document.getElementById('fill1');
    661. 

  661.   const fill2 = document.getElementById('fill2');
    662. 

  662.   const fill3 = document.getElementById('fill3');
    663. 

  663.   const val1  = document.getElementById('val1');
    664. 

  664.   const val2  = document.getElementById('val2');
    665. 

  665.   const val3  = document.getElementById('val3');
    666. 

  666. 

  667.   const stageDimmer = document.getElementById('stageDimmer');
    668. 

  668.   const brandPanel = document.getElementById('brandPanel');
    669. 

  669.   const brandMark  = document.getElementById('brandMark');
    670. 

  670.   const brandLine  = document.getElementById('brandLine');
    671. 

  671. 

  672.   // Easings
    673. 

  673.   const expoOut = t => t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
    674. 

  674.   const expoIn  = t => t === 0 ? 0 : Math.pow(2, 10 * (t - 1));
    675. 

  675.   const cubicInOut = t => t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t + 2, 3) / 2;
    676. 

  676.   const cubicOut = t => 1 - Math.pow(1 - t, 3);
    677. 

  677. 

  678.   function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); }
    679. 

  679.   function lerp(t, t0, t1, v0, v1, ease) {
    680. 

  680.     if (t <= t0) return v0;
    681. 

  681.     if (t >= t1) return v1;
    682. 

  682.     const k = (t - t0) / (t1 - t0);
    683. 

  683.     return v0 + (v1 - v0) * (ease ? ease(k) : k);
    684. 

  684.   }
    685. 

  685.   function clampLerp(t, t0, t1) {
    686. 

  686.     if (t <= t0) return 0;
    687. 

  687.     if (t >= t1) return 1;
    688. 

  688.     return (t - t0) / (t1 - t0);
    689. 

  689.   }
    690. 

  690. 

  691.   // Knob motion — drag feel: first 70% is a cubic ease (hand moving),
    692. 

  692.   // final 15% is overshoot + snap to target (magnetic arrival).
    693. 

  693.   function knobMotion(t, t0, t1, fromPct, toPct) {
    694. 

  694.     if (t <= t0) return fromPct;
    695. 

  695.     if (t >= t1) return toPct;
    696. 

  696.     const k = (t - t0) / (t1 - t0);
    697. 

  697.     const direction = toPct > fromPct ? 1 : -1;
    698. 

  698.     const range = Math.abs(toPct - fromPct);
    699. 

  699. 

  700.     if (k < 0.72) {
    701. 

  701.       // Main drag: cubic easeInOut feels like a hand moving
    702. 

  702.       const e = cubicInOut(k / 0.72);
    703. 

  703.       return fromPct + (toPct - fromPct) * e;
    704. 

  704.     } else if (k < 0.85) {
    705. 

  705.       // Overshoot past target by ~2%
    706. 

  706.       const overK = (k - 0.72) / 0.13;
    707. 

  707.       const overshoot = 2.2;
    708. 

  708.       return toPct + direction * overshoot * Math.sin(overK * Math.PI);
    709. 

  709.     } else {
    710. 

  710.       // Settled at target
    711. 

  711.       return toPct;
    712. 

  712.     }
    713. 

  713.   }
    714. 

  714. 

  715.   // Timeline (seconds, 10s total)
    716. 

  716.   const T = {
    717. 

  717.     stage_in:     [0.0, 1.0],       // frame + panel appear
    718. 

  718.     anchor_in:    [0.8, 1.4],
    719. 

  719. 

  720.     // Slider 1 · palette: warm → cool (1.2s → 3.2s) — arrive at 3.0s
    721. 

  721.     s1_cursor_to: [1.3, 1.9],
    722. 

  722.     s1_drag:      [1.9, 2.9],
    723. 

  723.     s1_settle:    [2.9, 3.1],
    724. 

  724. 

  725.     // Slider 2 · type: serif → sans
    726. 

  726.     s2_cursor_to: [3.2, 3.7],
    727. 

  727.     s2_drag:      [3.7, 4.7],
    728. 

  728.     s2_settle:    [4.7, 4.9],
    729. 

  729. 

  730.     // Slider 3 · density: sparse → dense
    731. 

  731.     s3_cursor_to: [5.0, 5.5],
    732. 

  732.     s3_drag:      [5.5, 6.5],
    733. 

  733.     s3_settle:    [6.5, 6.7],
    734. 

  734. 

  735.     hold:         [6.7, 8.0],
    736. 

  736. 

  737.     // Brand reveal (cream walloff · aligned with hero-v10 signature)
    738. 

  738.     scene_out:    [8.0, 8.3],   // main composition fade to black (0.3s)
    739. 

  739.     brand_panel:  [8.3, 8.7],   // cream panel sweeps up from bottom, expoOut (0.4s)
    740. 

  740.     brand_mark:   [8.7, 9.3],   // wordmark: wght 100→500 + y 20→0 + opacity 0→1 (0.6s)
    741. 

  741.     brand_line:   [9.3, 9.7],   // orange line expands 0→280 from center (0.4s)
    742. 

  742.     brand_hold:   [9.7, 10.0],  // hold final frame
    743. 

  743.   };
    744. 

  744. 

  745.   // Slider-to-state logic. Value-changes happen at settle start.
    746. 

  746.   let state = { palette: 'warm', type: 'serif', density: 'sparse' };
    747. 

  747.   let lastStateHash = '';
    748. 

  748.   function updatePreview() {
    749. 

  749.     preview.classList.remove('warm', 'cool', 'sans', 'dense');
    750. 

  750.     if (state.palette === 'warm') preview.classList.add('warm');
    751. 

  751.     else preview.classList.add('cool');
    752. 

  752.     if (state.type === 'sans') preview.classList.add('sans');
    753. 

  753.     if (state.density === 'dense') preview.classList.add('dense');
    754. 

  754.   }
    755. 

  755.   updatePreview();
    756. 

  756. 

  757.   function setKnobState(knob, active) {
    758. 

  758.     if (active) knob.classList.add('active');
    759. 

  759.     else knob.classList.remove('active');
    760. 

  760.   }
    761. 

  761. 

  762.   function setValueLabel(el, text) {
    763. 

  763.     if (el.textContent !== text) el.textContent = text;
    764. 

  764.   }
    765. 

  765. 

  766.   // ---------- Cursor path (in composition coords) ----------
    767. 

  767.   // Composition uses grid: left column 1220 + 60 gap, panel is at right.
    768. 

  768.   // We'll position cursor using .composition-relative absolute positioning.
    769. 

  769.   // Cursor is child of .composition, whose padding is 130/100/140/140.
    770. 

  770.   // So coords relative to .composition padding-box.
    771. 

  771.   // Simpler: cursor is absolute in .stage coords since parent composition
    772. 

  772.   // covers full stage. Use inline style left/top in px.
    773. 

  773. 

  774.   // Anchor positions (rough — will fine-tune):
    775. 

  775.   const CURSOR_PARK   = { x: 1900, y: 1080 }; // off-screen bottom-right
    776. 

  776.   // Slider tracks: panel starts around x≈1420, width 520. Each track spans that width.
    777. 

  777.   // We'll measure actual rect at first tick.
    778. 

  778.   let sliderRects = null;
    779. 

  779.   function measureRects() {
    780. 

  780.     const stageRect = stage.getBoundingClientRect();
    781. 

  781.     const scale = stageRect.width / 1920;
    782. 

  782.     const getTrackBox = (id) => {
    783. 

  783.       const el = document.getElementById(id).parentElement; // .track
    784. 

  784.       const r = el.getBoundingClientRect();
    785. 

  785.       return {
    786. 

  786.         left: (r.left - stageRect.left) / scale,
    787. 

  787.         top:  (r.top  - stageRect.top)  / scale,
    788. 

  788.         width:  r.width / scale,
    789. 

  789.         height: r.height / scale,
    790. 

  790.       };
    791. 

  791.     };
    792. 

  792.     sliderRects = {
    793. 

  793.       s1: getTrackBox('knob1'),
    794. 

  794.       s2: getTrackBox('knob2'),
    795. 

  795.       s3: getTrackBox('knob3'),
    796. 

  796.     };
    797. 

  797.   }
    798. 

  798. 

  799.   function positionCursor(x, y, opacity) {
    800. 

  800.     cursor.style.left = x + 'px';
    801. 

  801.     cursor.style.top  = y + 'px';
    802. 

  802.     cursor.style.opacity = opacity;
    803. 

  803.   }
    804. 

  804. 

  805.   function knobLeft(id, pct) {
    806. 

  806.     const el = document.getElementById(id);
    807. 

  807.     el.style.left = pct + '%';
    808. 

  808.   }
    809. 

  809.   function fillWidth(id, pct) {
    810. 

  810.     const el = document.getElementById(id);
    811. 

  811.     el.style.width = pct + '%';
    812. 

  812.   }
    813. 

  813. 

  814.   // Tick / render
    815. 

  815.   let startTs = null;
    816. 

  816.   let frameCount = 0;
    817. 

  817. 

  818.   function tick(ts) {
    819. 

  819.     if (!startTs) startTs = ts;
    820. 

  820.     const t = (ts - startTs) / 1000;
    821. 

  821. 

  822.     // Measure rects once
    823. 

  823.     if (!sliderRects && frameCount > 1) {
    824. 

  824.       measureRects();
    825. 

  825.     }
    826. 

  826. 

  827.     // --- Stage in ---
    828. 

  828.     const stageK = clampLerp(t, T.stage_in[0], T.stage_in[1]);
    829. 

  829.     const stageOp = cubicOut(stageK);
    830. 

  830.     preview.style.opacity = stageOp;
    831. 

  831.     preview.style.transform = `rotateX(${lerp(t, T.stage_in[0], T.stage_in[1], 10, 6, cubicOut)}deg) rotateY(-4deg) translateY(${lerp(t, T.stage_in[0], T.stage_in[1], 20, 0, expoOut)}px)`;
    832. 

  832.     panel.style.opacity = stageOp;
    833. 

  833.     panel.style.transform = `translateX(${lerp(t, T.stage_in[0], T.stage_in[1], 30, 0, expoOut)}px)`;
    834. 

  834. 

  835.     // Anchor
    836. 

  836.     const aK = clampLerp(t, T.anchor_in[0], T.anchor_in[1]);
    837. 

  837.     anchor.style.opacity = cubicOut(aK);
    838. 

  838.     anchor.style.transform = `translateY(${lerp(t, T.anchor_in[0], T.anchor_in[1], 10, 0, expoOut)}px)`;
    839. 

  839. 

  840.     // Snap point: when knob reaches target (72% of drag duration)
    841. 

  841.     const s1SnapT = T.s1_drag[0] + (T.s1_drag[1] - T.s1_drag[0]) * 0.72;
    842. 

  842.     const s2SnapT = T.s2_drag[0] + (T.s2_drag[1] - T.s2_drag[0]) * 0.72;
    843. 

  843.     const s3SnapT = T.s3_drag[0] + (T.s3_drag[1] - T.s3_drag[0]) * 0.72;
    844. 

  844. 

  845.     // --- Slider 1: palette ---
    846. 

  846.     // Knob 10% → 90%
    847. 

  847.     const k1pct = knobMotion(t, T.s1_drag[0], T.s1_drag[1], 10, 90);
    848. 

  848.     knobLeft('knob1', k1pct); fillWidth('fill1', k1pct);
    849. 

  849.     setKnobState(knob1, t >= T.s1_cursor_to[0] && t < T.s1_settle[1] + 0.2);
    850. 

  850.     if (t >= s1SnapT && state.palette !== 'cool') {
    851. 

  851.       state.palette = 'cool'; updatePreview(); setValueLabel(val1, 'cool');
    852. 

  852.     }
    853. 

  853. 

  854.     // --- Slider 2: type ---
    855. 

  855.     const k2pct = knobMotion(t, T.s2_drag[0], T.s2_drag[1], 10, 90);
    856. 

  856.     knobLeft('knob2', k2pct); fillWidth('fill2', k2pct);
    857. 

  857.     setKnobState(knob2, t >= T.s2_cursor_to[0] && t < T.s2_settle[1] + 0.2);
    858. 

  858.     if (t >= s2SnapT && state.type !== 'sans') {
    859. 

  859.       state.type = 'sans'; updatePreview(); setValueLabel(val2, 'sans');
    860. 

  860.     }
    861. 

  861. 

  862.     // --- Slider 3: density ---
    863. 

  863.     const k3pct = knobMotion(t, T.s3_drag[0], T.s3_drag[1], 10, 90);
    864. 

  864.     knobLeft('knob3', k3pct); fillWidth('fill3', k3pct);
    865. 

  865.     setKnobState(knob3, t >= T.s3_cursor_to[0] && t < T.s3_settle[1] + 0.2);
    866. 

  866.     if (t >= s3SnapT && state.density !== 'dense') {
    867. 

  867.       state.density = 'dense'; updatePreview(); setValueLabel(val3, 'dense');
    868. 

  868.     }
    869. 

  869. 

  870.     // --- Cursor choreography ---
    871. 

  871.     if (sliderRects) {
    872. 

  872.       const r1 = sliderRects.s1, r2 = sliderRects.s2, r3 = sliderRects.s3;
    873. 

  873.       // Positions of knob at 10% and 90%
    874. 

  874.       const k1Start = { x: r1.left + r1.width * 0.10, y: r1.top + r1.height/2 };
    875. 

  875.       const k1End   = { x: r1.left + r1.width * 0.90, y: r1.top + r1.height/2 };
    876. 

  876.       const k2Start = { x: r2.left + r2.width * 0.10, y: r2.top + r2.height/2 };
    877. 

  877.       const k2End   = { x: r2.left + r2.width * 0.90, y: r2.top + r2.height/2 };
    878. 

  878.       const k3Start = { x: r3.left + r3.width * 0.10, y: r3.top + r3.height/2 };
    879. 

  879.       const k3End   = { x: r3.left + r3.width * 0.90, y: r3.top + r3.height/2 };
    880. 

  880. 

  881.       let cx = CURSOR_PARK.x, cy = CURSOR_PARK.y, co = 0;
    882. 

  882. 

  883.       if (t < T.s1_cursor_to[0]) {
    884. 

  884.         // still off-screen (or just appeared)
    885. 

  885.         cx = CURSOR_PARK.x; cy = CURSOR_PARK.y; co = 0;
    886. 

  886.       } else if (t < T.s1_cursor_to[1]) {
    887. 

  887.         // cursor flies to s1 knob start
    888. 

  888.         const k = clampLerp(t, T.s1_cursor_to[0], T.s1_cursor_to[1]);
    889. 

  889.         const e = cubicOut(k);
    890. 

  890.         cx = lerp(t, T.s1_cursor_to[0], T.s1_cursor_to[1], CURSOR_PARK.x, k1Start.x, cubicOut);
    891. 

  891.         cy = lerp(t, T.s1_cursor_to[0], T.s1_cursor_to[1], CURSOR_PARK.y, k1Start.y, cubicOut);
    892. 

  892.         co = e;
    893. 

  893.       } else if (t < T.s1_drag[1]) {
    894. 

  894.         // dragging s1
    895. 

  895.         cx = r1.left + (r1.width * k1pct / 100);
    896. 

  896.         cy = r1.top + r1.height/2;
    897. 

  897.         co = 1;
    898. 

  898.       } else if (t < T.s2_cursor_to[0]) {
    899. 

  899.         cx = k1End.x; cy = k1End.y; co = 1;
    900. 

  900.       } else if (t < T.s2_cursor_to[1]) {
    901. 

  901.         cx = lerp(t, T.s2_cursor_to[0], T.s2_cursor_to[1], k1End.x, k2Start.x, cubicInOut);
    902. 

  902.         cy = lerp(t, T.s2_cursor_to[0], T.s2_cursor_to[1], k1End.y, k2Start.y, cubicInOut);
    903. 

  903.         co = 1;
    904. 

  904.       } else if (t < T.s2_drag[1]) {
    905. 

  905.         cx = r2.left + (r2.width * k2pct / 100);
    906. 

  906.         cy = r2.top + r2.height/2;
    907. 

  907.         co = 1;
    908. 

  908.       } else if (t < T.s3_cursor_to[0]) {
    909. 

  909.         cx = k2End.x; cy = k2End.y; co = 1;
    910. 

  910.       } else if (t < T.s3_cursor_to[1]) {
    911. 

  911.         cx = lerp(t, T.s3_cursor_to[0], T.s3_cursor_to[1], k2End.x, k3Start.x, cubicInOut);
    912. 

  912.         cy = lerp(t, T.s3_cursor_to[0], T.s3_cursor_to[1], k2End.y, k3Start.y, cubicInOut);
    913. 

  913.         co = 1;
    914. 

  914.       } else if (t < T.s3_drag[1]) {
    915. 

  915.         cx = r3.left + (r3.width * k3pct / 100);
    916. 

  916.         cy = r3.top + r3.height/2;
    917. 

  917.         co = 1;
    918. 

  918.       } else if (t < T.hold[1]) {
    919. 

  919.         // fade out cursor
    920. 

  920.         cx = k3End.x; cy = k3End.y;
    921. 

  921.         co = lerp(t, T.s3_drag[1], T.hold[1], 1, 0, cubicOut);
    922. 

  922.       }
    923. 

  923. 

  924.       positionCursor(cx, cy, co);
    925. 

  925.     }
    926. 

  926. 

  927.     // --- Brand reveal (cream walloff · aligned with hero-v10 signature) ---
    928. 

  928.     // 1) Scene dimmer: composition fades to black (0.3s)
    929. 

  929.     const soK = clampLerp(t, T.scene_out[0], T.scene_out[1]);
    930. 

  930.     stageDimmer.style.opacity = cubicOut(soK);
    931. 

  931. 

  932.     // 2) Cream panel sweeps up from bottom, expoOut (0.4s)
    933. 

  933.     const bpK = clampLerp(t, T.brand_panel[0], T.brand_panel[1]);
    934. 

  934.     const panelY = lerp(t, T.brand_panel[0], T.brand_panel[1], 100, 0, expoOut);
    935. 

  935.     brandPanel.style.transform = `translateY(${panelY}%)`;
    936. 

  936. 

  937.     // 3) Wordmark: font-weight 100→500 + y 20→0 + opacity 0→1, expoOut (0.6s)
    938. 

  938.     const bmK = clampLerp(t, T.brand_mark[0], T.brand_mark[1]);
    939. 

  939.     const bmE = expoOut(bmK);
    940. 

  940.     const wght = 100 + (500 - 100) * bmE;
    941. 

  941.     brandMark.style.opacity = bmE;
    942. 

  942.     brandMark.style.transform = `translateY(${20 * (1 - bmE)}px)`;
    943. 

  943.     brandMark.style.fontWeight = Math.round(wght);
    944. 

  944.     brandMark.style.fontVariationSettings = `"wght" ${wght.toFixed(0)}`;
    945. 

  945. 

  946.     // 4) Orange line: width 0→280 from center, cubicOut (0.4s)
    947. 

  947.     const blK = clampLerp(t, T.brand_line[0], T.brand_line[1]);
    948. 

  948.     brandLine.style.width = (280 * cubicOut(blK)) + 'px';
    949. 

  949. 

  950.     frameCount++;
    951. 

  951. 

  952.     // Loop or stop
    953. 

  953.     if (t < DURATION) {
    954. 

  954.       requestAnimationFrame(tick);
    955. 

  955.     } else {
    956. 

  956.       if (window.__recording === true) {
    957. 

  957.         // recording mode: hold last frame
    958. 

  958.         return;
    959. 

  959.       }
    960. 

  960.       // Restart after 1s pause (for manual viewing)
    961. 

  961.       setTimeout(() => {
    962. 

  962.         startTs = null;
    963. 

  963.         state = { palette: 'warm', type: 'serif', density: 'sparse' };
    964. 

  964.         updatePreview();
    965. 

  965.         setValueLabel(val1, 'warm'); setValueLabel(val2, 'serif'); setValueLabel(val3, 'sparse');
    966. 

  966.         requestAnimationFrame(tick);
    967. 

  967.       }, 900);
    968. 

  968.     }
    969. 

  969.   }
    970. 

  970. 

  971.   // Start animation after fonts ready
    972. 

  972.   const startAnim = () => {
    973. 

  973.     requestAnimationFrame((ts) => {
    974. 

  974.       startTs = ts;
    975. 

  975.       window.__ready = true; // signal for render-video.js
    976. 

  976.       requestAnimationFrame(tick);
    977. 

  977.     });
    978. 

  978.   };
    979. 

  979. 

  980.   if (document.fonts && document.fonts.ready) {
    981. 

  981.     document.fonts.ready.then(startAnim);
    982. 

  982.   } else {
    983. 

  983.     setTimeout(startAnim, 500);
    984. 

  984.   }
    985. 

  985. })();
    986. 

  986. </script>
    987. 

  987. 

  988. </body>
    989. 

  989. </html>
    990.