Pixel UI/Sections/Divider

Divider

A moving pixel edge between two sections, instead of a hard line.

<piix-divider>WebGL

<piix-divider kind="wave" from="#17121f" to="#f3eee3"></piix-divider>

Kind

Line

Pixel6

One section's colour flows into the next across a living edge: rolling waves, a mountain ridge, stepped stairs, drips or a dithered fade. A thin line of light runs along it, and it lifts a little under the pointer. Set from and to to the two sections' backgrounds.

Installation

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

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

npm install piixpal

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

// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    <piix-divider kind="wave" from="#17121f" to="#f3eee3"></piix-divider>
  );
}

Usage

<piix-divider kind="wave" from="#17121f" to="#f3eee3"></piix-divider>

Examples

Between two sections

<section style="background:#17121f;color:#fff">…</section>
<piix-divider kind="mountains" from="#17121f" to="#f3eee3"></piix-divider>
<section style="background:#f3eee3">…</section>

Flipped

flip turns it upside down, for going back from light to dark.

<piix-divider kind="drip" from="#f3eee3" to="#17121f" flip palette="candy"></piix-divider>

API reference

Attribute	What it does	Default
`kind`	`wave` `mountains` `stairs` `drip` `dissolve`	`wave`
`from`	the colour above	`#17121f`
`to`	the colour below	`#f3eee3`
`palette`	the line of light along the edge	`lime`
`height`	px or any CSS length	`120px`
`pixel`	size of one pixel, in px	`6`
`flip`	turn it upside down	–

Accessibility

Decoration: hidden from screen readers.
Holds still with reduced motion.