✨Frontend & UXComing Soon
Animation System
Framer Motion animations, particle effects, and the gamble reveal sequence.
Video coming soon
Add a YouTube video ID to the topics config
Documentation
Overview
Animations are powered by Framer Motion with supplemental particle effects from @tsparticles/confetti and sound effects from use-sound.
Gamble Reveal Sequence
The signature animation is the gamble card reveal, inspired by NBA 2K MyTeam pack openings:
- Suspense phase — mystery card floats with neutral glow transitioning to tier color
- Reveal phase — 3D card flip with perspective transform
- Celebration phase — outcome-specific particles, screen shake, sound effects
- Comparison — previous vs. new player shown
Sound Design
| Phase | Sound | Behavior |
|---|---|---|
| Suspense | Atmospheric hum | Looped at 0.55x speed |
| Reveal | Card flip | One-shot |
| Celebration | Win/neutral/lose | Based on outcome category |
Page Transitions
- Staggered entrance animations on lists and grids
- Spring physics for interactive elements
AnimatePresencefor mount/unmount transitions
Technical Details
<!-- Add details about performance considerations, SSR safety for particles, etc. -->Content coming soon — add your video and detailed writeup here.