Dot art hero
A dotted portrait that shimmers, scans and scatters from the pointer.
<piix-image-fx>WebGLNight shift
Always
watching.
<section class="hx hx-dots"> <piix-image-fx src="cat.jpg" effect="dots" palette="lime" alt="A cat drawn in green dots"></piix-image-fx> <div class="hx-copy"><p class="hx-k">Night shift</p><h1>Always<br>watching.</h1></div> </section>
Any picture as one-colour dot art in motion: every cell of dots flickers on its own, a bright scan rolls down, dots scatter away from the pointer and sparks drift off the dim edges. Feed it a dithered image like this cat, or any photo.
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 hero (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 (
<section className="hx hx-dots">
<piix-image-fx src="cat.jpg" effect="dots" palette="lime" alt="A cat drawn in green dots"></piix-image-fx>
<div className="hx-copy"><p className="hx-k">Night shift</p><h1>Always<br>watching.</h1></div>
</section>
);
}
Usage
<section class="hx hx-dots"> <piix-image-fx src="cat.jpg" effect="dots" palette="lime" alt="A cat drawn in green dots"></piix-image-fx> <div class="hx-copy"><p class="hx-k">Night shift</p><h1>Always<br>watching.</h1></div> </section>
Accessibility
- The words are real HTML.
- The picture is announced with its alt text.
- With reduced motion the dots hold still.