Tony Moura Salgueiro
français
← work
Nubecula's interface on an animated pastel background, pink and blue: the bar with the title, the master volume and the settings, and the Waves, Forest, Rain and Fireplace cards, three of them playing.

● personal project▸ 01ANov 2023 — Mar 2026

Nubecula

role
Design and development
tools
  • React
  • Material UI
  • p5.js
  • GLSL
links

The idea

A page to set up a calm atmosphere: twelve ambiences (waves, forest, rain, fireplace, birds, crickets, wind, guitar, whale, Tibetan bowl, piano, frogs), each with its own volume, to mix freely. The project was born as Relax, my first React project; I picked it up again in 2026, and it became Nubecula, “little cloud” in Latin.

Seamless loops

An audio loop that restarts can be heard: a small jump, a silence, and the illusion breaks. So each sound plays two copies. Before one ends, the other starts, and the two crossfade over 2.8 seconds, along a cosine curve so the sum stays smooth.

The crossfade: the first copy's gain goes down while the second's goes up, along a cosine, over 2.8 seconds (1.2 seconds at least) before the loop ends.

A sound that breathes

A sound that is too regular ends up sounding false. As an option, each ambience's volume drifts slowly, at random and independently of the others, by 5 to 50% around its setting. The rain gets heavier, the wind drops, as outside.

A moving background

The background is a GLSL shader rendered by p5.js: warm and cool inks blending slowly through blend modes. Its six colours are set in the settings panel, and kept in the browser, with the master volume and the audio options. Immersive mode hides the interface and leaves only the background and the sound.

The settings panel open on the right: crossfade looping, volume oscillation and its intensity, then the background's six colours.
The settings: audio and the background's six colours.
Immersive mode: only the animated background, clouds of pink, peach and blue on a warm white.
Immersive mode: just the background and the sound.
Nubecula on a phone: the control bar at the top, then the Waves and Forest cards one under the other.
On a phone.

What I take from it

Two versions of the same project: first, audio players and sliders; in 2026, invisible loops, a living sound and a shader background. It measures the ground covered, and shows that a small personal project is worth coming back to.