Sand

Copy<piix-sand>
  <h2 class="ex-h2">Touch these words.</h2>
  <p>Brush over a line and it falls apart, pours down and piles up on the words below. Stop, and every grain flies home.</p>
  <piix-button tone="ink">Sand piles on me</piix-button>
</piix-sand>

Every letter inside is redrawn as pixels, and every pixel is a grain in a real falling-sand simulation. Brush over a word and its grains come loose: they pour down, slide off each other into piles, land on the words below and on buttons and images (those stay solid), and you can sweep the piles around with the pointer. Stop for a moment and every grain flies back to the exact pixel it came from, and the real text returns. Your markup is never changed: the words stay in the page the whole time, for selection, search and screen readers.

Installation

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

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

Copynpm install piixpal

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

Copy// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    <piix-sand>
      <h2 className="ex-h2">Touch these words.</h2>
      <p>Brush over a line and it falls apart, pours down and piles up on the words below. Stop, and every grain flies home.</p>
      <piix-button tone="ink">Sand piles on me</piix-button>
    </piix-sand>
  );
}

Usage

Copy<piix-sand>
  <h2 class="ex-h2">Touch these words.</h2>
  <p>Brush over a line and it falls apart, pours down and piles up on the words below. Stop, and every grain flies home.</p>
  <piix-button tone="ink">Sand piles on me</piix-button>
</piix-sand>

Examples

Click to collapse

With trigger="click" one click brings it all down; with rest="never" it stays down until the next click.

Copy<piix-sand trigger="click" rest="never" grain="3">
  <h2 class="ex-h2" style="color:#6b4cff">Click me.</h2>
  <p>Once to bring it down, again to build it back.</p>
</piix-sand>

Around images

Images, buttons, inputs and anything with data-solid stay put, and the sand piles on them.

PreviewCode

Patch notes

Brush the words to the right of the picture and watch them pour down its edge and heap on the button below.

Grains that land on letters rest on them, and fall again when those letters crumble too.

Read more

From your own code

crumble() brings everything down, crumble(x, y, r) just one spot, rebuild() calls it home.

Copy<piix-sand id="logo" trigger="none" rest="never" grain="3">
  <h2 class="ex-h2">piixpal</h2>
</piix-sand>
<piix-button tone="ink" size="sm" onclick="logo.crumble()">Crumble</piix-button>
<piix-button tone="lime" size="sm" onclick="logo.rebuild()">Rebuild</piix-button>

API reference

Events

Methods

Accessibility

• Your text is never removed or rewritten: screen readers, selection and find-in-page see the real words the whole time.
• Buttons, links and inputs keep working, and stay visible, while everything around them is sand.
• With reduced motion the grains go home at once instead of flying.