Electric Button Animation

AI Overview: Electric Button Animation

This project is a highly interactive, "electric" themed button designed with a cinematic flair. Its primary purpose is to transform a simple user action—hovering or clicking a button—into a complex visual story. When a user interacts with the button, it doesn't just change color; it flickers to life, displays moving lightning bolts, and triggers a scripted animation sequence where various "tools" appear to install and repair the button's light bulb.

The project works by using a grid of invisible "sensor" divs to track mouse movement. These sensors use the CSS sibling selector to move a glow effect behind the button, creating a 3D parallax feel as the light follows your cursor. The button itself is built using SVGs for the internal filament and lightning bolts, which are animated to flicker and scroll when the button is active.

The most impressive part of the code is the "Focus" sequence. When the button is clicked (focused), a long chain of CSS keyframe animations is triggered. This sequence moves a "bulb" element around the screen while swapping through different cursor icons—like a hammer, a rotate tool, and a hand—to simulate a mechanical repair process before the light finally stays on.

Key Code Snippets

1. Mouse Tracking Areas
The HTML includes several "area" divs that act as invisible sensors across the screen.

<div class="area"></div>
<div class="area"></div>
<div class="area"></div>

2. Interactive Light Tracking
This CSS logic moves the background glow of the button depending on which invisible area the user is hovering over.

&:nth-child(2):hover ~ .button::before {
  transform: translate(-25%, 0);
}

3. The Electric Filament Animation
The "electric" look is achieved by animating the stroke-dashoffset of an SVG path, making it look like the wire is being charged with power.

@keyframes drawLine {
  0% { stroke-dashoffset: 500; }
  100% { stroke-dashoffset: 0; }
}

4. Scripted Tool Sequence
When the button is clicked, the CSS triggers a series of timed animations for different icons, such as this hammer, to create a "repair" story.

& .hammer {
  animation:
    fix 0.5s 4.9s ease-in-out forwards,
    fixing 0.2s 5.6s ease-in-out forwards,
    hide 0.1s 6.3s forwards;
}