Synesthesia: Interactive Real-Time Fluid Simulation with Audio in the Browser

LinkDemo

Synesthesia is a browser-based real-time fluid simulation featuring interactive audio. The WebGL 2 project responds to touch, mouse movement, and keyboard shortcuts.

Key points

  1. Runs a real-time fluid simulation directly computed on the graphics card.
  2. Requires a modern browser (Chrome, Firefox, Safari, or Edge) with WebGL 2 and enabled hardware acceleration.
  3. Provides controls to paint by dragging, pulse by tapping, and toggle sound, music, palettes, and fullscreen mode via keyboard shortcuts.

Why it matters

The demo highlights the capabilities of WebGL 2 for computationally intensive graphical effects and interactive audiovisual experiments directly inside standard web browsers.

Analysis

This project illustrates the maturity of GPU-accelerated web experiences. By executing physics and visual simulations directly via WebGL 2 shaders, rich multimedia and generative art can run smoothly across supported browsers.

Mentioned links

Found in

Summary generated by AI (Gemini 3.8 Flash, 27 September 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • Repository:DavidHDev/canvas-ui

    Canvas UI: Creative WebGL and Shader Effects for HTML Interfaces

    Canvas UI is a component library that renders canvas effects—such as fluid simulations, shaders, and 3D scenes—directly over live, interactive HTML interfaces. It is framework-agnostic and supports React, Vue, Svelte, and vanilla JavaScript.

    4.9kstarsTypeScript

    Web development· Tool

  • Link:komputermechanic.com

    Orbit: Interactive Web Demo for a Spatial Computing System

    The web showcase introduces the concept of the 'Orbit Spatial System'. Centred around the tagline 'Less screen. More world.', the website demonstrates an immersive spatial display concept featuring interactive 3D elements.

    Web development· Demo

  • X post:Houdayfa

    Interactive Editor for Liquid Orbs and Glass Effects

    Houdayfa highlights a web-based tool for creating and customising liquid, glass-style orbs with adjustable colours, shapes, and visual effects in the browser.

    616bookmarks28.4kviews

    Web development· Tool

  • Repository:MengTo/seijaku

    Seijaku: Interactive Three.js 3D Walkthrough of a Kyoto Residence

    Seijaku is an interactive web demo by Meng To that delivers a continuous, scroll-based walkthrough of a virtual Kyoto residence. It combines procedural Three.js architecture, Web Audio soundscapes, and interactive material studies without requiring a build step.

    32starsHTML

    Web development· Demo

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Vienna
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Parts of this content were created with the assistance of AI.