Voice UI Visualization with CSS
Stylish effects with CSS Grids & Animations
Demo: Mobile Friendly, Alternative Style, Real-time Voice
Github: code samples
Recently, I had a fun look into what voice input could look and feel like. I’d thought I’d share a technique of pairing CSS animations and display: grid to achieve a suitable visual effect.
If you’re looking for ideas or a starting point for similar explorations, I hope this helps you :)
Feel free to take the code you need from here: https://github.com/jessekorzan/voice-visualizer
The Skinny
A working knowledge of SASS, SASS loops, CSS animations and display: grid would be helpful. But with minimal CSS knowledge, you can still follow along.
The markup is straight forward
https://github.com/jessekorzan/voice-visualizer/blob/master/index.html
Just wrap as many <span/>’s as you like inside a container. I called mine “.voice-coder”. Inside, I added 45 <span/>’s.
CSS in two parts
First, we look at the container and how CSS grid makes laying this out very easy.
Refer to this file, starting at line #70:
https://github.com/jessekorzan/voice-visualizer/blob/master/styles.scss
Learn more about display:grid here:
https://css-tricks.com/snippets/css/complete-guide-grid/
The grid alignment is an opportunity to have a little fun
Line #78, align-items, has a few variants… in my examples, one is aligned centre and the other at the bottom (flex-end).
Secondly, we need some cool looking bars. This is done by styling and animating the 45 <span/>’s.
Jumping in at line #87, we establish a sweet gradient (using background liner-gradient).
At line #110, to make it more “digital”, I’ve added a transparent PNG with some scan lines to the container (.voice-coder). This isn’t necessary, but it’s another opportunity to score some style points. You can try changing the opacity, rotating, using a different PNG, etc.
Animations
The final touch is adding the animations in CSS. Using SASS makes this is a breeze and keeps things readable.
The core idea here is changing up an animation slightly for every second and third <span/>. You can see I am alerting the <span/> heights to create bounciness at lines #88 and again at #100.
To complete the effect, we need to stagger the animations. A simple SASS loop to stagger the <span/> animation-delay does this nicely here (refer to line #93)
You can add more complexity here and change any of the values. It’s fun to mess around until you achieve something appropriate for your needs.
Conclusion
Yes, I could make a GIF if I just needed the illusion of “voice input”. But having some simple markup, I found I was better able to experiment quickly and broadly.
Essentially, it’s more effective learning what’s possible vs. mocking stuff up. And I find I get “better” design work having a prototype I can actually see in the browser (or hold in my hand). With some JS (and math) jazz hands, the effect could be much more realistic. If not 100% simulated from real voice input.
Visualizing real-time audio (replacing CSS animations with JS)
** Experimental prototype: https://voice-interface-001.netlify.app/
You can follow the story here: https://dribbble.com/jessekorzan