Pixel UI/3D & Shaders/Disc

Disc

A spinning disc with a diffraction rainbow sweeping across it.

<piix-fx>WebGL

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

Colours

Background

Quality0.75Grain0.35

A tilted disc with microscopic grooves, a clear hub and a bright rim. As it turns, a rainbow sweeps across the surface the way light does on a real CD. The pointer tilts it.

Installation

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

<!-- just disc (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="disc" height="480px"></piix-fx>
  );
}

Usage

<piix-fx kind="disc" 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.

Get started

<piix-hero fx="disc" 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.

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

In your colours

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