Pixel UI/Media/Pixel image

Pixel image

Any picture, dithered, mosaicked or halftoned on the GPU, with a lens.

<piix-pixel-image>WebGL

<piix-pixel-image src="../site/launch-poster.jpg" alt="The Piixpal launch film" height="380px"></piix-pixel-image>

Effect

Palette

Pixel3

Lens

Shows your image as dithered pixels in the palette, as a mosaic, or as halftone dots. Move the pointer over it and a lens shows the real picture underneath; hover a mosaic and it resolves. It crops like object-fit: cover, and keeps the image's shape if you don't give it a height.

Installation

<!-- once, anywhere on the page: every component -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>

<!-- just pixel image (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/pixel-image.min.js"></script>

npm install piixpal

// once, in your entry file
import "piixpal";

// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    <piix-pixel-image src="../site/launch-poster.jpg" alt="The Piixpal launch film" height="380px"></piix-pixel-image>
  );
}

Usage

<piix-pixel-image src="../site/launch-poster.jpg" alt="The Piixpal launch film" height="380px"></piix-pixel-image>

Examples

Three effects

<div class="ex-grid">
  <piix-pixel-image src="../site/readme/hero.png" alt="" palette="gameboy"></piix-pixel-image>
  <piix-pixel-image src="../site/readme/hero.png" alt="" effect="mosaic"></piix-pixel-image>
  <piix-pixel-image src="../site/readme/hero.png" alt="" effect="halftone" palette="paper"></piix-pixel-image>
</div>

API reference

Attribute	What it does	Default
`src`	the image (on your site, or served with CORS)	–
`alt`	what it shows, for screen readers	–
`effect`	`dither` `mosaic` `halftone`	`dither`
`palette`	the colours: `lime` `aurora` `sunset` `ocean` `candy` `violet` `fire` `gameboy` `paper` `mono`, or your own, dark to light: `"#000,#6b4cff,#fff"`	`mono`
`pixel`	size of one pixel, in px	`3`
`lens`	`none` turns the lens off	–
`height`	any CSS length	`the image's own shape`

Accessibility

Announced as an image with your alt text.
With reduced motion the lens still works but nothing animates on its own.