Caustics
Light dancing on the bottom of a swimming pool.
<piix-fx>WebGL<piix-fx kind="caustics" height="480px"></piix-fx>
Colours
The bright, moving web of light you see underwater, over a soft blue gradient. Calm and endlessly watchable.
Installation
<!-- once, anywhere on the page: every component --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>
<!-- just caustics (the shared engine loads itself, once) --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/fx.min.js"></script>
npm install piixpal // once, in your entry file import "piixpal";
// npm install piixpal
import "piixpal";
export default function Page() {
return (
<piix-fx kind="caustics" height="480px"></piix-fx>
);
}
Usage
<piix-fx kind="caustics" height="480px"></piix-fx>
Examples
As a hero
Give Hero an fx and your content sits on top.
New
Make it real
Smooth, realistic shaders behind your words.
<piix-hero fx="caustics" 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
<div class="ex-row"> <piix-fx kind="caustics" palette="sunset" height="200px"></piix-fx> <piix-fx kind="caustics" palette="ocean" height="200px"></piix-fx> <piix-fx kind="caustics" palette="#050505,#1f1f24,#5a5a66,#bdbdc7,#ffffff" height="200px"></piix-fx> </div>
API reference
| Attribute | What it does | Default |
|---|---|---|
kind | beam disc flame blob glass podium ink aura reeded orb silk morph terrain tunnel waves clouds caustics gradient swarm | blob |
palette | tint it: a palette name or your own colours, dark to light | the kind's own |
bg | none: just the object (blob, glass, disc, orb, morph, swarm) | – |
quality | 1 is full resolution; lower is faster | .75 |
grain | film grain, 0 to 1 | .35 |
speed | 1 is normal, 0 holds still | 1 |
height | when not filling: px or any CSS length | 480px |
fill | sit behind the content of the parent element | – |
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.