Mood lights

How to simulate mood lights atmospheres in your browser

The Mood Light Ambient Lighting Generator is a browser-based tool that renders animated color light effects on a full-screen canvas in real time. It requires no installation and runs as a static HTML file using the Canvas 2D API and the requestAnimationFrame rendering loop. The tool offers 27 predefined mood presets, five gradient modes, a brightness control, and a fully customizable color palette.

How the animation loop works

The rendering engine uses a two-phase cycle that alternates between a hold phase and a fade phase for each color in the active sequence. During the hold phase, the canvas displays the current color steadily for a configurable duration defined by the “Duration per color” slider. During the fade phase, the engine transitions from the current color to the next one using an ease-in-out interpolation curve.

The ease-in-out function accelerates the transition at the start and decelerates it at the end, preventing abrupt linear color jumps on screen. A thin progress bar at the bottom of the canvas advances from left to right during each phase to indicate the current cycle position. The brightness parameter is applied at render time by multiplying each RGB channel value by a factor between 0.1 and 1.0.

The 27 mood presets

Each mood preset is a self-contained configuration that defines its own color palette, duration, fade time, gradient mode, and sequence order. Clicking a mood card immediately loads its settings into all controls and replaces the current palette with the mood’s ten predefined colors. A thumbnail preview using a horizontal gradient across all ten colors is rendered on each card to represent the mood visually before activation.

The presets are organized around five thematic axes: wellbeing, energy, emotion, time of day, and seasons.

The wellbeing axis includes Zen, Calm, Sleep, Meditation, Breathing, Relaxation, and Spa, all configured with slow fade times and radial or vertical gradients. The Breathing preset uses a ping-pong sequence between green tones, which is specifically designed to support cardiac coherence breathing exercises. The Sleep preset uses sequential solid dark tones that progressively darken toward black to accompany the natural transition into sleep.

The energy axis includes Focus, Energy, and Workout, all configured with short durations, fast fades, and dynamic gradient directions. The Workout preset uses a random sequence of high-contrast colors with a horizontal gradient to produce a high-energy visual rhythm. The Focus preset uses sequential solid blue tones with a 1.5-second fade to maintain a calm but alert visual environment during work sessions.

The emotion axis includes Happiness, Love, Nostalgia, Melancholy, Romantic, and Creativity, each mapped to a specific color family. The Melancholy preset uses desaturated blue-grey tones with a vertical gradient and a slow 6-second hold to create a reflective atmosphere. The Creativity preset uses a random sequence of ten saturated multicolored tones with a diagonal gradient to generate an unpredictable visual flow.

The time of day axis includes Morning, Sunset, and Night, each simulating the natural color temperature shift across the day. The Morning preset transitions from deep blue tones to warm yellows and white using a vertical gradient in sequential order. The Night preset uses very dark navy tones with a vertical gradient and a slow 5-second hold to simulate a low-light evening environment.

The seasons axis includes Spring, Summer, Autumn, and Winter, plus Nature, Ocean, Fire, and Aurora as additional environment presets. The Autumn preset uses warm orange, brown, and amber tones with a diagonal gradient and a ping-pong sequence to evoke falling leaves. The Aurora preset combines green, teal, and violet tones with a horizontal gradient to simulate the color structure of polar auroras.

Customizing the palette

The custom palette section displays the active color chips in a horizontal row with a plus button at the end of the list. Clicking the plus button opens a color picker popup where the user enters a hex value directly or selects a color using the native input. The popup includes Copy and Paste buttons to transfer hex values from the clipboard, making it easy to import colors from external design tools.

Hovering over any existing chip reveals a remove button in its top-right corner, which deletes that color from the current sequence. The tool enforces a minimum of two colors at all times because the transition engine always requires a current and a next color to render. When a color is added or removed manually, the active mood card is deselected and a “Custom palette” label appears on the canvas.

The five gradient modes

Five gradient modes are available and can be changed independently of the active mood preset at any time during playback.

Solid color fills the entire canvas with a single blended color computed by linear interpolation between the two active palette values.
Horizontal gradient draws a left-to-right gradient between the current and next color, updated at every frame during the fade phase.
Vertical gradient applies the same gradient along the vertical axis, which works particularly well with sky and atmospheric mood presets.
Radial gradient places the first color at the center and radiates toward the second color at the canvas edges, simulating a spotlight effect.
Diagonal gradient runs from the top-left to the bottom-right corner and produces a dynamic angled light effect suited to energy presets.

The three sequence orders

Sequential plays the colors in their palette order and loops back to the first color after the last one, which produces a predictable cycle.
Random generates a shuffled list of color indices that is extended automatically as the animation progresses, ensuring no fixed repetition pattern.
Ping-pong plays the palette forward then backward, which avoids abrupt hue jumps between the last and first colors of the active palette.

Timing and brightness controls

The “Duration per color” slider ranges from 0.5 to 20 seconds and controls how long each color is held before the fade begins. The “Fade duration” slider ranges from 0.1 to 10 seconds and sets the length of the ease-in-out transition between two consecutive colors. The brightness slider ranges from 10% to 100% and reduces all RGB channel values proportionally without affecting the gradient mode or sequence.

Full-screen mode and mood label

The full-screen button expands the canvas to cover the entire display surface and hides all interface elements from view. This mode is the primary intended use case for room lighting simulation, relaxation sessions, and ambient screen projection. The “Show mood name” option displays a floating label at the bottom center of the canvas that briefly shows the active mood name after each color transition.