Liquid metal

Copy<piix-shader kind="liquid" height="420px"></piix-shader>

A height field shaded like polished metal, with sharp highlights sliding over it. In mono it is pure chrome; in a colour palette it turns into anodised metal.

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 liquid metal (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/shader.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-shader kind="liquid" height="420px"></piix-shader>
  );
}

Usage

Copy<piix-shader kind="liquid" height="420px"></piix-shader>

Examples

Behind your content

With fill it sits behind everything else in the element it's in. Give that element position: relative (the shader does this for you if it's static).

Copy<section class="ex-fill">
  <piix-shader kind="liquid" fill pixel="5"></piix-shader>
  <h2>Ship it loud</h2>
  <p>Your content sits on top.</p>
</section>

Other palettes

Every palette works with every background.

Copy<div class="ex-row">
  <piix-shader kind="liquid" palette="ocean" height="180px"></piix-shader>
  <piix-shader kind="liquid" palette="gameboy" height="180px"></piix-shader>
  <piix-shader kind="liquid" palette="#0b0a10,#3a2a6b,#ff6b4a,#ffe8a8" height="180px"></piix-shader>
</div>

Smooth bands

dither="0" swaps the dither pattern for flat colour bands, like a poster.

Copy<piix-shader kind="liquid" dither="0" pixel="6" height="220px"></piix-shader>

API reference

Accessibility

• It is decoration: hidden from screen readers.
• With reduced motion it renders one still frame.
• It only draws while it is on screen, and every Pixel UI component shares one GPU context.