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

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

Copynpm install piixpal

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

Copy// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    <section className="hx hx-disc">
      <div className="hx-copy">
        <p className="hx-k">New album · out Friday</p>
        <h1>Spectrum</h1>
        <p>Eleven songs, pressed on light.</p>
        <piix-glow-button look="chrome">Pre-save</piix-glow-button>
      </div>
      <piix-fx kind="disc" bg="none"></piix-fx>
    </section>
    
    <style>
    .hx{position:relative;min-height:520px;overflow:hidden;color:#fff;font-family:"Bricolage Grotesque",system-ui,sans-serif;display:grid;align-content:end;justify-items:start;gap:18px;padding:56px;box-sizing:border-box}
    .hx h1{position:relative;margin:0;font-size:clamp(44px,7vw,96px);font-weight:800;letter-spacing:-.05em;line-height:.88}
    .hx p{position:relative;margin:0}
    .hx-k{font:400 12px/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
    .hx-disc{background:#000;grid-template-columns:1fr 1fr;align-items:center;align-content:center}
    .hx-disc piix-fx{height:460px}
    .hx-key{background:#000}
    .hx-key piix-fx{position:absolute;inset:0 0 10% 35%;width:auto;height:auto}
    .hx-key h1{font-weight:300}
    @media (max-width:760px){.hx-disc,.hx-por,.hx-dots{grid-template-columns:1fr}}
    </style>
  );
}