Garuda Chain — Signature Scroll Motion¶

Identitas visual animasi scroll Dashboard Wallet. Bukan meniru exchange lain — filosofi Kekuatan · Perlindungan · Persatuan · Kemajuan.

1. Struktur Dashboard¶

┌─────────────────────────────────────┐
│ dash-top-bar                        │  ← Floating Brand Icon (scroll 80%+)
│  [Garuda●] Avatar · Notif · Settings│
├─────────────────────────────────────┤
│ garuda-scroll-hero                  │  ← Signature logo + scroll driver
│         🦅 + ring blockchain        │
├─────────────────────────────────────┤
│ balance-panel (gradient GDC)        │
├─────────────────────────────────────┤
│ quick-actions                       │
├─────────────────────────────────────┤
│ market pulse · aktivitas            │
└─────────────────────────────────────┘
         BottomNav (fixed)

Posisi logo: Hero 148px di atas balance card. Saat scroll, logo mengecil dan berlabuh di kiri dash-top-bar.

2. Flow Motion¶

flowchart TD
  A[Scroll 0%] --> B[10% Mata menyala]
  B --> C[20% Node aktif CW]
  C --> D[35% Energi merah-putih]
  D --> E[50% Ring ±8°]
  E --> F[65% Sayap membuka]
  F --> G[80% Dock ke AppBar]
  G --> H[100% Idle / node tetap]
  H -->|Scroll up| A
  H --> I[Stop scroll → float 2px 4s]
  J[Tx success] --> K[Node full + sayap + emas 800ms]
  L[Pull refresh] --> M[Node sequence + ring spin]
  N[Mint NFT] --> O[Partikel → NFT → logo]
  P[Bridge] --> Q[Ring split + cahaya + merge]

3. State Diagram¶

stateDiagram-v2
  [*] --> Rest
  Rest --> Awakening: scroll > 0
  Awakening --> NetworkLive: scroll ≥ 10%
  NetworkLive --> EnergyFlow: scroll ≥ 20%
  EnergyFlow --> RingPulse: scroll ≥ 35%
  RingPulse --> WingReady: scroll ≥ 50%
  WingReady --> Docking: scroll ≥ 65%
  Docking --> Docked: scroll ≥ 80%
  Docked --> Rest: scroll < 75%
  Rest --> IdleFloat: scroll idle 150ms
  IdleFloat --> Rest: float cycle end
  Rest --> TxCelebrate: garuda:motion-tx-success
  Rest --> RefreshPulse: garuda:motion-refresh
  Rest --> MintMorph: garuda:motion-mint
  Rest --> BridgeSplit: garuda:motion-bridge
  TxCelebrate --> Rest: 800ms
  RefreshPulse --> Rest: 1200ms
  MintMorph --> Rest: 1400ms
  BridgeSplit --> Rest: 1000ms

4. Timeline Animation (scroll progress 0 → 1)¶

Progress	Elemen	Easing	Durasi feel
0%	Logo normal, node mati	—	—
0–10%	Mata glow merah	ease-in-out	~200ms scroll
10–20%	Node 1→2→3→4 (CW)	stagger spring	25ms/node
20–35%	Stroke energi Nusantara	linear on path	flow
35–50%	Ring rotate max 8°	ease-in-out	elegan
50–65%	Sayap +5° (bukan kepak)	spring soft	natural
65–80%	Scale 1→0.34, translate up	ease-in-out	smooth
80–100%	Dock AppBar, mata normal	ease-out	settle
Scroll ↑	Semua terbalik	mirror	no jump

5. Teknologi¶

React 18 + native requestAnimationFrame scroll
SVG ring + node (GPU transform / opacity)
CSS transform, opacity, filter — tanpa library berat
Custom events untuk tx / mint / bridge / refresh
prefers-reduced-motion: reduce → statis

6. Performance¶

Hanya properti compositor: transform, opacity, filter
Scroll throttled via rAF (1 update/frame)
will-change: transform pada layer animasi
Target 60 FPS mobile WebView

7. File Implementasi¶

File	Peran
`lib/garudaMotion.ts`	Phase math, easing, timeline
`hooks/useGarudaScrollMotion.ts`	Scroll + idle detection
`context/GarudaMotionContext.tsx`	Event-driven special modes
`components/garuda/GarudaSignatureLogo.tsx`	Layered emblem + SVG ring
`components/garuda/GarudaScrollHero.tsx`	Hero mount + PTR
`components/garuda/GarudaFloatingBrand.tsx`	AppBar docked icon