An immersive web-based audio visualiser bringing Windows Media Player nostalgia to the modern era. Built entirely within Figma Make, this project demonstrates how AI-assisted development can rapidly transform vision into reality, creating 20 unique real-time visualisations with shuffle mode and fullscreen capabilities.
The Challenge
Classic media players like Windows Media Player and Winamp turned music listening into a visual experience. As streaming took over, this immersive aspect disappeared. The challenge: recapture that magic in a responsive web application while honouring classic media player aesthetics—through conversational development in Figma Make.
The Figma Make Process
Why Figma Make?
Traditional visualisation development requires deep Canvas API knowledge and complex audio analysis math. Figma Make enabled me to focus on creative direction while rapidly iterating on technical implementation. Instead of debugging rendering algorithms, I could describe visual effects and immediately see them come to life.
Traditional visualisation development requires deep Canvas API knowledge and complex audio analysis math. Figma Make enabled me to focus on creative direction while rapidly iterating on technical implementation. Instead of debugging rendering algorithms, I could describe visual effects and immediately see them come to life.
Iterative Development
The project evolved through natural conversation: "Create an audio visualiser inspired by Windows Media Player" → "Add kaleidoscope patterns, particle effects" → "Make all glow effects 30% brighter" → "Add smooth fade transitions for shuffle mode." Each request built upon the previous, allowing rapid experimentation without rewriting codebases.
The project evolved through natural conversation: "Create an audio visualiser inspired by Windows Media Player" → "Add kaleidoscope patterns, particle effects" → "Make all glow effects 30% brighter" → "Add smooth fade transitions for shuffle mode." Each request built upon the previous, allowing rapid experimentation without rewriting codebases.
Executing Complex Visualisations
Through Figma Make, I could describe visual concepts ("spiral vortex," "DNA helix," "wave interference"), request specific enhancements ("30% brighter shadowBlur values"), and refine interactions ("800ms cubic-bezier fade transitions"). This conversational approach transformed abstract ideas into functional code, making complex audio-reactive animations accessible without deep WebGL or audio DSP expertise.
Through Figma Make, I could describe visual concepts ("spiral vortex," "DNA helix," "wave interference"), request specific enhancements ("30% brighter shadowBlur values"), and refine interactions ("800ms cubic-bezier fade transitions"). This conversational approach transformed abstract ideas into functional code, making complex audio-reactive animations accessible without deep WebGL or audio DSP expertise.
Design Process
Research & Inspiration
Studied Winamp and Windows Media Player's visual language—chrome window treatments, digital LED displays, bold colour schemes. Figma Make allowed immediate translation of these aesthetic references into working UI components.
Studied Winamp and Windows Media Player's visual language—chrome window treatments, digital LED displays, bold colour schemes. Figma Make allowed immediate translation of these aesthetic references into working UI components.
Information Architecture
Built iteratively: Upload Screen → Main Player View → Gallery Selection → Fullscreen Mode. Added features like drag-and-drop with animated rainbow borders, 70vh visualisation canvas, live thumbnail generation, and immersive fullscreen mode through conversational requests.
Built iteratively: Upload Screen → Main Player View → Gallery Selection → Fullscreen Mode. Added features like drag-and-drop with animated rainbow borders, 70vh visualisation canvas, live thumbnail generation, and immersive fullscreen mode through conversational requests.
Visual Design
Retro-futurism with dark backgrounds, digital displays, beveled chrome effects, and multiple Winamp-inspired themes. Figma Make enabled rapid theming iterations and real-time preview of colour scheme changes.
Retro-futurism with dark backgrounds, digital displays, beveled chrome effects, and multiple Winamp-inspired themes. Figma Make enabled rapid theming iterations and real-time preview of colour scheme changes.
Interaction Design
Refined smooth 800ms fade transitions, intelligent shuffle with 3-8 second random intervals, and smart algorithm preventing recent repeats through conversational refinement. Could describe desired behaviour and immediately test results.
Refined smooth 800ms fade transitions, intelligent shuffle with 3-8 second random intervals, and smart algorithm preventing recent repeats through conversational refinement. Could describe desired behaviour and immediately test results.
Technical Implementation
Responsive Canvas
Described the need for viewport-adaptive rendering, and Figma Make generated HTML5 Canvas with Web Audio API that scales dynamically—normal view uses `window.innerWidth × (innerHeight × 0.7)`, fullscreen uses full viewport, thumbnails use fixed 300×169.
Described the need for viewport-adaptive rendering, and Figma Make generated HTML5 Canvas with Web Audio API that scales dynamically—normal view uses `window.innerWidth × (innerHeight × 0.7)`, fullscreen uses full viewport, thumbnails use fixed 300×169.
20 Visualisations Created Conversationally
Rather than manually coding algorithms, I described visual concepts:
Rather than manually coding algorithms, I described visual concepts:
"Wave-based patterns that respond to bass frequencies"
"Circular patterns with iridescent colors"
"Geometric kaleidoscope that mirrors and rotates"
"Particle systems that burst with beat detection"
Figma Make translated these descriptions into working Canvas implementations with real-time audio reactivity, allowing focus on creative direction rather than mathematical implementation.
Results & Impact
Speed of Development
What traditionally would require weeks of Canvas API research was achieved through iterative conversation. Figma Make handled complex technical implementation while I focused on user experience and aesthetic refinement.
What traditionally would require weeks of Canvas API research was achieved through iterative conversation. Figma Make handled complex technical implementation while I focused on user experience and aesthetic refinement.
Quality of Output
Delivers zero-friction drag-and-drop upload, instant playback, seamless effect switching between 20 unique visualisations, and smooth 60fps performance across all devices.
Delivers zero-friction drag-and-drop upload, instant playback, seamless effect switching between 20 unique visualisations, and smooth 60fps performance across all devices.
Creative Freedom
By removing technical barriers, Figma Make enabled pure creative exploration. I could request "DNA helix visualisation" or "wormhole effect" and see working implementations immediately, allowing artistic iteration rather than algorithmic debugging.
By removing technical barriers, Figma Make enabled pure creative exploration. I could request "DNA helix visualisation" or "wormhole effect" and see working implementations immediately, allowing artistic iteration rather than algorithmic debugging.
Reflection
What Figma Make Enabled
Rapid translation of visual concepts into working code
Focus on creative direction over technical implementation
Instant preview and iteration on complex Canvas animations
Contextual understanding for refinements ("make glows brighter," "remove nebula," "ensure thumbnails generate in fullscreen")
Professional-grade output without deep audio visualisation expertise
The Power of Conversational Development
Traditional development separates design thinking from technical execution. Figma Make collapsed this barrier—I could think and speak like a designer while getting developer-quality output. This fundamentally changed how quickly vision became reality.
Traditional development separates design thinking from technical execution. Figma Make collapsed this barrier—I could think and speak like a designer while getting developer-quality output. This fundamentally changed how quickly vision became reality.
Conclusion
This project demonstrates Figma Make's power to transform creative vision into sophisticated web applications. By handling complex Canvas API rendering, Web Audio API frequency analysis, and responsive design through natural conversation, Figma Make enabled me to build a professional audio visualizer that bridges nostalgic desktop media player experiences with modern web capabilities.
The result proves that AI-assisted development can democratise complex technical domains like audio visualisation, making them accessible to designers who have the vision but not necessarily years of specialised coding experience.
Technologies: React, TypeScript, Canvas API, Web Audio API, Tailwind CSS
Platform: Figma Make (AI-assisted development)
Platform: Figma Make (AI-assisted development)
