AI-Generated visual effects in Intuiface: the Interstellar demo

Best Practices + Tips & tricks
1

Interstellar Intuiface demo using vibe coding

This prototype explores the potential of combining Intuiface’s interactive capabilities with rich visual effects through AI-assisted coding (also known as “vibe coding”).

With the release of Player 8, we can now seamlessly blend HTML/JavaScript visual effects directly within Intuiface web experiences. This integration strategy gives us the best of both worlds: we can leverage Intuiface’s powerful built-in no-code capabilities while incorporating sophisticated visualizations that can’t be created natively. The result is experiences that feel cohesive and interactive, where users can engage with both traditional UI elements and dynamic visual effects.

A key enabler in this experiment is an Interface Asset (IA) created by the magic @Seb that facilitates communication between the main Intuiface XP and embedded HTML assets. This bridge allows us to create truly integrated experiences where native Intuiface interactions can control and trigger external visual elements.

Vibe coding in action

As a no-code user myself, I was able to create this space travel demo entirely through AI assistance using Claude. The process was conversational development through a series of iterations where I described the visual effect I wanted to achieve. I provided examples of existing effects I liked from sources like codepen.io, and Claude adapted and combined them to create something unique. We refined the timing, colors, and visual impact through simple requests like “make it last longer” or “enhance the pulsing effect.”
The AI generated all the JavaScript code for the space travel visualization, which I then embedded as an HTML asset in Intuiface.

The technical flow

Here’s how the complete system works: I created a simple mobile web app called Interstellar Control that uses Intuiface’s web trigger APIs to send messages to the main Interstellar XP. A web trigger IA in the main Interstellar XP receives the messages and forwards them to Seb’s IA called HTMLFramePostMessage, which passes them to the embedded HTML frame.
The HTML frame contains the AI-generated visualization code and a simple message listener function:

javascript// Listen for postMessage events from Intuiface
window.top.addEventListener('message', function(event) {
    console.log("Message received:", event.data);
    
    // Check if the message is 'timetravel' from Intuiface
    if (event.data === 'timetravel') {
        console.log("Received 'timetravel' message, triggering time warp");
        startTimeWarp();
        return true;
    }
});

When this function detects the incoming ‘timetravel’ message, it triggers the time warp effect that transforms the gentle star field into an hyperspace journey.

Try your own

Since both the main Interstellar XP and the Interstellar Control are web apps, you can test them yourself online:

Interstellar
Interstellar Control

Feel free to download and examine how the main XP is built, including Seb’s HTMLFramePostMessage AI and the HTML/JavaScript code created by AI.

1 Like