Pixel UI/Data/Flap board

Flap board

A split-flap board, like a station departures sign. It can count down too.

<piix-flap>WebGL

<piix-flap text="NOW BOARDING" length="13"></piix-flap>

Theme

Every tile riffles through the alphabet, flap by flap, until it lands on its letter, a beat after the one before. Change the text and it flips again. With a countdown it shows days, hours, minutes and seconds and keeps ticking: made for launch pages.

Installation

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

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

npm install piixpal

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

// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    <piix-flap text="NOW BOARDING" length="13"></piix-flap>
  );
}

Usage

<piix-flap text="NOW BOARDING" length="13"></piix-flap>

Examples

Launch countdown

<piix-flap countdown="2026-12-31T00:00:00" theme="amber"></piix-flap>

Live text

Set text from your code and it flips to the new words.

Change

<piix-flap id="gate" text="GATE 12" length="8" theme="light"></piix-flap>
<piix-button tone="ink" size="sm" onclick="gate.setAttribute('text', gate.getAttribute('text') === 'GATE 12' ? 'DELAYED' : 'GATE 12')">Change</piix-button>

API reference

Attribute	What it does	Default
`text`	what it says: letters, digits, spaces and : . - / ! ? ' & +	–
`length`	pad it to this many tiles	–
`countdown`	a date and time to count down to	–
`theme`	`dark` `light` `amber`	`dark`
`font-size`	(CSS) sets the size of the tiles	`clamp(22px, 5vw, 56px)`

Accessibility

Screen readers get the words, not the flapping.
A countdown is a timer and is not announced every second.
With reduced motion the tiles change without flipping.