Pixel UI/Delight/Scratch card

Scratch card

A scratch-off card: pixel foil over your content. Scratch it away.

<piix-scratch>DOM + canvas

Scratch the foil

You won 20% off

PIXEL20

<piix-scratch>
  <div style="padding:26px 32px;background:#fbf8f1;box-shadow:inset 0 0 0 3px #17121f;text-align:center;color:#17121f">
    <h3 style="margin:0 0 6px">You won 20% off</h3>
    <code style="font-size:28px;letter-spacing:.1em">PIXEL20</code>
  </div>
</piix-scratch>

Foil

Grain

Whatever is inside sits under a sheet of pixel foil with a sheen, a pattern and a label. Drag over it with a mouse, finger or pen and the foil comes off in pixel blocks, curling away as shavings that fall. Once most of it is gone, the rest flakes off by itself. Until then the content inside cannot be tabbed into; keyboard and screen-reader users get a real button that reveals it at once.

Installation

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

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

npm install piixpal

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

// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    <piix-scratch>
      <div style="padding:26px 32px;background:#fbf8f1;box-shadow:inset 0 0 0 3px #17121f;text-align:center;color:#17121f">
        <h3 style="margin:0 0 6px">You won 20% off</h3>
        <code style="font-size:28px;letter-spacing:.1em">PIXEL20</code>
      </div>
    </piix-scratch>
  );
}

Usage

<piix-scratch>
  <div style="padding:26px 32px;background:#fbf8f1;box-shadow:inset 0 0 0 3px #17121f;text-align:center;color:#17121f">
    <h3 style="margin:0 0 6px">You won 20% off</h3>
    <code style="font-size:28px;letter-spacing:.1em">PIXEL20</code>
  </div>
</piix-scratch>

Examples

Gold, for the big prize

FREE
shipping, forever

<piix-scratch foil="gold" label="Prize!" brush="34">
  <div style="padding:26px 32px;background:#fbf8f1;box-shadow:inset 0 0 0 3px #17121f;text-align:center;color:#17121f;width:260px">
    <b style="font-size:40px">FREE</b><br>shipping, forever
  </div>
</piix-scratch>

React to the reveal

Listen for reveal, or scratch to follow the progress.

Seat 14C

Scratch to find your seat.

<piix-scratch id="tix" foil="holo" label="Your ticket">
  <div style="padding:26px 32px;background:#fbf8f1;box-shadow:inset 0 0 0 3px #17121f;text-align:center;color:#17121f">Seat <b>14C</b></div>
</piix-scratch>
<p id="tixOut">Scratch to find your seat.</p>

<script>
  tix.addEventListener('reveal', () => tixOut.textContent = 'Enjoy the show!');
</script>

API reference

Attribute	What it does	Default
`foil`	`silver` `gold` `holo` `ink`	`silver`
`label`	the text printed on the foil	`SCRATCH ME`
`grain`	the size of one foil pixel, in px	`6`
`brush`	how wide you scratch, in px	`22`
`reveal`	how much must be scratched before it all comes off, 0 to 1	`.55`
`sound`	make sounds even without `<piix-chiptune>`; `off` keeps it silent	–

Events

Event	When
`scratch`	foil came off: `detail.progress`, 0 to 1
`reveal`	it is all off

Methods

Method	What it does
`reveal()`	take all the foil off now
`reset()`	put fresh foil back on

Accessibility

Until it is revealed, the content is inert: nothing under the foil can be focused by accident.
A real button sits on the card for keyboards and screen readers; Enter or Space reveals it.
With reduced motion the foil comes off at once instead of flaking.