Эхлэл Бүгдийг харах Тусламж
Бүртгүүлэх Нэвтрэх
haiany
/
huashu-design
-ын хуулбар https://github.com/alchaincyf/huashu-design.git
1
0
Салаа 0
Файлууд Асуудлууд 0 Мэдлэгийн сан
Салаа: master
Салаанууд Тагууд
huashu-design
/
demos
/
w3-fallback-advisor.html

w3-fallback-advisor.html 26 KB
Байнгын холболт Түүх Анхны өгөгдөл

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704 
  1. <!doctype html>
    2. 

  2. <html lang="zh-Hans">
    3. 

  3. <head>
    4. 

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

  5. <title>w3 · Fallback Advisor（中文版）</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&family=Noto+Serif+SC:wght@300;400;500;600&family=Inter:wght@200;300;400;500;600&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.     --dim: rgba(255,255,255,0.18);
    17. 

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

  18.     --accent: #D97757;
    19. 

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

  20.     --cd-bg: #F5F4F0;
    21. 

  21.     --cd-ink: #1A1918;
    22. 

  22. 

  23.     --serif-cn: "Noto Serif SC", "Songti SC", serif;
    24. 

  24.     --serif-en: "Source Serif 4", Georgia, serif;
    25. 

  25.     --sans: "Inter", -apple-system, "PingFang SC", system-ui, sans-serif;
    26. 

  26.     --mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
    27. 

  27.   }
    28. 

  28.   html, body {
    29. 

  29.     margin: 0; padding: 0;
    30. 

  30.     background: #000;
    31. 

  31.     overflow: hidden;
    32. 

  32.     font-family: var(--sans);
    33. 

  33.     color: var(--ink);
    34. 

  34.     -webkit-font-smoothing: antialiased;
    35. 

  35.   }
    36. 

  36.   * { box-sizing: border-box; }
    37. 

  37. 

  38.   .stage {
    39. 

  39.     position: fixed;
    40. 

  40.     top: 50%; left: 50%;
    41. 

  41.     width: 1920px; height: 1080px;
    42. 

  42.     transform-origin: center center;
    43. 

  43.     background: var(--bg);
    44. 

  44.     overflow: hidden;
    45. 

  45.   }
    46. 

  46. 

  47.   /* ============ Watermark ============ */
    48. 

  48.   .watermark-tl {
    49. 

  49.     position: absolute;
    50. 

  50.     top: 40px; left: 56px;
    51. 

  51.     font-family: var(--mono);
    52. 

  52.     font-size: 12px;
    53. 

  53.     letter-spacing: 0.2em;
    54. 

  54.     color: rgba(255,255,255,0.16);
    55. 

  55.     z-index: 200;
    56. 

  56.     pointer-events: none;
    57. 

  57.     text-transform: uppercase;
    58. 

  58.   }
    59. 

  59.   .watermark-br {
    60. 

  60.     position: absolute;
    61. 

  61.     bottom: 32px; right: 40px;
    62. 

  62.     font-family: var(--mono);
    63. 

  63.     font-size: 10px;
    64. 

  64.     letter-spacing: 0.24em;
    65. 

  65.     color: rgba(255,255,255,0.14);
    66. 

  66.     z-index: 200;
    67. 

  67.     pointer-events: none;
    68. 

  68.     text-transform: uppercase;
    69. 

  69.   }
    70. 

  70. 

  71.   /* ============ Top Title ============ */
    72. 

  72.   .top-title {
    73. 

  73.     position: absolute;
    74. 

  74.     top: 88px; left: 50%;
    75. 

  75.     transform: translateX(-50%);
    76. 

  76.     font-family: var(--serif-cn);
    77. 

  77.     font-weight: 300;
    78. 

  78.     font-size: 42px;
    79. 

  79.     letter-spacing: 0.02em;
    80. 

  80.     color: var(--ink-80);
    81. 

  81.     text-align: center;
    82. 

  82.     opacity: 0;
    83. 

  83.     will-change: opacity, transform;
    84. 

  84.     z-index: 120;
    85. 

  85.   }
    86. 

  86.   .top-title .accent { color: var(--accent); font-weight: 400; }
    87. 

  87. 

  88.   .sub-caption {
    89. 

  89.     position: absolute;
    90. 

  90.     top: 148px; left: 50%;
    91. 

  91.     transform: translateX(-50%);
    92. 

  92.     font-family: var(--sans);
    93. 

  93.     font-weight: 300;
    94. 

  94.     font-size: 15px;
    95. 

  95.     letter-spacing: 0.32em;
    96. 

  96.     color: var(--muted);
    97. 

  97.     text-transform: uppercase;
    98. 

  98.     opacity: 0;
    99. 

  99.     will-change: opacity;
    100. 

  100.     z-index: 120;
    101. 

  101.   }
    102. 

  102. 

  103.   /* ============ Philosophy Wall (4 rows × 5 cols) ============ */
    104. 

  104.   .wall-viewport {
    105. 

  105.     position: absolute;
    106. 

  106.     top: 50%; left: 50%;
    107. 

  107.     transform: translate(-50%, -50%);
    108. 

  108.     width: 1480px;
    109. 

  109.     height: 760px;
    110. 

  110.     perspective: 2400px;
    111. 

  111.     perspective-origin: 50% 50%;
    112. 

  112.     will-change: transform, opacity, filter;
    113. 

  113.   }
    114. 

  114.   .wall-grid {
    115. 

  115.     position: absolute;
    116. 

  116.     inset: 0;
    117. 

  117.     display: grid;
    118. 

  118.     grid-template-columns: repeat(5, 1fr);
    119. 

  119.     grid-template-rows: repeat(4, 1fr);
    120. 

  120.     gap: 18px;
    121. 

  121.     transform: rotateX(10deg) rotateY(-6deg);
    122. 

  122.     transform-style: preserve-3d;
    123. 

  123.     will-change: transform, opacity;
    124. 

  124.   }
    125. 

  125.   .cell {
    126. 

  126.     position: relative;
    127. 

  127.     background: #0f0f0f;
    128. 

  128.     border: 1px solid var(--hairline);
    129. 

  129.     border-radius: 8px;
    130. 

  130.     overflow: hidden;
    131. 

  131.     opacity: 0;
    132. 

  132.     will-change: opacity, transform, filter;
    133. 

  133.     display: flex;
    134. 

  134.     flex-direction: column;
    135. 

  135.     justify-content: space-between;
    136. 

  136.     padding: 14px 16px;
    137. 

  137.   }
    138. 

  138. 

  139.   /* abstract glyph per cell — geometric, no imagery */
    140. 

  140.   .cell .glyph {
    141. 

  141.     position: absolute;
    142. 

  142.     inset: 0;
    143. 

  143.     display: flex;
    144. 

  144.     align-items: center;
    145. 

  145.     justify-content: center;
    146. 

  146.     pointer-events: none;
    147. 

  147.   }
    148. 

  148.   .cell .name {
    149. 

  149.     position: relative;
    150. 

  150.     font-family: var(--mono);
    151. 

  151.     font-size: 11px;
    152. 

  152.     letter-spacing: 0.08em;
    153. 

  153.     color: var(--muted);
    154. 

  154.     z-index: 2;
    155. 

  155.     align-self: flex-end;
    156. 

  156.   }
    157. 

  157.   .cell .num {
    158. 

  158.     position: relative;
    159. 

  159.     font-family: var(--mono);
    160. 

  160.     font-size: 10px;
    161. 

  161.     color: var(--dim);
    162. 

  162.     letter-spacing: 0.1em;
    163. 

  163.     z-index: 2;
    164. 

  164.   }
    165. 

  165. 

  166.   /* Selected cells — lit up */
    167. 

  167.   .cell.selected {
    168. 

  168.     border-color: var(--accent);
    169. 

  169.     background: #1a0f0a;
    170. 

  170.   }
    171. 

  171.   .cell.selected .name { color: var(--accent); }
    172. 

  172. 

  173.   /* ============ Scan light ============ */
    174. 

  174.   .scan-light {
    175. 

  175.     position: absolute;
    176. 

  176.     left: -5%;
    177. 

  177.     right: -5%;
    178. 

  178.     top: -15%;
    179. 

  179.     height: 200px;
    180. 

  180.     background: linear-gradient(
    181. 

  181.       180deg,
    182. 

  182.       rgba(217, 119, 87, 0) 0%,
    183. 

  183.       rgba(217, 119, 87, 0.18) 40%,
    184. 

  184.       rgba(255, 220, 200, 0.45) 50%,
    185. 

  185.       rgba(217, 119, 87, 0.18) 60%,
    186. 

  186.       rgba(217, 119, 87, 0) 100%
    187. 

  187.     );
    188. 

  188.     filter: blur(8px);
    189. 

  189.     z-index: 80;
    190. 

  190.     opacity: 0;
    191. 

  191.     will-change: opacity, transform;
    192. 

  192.     pointer-events: none;
    193. 

  193.   }
    194. 

  194. 

  195.   /* ============ Foreground 3 cards ============ */
    196. 

  196.   .fg-row {
    197. 

  197.     position: absolute;
    198. 

  198.     top: 50%; left: 50%;
    199. 

  199.     transform: translate(-50%, -50%);
    200. 

  200.     display: flex;
    201. 

  201.     gap: 56px;
    202. 

  202.     opacity: 0;
    203. 

  203.     will-change: opacity;
    204. 

  204.     z-index: 100;
    205. 

  205.   }
    206. 

  206.   .fg-card {
    207. 

  207.     width: 440px;
    208. 

  208.     display: flex;
    209. 

  209.     flex-direction: column;
    210. 

  210.     align-items: stretch;
    211. 

  211.     opacity: 0;
    212. 

  212.     transform: translateZ(-800px) scale(0.4);
    213. 

  213.     will-change: opacity, transform;
    214. 

  214.   }
    215. 

  215.   .fg-card .card-body {
    216. 

  216.     background: #0f0f0f;
    217. 

  217.     border: 1px solid var(--accent);
    218. 

  218.     border-radius: 12px;
    219. 

  219.     padding: 32px 30px;
    220. 

  220.     box-shadow:
    221. 

  221.       0 30px 80px -20px rgba(217,119,87,0.25),
    222. 

  222.       0 10px 30px -10px rgba(0,0,0,0.6);
    223. 

  223.   }
    224. 

  224.   .fg-card .label {
    225. 

  225.     font-family: var(--mono);
    226. 

  226.     font-size: 11px;
    227. 

  227.     letter-spacing: 0.18em;
    228. 

  228.     color: var(--accent);
    229. 

  229.     text-transform: uppercase;
    230. 

  230.     margin-bottom: 14px;
    231. 

  231.   }
    232. 

  232.   .fg-card .title-cn {
    233. 

  233.     font-family: var(--serif-cn);
    234. 

  234.     font-size: 36px;
    235. 

  235.     font-weight: 400;
    236. 

  236.     letter-spacing: 0.01em;
    237. 

  237.     line-height: 1.15;
    238. 

  238.     color: var(--ink);
    239. 

  239.     margin-bottom: 10px;
    240. 

  240.   }
    241. 

  241.   .fg-card .title-en {
    242. 

  242.     font-family: var(--serif-en);
    243. 

  243.     font-style: italic;
    244. 

  244.     font-weight: 300;
    245. 

  245.     font-size: 17px;
    246. 

  246.     letter-spacing: 0.01em;
    247. 

  247.     color: var(--ink-60);
    248. 

  248.     margin-bottom: 22px;
    249. 

  249.   }
    250. 

  250.   .fg-card .feature {
    251. 

  251.     font-family: var(--sans);
    252. 

  252.     font-size: 14px;
    253. 

  253.     font-weight: 300;
    254. 

  254.     letter-spacing: 0.02em;
    255. 

  255.     color: var(--muted);
    256. 

  256.     line-height: 1.6;
    257. 

  257.     padding-top: 18px;
    258. 

  258.     border-top: 1px solid var(--hairline);
    259. 

  259.   }
    260. 

  260.   .fg-card .thumb-wrap {
    261. 

  261.     margin-top: 14px;
    262. 

  262.     height: 0;
    263. 

  263.     overflow: hidden;
    264. 

  264.     border-radius: 10px;
    265. 

  265.     background: #0a0a0a;
    266. 

  266.     border: 1px solid var(--hairline);
    267. 

  267.     opacity: 0;
    268. 

  268.     will-change: opacity, height;
    269. 

  269.   }
    270. 

  270.   .fg-card .thumb-wrap img {
    271. 

  271.     width: 100%;
    272. 

  272.     display: block;
    273. 

  273.   }
    274. 

  274. 

  275.   /* ============ Brand Reveal (米色盖层) ============ */
    276. 

  276.   .brand-panel {
    277. 

  277.     position: absolute;
    278. 

  278.     inset: 0;
    279. 

  279.     background: var(--cd-bg);
    280. 

  280.     opacity: 0;
    281. 

  281.     transform: translateY(100%);
    282. 

  282.     will-change: opacity, transform;
    283. 

  283.     z-index: 300;
    284. 

  284.     display: flex;
    285. 

  285.     align-items: center;
    286. 

  286.     justify-content: center;
    287. 

  287.     flex-direction: column;
    288. 

  288.   }
    289. 

  289.   .brand-mark {
    290. 

  290.     font-family: var(--serif-en);
    291. 

  291.     font-style: italic;
    292. 

  292.     font-weight: 300;
    293. 

  293.     font-size: 112px;
    294. 

  294.     letter-spacing: -0.02em;
    295. 

  295.     color: var(--cd-ink);
    296. 

  296.     opacity: 0;
    297. 

  297.     transform: scale(0.92);
    298. 

  298.     will-change: opacity, transform;
    299. 

  299.     line-height: 1;
    300. 

  300.   }
    301. 

  301.   .brand-mark .accent { color: var(--accent); font-style: italic; }
    302. 

  302.   .brand-mark .dot { color: var(--accent); font-style: normal; padding: 0 6px; }
    303. 

  303.   .brand-underline {
    304. 

  304.     margin-top: 34px;
    305. 

  305.     height: 2px;
    306. 

  306.     width: 0;
    307. 

  307.     background: var(--accent);
    308. 

  308.     will-change: width;
    309. 

  309.   }
    310. 

  310.   .brand-tag {
    311. 

  311.     margin-top: 22px;
    312. 

  312.     font-family: var(--mono);
    313. 

  313.     font-size: 12px;
    314. 

  314.     letter-spacing: 0.32em;
    315. 

  315.     color: rgba(26,25,24,0.54);
    316. 

  316.     text-transform: uppercase;
    317. 

  317.     opacity: 0;
    318. 

  318.     will-change: opacity;
    319. 

  319.   }
    320. 

  320. </style>
    321. 

  321. </head>
    322. 

  322. <body>
    323. 

  323. 

  324. <div class="stage" id="stage">
    325. 

  325. 

  326.   <!-- 水印 -->
    327. 

  327.   <div class="watermark-tl">HUASHU · DESIGN</div>
    328. 

  328.   <div class="watermark-br">V2 · 2026 · w3</div>
    329. 

  329. 

  330.   <!-- 顶部标题 -->
    331. 

  331.   <div class="top-title" id="topTitle">
    332. 

  332.     不知道要什么？<span class="accent">先给你 3 个方向</span>
    333. 

  333.   </div>
    334. 

  334.   <div class="sub-caption" id="subCaption">20 Philosophies · 3 Directions</div>
    335. 

  335. 

  336.   <!-- 扫描光 -->
    337. 

  337.   <div class="scan-light" id="scanLight"></div>
    338. 

  338. 

  339.   <!-- 4×5 哲学墙 -->
    340. 

  340.   <div class="wall-viewport" id="wallViewport">
    341. 

  341.     <div class="wall-grid" id="wallGrid">
    342. 

  342.       <!-- 20 cells injected by JS -->
    343. 

  343.     </div>
    344. 

  344.   </div>
    345. 

  345. 

  346.   <!-- 前景 3 张方向卡 -->
    347. 

  347.   <div class="fg-row" id="fgRow">
    348. 

  348.     <!-- card 1: Kenya Hara · 东方极简 -->
    349. 

  349.     <div class="fg-card" id="card1">
    350. 

  350.       <div class="card-body">
    351. 

  351.         <div class="label">方向 01 · 东方空间</div>
    352. 

  352.         <div class="title-cn">原研哉式留白</div>
    353. 

  353.         <div class="title-en">Kenya Hara</div>
    354. 

  354.         <div class="feature">赤土橙 · 大量留白 · 宣纸质感</div>
    355. 

  355.       </div>
    356. 

  356.       <div class="thumb-wrap" id="thumb1">
    357. 

  357.         <img src="demo-takram.png" alt="demo takram" />
    358. 

  358.       </div>
    359. 

  359.     </div>
    360. 

  360.     <!-- card 2: Pentagram · 信息建筑 -->
    361. 

  361.     <div class="fg-card" id="card2">
    362. 

  362.       <div class="card-body">
    363. 

  363.         <div class="label">方向 02 · 信息建筑</div>
    364. 

  364.         <div class="title-cn">Pentagram 秩序</div>
    365. 

  365.         <div class="title-en">Pentagram</div>
    366. 

  366.         <div class="feature">强网格 · 高对比 · 理性版式</div>
    367. 

  367.       </div>
    368. 

  368.       <div class="thumb-wrap" id="thumb2">
    369. 

  369.         <img src="demo-pentagram.png" alt="demo pentagram" />
    370. 

  370.       </div>
    371. 

  371.     </div>
    372. 

  372.     <!-- card 3: David Carson · 实验先锋 -->
    373. 

  373.     <div class="fg-card" id="card3">
    374. 

  374.       <div class="card-body">
    375. 

  375.         <div class="label">方向 03 · 实验先锋</div>
    376. 

  376.         <div class="title-cn">David Carson 式</div>
    377. 

  377.         <div class="title-en">Experimental Edge</div>
    378. 

  378.         <div class="feature">破格排印 · 粗野几何 · 视觉冲击</div>
    379. 

  379.       </div>
    380. 

  380.       <div class="thumb-wrap" id="thumb3">
    381. 

  381.         <img src="demo-build.png" alt="demo build" />
    382. 

  382.       </div>
    383. 

  383.     </div>
    384. 

  384.   </div>
    385. 

  385. 

  386.   <!-- Brand Reveal -->
    387. 

  387.   <div class="brand-panel" id="brandPanel">
    388. 

  388.     <div class="brand-mark" id="brandMark">huashu<span class="dot">·</span><span class="accent">design</span></div>
    389. 

  389.     <div class="brand-underline" id="brandUnderline"></div>
    390. 

  390.     <div class="brand-tag" id="brandTag">HTML as Designer's Medium</div>
    391. 

  391.   </div>
    392. 

  392. 

  393. </div>
    394. 

  394. 

  395. <script>
    396. 

  396. (function(){
    397. 

  397.   // ============ Stage auto-scale ============
    398. 

  398.   function scaleStage(){
    399. 

  399.     const stage = document.getElementById('stage');
    400. 

  400.     const sx = window.innerWidth / 1920;
    401. 

  401.     const sy = window.innerHeight / 1080;
    402. 

  402.     const s = Math.min(sx, sy);
    403. 

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

  404.   }
    405. 

  405.   window.addEventListener('resize', scaleStage);
    406. 

  406.   scaleStage();
    407. 

  407. 

  408.   // ============ 20 Philosophies ============
    409. 

  409.   // 4 rows × 5 cols = 20. Selected: idx 0 (Pentagram), idx 9 (Kenya Hara), idx 12 (David Carson)
    410. 

  410.   const PHILOSOPHIES = [
    411. 

  411.     // row 1 — 信息建筑派
    412. 

  412.     { name: 'Pentagram',    glyph: 'grid' },
    413. 

  413.     { name: 'M. Vignelli',  glyph: 'bars' },
    414. 

  414.     { name: 'Apple HIG',    glyph: 'radius' },
    415. 

  415.     { name: 'Spin',         glyph: 'slash' },
    416. 

  416.     { name: 'Build',        glyph: 'type' },
    417. 

  417.     // row 2 — 运动诗学派
    418. 

  418.     { name: 'Field.io',     glyph: 'wave' },
    419. 

  419.     { name: 'Active Theory',glyph: 'orbit' },
    420. 

  420.     { name: 'Hi-Res!',      glyph: 'dots' },
    421. 

  421.     { name: 'Locomotive',   glyph: 'arrow' },
    422. 

  422.     { name: 'Takram',       glyph: 'circle' },
    423. 

  423.     // row 3 — 极简/东方
    424. 

  424.     { name: 'Kenya Hara',   glyph: 'ma' },
    425. 

  425.     { name: 'D. Rams',      glyph: 'square' },
    426. 

  426.     { name: 'J. Ive',       glyph: 'arc' },
    427. 

  427.     { name: 'J. Morrison',  glyph: 'minimal' },
    428. 

  428.     { name: 'S. Ogata',     glyph: 'line' },
    429. 

  429.     // row 4 — 实验 & 海报
    430. 

  430.     { name: 'D. Carson',    glyph: 'collage' },
    431. 

  431.     { name: 'S. Sagmeister',glyph: 'stamp' },
    432. 

  432.     { name: 'P. Scher',     glyph: 'poster' },
    433. 

  433.     { name: 'M. Glaser',    glyph: 'heart' },
    434. 

  434.     { name: 'K. Sato',      glyph: 'logo' },
    435. 

  435.   ];
    436. 

  436. 

  437.   // selected indices — 3 differentiated directions
    438. 

  438.   const SELECTED = [10, 0, 15]; // Kenya Hara, Pentagram, David Carson
    439. 

  439. 

  440.   function makeGlyph(kind){
    441. 

  441.     // Simple geometric SVG glyphs — one per cell, no real logos
    442. 

  442.     const svgs = {
    443. 

  443.       grid: `<svg viewBox="0 0 100 60" width="78%" height="62%"><g stroke="rgba(255,255,255,0.22)" stroke-width="1" fill="none">
    444. 

  444.         <rect x="6" y="8" width="28" height="18"/><rect x="38" y="8" width="28" height="18"/><rect x="70" y="8" width="24" height="44"/>
    445. 

  445.         <rect x="6" y="30" width="60" height="22"/></g></svg>`,
    446. 

  446.       bars: `<svg viewBox="0 0 100 60" width="78%" height="62%"><g fill="rgba(255,255,255,0.22)">
    447. 

  447.         <rect x="10" y="40" width="8" height="16"/><rect x="22" y="28" width="8" height="28"/><rect x="34" y="16" width="8" height="40"/>
    448. 

  448.         <rect x="46" y="24" width="8" height="32"/><rect x="58" y="10" width="8" height="46"/><rect x="70" y="34" width="8" height="22"/>
    449. 

  449.         <rect x="82" y="22" width="8" height="34"/></g></svg>`,
    450. 

  450.       radius: `<svg viewBox="0 0 100 60" width="72%" height="58%"><g stroke="rgba(255,255,255,0.22)" stroke-width="1.2" fill="none">
    451. 

  451.         <rect x="14" y="10" width="72" height="40" rx="20" ry="20"/></g></svg>`,
    452. 

  452.       slash: `<svg viewBox="0 0 100 60" width="78%" height="62%"><g stroke="rgba(255,255,255,0.22)" stroke-width="1.4" fill="none" stroke-linecap="square">
    453. 

  453.         <path d="M 14 50 L 52 10"/><path d="M 36 50 L 74 10"/><path d="M 58 50 L 86 22"/></g></svg>`,
    454. 

  454.       type: `<svg viewBox="0 0 100 60" width="78%" height="62%"><text x="50" y="42" text-anchor="middle" font-family="Source Serif 4, serif" font-size="40" font-style="italic" fill="rgba(255,255,255,0.22)">Aa</text></svg>`,
    455. 

  455.       wave: `<svg viewBox="0 0 100 60" width="82%" height="62%"><path d="M 6 30 Q 20 8, 34 30 T 62 30 T 90 30" stroke="rgba(255,255,255,0.22)" stroke-width="1.3" fill="none"/></svg>`,
    456. 

  456.       orbit: `<svg viewBox="0 0 100 60" width="74%" height="62%"><g stroke="rgba(255,255,255,0.22)" stroke-width="1.1" fill="none"><ellipse cx="50" cy="30" rx="36" ry="14"/><ellipse cx="50" cy="30" rx="14" ry="22"/><circle cx="50" cy="30" r="2" fill="rgba(255,255,255,0.32)"/></g></svg>`,
    457. 

  457.       dots: `<svg viewBox="0 0 100 60" width="78%" height="62%"><g fill="rgba(255,255,255,0.22)"><circle cx="14" cy="18" r="2"/><circle cx="30" cy="18" r="2"/><circle cx="46" cy="18" r="2"/><circle cx="62" cy="18" r="2"/><circle cx="78" cy="18" r="2"/><circle cx="14" cy="30" r="2"/><circle cx="30" cy="30" r="2"/><circle cx="46" cy="30" r="3"/><circle cx="62" cy="30" r="2"/><circle cx="78" cy="30" r="2"/><circle cx="14" cy="42" r="2"/><circle cx="30" cy="42" r="2"/><circle cx="46" cy="42" r="2"/><circle cx="62" cy="42" r="2"/><circle cx="78" cy="42" r="2"/></g></svg>`,
    458. 

  458.       arrow: `<svg viewBox="0 0 100 60" width="78%" height="52%"><g stroke="rgba(255,255,255,0.22)" stroke-width="1.2" fill="none" stroke-linecap="square"><path d="M 14 30 L 80 30"/><path d="M 68 18 L 82 30 L 68 42"/></g></svg>`,
    459. 

  459.       circle: `<svg viewBox="0 0 100 60" width="62%" height="62%"><circle cx="50" cy="30" r="22" stroke="rgba(255,255,255,0.22)" stroke-width="1.2" fill="none"/></svg>`,
    460. 

  460.       ma: `<svg viewBox="0 0 100 60" width="72%" height="62%"><g fill="none" stroke="rgba(255,255,255,0.22)" stroke-width="0.9"><rect x="18" y="14" width="64" height="32"/></g><circle cx="50" cy="30" r="1.4" fill="rgba(255,255,255,0.32)"/></svg>`,
    461. 

  461.       square: `<svg viewBox="0 0 100 60" width="62%" height="62%"><rect x="30" y="10" width="40" height="40" stroke="rgba(255,255,255,0.22)" stroke-width="1.2" fill="none"/></svg>`,
    462. 

  462.       arc: `<svg viewBox="0 0 100 60" width="78%" height="62%"><path d="M 14 46 Q 50 6, 86 46" stroke="rgba(255,255,255,0.22)" stroke-width="1.3" fill="none"/></svg>`,
    463. 

  463.       minimal: `<svg viewBox="0 0 100 60" width="78%" height="32%"><line x1="18" y1="30" x2="82" y2="30" stroke="rgba(255,255,255,0.22)" stroke-width="1.2"/></svg>`,
    464. 

  464.       line: `<svg viewBox="0 0 100 60" width="78%" height="62%"><g stroke="rgba(255,255,255,0.22)" stroke-width="0.9" fill="none"><line x1="14" y1="16" x2="86" y2="16"/><line x1="14" y1="30" x2="86" y2="30"/><line x1="14" y1="44" x2="60" y2="44"/></g></svg>`,
    465. 

  465.       collage: `<svg viewBox="0 0 100 60" width="82%" height="62%"><g fill="none" stroke="rgba(255,255,255,0.22)" stroke-width="1"><rect x="8" y="8" width="24" height="18" transform="rotate(-8 20 17)"/><rect x="36" y="18" width="28" height="20" transform="rotate(5 50 28)"/><rect x="60" y="6" width="32" height="24" transform="rotate(-4 76 18)"/></g><text x="50" y="56" text-anchor="middle" font-family="Source Serif 4, serif" font-size="14" font-style="italic" fill="rgba(255,255,255,0.3)">RAY</text></svg>`,
    466. 

  466.       stamp: `<svg viewBox="0 0 100 60" width="70%" height="62%"><g stroke="rgba(255,255,255,0.22)" stroke-width="1.2" fill="none"><circle cx="50" cy="30" r="22"/><text x="50" y="35" text-anchor="middle" font-family="Source Serif 4" font-size="16" font-weight="500" fill="rgba(255,255,255,0.3)">S</text></g></svg>`,
    467. 

  467.       poster: `<svg viewBox="0 0 100 60" width="82%" height="62%"><g fill="rgba(255,255,255,0.22)"><rect x="8" y="8" width="22" height="44"/><rect x="34" y="8" width="22" height="44"/><rect x="60" y="8" width="22" height="44"/></g></svg>`,
    468. 

  468.       heart: `<svg viewBox="0 0 100 60" width="58%" height="58%"><path d="M 50 48 C 30 32, 18 20, 30 14 C 40 10, 50 22, 50 22 C 50 22, 60 10, 70 14 C 82 20, 70 32, 50 48 Z" fill="rgba(217,119,87,0.28)"/></svg>`,
    469. 

  469.       logo: `<svg viewBox="0 0 100 60" width="60%" height="60%"><circle cx="50" cy="30" r="20" stroke="rgba(255,255,255,0.22)" stroke-width="1.3" fill="none"/><circle cx="50" cy="30" r="6" fill="rgba(255,255,255,0.22)"/></svg>`,
    470. 

  470.     };
    471. 

  471.     return svgs[kind] || svgs.minimal;
    472. 

  472.   }
    473. 

  473. 

  474.   // Build the wall
    475. 

  475.   const wallGrid = document.getElementById('wallGrid');
    476. 

  476.   PHILOSOPHIES.forEach((p, idx) => {
    477. 

  477.     const cell = document.createElement('div');
    478. 

  478.     cell.className = 'cell';
    479. 

  479.     cell.dataset.idx = idx;
    480. 

  480.     const row = Math.floor(idx / 5);
    481. 

  481.     const col = idx % 5;
    482. 

  482.     // precompute distance from grid center (2, 1.5)
    483. 

  483.     const dr = row - 1.5;
    484. 

  484.     const dc = col - 2;
    485. 

  485.     const dist = Math.sqrt(dr * dr + dc * dc);
    486. 

  486.     cell.dataset.dist = dist.toFixed(3);
    487. 

  487.     cell.innerHTML = `
    488. 

  488.       <div class="glyph">${makeGlyph(p.glyph)}</div>
    489. 

  489.       <div class="num">${String(idx + 1).padStart(2, '0')}</div>
    490. 

  490.       <div class="name">${p.name}</div>
    491. 

  491.     `;
    492. 

  492.     wallGrid.appendChild(cell);
    493. 

  493.   });
    494. 

  494. 

  495.   const cells = Array.from(wallGrid.querySelectorAll('.cell'));
    496. 

  496.   const maxDist = Math.max(...cells.map(c => parseFloat(c.dataset.dist)));
    497. 

  497. 

  498.   // ============ Timeline ============
    499. 

  499.   const T_TOTAL = 12.0; // seconds (flow type w)
    500. 

  500.   const fps = 25;
    501. 

  501.   const frameDur = 1 / fps;
    502. 

  502. 

  503.   // Easing
    504. 

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

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

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

  507.   const cubicOut = t => 1 - Math.pow(1 - t, 3);
    508. 

  508.   const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
    509. 

  509.   const clamp01 = v => clamp(v, 0, 1);
    510. 

  510.   const lerp = (a, b, t) => a + (b - a) * t;
    511. 

  511. 

  512.   // Element refs
    513. 

  513.   const topTitle = document.getElementById('topTitle');
    514. 

  514.   const subCap = document.getElementById('subCaption');
    515. 

  515.   const wallViewport = document.getElementById('wallViewport');
    516. 

  516.   const wallGridEl = wallGrid;
    517. 

  517.   const scanLight = document.getElementById('scanLight');
    518. 

  518.   const fgRow = document.getElementById('fgRow');
    519. 

  519.   const card1 = document.getElementById('card1');
    520. 

  520.   const card2 = document.getElementById('card2');
    521. 

  521.   const card3 = document.getElementById('card3');
    522. 

  522.   const thumb1 = document.getElementById('thumb1');
    523. 

  523.   const thumb2 = document.getElementById('thumb2');
    524. 

  524.   const thumb3 = document.getElementById('thumb3');
    525. 

  525.   const brandPanel = document.getElementById('brandPanel');
    526. 

  526.   const brandMark = document.getElementById('brandMark');
    527. 

  527.   const brandUnderline = document.getElementById('brandUnderline');
    528. 

  528.   const brandTag = document.getElementById('brandTag');
    529. 

  529. 

  530.   function tick(t){
    531. 

  531.     // Clamp
    532. 

  532.     t = Math.max(0, Math.min(T_TOTAL, t));
    533. 

  533. 

  534.     // ========== Phase 1: 0 - 2.5s — Ripple in 20 cells ==========
    535. 

  535.     const rippleStart = 0.15;
    536. 

  536.     const rippleSpan  = 1.8;
    537. 

  537.     cells.forEach(cell => {
    538. 

  538.       const d = parseFloat(cell.dataset.dist);
    539. 

  539.       // delay scaled by distance-from-center (hero v10 formula)
    540. 

  540.       const delay = (d / maxDist) * 0.85;
    541. 

  541.       const cellT = clamp01((t - rippleStart - delay * 0.55) / 0.7);
    542. 

  542.       const eased = expoOut(cellT);
    543. 

  543.       const idx = parseInt(cell.dataset.idx, 10);
    544. 

  544.       const isSel = SELECTED.includes(idx);
    545. 

  545.       cell.style.opacity = (eased * (isSel ? 1.0 : 0.85)).toFixed(3);
    546. 

  546.       const ty = lerp(30, 0, eased);
    547. 

  547.       const scale = lerp(0.88, 1, eased);
    548. 

  548.       cell.style.transform = `translateY(${ty}px) scale(${scale})`;
    549. 

  549.     });
    550. 

  550. 

  551.     // ========== Phase 2: 2.5 - 4.0s — scan light sweeps down ==========
    552. 

  552.     const scanStart = 2.6;
    553. 

  553.     const scanEnd = 4.0;
    554. 

  554.     const scanT = clamp01((t - scanStart) / (scanEnd - scanStart));
    555. 

  555.     if (scanT > 0 && scanT < 1) {
    556. 

  556.       scanLight.style.opacity = Math.min(1, Math.sin(scanT * Math.PI) * 1.3).toFixed(3);
    557. 

  557.       // travel from top to bottom across the wall (-150 to 860px within wallViewport-ish)
    558. 

  558.       const py = lerp(-180, 820, cubicInOut(scanT));
    559. 

  559.       scanLight.style.transform = `translateY(${py}px)`;
    560. 

  560.     } else {
    561. 

  561.       scanLight.style.opacity = 0;
    562. 

  562.     }
    563. 

  563. 

  564.     // ========== Phase 3: 4.0 - 4.8s — 3 cells light up, others dim ==========
    565. 

  565.     const lightStart = 4.0;
    566. 

  566.     const lightEnd = 4.8;
    567. 

  567.     const lightT = clamp01((t - lightStart) / (lightEnd - lightStart));
    568. 

  568.     const lightE = expoOut(lightT);
    569. 

  569.     cells.forEach(cell => {
    570. 

  570.       const idx = parseInt(cell.dataset.idx, 10);
    571. 

  571.       const isSel = SELECTED.includes(idx);
    572. 

  572.       if (isSel) {
    573. 

  573.         cell.classList.toggle('selected', lightT > 0.05);
    574. 

  574.       } else {
    575. 

  575.         // dim non-selected from 0.85 → 0.08
    576. 

  576.         const base = 0.85;
    577. 

  577.         const dimmedOpacity = lerp(base, 0.08, lightE);
    578. 

  578.         // only override after ripple is done
    579. 

  579.         if (t >= lightStart) {
    580. 

  580.           cell.style.opacity = dimmedOpacity.toFixed(3);
    581. 

  581.         }
    582. 

  582.       }
    583. 

  583.     });
    584. 

  584. 

  585.     // ========== Phase 4: 4.8 - 6.5s — 3 cells break out to foreground ==========
    586. 

  586.     // We don't literally move the wall cells; we fade in fg-cards "bursting from the wall"
    587. 

  587.     const breakStart = 4.8;
    588. 

  588.     const breakEnd = 6.5;
    589. 

  589.     const breakT = clamp01((t - breakStart) / (breakEnd - breakStart));
    590. 

  590.     const breakE = expoOut(breakT);
    591. 

  591. 

  592.     if (t >= breakStart - 0.1) {
    593. 

  593.       fgRow.style.opacity = 1;
    594. 

  594.     } else {
    595. 

  595.       fgRow.style.opacity = 0;
    596. 

  596.     }
    597. 

  597. 

  598.     [card1, card2, card3].forEach((card, i) => {
    599. 

  599.       const stagger = i * 0.18; // pop × 3 staggered
    600. 

  600.       const cT = clamp01((t - breakStart - stagger) / 0.85);
    601. 

  601.       const cE = expoOut(cT);
    602. 

  602.       card.style.opacity = cE.toFixed(3);
    603. 

  603.       // Z-rush: from translateZ(-800) to 0, scale 0.4 → 1
    604. 

  604.       const tz = lerp(-800, 0, cE);
    605. 

  605.       const sc = lerp(0.45, 1, cE);
    606. 

  606.       const ty = lerp(40, 0, cE);
    607. 

  607.       card.style.transform = `translateZ(${tz}px) scale(${sc}) translateY(${ty}px)`;
    608. 

  608.     });
    609. 

  609. 

  610.     // Dim the wall (behind) when cards come forward
    611. 

  611.     if (t >= breakStart) {
    612. 

  612.       const dimT = clamp01((t - breakStart) / 0.9);
    613. 

  613.       const dimE = expoOut(dimT);
    614. 

  614.       wallViewport.style.opacity = lerp(1, 0.25, dimE).toFixed(3);
    615. 

  615.       wallViewport.style.filter = `blur(${lerp(0, 6, dimE).toFixed(1)}px)`;
    616. 

  616.     } else {
    617. 

  617.       wallViewport.style.opacity = 1;
    618. 

  618.       wallViewport.style.filter = 'blur(0px)';
    619. 

  619.     }
    620. 

  620. 

  621.     // ========== Phase 5: 6.5 - 9.5s — thumbnails grow below each card ==========
    622. 

  622.     const thumbStart = 6.6;
    623. 

  623.     const thumbs = [thumb1, thumb2, thumb3];
    624. 

  624.     thumbs.forEach((thumb, i) => {
    625. 

  625.       const stagger = i * 0.32;
    626. 

  626.       const ttT = clamp01((t - thumbStart - stagger) / 1.0);
    627. 

  627.       const ttE = cubicOut(ttT);
    628. 

  628.       thumb.style.opacity = ttE.toFixed(3);
    629. 

  629.       // height from 0 to 250px
    630. 

  630.       const h = lerp(0, 250, ttE);
    631. 

  631.       thumb.style.height = `${h}px`;
    632. 

  632.     });
    633. 

  633. 

  634.     // ========== Top title fade in 7.2 - 8.0 ==========
    635. 

  635.     const titleStart = 7.2;
    636. 

  636.     const titleT = clamp01((t - titleStart) / 0.9);
    637. 

  637.     const titleE = cubicOut(titleT);
    638. 

  638.     topTitle.style.opacity = titleE.toFixed(3);
    639. 

  639.     topTitle.style.transform = `translateX(-50%) translateY(${lerp(-14, 0, titleE)}px)`;
    640. 

  640.     subCap.style.opacity = (titleE * 0.95).toFixed(3);
    641. 

  641. 

  642.     // ========== Phase 6: 9.8 - 12.0s — Brand Reveal ==========
    643. 

  643.     const brandStart = 9.8;
    644. 

  644.     const panelT = clamp01((t - brandStart) / 0.7);
    645. 

  645.     const panelE = expoOut(panelT);
    646. 

  646.     brandPanel.style.opacity = panelE.toFixed(3);
    647. 

  647.     brandPanel.style.transform = `translateY(${lerp(100, 0, panelE)}%)`;
    648. 

  648. 

  649.     const markStart = 10.3;
    650. 

  650.     const markT = clamp01((t - markStart) / 0.6);
    651. 

  651.     const markE = expoOut(markT);
    652. 

  652.     brandMark.style.opacity = markE.toFixed(3);
    653. 

  653.     brandMark.style.transform = `scale(${lerp(0.92, 1, markE)})`;
    654. 

  654. 

  655.     const ulStart = 10.7;
    656. 

  656.     const ulT = clamp01((t - ulStart) / 0.55);
    657. 

  657.     brandUnderline.style.width = `${lerp(0, 280, expoOut(ulT))}px`;
    658. 

  658. 

  659.     const tagStart = 11.1;
    660. 

  660.     const tagT = clamp01((t - tagStart) / 0.5);
    661. 

  661.     brandTag.style.opacity = cubicOut(tagT).toFixed(3);
    662. 

  662.   }
    663. 

  663. 

  664.   // ============ Animation loop ============
    665. 

  665.   window.__ready = false;
    666. 

  666.   window.__duration = T_TOTAL;
    667. 

  667.   let startTime = null;
    668. 

  668.   let paused = false;
    669. 

  669.   const recording = window.__recording === true;
    670. 

  670. 

  671.   function loop(now){
    672. 

  672.     if (paused) return;
    673. 

  673.     if (startTime === null) startTime = now;
    674. 

  674.     const t = (now - startTime) / 1000;
    675. 

  675.     tick(t);
    676. 

  676.     if (t < T_TOTAL) {
    677. 

  677.       requestAnimationFrame(loop);
    678. 

  678.     } else if (!recording) {
    679. 

  679.       startTime = now;
    680. 

  680.       requestAnimationFrame(loop);
    681. 

  681.     }
    682. 

  682.   }
    683. 

  683. 

  684.   // First-frame sync BEFORE requesting next frame
    685. 

  685.   tick(0);
    686. 

  686.   window.__ready = true;
    687. 

  687.   requestAnimationFrame(loop);
    688. 

  688. 

  689.   // Pause raf loop — tests & recorder call this before seeking
    690. 

  690.   window.__pause = function(){ paused = true; };
    691. 

  691.   window.__resume = function(){
    692. 

  692.     if (!paused) return;
    693. 

  693.     paused = false;
    694. 

  694.     startTime = null;
    695. 

  695.     requestAnimationFrame(loop);
    696. 

  696.   };
    697. 

  697.   // Expose for video recorder (scripts/render-video.js uses __setTime)
    698. 

  698.   window.__setTime = function(t){ paused = true; tick(t); };
    699. 

  699. 

  700. })();
    701. 

  701. </script>
    702. 

  702. 

  703. </body>
    704. 

  704. </html>
    705.