Pixel UI/Cards/Glow card

Glow card

A card lit from inside, with light running round its border.

<piix-glow-card>WebGL

Realtime

Everything updates the moment it changes, on every device.

<piix-glow-card>
  <h3>Realtime</h3>
  <p>Everything updates the moment it changes, on every device.</p>
</piix-glow-card>

Look

Palette

Tilt

Pixel3

A dark pixel card with a band of light chasing round its edge and a spotlight that follows your pointer under the content. It tilts a little toward the pointer, and a click sends a ring out across it. Put anything inside.

Installation

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

<!-- just glow card (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/glow-card.min.js"></script>

npm install piixpal

// once, in your entry file
import "piixpal";

// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    <piix-glow-card>
      <h3>Realtime</h3>
      <p>Everything updates the moment it changes, on every device.</p>
    </piix-glow-card>
  );
}

Usage

<piix-glow-card>
  <h3>Realtime</h3>
  <p>Everything updates the moment it changes, on every device.</p>
</piix-glow-card>

Examples

Looks

One attribute changes the whole style. Glass blurs whatever is behind it, so it shines over a scene or a photo.

Realtime

Live on every device.

Realtime

Live on every device.

Realtime

Live on every device.

Realtime

Live on every device.

Realtime

Live on every device.

<div class="ex-scene">
  <piix-scene kind="vista" fill></piix-scene>
  <piix-glow-card look="glow"><h3>Realtime</h3><p>Live on every device.</p></piix-glow-card>
  <piix-glow-card look="chrome"><h3>Realtime</h3><p>Live on every device.</p></piix-glow-card>
  <piix-glow-card look="glass"><h3>Realtime</h3><p>Live on every device.</p></piix-glow-card>
  <piix-glow-card look="riso"><h3>Realtime</h3><p>Live on every device.</p></piix-glow-card>
  <piix-glow-card look="crt"><h3>Realtime</h3><p>Live on every device.</p></piix-glow-card>
</div>

A feature grid

Zero deps

One script tag. No build step.

On the GPU

Shaders on a pixel grid.

Accessible

Real elements, real focus.

<div class="ex-grid">
  <piix-glow-card palette="lime"><h3>Zero deps</h3><p>One script tag. No build step.</p></piix-glow-card>
  <piix-glow-card palette="sunset"><h3>On the GPU</h3><p>Shaders on a pixel grid.</p></piix-glow-card>
  <piix-glow-card palette="ocean"><h3>Accessible</h3><p>Real elements, real focus.</p></piix-glow-card>
</div>

Pricing

Pro

$0/forever

Every component, every palette, MIT licensed.

Get it

<piix-glow-card palette="candy">
  <p class="eyebrow">Pro</p>
  <h3 class="price">$0<small>/forever</small></h3>
  <p>Every component, every palette, MIT licensed.</p>
  <piix-glow-button palette="candy">Get it</piix-glow-button>
</piix-glow-card>

API reference

Attribute	What it does	Default
`look`	`glow` `chrome` `glass` `riso` `crt`: the whole style. See Looks	`glow`
`palette`	the colours: `lime` `aurora` `sunset` `ocean` `candy` `violet` `fire` `gameboy` `paper` `mono`, or your own, dark to light: `"#000,#6b4cff,#fff"`	`violet`
`tilt`	`none` keeps it flat	–
`pixel`	size of one pixel, in px	`3`

Accessibility

Your content is ordinary HTML.
No tilt and no moving light with reduced motion.