# 幣股 / 質押 / 兌換 / 資產 · 頂部 hero 卡片動畫（給 Eason 審閱）

> 全部都是**樣本資料**，卡片右上角有「樣本」標籤。只是給 Eason 看的 mockup，**還沒交給 Web3 技術**，也沒有動 eason-swap 專案。
> 第一批先交四個頁面的 hero 卡（幣股 H、質押 S、兌換 W1、資產 P）。W2–W5 和幣股 B1–B4 互動動畫還沒做，排在下一批。

- 互動預覽：`mockup.html?page=cs|stake|swap|asset&hero=<id>&lang=zh-TW|en|ms`
  - 其他參數：`mkt=open|closed`（美股開／休市）、`state=on|none|off`（已質押／未質押／未連錢包；資產頁 `off` = 未連錢包）、`near=<秒>`（S3 倒數剩幾秒）、`fil=cr|sk|ea|stk`（資產頁預先選好的篩選）、`ctl=0`（把審閱用的控制列藏起來）、`rm=1`（減少動態效果）
  - 每頁下方的控制列有：重播、模擬，以及狀態切換（開／休市、未質押／未連錢包等）
- 版面依照目前線上的版面（rel-chip 的 `CoinStockPage`／`StakingPage`／swap／`PfAssets`）：hero 放在頁面標題下面，原本的版面維持不動。
- 風格 01 曜黑琉璃。主色只用 #F7931A；漲跌一律用白字加小的紅／綠箭頭，大面積不上紅綠。內文 ≥15px，次要文字 ≥13px（只有環中心的小標用 12.5px）。i18n 支援 zh-TW / en / ms，360 寬已檢查。
- 效能：只用 CSS transform／opacity，加上一個 canvas 粒子層（只在有粒子的時候跑 rAF），沒有用任何函式庫。`prefers-reduced-motion` 開啟時，所有動畫都會直接顯示最終值。
- 跳動數字（odometer）：每一位數是一欄 0–9，用 translateY 捲動。載入時從 0 往上捲，越右邊的位數停得越晚；每秒跳動時只有變動的那一位會捲。

## 1. 幣股 · 熱門股票（H1–H4）
內容：依 24h 成交額排序的前 5 檔股票代幣，顯示真的 logo、價格、24h 漲跌（白字加小箭頭）、成交額，以及開盤中（橘色呼吸點）／休市（白字）。卡片放在「幣股」標題和「行情／理財」切換之間，所以兩個分頁打開都會看到；如果只想放在行情分頁，搬到切換下面就好。

| 變體 | 動畫 | 高度 @390 |
|---|---|---|
| **H1 軌道環繞** | #1 的 logo 放大在中央，外圈有橘色光暈。其他 4 檔沿著軌道環繞，軌道上有一顆和 AI量化 D2 一樣的光點在跑。每 4.2 秒，下一檔的 logo 從軌道飛進中央，右邊資訊同時滑入。開盤時環繞較快、光暈會呼吸；休市時變慢、變暗。 | 247 |
| H2 翻牌堆疊 | 3 張卡片疊在一起，最前面那張每 3.6 秒往上翻走，底部的橘色進度條顯示下一次翻牌的時間。卡片底有淡淡的走勢線（樣本），下面有 5 個 logo 可以直接點選。 | 261 |
| H3 跑馬燈聚光 | 下方是一排不停往左捲的股票膠囊，中間固定一道聚光燈，膠囊經過就會亮起來；上方大字顯示目前被照到的那一檔。 | 234 |
| H4 迷你頒獎台 | 2-1-3 頒獎台，柱子依 #3 → #2 → #1 的順序長出來，名次數字像拉霸一樣滾動後停住。#1 有一圈會轉的橘色光環，#4、#5 列在下方一行。 | 335 |

開盤時，價格每 2.2 秒會小幅跳動（樣本）。「模擬」會讓 TSLA 爆量衝到第 1，用來看排名變動時的動畫。

