https://github.com/hexagoncircle/pixel-canvas

Web Component that applies a shimmering pixel background on element hover
https://github.com/hexagoncircle/pixel-canvas

Last synced: 21 days ago
JSON representation

Web Component that applies a shimmering pixel background on element hover

• Host: GitHub
• URL: https://github.com/hexagoncircle/pixel-canvas
• Owner: hexagoncircle
• License: mit
• Created: 2024-12-03T14:44:09.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-12-03T14:56:11.000Z (3 months ago)
• Last Synced: 2024-12-03T15:44:15.227Z (3 months ago)
• Language: JavaScript
• Size: 6.84 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# pixel-canvas

Web Component that applies a shimmering pixel background on element hover.

🖋️ Read the blog post: https://ryanmulligan.dev/blog/pixel-canvas/

## Usage

Include the component script and then insert a pixel-canvas custom element inside the container it should fill.

```html



  

  



```


## Options

- `data-colors`: Comma-separated list of color values; i.e. `"#e0f2fe, #7dd3fc, #0ea5e9"`

- `data-gap`: Amount of space between each pixel. Accepts values between `4` and `50`.

- `data-speed`: Controls the general animation duration. Accepts values between `0` and `100`.

- `data-no-focus`: When any sibling element is focused, the animation plays. This disables the animation on focus events.

⚠️ If reduced motion preferences are set, the pixels all fade in at once (no stagger) and do not shimmer (speed is set to `0`).

Example with options:

```html



  

  



```