Marble warp

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

Noise feeding into noise feeding into noise: the classic domain-warp trick, so the colour bands fold and curl like ink on water. Busy, so it suits short sections and headers more than long reading.

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 marble warp (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="warp" height="420px"></piix-shader>
  );
}

Usage

Copy<piix-shader kind="warp" 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="warp" 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="warp" palette="ocean" height="180px"></piix-shader>
  <piix-shader kind="warp" palette="gameboy" height="180px"></piix-shader>
  <piix-shader kind="warp" 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="warp" 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.