Party lights

How to create smooth animated light effects in your browser

The Party Lights Color Crossfade is a browser-based tool that generates animated color transitions across a full-screen canvas in real time.It runs entirely as a static HTML file using the Canvas 2D API and requestAnimationFrame, with no external dependencies required. The tool is designed for party lighting simulations, ambient screen effects, and any context where smooth color cycling is needed.

How the animation engine works

The rendering loop uses a two-phase system alternating between a hold phase and a fade phase for each color in the sequence. During the hold phase, the current color remains static on screen for the duration defined by the “Duration per color” slider. During the fade phase, the canvas transitions smoothly from the current color to the next one using a smoothstep interpolation function.

The smoothstep formula ensures the transition accelerates at the start and decelerates at the end, avoiding abrupt linear color shifts. A progress bar at the bottom of the canvas reflects the current phase state in real time, advancing from left to right during each phase. The animation timer uses a delta time value capped at 100 milliseconds per frame to prevent large jumps after tab visibility changes.

Building and editing the color palette

The color palette is displayed as a row of colored chips above the settings panel, each representing one step in the animation sequence. Clicking the plus button opens a color picker popup where the user can enter a hex value manually or use the native color input. The popup also includes Copy and Paste buttons that interact with the system clipboard to transfer hex values between sessions.

Hovering over an existing color chip reveals a small remove button in the top-right corner of the chip. Clicking it removes that color from the palette, provided at least two colors remain in the sequence at all times. The tool enforces a minimum of two colors because the transition engine always requires a current color and a next color to function.

Using the preset palettes

Eighteen preset palettes are available, grouped into three categories: Nature, Soft, and Party. The Nature group includes Sunset, Ocean, Northern lights, Fire, Forest, and Midnight, each containing ten colors tuned to their theme. The Party group includes Rainbow party, Disco neon, Carnival, Christmas, Halloween, New Year, Tropical fiesta, and Pride.

Selecting a preset immediately replaces the current palette and resets the animation sequence to the first color of the new set. A hidden “Custom” option appears in the selector whenever the user manually adds or removes a color from an existing preset palette. This mechanism allows the tool to track whether the current palette matches a named preset or has been manually modified.

The five fade modes

The fade mode selector controls how the color is rendered on the canvas surface during both the hold and fade phases.

Solid color fills the entire canvas with a single interpolated color at each frame, producing a uniform flat surface transition. This mode produces the strongest and most immersive ambient light effect when the canvas is viewed in full screen.

Horizontal gradient draws a linear gradient from left to right, blending the current color on the left and the next color on the right. As the animation advances, the gradient shifts so that the incoming color progressively takes over the full width of the canvas.

Vertical gradient applies the same principle along the vertical axis, with the current color at the top and the next color at the bottom. This mode works particularly well with the Northern lights and Ocean presets, where vertical color progressions feel natural.

Radial gradient places the current color at the center of the canvas and radiates outward toward the next color at the edges. The effect simulates a spotlight or focused light source expanding and contracting as the animation cycles through the palette.

Diagonal gradient draws the gradient from the top-left corner to the bottom-right corner of the canvas surface. It produces a dynamic, angled light effect that feels more energetic than the horizontal or vertical gradient modes.

The three sequence orders

The order selector determines the sequence in which the tool cycles through the colors of the active palette.

Sequential plays the colors in the exact order they appear in the palette chip row, looping back to the first color after the last one. This is the most predictable mode and is recommended when the palette has been arranged to produce a specific visual progression.

Random generates a shuffled sequence of color indices and continuously extends it as the animation progresses through the list. No color is guaranteed to appear at a fixed interval, which creates an unpredictable and lively effect suited for party contexts.

Ping-pong plays the palette forward from the first to the last color, then reverses and plays it backward to the first color again. This mode avoids abrupt jumps between the last and first palette colors that can occur in sequential mode with contrasting hues.

Timing controls

The “Duration per color” slider sets the time in seconds that each color is held on screen before the fade transition begins. It ranges from 0.5 seconds to 15 seconds and directly controls the pace of the overall animation cycle across all colors. A value of 0.5 seconds combined with a short fade duration produces a rapid, high-energy light sequence suitable for dance settings.

The “Fade duration” slider sets the time in seconds for the transition between two consecutive colors in the sequence. It ranges from 0.1 seconds to 8 seconds and uses the smoothstep curve regardless of the value selected. Setting a long fade duration relative to the hold duration creates a continuous flowing effect with no visible static phase.

Full-screen mode and hex display

The full-screen button expands the canvas to cover the entire display, hiding all interface elements and filling the screen with the animation. This mode is the primary intended use case for party lighting, ambient projection, or screen-based mood lighting applications. Exiting full screen restores the interface and resumes the animation at the exact frame where it was when full screen was activated.

The “Show hex value” option displays the current interpolated hex color code as a floating label at the bottom center of the canvas. This feature is useful for designers who want to capture a specific color produced during a gradient transition between two palette entries.