The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
VyzFlow - Music Visualization Web App
VyzFlow transforms audio into real-time 3D visual art — exportable as MP4 for social, YouTube, or broadcast.
Built solo from concept to production. Live at vyzflow.com.
What's inside:
WebGL shader background (simplex noise + mouse reactivity)
6 animated preset cards — raw WebGL contexts, custom GLSL fragment shaders per mood (Void, Bloom, Neon, Organic, Minimal, Particles)
Web Audio API — real-time bass/mid/treble analysis
3D particle sphere (5000 points) that reacts to the music
Geometry morphing — 5 shapes (sphere → cube → torus → icosahedron → torus knot) with GPU mix() interpolation
MP4 export via OffscreenRenderer + MediaRecorder + mp4-muxer — portrait, landscape, square
Supabase auth + export logging + admin panel
Cloudflare Turnstile bot protection
PWA + mobile-responsive
Email lead capture before export
Stack: Vite · Three.js · GLSL (vite-plugin-glsl) · Web Audio API · Supabase · Vercel · mp4-muxer
URL: https://vyzflow.com
Want to help with development? Welcome)
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Hey Contra Peps!
Working on CRAV from few weeks, a burger website built around bold visuals, smooth interactions, and a playful browsing experience 🍔
Featuring custom loading transitions, interactive cursor effects, and immersive motion throughout the site. Fully coded from scratch with a strong focus on creative frontend development ✨
The website is now fully developed and getting ready to go live soon.
Here’s a small glimpse before the launch.
it's buttery smooth! Good work. is the code open source? 😄
New hero section concept. ✨ Cooked up a cursor component using Framer Workshop.
How is it so far?
Sick interaction!
Beergang was a stylized NFT character project by Goodganglabs, launched on DOSI and sold out during its release.
I helped shape the visual world of Beergang by developing character personalities for different species, visualizing their traits, and creating animated behaviors that made the IP feel more alive.
My work included character animation, rigging, lighting, rendering, and editing across music video-style content, social clips, promotional marketing assets, and interactive web experiences. I also created scroll-triggered character animations for the Beergang website, adapting the rigging and animation so the characters could move dynamically within the web experience.
I also directed the overall music video production, from concept and storyboard to layout, animation direction, visual mood, and final edit.
Beyond video content, I worked on a web-based avatar communication experience for NFT holders, collaborating with developers on STT-based interaction, ARKit-driven lip sync and facial expressions, and UI-triggered character animations. The goal was to let holders communicate through their own avatars in a fun and expressive way.
Sick work 🙌
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
portfolioreview
The best portfolios tell a story, not just show a grid. Share yours for feedback.
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?