Looks
The glow button, glow card, input and dialog all take a look. It swaps the whole style, from the shader to the type, so one set of components can live on very different pages.
Glow
The default. A dark pixel face, a band of light running round the border and a spotlight under the pointer. At home on dark product pages.
Realtime
Live on every device.
<piix-glow-button look="glow">Get started</piix-glow-button> <piix-glow-card look="glow"> <h3>Realtime</h3> <p>Live on every device.</p> </piix-glow-card> <piix-input look="glow" placeholder="you@site.com">Email</piix-input>
Chrome
Y2K liquid metal: a bright sky reflected above a dark horizon line that ripples, and a hot spot that follows the pointer. Pairs with bold sans type and big gradients.
Realtime
Live on every device.
<piix-glow-button look="chrome">Get started</piix-glow-button> <piix-glow-card look="chrome"> <h3>Realtime</h3> <p>Live on every device.</p> </piix-glow-card> <piix-input look="chrome" placeholder="you@site.com">Email</piix-input>
Glass
Frosted glass: the page behind is blurred through it, with a lit rim and a glare that sweeps across under the pointer. Put it over a scene, a photo or a gradient.
Realtime
Live on every device.
<piix-glow-button look="glass">Get started</piix-glow-button> <piix-glow-card look="glass"> <h3>Realtime</h3> <p>Live on every device.</p> </piix-glow-card> <piix-input look="glass" placeholder="you@site.com">Email</piix-input>
Riso
A two-ink risograph print: a solid ink face, a halftone shadow on two edges and a second ink laid down slightly off-register. It drifts when you hover. Give it any two inks and a paper as its palette.
Realtime
Live on every device.
<piix-glow-button look="riso">Get started</piix-glow-button> <piix-glow-card look="riso"> <h3>Realtime</h3> <p>Live on every device.</p> </piix-glow-card> <piix-input look="riso" placeholder="you@site.com">Email</piix-input>
Terminal
Green phosphor on black: scanlines, a double rule, a faint flicker and a burst of static when you click. Try palette="fire" for amber.
Realtime
Live on every device.
<piix-glow-button look="crt">Get started</piix-glow-button> <piix-glow-card look="crt"> <h3>Realtime</h3> <p>Live on every device.</p> </piix-glow-card> <piix-input look="crt" placeholder="you@site.com">Email</piix-input>