Pixel UI/Motion/Reveal

Reveal

Content that dissolves in, pixel by pixel, when it scrolls into view.

<piix-reveal>WebGL

Your screenshot

<piix-reveal pattern="dither">
  <div class="shot">Your screenshot</div>
</piix-reveal>

Pattern

Edge

Duration1.1Pixel6

Wrap anything. Until it's on screen it hides under a layer the colour of the page; then that layer breaks up into pixels and falls away, with a glowing edge where it's dissolving. Once it's done the GPU rests.

Installation

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

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

npm install piixpal

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

// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    <piix-reveal pattern="dither">
      <div className="shot">Your screenshot</div>
    </piix-reveal>
  );
}

Usage

<piix-reveal pattern="dither">
  <div class="shot">Your screenshot</div>
</piix-reveal>

Examples

Staggered

Use delay to stagger a grid.

one

two

three

<div class="ex-grid">
  <piix-reveal><div class="shot">one</div></piix-reveal>
  <piix-reveal pattern="rain" delay=".2"><div class="shot">two</div></piix-reveal>
  <piix-reveal pattern="spiral" delay=".4"><div class="shot">three</div></piix-reveal>
</div>

API reference

Attribute	What it does	Default
`pattern`	`dither` `rain` `scan` `spiral`	`dither`
`color`	what it dissolves out of	`the background behind it`
`palette`	the glowing edge	`lime`
`duration`	seconds	`1.1`
`delay`	seconds to wait once it's on screen	`0`
`pixel`	size of one pixel, in px	`6`

Events

Event	When
`piix:revealed`	when it has finished

Accessibility

The content is in the page the whole time, so screen readers read it straight away.
With reduced motion it is simply shown.