Pixel UI/Physics & time/Quake

Quake

One press and the page falls down. Throw the pieces, then put it all back.

<piix-quake>DOM + canvas

Quake

Everything here is a body.

Grab a piece and throw it. Press Quake again to put it all back.

Cards

They stack.

Still clickable

<piix-glow-button data-piix-quake="page">Quake</piix-glow-button>

<piix-quake id="page" style="height:420px">
  <h2 class="ex-h2">Everything here is a body.</h2>
  <p>Grab a piece and throw it. Press Quake again to put it all back.</p>
  <piix-glow-card style="width:220px"><h3>Cards</h3><p>They stack.</p></piix-glow-card>
  <piix-button tone="coral">Still clickable</piix-button>
</piix-quake>

Gravity

Bounce

A real rigid-body simulation running on your actual elements: boxes that collide at their corners, stack, slide with friction and come to rest. The ground shakes, every block inside falls, bounces and piles up; grab any piece and throw it. Text collides by the shape of its lines, not its full-width box. Pieces are only moved, never copied, so buttons and links still work while they lie on the floor. Press again and every piece flies back into place. Anything with data-piix-quake="its id" toggles it.

Installation

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

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

npm install piixpal

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

// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    <piix-glow-button data-piix-quake="page">Quake</piix-glow-button>
    
    <piix-quake id="page" style="height:420px">
      <h2 className="ex-h2">Everything here is a body.</h2>
      <p>Grab a piece and throw it. Press Quake again to put it all back.</p>
      <piix-glow-card style="width:220px"><h3>Cards</h3><p>They stack.</p></piix-glow-card>
      <piix-button tone="coral">Still clickable</piix-button>
    </piix-quake>
  );
}

Usage

<piix-glow-button data-piix-quake="page">Quake</piix-glow-button>

<piix-quake id="page" style="height:420px">
  <h2 class="ex-h2">Everything here is a body.</h2>
  <p>Grab a piece and throw it. Press Quake again to put it all back.</p>
  <piix-glow-card style="width:220px"><h3>Cards</h3><p>They stack.</p></piix-glow-card>
  <piix-button tone="coral">Still clickable</piix-button>
</piix-quake>

Examples

Click anywhere

With trigger="click" a click on an empty spot brings it down, and another puts it back.

Click an empty spot

Then throw things around.

<piix-quake trigger="click" style="height:360px">
  <h3 class="ex-h3">Click an empty spot</h3>
  <p>Then throw things around.</p>
  <piix-kbd>Q</piix-kbd> <piix-kbd>U</piix-kbd> <piix-kbd>A</piix-kbd> <piix-kbd>K</piix-kbd> <piix-kbd>E</piix-kbd>
</piix-quake>

Keep some things standing

data-fixed stays put and things land on it. data-body makes a whole group fall as one piece.

A shelf catches me

One piece
with two lines

Quake

<piix-quake id="shelf" style="height:380px">
  <div data-fixed style="position:absolute;left:30%;top:230px;width:40%;height:14px;background:#17121f"></div>
  <h3 class="ex-h3">A shelf catches me</h3>
  <div data-body style="display:inline-block;padding:12px 16px;background:#c6f432"><b>One piece</b><br>with two lines</div>
</piix-quake>
<piix-button tone="ink" size="sm" onclick="shelf.toggle()">Quake</piix-button>

API reference

Attribute	What it does	Default
`trigger`	`click`: a click on an empty spot toggles it	`none`
`gravity`	how hard things fall, 0.2 to 3	`1`
`bounce`	how much things bounce, 0 to 1	`0.15`
`snap`	pieces move on a grid this many px wide	`2`
`rest`	seconds before it puts itself back, or `never`	`never`
`sound`	make sounds even without `<piix-chiptune>`; `off` keeps it silent	–
`data-piix-quake`	on any element: clicking it toggles the quake with that id	–
`data-body`	on an element inside: it and everything in it fall as one piece	–
`data-fixed`	on an element inside: it stays standing, and things land on it	–

Events

Event	When
`quake`	it starts falling
`restore`	every piece is back in place

Methods

Method	What it does
`quake()`	bring it down
`restore()`	put everything back
`toggle()`	one or the other

Accessibility

Pieces are moved with transforms only: the page order, reading order and tab order never change.
Buttons and links keep working wherever they land.
It announces when things fall and when they are back.
With reduced motion the ground only shakes; nothing falls.