Pixel UI/ASCII/Liquid flow

Liquid flow

A slow, domain-warped gradient that pours through the characters.

<piix-ascii>WebGL

<piix-ascii scene="flow" height="460px"></piix-ascii>

Colours

Characters

Haze0.55Pixel2

Layers of noise folded into each other, so the colour flows like ink in water. The pointer pushes the current aside.

Installation

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

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

npm install piixpal

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

// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    <piix-ascii scene="flow" height="460px"></piix-ascii>
  );
}

Usage

<piix-ascii scene="flow" height="460px"></piix-ascii>

Examples

As a hero

With fill it sits behind everything else in its section.

Build in ASCII.

A whole world behind your words.

Get started

<section style="position:relative;height:440px;display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;background:#05040a;color:#fff">
  <piix-ascii scene="flow" fill></piix-ascii>
  <h2 class="ex-h2">Build in ASCII.</h2>
  <p style="margin:0;font-size:18px;opacity:.85">A whole world behind your words.</p>
  <piix-glow-button>Get started</piix-glow-button>
</section>

Other characters

chars swaps the character ramp: blocks, binary, or dots.

<div class="ex-row">
  <piix-ascii scene="flow" chars="blocks" height="200px"></piix-ascii>
  <piix-ascii scene="flow" chars="binary" height="200px"></piix-ascii>
  <piix-ascii scene="flow" chars="dots" height="200px"></piix-ascii>
</div>

Repainted

Any palette, or your own colours from dark to light.

<div class="ex-row">
  <piix-ascii scene="flow" palette="sunset" height="200px"></piix-ascii>
  <piix-ascii scene="flow" palette="lime" height="200px"></piix-ascii>
  <piix-ascii scene="flow" palette="#04020a,#ff3d77,#ffd23f,#ffffff" height="200px"></piix-ascii>
</div>

API reference

Attribute	What it does	Default
`scene`	`glow` `flow` `aurora` `ocean` `terrain` `galaxy` `planet` `city` `tunnel` `rain` `storm` `dunes`	`glow`
`palette`	any Pixel UI palette, or your colours dark to light: `#0a1a8c,#2b8cff,#ffffff`	`the scene's own`
`chars`	`ascii` `blocks` `binary` `dots`	`ascii`
`haze`	how much soft glow behind the characters, 0 to 1	`.55`
`pixel`	size of one font pixel, in px (a character is 6 by 9 of them)	`2`
`speed`	1 is normal, 0 holds still	`1`
`height`	when not filling: px or any CSS length	`420px`
`fill`	sit behind the content of the parent element	–

Accessibility

Announced as an image describing the scene, unless it fills a parent (then it is decoration).
With reduced motion it renders one still frame.
All in one shader: no fonts or images to download; the font is drawn by the GPU.