[ MvM / IMPLEMENTATION PLAN / PHASE 4 ]
Iconography & Motion
Icon system, custom MvM icons, motion presets, micro-interactions. Weeks 7–8.
Tasks & Deliverables
lucide-react (24px base)
lucide-react
Tailwind size classes
components/destiny/icons/
Output: lucide-react, components/destiny/icons/
Custom Icons (4.1.4)
MvM Logo
People Hub
Build Hub
Token
NFT
XR Object
Size examples for each icon
MvM Logo
12px
24px
32px
48px
People Hub
12px
24px
32px
48px
Build Hub
12px
24px
32px
48px
Token
12px
24px
32px
48px
NFT
12px
24px
32px
48px
XR Object
12px
24px
32px
48px
Size scale: 12px / 24px / 32px / 48px via size prop — icons use text-white (currentColor)
Page Transitions (4.2.4)
fade
slide-in-right
scale-in
wipe reveal
.d2-transition-fade, .d2-transition-slide-in-right/left, .d2-transition-scale-in, .d2-transition-wipe
Ambient Effects (4.2.5)
d2-shimmer
d2-pulse-glow-exotic
useReducedMotion() in hooks/use-reduced-motion.ts — disable animation when prefers-reduced-motion