Transform Audio with PixelWave: Real-Time Browser Visualizer

Transform Audio with PixelWave: Real-Time Browser VisualizerTransform Audio with PixelWave: Real-Time Browser Visualizer

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

Cnd Krsn

• 1d

PixelWave is a browser-based audio visualizer that turns any MP3 or WAV into real-time pixel animations. It includes 4 visualization modes, 4 color themes, a curated tape library, and a beat-sync game where the audio waveform becomes playable terrain. Built with vanilla HTML/CSS/JS and the Web Audio API. No server, no uploads — everything runs locally in the browser.

How I Used Stitch

I brought my concept into Stitch using "Start from existing design." Stitch streamed the generation of all screens directly to the canvas as separate editable frames. I used in-place AI edits to refine screens where the canvas reset mid-generation. Those screens defined the visual direction and component structure of the full build, deployed to Netlify.

The "Start from existing design" feature was the most useful part — importing my HTML file and getting 5 separate editable frames immediately saved a lot of time.

The main friction I encountered was with undo/redo: when I tried to undo a change on one frame, it reverted all frames back to an earlier state, not just the specific edit. This made iterating carefully on individual screens less predictable.

Overall Stitch significantly sped up going from concept to structured screens. Live Demo https://pixelwave-demo.netlify.app/

stitchchallenge Stitch Web Development

Sabrina Polanco

max

• May 27

Oooh very excited that Contra and Google Stitch just announced this challenge

One of the most interesting shifts happening in creative workflows right now is the move from static outputs to interactive systems.

Also… $10k prize pool.

Curious to see what people build 👀

brb gotta start working on my submission

stitchchallenge

Sharon Olusanya

• May 27

Amazing!

Talia Przybyszewski

pro

• May 27

AREA is a fictional creative technology studio exploring how AI-native workflows can shape modern digital identity design.

I used Google Stitch to explore and refine the brand direction through typography studies, interaction concepts, motion systems, colour exploration, and in-place AI edits before rebuilding the final experience in Next.js with Framer Motion and deploying it on Vercel.

The final site focuses on cinematic pacing, editorial restraint, atmospheric motion, and immersive interaction design inspired by modern creative studio websites.

Live Site: https://area-snowy.vercel.app

Stitch was strongest as a rapid creative direction and identity exploration tool. The in-place editing workflow made it easy to iteratively refine layouts, spacing, typography, and atmosphere while maintaining creative momentum.

The workflow became most powerful when paired with production tooling, using Stitch to establish the creative system first, then translating the final direction into code for deeper interaction and motion refinement.