With the arrival of Intuiface Player 8, which now runs on the Web, creators have new opportunities to push the boundaries of interactive design. One exciting direction is the ability to embed GPU-powered shaders as live, dynamic backgrounds — unlocking visuals that go far beyond static images or pre-rendered video loops.
Traditionally, animated backgrounds in digital signage are handled through video files. While visually appealing, videos are not interactive, and they offer limited flexibility once exported. With shaders, we get real-time rendering that can respond to inputs and adapt on the fly — opening the door for engaging, responsive environments in any experience.
What Are Shaders?
Shaders are small programs that run directly on the graphics processing unit (GPU). They’re primarily used in graphics engines to determine how pixels are drawn, and they power everything from realistic lighting and shadows in games to abstract visual art. Shaders are written in a language called GLSL (OpenGL Shading Language) and are often showcased on platforms like Shadertoy, where a vibrant community of visual coders shares mesmerizing, real-time creations.
My Workflow: From Shadertoy to Intuiface
For this experiment, I wanted to explore how shaders could be used to create interactive thematic backgrounds, inspired by the four classical elements: Earth, Air, Fire, and Water.
Here’s how I built the demo:
- Browsing for Inspiration
I explored Shadertoy.com and curated a few shader examples that represented each of the four elements. The Shadertoy community is incredibly creative, and there’s a wealth of code available under Creative Commons licensing. - Converting Shader Code with AI
Since Shadertoy shaders are written to run in their specific environment, they require adaptation to be embedded in standard HTML. I used Claude AI and a technique called vibe coding — a conversational way to code by iterating prompts and feedback with an AI assistant — to convert the GLSL shader code into standalone HTML files that could be rendered in a web view.
It took a few back-and-forths to get things just right, especially when fine-tuning for touch screens interactions, camera motion speed and overall user experience. - Building the Intuiface Experience
I created a simple experience in Intuiface using an Excel database to manage content. Each row represented an element and its associated HTML file. When a user taps a button, the background HTML asset is swapped dynamically — showcasing a new shader effect in real time.
A Word of Caution
Shaders are computationally intensive and require a modern GPU to run smoothly. Performance will vary depending on the complexity of the shader and the device used. For best results, test your experience on the target hardware before deploying it in a live environment.
Try It Yourself
Feel free to download the demo (10MB) or preview it at http://web.intuiface.com/shaders