Pixel UI/Delight/Zipper

Zipper

A zipped-up panel of pixel fabric over your content. Pull it open.

<piix-zipper>DOM + canvas

Drag the pull down

Something new.

Hidden until you unzip it.

<piix-zipper>
  <div style="height:280px;padding:32px;background:#6b4cff;color:#fff">
    <h2 style="margin:0 0 8px;font-size:40px">Something new.</h2>
    <p>Hidden until you unzip it.</p>
  </div>
</piix-zipper>

Fabric

Teeth

A panel of fabric with a zip down the middle covers whatever is inside. Grab the pull and drag it down: the teeth come apart and the halves part in a V that widens above the pull, like a real zip. Let go halfway and it stays halfway. Pull it nearly to the bottom and it gives way: the halves fall aside and the content is yours. The pull is a real slider for keyboards.

Installation

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

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

npm install piixpal

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

// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    <piix-zipper>
      <div style="height:280px;padding:32px;background:#6b4cff;color:#fff">
        <h2 style="margin:0 0 8px;font-size:40px">Something new.</h2>
        <p>Hidden until you unzip it.</p>
      </div>
    </piix-zipper>
  );
}

Usage

<piix-zipper>
  <div style="height:280px;padding:32px;background:#6b4cff;color:#fff">
    <h2 style="margin:0 0 8px;font-size:40px">Something new.</h2>
    <p>Hidden until you unzip it.</p>
  </div>
</piix-zipper>

Examples

A leather wallet

Balance

$1,280

<piix-zipper fabric="leather" teeth="silver" style="width:320px">
  <div style="height:200px;padding:24px;background:#fbf8f1;color:#17121f">
    <b>Balance</b>
    <div style="font-size:44px;font-weight:800">$1,280</div>
  </div>
</piix-zipper>

Open it from code

open() unzips all the way, close() zips it back up.

Surprise!

Open

<piix-zipper id="bag" fabric="ink" teeth="lime" style="width:320px">
  <div style="height:180px;padding:24px;background:#c6f432;color:#17121f"><b>Surprise!</b></div>
</piix-zipper>
<piix-button tone="ink" size="sm" onclick="bag.open()">Open</piix-button>
<piix-button tone="lime" size="sm" onclick="bag.close()">Close</piix-button>

API reference

Attribute	What it does	Default
`fabric`	`denim` `leather` `lime` `ink`	`denim`
`teeth`	`brass` `silver` `lime`	`brass`
`pixel`	size of one pixel, in px	`3`
`sound`	make sounds even without `<piix-chiptune>`; `off` keeps it silent	–

Events

Event	When
`pull`	the pull moved: `detail.progress`, 0 at the top to 1 at the bottom
`open`	it gave way and the content is uncovered

Methods

Method	What it does
`open()`	unzip all the way
`close()`	zip it back up

Accessibility

The pull is a slider: arrow keys move it, Enter or End opens it all, Home closes it.
Until it is open, the content is inert, so it cannot be tabbed into behind the fabric.
With reduced motion the halves are gone at once instead of falling.