Pixel UI/Sections/Hero

Hero

A whole hero section on a GPU pixel background that dissolves in.

<piix-hero>WebGL

New · v1.0

Build something loud

One line of HTML and your landing page glows.

Get started

<piix-hero kind="horizon" height="520px">
  <p class="eyebrow">New · v1.0</p>
  <h1>Build something loud</h1>
  <p>One line of HTML and your landing page glows.</p>
  <piix-glow-button>Get started</piix-glow-button>
</piix-hero>

Background

Palette

Align

Any of the ten backgrounds, with a vignette and scanlines over the top. When it scrolls into view the background dissolves in pixel by pixel, then your content rises in after it. Put anything inside: headings, paragraphs and buttons get hero-sized type and are centred for you.

Installation

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

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

npm install piixpal

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

// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    <piix-hero kind="horizon" height="520px">
      <p className="eyebrow">New · v1.0</p>
      <h1>Build something loud</h1>
      <p>One line of HTML and your landing page glows.</p>
      <piix-glow-button>Get started</piix-glow-button>
    </piix-hero>
  );
}

Usage

<piix-hero kind="horizon" height="520px">
  <p class="eyebrow">New · v1.0</p>
  <h1>Build something loud</h1>
  <p>One line of HTML and your landing page glows.</p>
  <piix-glow-button>Get started</piix-glow-button>
</piix-hero>

Examples

Left aligned

Changelog

Faster than ever

Every component now shares one GPU context.

<piix-hero kind="nebula" align="left" height="420px">
  <p class="eyebrow">Changelog</p>
  <h1>Faster than ever</h1>
  <p>Every component now shares one GPU context.</p>
</piix-hero>

With pixel type

Mix in Shine text for the key word.

Make it pop

Shaders, dithered into your palette.

<piix-hero kind="mesh" palette="candy" height="420px">
  <h1>Make it <piix-text effect="shine" palette="sunset">pop</piix-text></h1>
  <p>Shaders, dithered into your palette.</p>
</piix-hero>

API reference

Attribute	What it does	Default
`kind`	which background: `mesh` `warp` `aurora` `crystal` `liquid` `horizon` `nebula` `topo` `dots` `fire`	`mesh`
`fx`	a smooth 3D shader instead: `blob` `glass` `podium` `ink` `aura` `orb` and more	–
`scene`	an illustrated scene instead	–
`palette`	the colours: `lime` `aurora` `sunset` `ocean` `candy` `violet` `fire` `gameboy` `paper` `mono`, or your own, dark to light: `"#000,#6b4cff,#fff"`	`the background's own`
`pixel`	size of one pixel, in px	`5`
`align`	`center` or `left`	`center`
`height`	any CSS length	`min(88vh, 780px)`

Accessibility

Your content is ordinary HTML in the page.
With reduced motion there is no dissolve: it's just there.