Voice UI Visualization with CSS

Stylish effects with CSS Grids & Animations

Voice UI Input (visualization with CSS)

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.

Variation by messing around with the CSS animation and grid values

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.com/

You can follow the story here: https://dribbble.com/jessekorzan