Copy<piix-hero image="your-picture.jpg">
  <p class="eyebrow">Set 001</p>
  <h1>Escape the ordinary.</h1>
  <piix-glow-button look="chrome">Find out more</piix-glow-button>
</piix-hero>

Give <piix-hero> any picture with image="…" and it keeps the picture exactly as it is, but brings it to life on the GPU: brighter parts sit nearer and shift with the pointer, glowing areas breathe and bloom, heat haze ripples over the hottest parts, the camera breathes slowly and a soft light sweeps across. Same effect on its own: <piix-image-fx effect="alive">.

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 glass image hero (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/hero.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-hero image="your-picture.jpg">
      <p className="eyebrow">Set 001</p>
      <h1>Escape the ordinary.</h1>
      <piix-glow-button look="chrome">Find out more</piix-glow-button>
    </piix-hero>
  );
}

Usage

Copy<piix-hero image="your-picture.jpg">
  <p class="eyebrow">Set 001</p>
  <h1>Escape the ordinary.</h1>
  <piix-glow-button look="chrome">Find out more</piix-glow-button>
</piix-hero>

API reference

Accessibility

• The words are real HTML.
• The moving picture is decoration; describe it in your copy if it matters.
• With reduced motion the picture holds still.