CSS Blurry Christmas Lights


Lots of blurry colored lights make for a great #holiday background. I set out to create a procedurally generated background that could be tweaked easily. The effect uses a pure #css solution. #SASS variables are used to simplify the color application. This demo uses JavaScript to randomize the color and position of the lights.

XMas Theme


Added a theme file to the root of #Flux core. This allows custom coloring of the #Angular Material interface, as well as any global #CSS that’s UI specific for each project. Xmas Eve Nightmare is getting its usual red and green coloring.

Zeta o’ Lantern


Wanted to give the site an extra #halloween touch. I’ve been working the Zeta o’ Lantern into my blogs for a long time. This one features a glowing candle-lit effect using a div with a #css background transition and color changed randomly with #JavaScript

Audio Vizualizer


The pulsing radio light is a feature I always wanted in War of the Worlds Broadcast but never had a way to pull it off. That is until I found this article, which explains that you can pipe the output from an #html5 #audio element into the #WebAudioAPI. That allowed me to measure the decibel... Read the full article

Plugins and Filters


I expanded the StageHand object to accept #plugins. It was necessary to place the #martian plants outside of the window stage. The original War of the Worlds Broadcast was supposed to have the martian plants wither and die before fading away. Using #CSS #filters the plants now turn grey before fading out.



In order to add the Tripod heat-ray effect I had to expand the Stage Hand element generation to include a child element. The beam overlays the main walk cycle and fades in and out to create the shooting effect.

Stage Hand


Moving to #CSS #animation simplifies the #JavaScript quite a bit. I threw away all of the #jQuery animation and replaced it with a class that simply adds and removes HTML elements.

CSS Paint API: Animated Gradient


Rather than write out a complex linear-gradient property to the style tag, this approach with the #CSS Paint API uses a single numeric value. The gradient structure is offloaded to a #JavaScript worklet for cleaner code. Right now the Paint API works only in Chrome and Opera.