**資料（多數已經有）**：`useStockPrices` 已經從 DEX 池 API 取得 `price`、`change24h`、`volume24h`（行情列表的「額」就是這個），排序也已經是 `vol`；logo 在 `stocks-56.json` → `/coin-stock/logos/*.webp`；開／休市用 `marketState()`。**缺的**：如果要改成依持有人數排序，需要每檔的 holders 數（目前沒有）。H2 的走勢線如果要用真的，需要 24h 價格序列（目前沒有，可以拿掉）。

## 2. 質押 · hero（S1–S3）
內容：主數字是**我的質押**，下面是**待領收益**，每秒往上跳。右邊的環顯示**全網質押占代幣總量的比例**。底下一行是**質押人數 · 本期剩餘倒數**。未質押時，主數字改成全網質押量，再加一顆「開始質押」按鈕；沒連錢包時，按鈕改成「連接錢包」。原本頁面的 APR 大字移到下面那排統計（年化／本期獎勵／總質押量）。

| 變體 | 動畫 |
|---|---|
| S1 金庫環 | 環用 1.8 秒從 0 填到目前比例（有一顆白色光頭），中心的百分比同步往上數。之後不斷有細小的橘色光點從外圍螺旋流進中心。 |
| **S2 收益滴落** | 每 2.4 秒，一串 5 顆光點從環的左側沿弧線「滴」進待領收益的數字，數字輕輕跳一下、閃一下暖橘色。它本來就每秒在跳。 |
| S3 能量脈衝 | 平常每 4 秒有一道很淡的光波。本期剩不到 60 秒時，環開始發光、倒數變橘色，每秒擴出一道光波。歸零時有兩道大光波，倒數那一行會顯示「新一期開始」3 秒。 |

**資料**：
- 已經有（`useStaking`／StakingRewards）：`balanceOf(user)`（我的質押）、`earned(user)`、`totalSupply()`（全網質押量）、`rewardRate`、`periodFinish`。待領收益每秒跳動是在前端算的：`earned + rewardRate × userStaked ÷ totalStaked × 經過秒數`，每 30 秒左右重新讀一次鏈上的值來校正，不需要新的資料源。
- **缺 1：環的分母**。全網質押占比需要質押代幣的 `ERC20.totalSupply()`，是一個簡單的鏈上讀取，目前頁面沒有讀。如果 Eason 想要的分母是流通量，就要另外提供流通量。
- **缺 2：質押人數**。合約沒有計數器，需要索引 `Staked`／`Withdrawn` 事件（後端或 indexer 提供 `stakerCount`）。沒有這個數字的時候，那一行就只顯示倒數。
- **注意：「下次發放倒數」**。這個合約的獎勵是每秒連續發放的，沒有分批發放的時間點。mockup 用的是 `periodFinish`（本期剩餘）。如果要真的有「發放時間」，需要一個發放排程的欄位。

## 3. 兌換 · W1 熱門兌換
內容：24h 兌換次數前 3 名的交易對，用真的 token logo。#1 放大，兩顆 logo 沿弧線飛入，後面有橘色呼吸光暈，右邊是 #名次。每 3 秒自動輪播，下方 3 顆膠囊顯示目前是哪一組，加上一條進度條。點主區或點膠囊，會把那組幣帶進下面的兌換表單（兩顆 token 按鈕會閃一下橘框）。高度 192。

**資料（目前都沒有）**：本站沒有兌換紀錄的索引。可以二選一：(a) **本站使用者**的 24h 兌換次數和金額：需要後端索引經過本站 Router 呼叫的 `Swap` 事件（要能分辨是本站發出的交易，例如前端回報 tx hash 或用 referrer）；(b) **全網** PancakeSwap 池的 24h `transactions` 和 `volume_usd`：幣股已經在用的 DEX 池 API 就有（`PoolInfo.tx24`／`vol24`），可以直接拿來用，但那是全網數字，不是本站的。建議先用 (b)，標題寫「熱門交易對」。另外，**路由**資料已經有（`getAmountsOut` 的 path），那是 W3 用的。

