Copy<h1>
  <piix-text effect="wave" palette="ocean">Pixel perfect</piix-text>
</h1>

The words ride a travelling wave, pixel column by pixel column, and the colour follows the crest. Hover and the wave grows.

Installation

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

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

Copynpm install piixpal

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

Copy// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    <h1>
      <piix-text effect="wave" palette="ocean">Pixel perfect</piix-text>
    </h1>
  );
}

Usage

Copy<h1>
  <piix-text effect="wave" palette="ocean">Pixel perfect</piix-text>
</h1>

Examples

One word in a headline

It takes the font, size and weight of wherever you put it, so it drops straight into your own heading.

Copy<h2 class="ex-h2">Build something <piix-text effect="wave" palette="sunset">loud</piix-text></h2>

Chunkier pixels

Copy<h2 class="ex-h2"><piix-text effect="wave" pixel="4" palette="candy">Big pixels</piix-text></h2>

API reference

Accessibility

• The real words stay in the page, so screen readers, search engines and copy-paste all see normal text.
• With reduced motion the effect holds on a readable frame.
• One line of text: it doesn't wrap.