Installation
One script tag gets you every component. Or load only the ones you use: each single file pulls in the small shared engine by itself, once.
Script tag
Paste this once, anywhere on the page. Then use any tag from these pages.
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>
Only what you use
Each component has its own file. They share one engine and one GPU context, however many you load.
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/glow-button.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/shader.min.js"></script>
npm
npm install piixpal
// once, in your entry file (main.js, layout.tsx, +layout.svelte…) import "piixpal";
React, Vue, Svelte, Astro
They are standard web components, so they work in any framework without a wrapper. In React use className as usual; attributes are plain strings.
import "piixpal";
export default function Hero() {
return (
<piix-hero kind="aurora">
<h1>Hello</h1>
<piix-glow-button>Start</piix-glow-button>
</piix-hero>
);
}
// vite.config.js: treat piix-* as custom elements
vue({ template: { compilerOptions: { isCustomElement: t => t.startsWith("piix-") } } })
<piix-glow-button palette="candy">Start</piix-glow-button>
<script>import "piixpal";</script> <piix-glow-button palette="candy">Start</piix-glow-button>
<script>import "piixpal";</script> <piix-shader kind="nebula" height="400px"></piix-shader>
Browser support
- Every evergreen browser with WebGL. Where WebGL isn't available, GPU components fall back to a still gradient in their palette and stay usable.
- If the GPU context is lost (a laptop switching graphics cards, say), they rebuild it by themselves.