Dot art
Any picture as one-colour dot art that shimmers, scans and scatters.
<piix-image-fx>WebGL<piix-image-fx src="../site/pixelui-30-poster.jpg" effect="dots" alt="A lake at sunset" height="440px"></piix-image-fx>
Effect
Glow
Every cell of dots flickers on its own, a bright scan rolls down the picture, dots scatter away from the pointer and sparks drift off the dim edges. Tint it with any palette.
Installation
<!-- once, anywhere on the page: every component --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>
<!-- just dot art (the shared engine loads itself, once) --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/image-fx.min.js"></script>
npm install piixpal // once, in your entry file import "piixpal";
// npm install piixpal
import "piixpal";
export default function Page() {
return (
<piix-image-fx src="../site/pixelui-30-poster.jpg" effect="dots" alt="A lake at sunset" height="440px"></piix-image-fx>
);
}
Usage
<piix-image-fx src="../site/pixelui-30-poster.jpg" effect="dots" alt="A lake at sunset" height="440px"></piix-image-fx>
API reference
| Attribute | What it does | Default |
|---|---|---|
src | the image (on your site, or served with CORS) | – |
src2 | the second image, for morph | – |
alt | what it shows | – |
effect | dots alive liquid rgb morph ripple streak zoom frosted code | liquid |
auto | morph on its own instead of on hover | – |
palette | the glow colours | sunset |
height | any CSS length | the image's own shape |
Accessibility
- Announced as an image with your
alttext. - With reduced motion the image holds still.