Origins
Daydream Filter started as a video effect I built in FL Studio using the ZGameEditor Visualizer. One of its image effects exposed a “hue” parameter, and I automated it with an LFO to create a drifting, psychedelic look. The effect in my early videos was not as pronounced due to how the image effect in ZGE is implemented.
Later, during an independent research class in the LSU School of Art, I was working on my licensing service and website so I could release my first audio plugin. As the semester wrapped up, the licensing system still wasn’t finished, so I shifted focus to the website to make sure I had something concrete to show. While hanging out at a friend’s house, I suddenly remembered that old FL Studio effect and thought: What if I could shift the hues of media directly on my website?
A quick search ("change hue CSS") led me straight to Mozilla’s documentation. It was exactly what I needed. I implemented the effect on my site, and that was enough to earn an A‑ in the class.
Once the semester ended, I finally had time to expand the idea. I began building a browser extension that continuously cycles the hue of webpages, videos, and images. It took a week or two of digging through documentation and examples—this was pre‑AI, so everything required manual research—but eventually the extension came together.
How it works
The effect works by shifting the hue of every pixel each frame. In CSS, this is handled by the hue-rotate filter, which internally uses matrix transformations to rotate colors around the hue axis. In a custom shader, the same effect can be achieved with a pixel shader that remaps RGB values based on a hue rotation formula.
Speed control behaves differently depending on the implementation. In CSS, changing the animation duration can cause visible glitches because the browser may be using time deltas in a way that doesn’t update smoothly. This is why adjusting the speed doesn’t always apply in real time. A future update may move the animation logic to JavaScript so speed changes feel immediate.
In shader-based versions, you can avoid glitches by treating speed as a per‑frame rate of change rather than a per‑second or cycles-per-second value. This ensures the hue rotation advances smoothly regardless of frame timing.
Further Work
This implementation is simple enough to serve as the goal for a one‑day coding workshop or as an introductory project in a longer programming course. The core animation can be achieved in just a few lines of JavaScript, making it an accessible way to teach concepts like DOM manipulation, timers, string concatenation, array indexing, modulo arithmetic, and CSS filters — all while producing a visually interesting result instead of the usual fizzbuzz or basic sprite movement.
let d = document.getElementsByTagName("html")[0];
let hueShift = 0;
let i = setInterval(() => {
d.style = "filter: hue-rotate(" + hueShift + "deg)";
hueShift = ++hueShift % 360;
}, 30);These six lines demonstrate the entire loop: selecting an element, updating a parameter over time, and applying a visual transformation. It’s a compact example with a visually satisfying payoff, which makes it ideal for beginners.