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

Thin laser lines flicker down out of a glowing orange fog and strike a raymarched mound of rock, lighting it from above. The beams drift with the pointer. A hero for anything that should feel like an event.

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 laser peak (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="beam" height="480px"></piix-fx>
  );
}

Usage

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

Examples

As a hero

Give Hero an fx and your content sits on top.

Copy<piix-hero fx="beam" 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>

In your colours

Copy<div class="ex-row">
  <piix-fx kind="beam" palette="sunset" height="200px"></piix-fx>
  <piix-fx kind="beam" palette="ocean" height="200px"></piix-fx>
  <piix-fx kind="beam" 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.