A fluid you can hear. A world you can paint.
Move through six country-inspired atmospheres, where every gesture becomes light and sound.
Live demo ↗ · Screenshots · Run locally
Drag to draw luminous currents. Tap to release a pulse. Let go and autonomous painters keep the canvas moving. Sound begins after your first interaction, weaving your gestures into a generative ambient composition.
- Travel through color. Japan, India, Morocco, Brazil, Iceland, and Italy each bring a distinct palette, geometric atmosphere, and original musical mood.
- Find your reflection. Echo mirrors your strokes and pulses across the canvas.
- Keep a moment. Save the current canvas as a PNG, including its atmospheric background.
- Make room for the art. Hide the controls or enter fullscreen. The interface fades when you stop interacting.
- Return to the beginning. Choose Original to restore the first atmosphere and soundscape.
 India · Jaipur at dusk |
 Japan · Kyoto after rain |
 Iceland · The long blue hour |
 Morocco · Marrakech at midnight |
Screenshots are captured from the running app. The fluid is generative, so every visit looks a little different.
| Atmosphere | Colors | Backdrop |
|---|---|---|
| Japan | Rose, violet, ink blue | Repeating curved geometry |
| India | Saffron, rose, jeweled blue | Radial geometry |
| Morocco | Teal, blue, copper | Diamond geometry |
| Brazil | Jade, sunlight, ocean blue | Flowing wave lines |
| Iceland | Ice green, blue, violet | Soft luminous bands |
| Italy | Terracotta, gold, lagoon teal | Layered ripples |
These are artistic interpretations of places and colors. The soundscapes are original synthesized ambient compositions, not recordings of traditional music.
| Action | Control |
|---|---|
| Paint fluid | Drag / touch and move |
| Release a pulse | Tap / click |
| Change country | Country selector, arrows, or [ / ] |
| Toggle mirrored painting | Echo or E |
| Toggle sound | M |
| Cycle music | N |
| Create a burst | Space |
| Cycle original palettes | P, or 1–6 |
| Clear the fluid | C |
| Download a PNG | Save artwork or S |
| Toggle fullscreen | F |
| Hide / reveal the interface | H |
Keyboard shortcuts apply when a form control or button is not focused. On mobile, use the visible controls and touch gestures.
Requires Node.js for the small local server and build command. There are no npm dependencies to install.
git clone https://github.com/nikhillakra2007-tech/visuals.git
cd visuals
npm run devOpen http://127.0.0.1:4173 and touch the canvas to begin.
npm run buildThis checks the embedded JavaScript syntax and copies the standalone page into dist/index.html. The output can be served by a static host. index.html also works directly in a compatible browser.
WebGL 2 renders a fluid simulation with bloom and lighting. Web Audio generates the background music, gesture sounds, and crossfades. Plain HTML, CSS, and JavaScript keep the app self-contained; there is no application backend, account system, or API key.
index.html Complete experience: interface, shaders, sound, interactions
build.cjs Syntax check and static build
serve.cjs Local preview server
docs/screenshots/ Real captures used in this README
Use a browser with WebGL 2 and hardware acceleration. Rendering performance depends on the device. Google Fonts supplies the typography when online, with system-font fallbacks.
Public demo: synesthesia-echo-nk.lakraofficial2004.chatgpt.site
The current deployment uses Sites on Cloudflare's global network. Cloudflare has network locations in India, including Mumbai, New Delhi, Chennai, and Hyderabad. Routing is automatic; this deployment is not pinned to a specific Indian city, and the serving location can vary with network conditions.
The public app is a static page; its fluid simulation and audio run on your device. Source updates pushed to this repository do not automatically republish the current Sites deployment.
The foundation is Synesthesia by MIAAI Lab, from the original source repository. This edition retains that fluid-and-sound engine and adds Atlas country atmospheres, Echo painting, and an accessible save control.
Maintained by Nikhil Lakra. See THIRD_PARTY_NOTICES.md for source attribution.