## 4. 資產 · hero（P1–P3）
內容：**總資產**（odometer 從 0 往上捲）、**今日收益**（每秒跳動，來源是幣股存款和質押）、**配置環**（加密貨幣 白／股票代幣 #64D2FF／幣股存款 橘／質押 灰，顏色和線上 `PfAssets` 的 COL 一樣，多一個質押），右邊是可以點的圖例。點環上的分段或圖例，會切換下面列表的篩選，其他分段變暗，環中心改成該類的百分比；再點一次回到全部。底下一行是「最近解鎖：12 天後」。沒連錢包時，顯示錢包圖示、「連接錢包查看資產」和按鈕。這張環**取代**原本的「資產分布」橫條，避免同樣的資訊出現兩次。

| 變體 | 動畫 |
|---|---|
| **P1 配置環展開** | 4 段依序長出來（每段間隔 0.42 秒），總資產同時用 1.9 秒從 0 捲到目前的數字。 |
| P2 持倉軌道 | 持有的幣和股票 logo（BNB、USDT、NVDA、TSLA、存款、EDOT）在環的外圈慢慢繞，logo 大小依占比決定，跟 AI量化 D2 是同一套語言。選了某一類時，其他 logo 會變暗。 |
| **P3 收益流入** | 每 2.6 秒，光點從「幣股存款」（橘）和「質押」（灰白）兩段流進今日收益的數字，數字輕輕跳一下。如果目前篩選的是別的類別，就不會流。 |

**資料**：
- 已經有：`crUsd`／`skUsd`／`eaUsd`（PfAssets 已經在算）、每筆存款的 `principal`、`aprBps`（月化）、`start`、`maturity`、`withdrawable`；`edotPrice`（vault），以及質押的 `balanceOf`／`rewardRate`／`totalSupply`。
- 今日收益是前端算的：存款部分 = Σ 本金 × 月化 ÷ 30 × 今天 00:00 起經過的天數比例；質押部分 = rewardRate × 我的占比 × 經過秒數 × EDOT 價格。兩者合計，換算成 USD 顯示（獎勵實際發的是 EDOT）。不需要新的資料源，但「今日」要先定義：建議用本地時間 00:00 起算。
- 最近解鎖：從未到期的定期存款中取最小的 `maturity` 算出天數，已經有。
- **缺 / 需要決定**：(1) 目前資產頁的篩選沒有「質押」，質押只出現在下方的「持倉概覽」。mockup 加了第 5 個篩選「質押」，需要做一個質押分組，列出質押數量、USD 和待領收益。(2) 質押的 USD 估值要用 EDOT 價格；目前 `edotPrice` 是 vault 的換算價，不是市價，要確認用哪一個。(3) 加總時，模擬持倉一樣不計入。

## 建議
- **幣股：H1。** 跟 AI量化 D2 的軌道光點是同一套語言，焦點只有一個（中央的 #1），高度也適中（247）。如果想要更省空間、更好讀，備案是 H2。H4 最有戲劇性，但高達 335，會把列表擠到第一屏外面。H3 最有「即時感」，但持續捲動在列表頁上方有點吵。
- **質押：S2 當主體，倒數剩不到 60 秒時加上 S3 的光波**（兩者可以疊加：平常是滴落，快結算時發光）。未質押／未連錢包狀態用 S1 的填環開場。
- **兌換：W1**，資料先用全網池數據 (b)。
- **資產：P1 開場加 P3 常駐**（載入時環依序展開、總額滾動，之後光點持續流進今日收益）。P2 很好看，但 360 寬時外圈 logo 會貼近圖例，資訊也和圖例重複。
- 四張 hero 卡用的是同一套元件：玻璃卡、樣本標籤、odometer、粒子層、環。實作時可以抽出共用的 `HeroCard`、`Odometer`、`FxLayer`、`Ring`。

## 檔案
- `mockup.html`（由 `src/*.css|js` 經 `build.py` 組成）、`renders/*.png`（每個變體都有 390 zh-TW、360 en、360 ms，另有開盤、未質押、未連錢包、倒數將盡、已篩選等狀態）、`renders/hero-*.png`（只截卡片本身）、`renders/compare@2x.png`
- `video/hot-h1..h4.mp4`、`video/stake-s1..s3.mp4`、`video/swap-w1.mp4`、`video/asset-p1..p3.mp4`（每支約 7.6 秒）