Pixel UI/Physics & time/Liquid

Liquid

Your section half full of pixel water, and the things in it float.

<piix-liquid>DOM + canvas

Make a splash.

Floats

Rides the waves.

Still clickable

<piix-liquid level=".45" style="height:420px;padding:28px 32px;box-sizing:border-box">
  <h2 class="ex-h2">Make a splash.</h2>
  <div style="display:flex;gap:16px;align-items:flex-end;margin-top:150px">
    <piix-glow-card style="width:200px"><h3>Floats</h3><p>Rides the waves.</p></piix-glow-card>
    <piix-button tone="coral">Still clickable</piix-button>
  </div>
</piix-liquid>

Water

Level

Pixel

A tank of water drawn in pixels across your section, at the level you choose. Anything whose bottom sits below the waterline rises and floats on the surface: it rides up and down on the wave beneath it, tilts with the slope, and pushes waves back as it bobs. Move the pointer through the water and it ripples; click and it splashes, throwing droplets that fall back in; scroll fast and the whole tank sloshes. Everything stays real: links and buttons work, even half under water.

Installation

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

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

npm install piixpal

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

// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    <piix-liquid level=".45" style="height:420px;padding:28px 32px;box-sizing:border-box">
      <h2 className="ex-h2">Make a splash.</h2>
      <div style="display:flex;gap:16px;align-items:flex-end;margin-top:150px">
        <piix-glow-card style="width:200px"><h3>Floats</h3><p>Rides the waves.</p></piix-glow-card>
        <piix-button tone="coral">Still clickable</piix-button>
      </div>
    </piix-liquid>
  );
}

Usage

<piix-liquid level=".45" style="height:420px;padding:28px 32px;box-sizing:border-box">
  <h2 class="ex-h2">Make a splash.</h2>
  <div style="display:flex;gap:16px;align-items:flex-end;margin-top:150px">
    <piix-glow-card style="width:200px"><h3>Floats</h3><p>Rides the waves.</p></piix-glow-card>
    <piix-button tone="coral">Still clickable</piix-button>
  </div>
</piix-liquid>

Examples

A lava lake

Same physics, different palette. calm sets how long the waves last.

Don't touch the floor

Raft

<piix-liquid palette="lava" level=".4" calm=".1" style="height:320px;background:#17121f;color:#f2eef8;padding:28px">
  <h3 class="ex-h3">Don't touch the floor</h3>
  <piix-button tone="sun" style="margin-top:150px">Raft</piix-button>
</piix-liquid>

Splash from code

splash(x, strength) drops something in, x in px from the left.

Drop a rock

<piix-liquid id="pond" palette="ocean" level=".5" style="height:260px"></piix-liquid>
<piix-button tone="sky" size="sm" onclick="pond.splash(Math.random() * pond.clientWidth, 1.5)">Drop a rock</piix-button>

API reference

Attribute	What it does	Default
`level`	how full, from 0 (empty) to 1 (brim)	`.55`
`palette`	`lagoon` `ocean` `slime` `lava` `ink`	`lagoon`
`pixel`	size of one pixel of water, in px	`3`
`calm`	how fast waves die down, 0 (they last) to 1 (at once)	`.3`
`sound`	make sounds even without `<piix-chiptune>`; `off` keeps it silent	–
`data-anchored`	on an element inside: it stays where it is, even under water	–
`data-float`	on a box inside: it floats as one piece instead of each thing in it floating alone	–

Events

Event	When
`splash`	a click or `splash()` drops something in: `detail.x`

Methods

Method	What it does
`splash(x, strength)`	drop something in at x (px from the left); strength around 1

Accessibility

Floating only moves things with transforms: reading order, tab order and clicks are unchanged.
The water is a picture laid over the content and lets clicks through.
With reduced motion the water lies flat and nothing bobs.