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: 3 months 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 (7 months ago)
- Default Branch: main
- Last Pushed: 2024-12-05T01:29:18.000Z (7 months ago)
- Last Synced: 2025-04-09T17:19:58.543Z (3 months ago)
- Language: JavaScript
- Size: 17.6 KB
- Stars: 291
- Watchers: 6
- Forks: 17
- Open Issues: 1
-
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
```