Switchboard

Tap the grid, then tap outside of the grid

Glow

These switchboard lights are made using a grid of concentric circles that vary between different light levels. The glow of the lights is made with a :before pseudo element that has an opacity: 0 with a radial box-shadow attached. The box-shadow is changed depending on the light level state.

Animation

The randomness of the lights is made using an interval on each light that runs randomly between 0 and 3 seconds, which sets the state of the light to a random value in the states array. The intervalIdsare used to store the lights that have intervals active, so that I can clear them individually, if needed, later.

lights.forEach((light, index) => {
    const intervalId: number = setInterval(() => {
        if(isAnimating) {
            light.state = states[Math.floor(Math.random() * states.length)];
            document.querySelectorAll(`.${styles.light}`)[index].setAttribute('data-state', `${light.state}`);
        }
    }, Math.floor(Math.random() * 3000)) as unknown as number;
    intervalIds.push(intervalId);
});

Hover Design

The design that appears when hovering the grid is created by first cherry-picking indices in the lights array. Then, on hovering the grid, the isAnimating state is set to false, the lights are set to off, and the useEffect running the intervals is cleared on each light. All that's left is to set the selected lights to high.

Acknowledgements

I got the inspiration for this idea from Vercel's website. The switchboard of lights reminded me of those shows where they create a design in the sky with hundreds of drones, all in-sync, which gave me the idea for the hover animation into a design.