Copy<piix-fx kind="glass" height="480px"></piix-fx>

Raymarched glass with real refraction, each colour bending by a slightly different amount, so the edges break into rainbows. It floats, turns, and tilts toward the pointer. Made for product heroes on black.

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 keycap (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 (
    <piix-fx kind="glass" height="480px"></piix-fx>
  );
}

Usage

Copy<piix-fx kind="glass" height="480px"></piix-fx>

Examples

As a hero

Give Hero an fx and your content sits on top.

Copy<piix-hero fx="glass" height="460px">
  <p class="eyebrow">New</p>
  <h1>Make it real</h1>
  <p>Smooth, realistic shaders behind your words.</p>
  <piix-glow-button look="chrome">Get started</piix-glow-button>
</piix-hero>

Floating on your page

With bg="none" only the object is drawn, so it floats on whatever is behind it.

Copy<piix-fx kind="glass" bg="none" height="320px"></piix-fx>

In your colours

Copy<div class="ex-row">
  <piix-fx kind="glass" palette="sunset" height="200px"></piix-fx>
  <piix-fx kind="glass" palette="ocean" height="200px"></piix-fx>
  <piix-fx kind="glass" palette="#050505,#1f1f24,#5a5a66,#bdbdc7,#ffffff" height="200px"></piix-fx>
</div>

API reference

Accessibility

• Announced as an image, unless it fills a parent (then it is decoration).
• With reduced motion it renders one still frame.
• Compiles in the background and only draws while on screen.