Dot statue hero
A marble statue in white dots that shimmer, scan and scatter.
<piix-image-fx>WebGLMuseum of the future
Carved
in light.
<section class="hx hx-dots hx-mono"> <div class="hx-copy"><p class="hx-k">Museum of the future</p><h1>Carved<br>in light.</h1></div> <piix-image-fx src="statue.jpg" effect="dots" palette="mono" alt="A marble statue drawn in white dots"></piix-image-fx> </section>
The same dot-art motion in white: every cell of dots flickers, a bright scan rolls down the statue, dots scatter from the pointer and sparks drift off the edges.
Installation
<!-- once, anywhere on the page: every component --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>
<!-- just dot statue 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 hx-mono">
<div className="hx-copy"><p className="hx-k">Museum of the future</p><h1>Carved<br>in light.</h1></div>
<piix-image-fx src="statue.jpg" effect="dots" palette="mono" alt="A marble statue drawn in white dots"></piix-image-fx>
</section>
);
}
Usage
<section class="hx hx-dots hx-mono"> <div class="hx-copy"><p class="hx-k">Museum of the future</p><h1>Carved<br>in light.</h1></div> <piix-image-fx src="statue.jpg" effect="dots" palette="mono" alt="A marble statue drawn in white dots"></piix-image-fx> </section>
Accessibility
- The words are real HTML.
- The picture is announced with its alt text.
- With reduced motion the dots hold still.