Solar Bars: an animated bar gradient in orange, gold and hot red
Solar Bars looks like an audio equalizer caught at golden hour. Eighteen bars of uneven height run across the frame in blazing orange, golden yellow and hot red, each fading into the near-black base along its length, and with Animate on their heights keep shifting. A Vignette of 30 frames the row, and the whole thing suits music, podcast, data and fitness products.
Make it yours
Thin or thicken the bars
Drop Bands from 18 to 8 for chunky blocks that feel like a bar chart, or take it to 24 for a dense spectrum. Fewer bars leave more of the dark base showing, which helps light text.
Harden the bar ends
Soft is at the default 45, which gives each bar a slightly feathered end. Lower it toward 10 for hard, digital tops, or raise Speed from 30 to 55 if the heights should change with more urgency.
FAQ
Does the bar animation react to real audio?
No. The bar heights follow a built-in noise pattern, so the movement resembles an equalizer but is not driven by sound. That also means there is nothing to wire up: it simply runs as a background. Use Speed to set how fast the heights change, or turn Animate off for a still frame.
How it works
Pick a starting point
Start from one of 28 looks such as Soft Mesh, Eclipse Rays or Riso Halftone, or choose a gradient type and one of 24 palettes.
Tune the gradient
Adjust scale, distortion, swirl and softness, add grain, glass panes or glass tiles, a dot, grid or line overlay, a second blended layer or a treatment such as halftone or pixel sort, and switch animation on with its own speed.
Preview and use it
See the gradient in landing page, card, mobile and sign up layouts, then sign in with a free UX Pilot account to use it on the canvas or export it.