Add Pixel Shimmer Effects to Any Element on Hover – pixel-canvas

pixel-canvas is a lightweight web component that adds a dynamic shimmering pixel effect to any element’s background on hover.

When you hover over an element, a burst of tiny pixels illuminates, their glow spreading outward from the center. This visual effect can boost the interactivity and appeal of web elements, such as buttons, cards, and navigation items.

How to use it:

1. Download the package and load the main script “pixel-canvas.js” as a module in your HTML document.

<script type="module" src="/path/to/pixel-canvas.js"></script>

2. Insert the <pixel-canvas> custom element into the HTML element where you want the shimmering pixel effect to appear. The <pixel-canvas> element will automatically stretch to fill its parent container. The effect will activate when the parent container is hovered.

<div class="card">
  <pixel-canvas></pixel-canvas>
  <!-- More Elements Here -->
</div>

3. Specifies the colors of the pixels. You can use any valid CSS color format (hexadecimal, RGB, color names). If no colors are provided, it defaults to shades of light gray.

<pixel-canvas data-colors="#f00, #0f0, #00f"></pixel-canvas>

4. Controls the spacing between pixels. The value represents the pixel gap in pixels. The minimum accepted value is 4, and the maximum is 50. The default gap is 5.

<pixel-canvas data-gap="10"></pixel-canvas>

5. Adjust the animation speed. The speed is clamped between 0 (no animation) and 100. The default speed is 35. If the user’s device has reduced motion preferences enabled, the speed will be set to 0.

<pixel-canvas data-speed="50"></pixel-canvas>

6. Prevent the animation from running when sibling elements are focused. By default, the animation triggers on both hover and focus. To disable focus triggering:

<pixel-canvas data-no-focus></pixel-canvas>

How It Works:

The pixel-canvas component works by creating a grid of pixels on a <canvas> element, which is dynamically generated when the component is added to the page.

When a user hovers over the container or when it gains focus, the pixels expand and contract, simulating a shimmering effect.