It converts any SVG into a dot-matrix icon and plays a smooth one-shot color wave from a chosen focal point on hover.

Add the component, then upload an SVG file or paste SVG code into the Source prop. No manual SVG editing is required.

You can control dot size, gap, optional padding, base and hover colors, stroke-to-fill behavior, and expansion to fine-tune how dense and bold the dot grid looks.

On hover, the color wave travels across the dot grid from your chosen focal point (for example, center, top-right) using a one-shot, non-looping animation so it feels clean, not distracting.

The component automatically adapts timing to the dot count to keep the animation snappy, but for very dense grids you can reduce dot size or gap to keep it light.