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 and to achieve a suitable visual effect. CSS animations display: grid 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 would be helpful. But with minimal CSS knowledge, you can still follow along. display: grid 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 makes laying this out very easy. CSS grid Refer to this file, starting at line #70: https://github.com/jessekorzan/voice-visualizer/blob/master/styles.scss Learn more about here: display:grid https://css-tricks.com/snippets/css/complete-guide-grid/ The grid alignment is an opportunity to have a little fun Line #78, has a few variants… in my examples, one is aligned centre and the other at the bottom ( ). align-items, 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 ( ). 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. .voice-coder 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
