Psychedelic lights

How to create hypnotic animations in your browser

The Psychedelic lights Generator is a browser-based tool that renders animated visual effects in real time using the HTML5 Canvas API. It requires no installation, no plugin, and no external library — the entire rendering engine runs as a static HTML file. The tool offers eight distinct visual styles, twelve color palettes, and three independent parameters to control the animation.

How the rendering engine works

Each frame is computed pixel by pixel using mathematical functions applied to the x and y coordinates of the canvas. The rendering loop uses requestAnimationFrame to synchronize each frame with the browser’s native refresh rate for smooth output. A delta time value is calculated between each frame to keep the animation speed consistent regardless of the display’s refresh rate.

The eight available visual styles

Each style produces a fundamentally different visual output based on a distinct mathematical approach to pixel coloring. Plasma combines four sine wave functions applied to the pixel coordinates and the elapsed time to generate fluid, organic color fields. The result is a continuously shifting pattern that resembles liquid surfaces illuminated by colored light sources from multiple angles. This style is the default and works well with any color palette, particularly Rainbow and Acid trip.

Kaleidoscope divides the canvas into radial segments using polar coordinates and applies fractal Brownian motion inside each segment. The number of segments is controlled by the intensity parameter, which directly increases or decreases the angular symmetry of the pattern. Rotating the time offset creates a spinning effect that amplifies the kaleidoscopic impression on screen.

Mandala maps each pixel to polar coordinates and applies trigonometric functions with configurable radial symmetry. The intensity parameter sets the number of symmetry axes, producing patterns that range from simple hexagons to dense geometric structures. This style produces the most structured and visually centered output of all eight available modes.

Waves multiplies two independent sine functions applied along the horizontal and vertical axes of the canvas. The crossing interference between the two wave planes creates a grid-like pattern that evolves continuously over time. Increasing the zoom value spreads the wave pattern across a larger surface area and reduces its apparent frequency.

Perlin Flow uses fractal Brownian motion with five octaves of Perlin noise to generate smooth, organic flow fields. The noise seed is offset by the animation time to produce a continuous lateral drift across the canvas surface. This style is the most computationally expensive of the eight and benefits from using the medium or low resolution setting.

Voronoi distributes a set of moving seed points across the canvas and colors each pixel based on its distance to the two nearest points. The number of seed points is proportional to the intensity value, which increases the density and complexity of the cell structure. The movement of each seed point is driven by sine and cosine functions of time, producing a continuously shifting cellular pattern.

Interference places four fixed wave sources on the canvas and computes the sum of their circular wave amplitudes at each pixel. The resulting constructive and destructive interference pattern creates concentric rings that intersect and overlap across the full canvas. Changing the zoom and intensity values alters the wave frequency and produces denser or more open interference grids.

Moiré superimposes two nearly identical sets of parallel lines at a slight frequency offset to produce moiré fringe patterns. The slight difference in frequency between the horizontal, vertical, and diagonal components creates slowly drifting interference bands. This style is particularly effective with monochromatic palettes such as Mono cyan, Mono magenta, or Black & white.

Controlling the animation parameters

Three sliders are available to adjust the visual output independently from the style and palette selection.

The speed slider ranges from 0.1 to 5 and multiplies the rate at which the time variable advances in the rendering function. A value of 0.1 produces a very slow, meditative drift, while a value of 5 creates a fast and visually intense animation. Speed changes take effect immediately on the current frame without resetting or interrupting the animation loop.

The zoom slider ranges from 0.2 to 5 and scales the spatial frequency of the pattern across the canvas surface. A low zoom value stretches the pattern and reduces the number of visible repetitions within the canvas boundaries. A high zoom value compresses the pattern and increases the density of shapes, edges, and color transitions per pixel.

The intensity slider ranges from 0.1 to 3 and influences the internal complexity parameter passed to each rendering function. Its exact effect depends on the active style: it controls segment count in Kaleidoscope, symmetry axes in Mandala, and cell density in Voronoi. In wave-based styles, it directly multiplies the spatial frequency of the sine functions applied to each pixel coordinate.

Choosing a color palette

Twelve color palettes are available, each defined by a mathematical formula that maps a normalized value between 0 and 1 to an RGB color. Rainbow, Acid trip, and Electric neon use sine wave phase offsets to cycle through the full color spectrum with varying contrast. Fire & lava, Deep ocean, Sunset, and Tropical forest use piecewise linear gradients to simulate natural color progressions. The three monochromatic options — Mono cyan, Mono magenta, and Mono gold — vary brightness along a single color axis for minimal output.

Render resolution and performance

The resolution selector offers three options: low at 25%, medium at 50%, and high at 100% of the canvas’s physical pixel size
The low setting renders one pixel for every four physical pixels and is recommended for Perlin Flow and Voronoi on slower devices. The high setting produces the sharpest output but requires the browser to compute a color value for every pixel on screen at each frame.

Capturing and saving an output frame

The Capture button saves the current canvas frame as a PNG file and downloads it directly to the user’s device. The filename includes the active style name and a Unix timestamp to make each exported frame uniquely identifiable. The exported image reflects the exact frame rendered at the moment the button is clicked, at the current canvas resolution.