Pixel UI/Scenes/Galaxy

Galaxy

A spiral galaxy with planets in orbit; the pointer tilts it.

<piix-scene>WebGL

<piix-scene kind="galaxy" height="460px"></piix-scene>

Colours

Sky

Fade

Levels6Pixel4

A golden core, spiral arms of dust and light, six planets on their orbits (two with rings, all lit from the core) and the odd shooting star. The pointer tilts the whole disk toward you.

Installation

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

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

npm install piixpal

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

// npm install piixpal
import "piixpal";

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

Usage

<piix-scene kind="galaxy" height="460px"></piix-scene>

Examples

As a hero

Give Hero a scene and your content sits on top of it.

Now open

Somewhere new

A whole place, drawn in pixels, behind your words.

Explore

<piix-hero scene="galaxy" height="440px">
  <p class="eyebrow">Now open</p>
  <h1>Somewhere new</h1>
  <p>A whole place, drawn in pixels, behind your words.</p>
  <piix-glow-button>Explore</piix-glow-button>
</piix-hero>

On a normal page

sky="none" cuts the sky out, so your page shows through. Add fade to dissolve an edge.

<piix-scene kind="galaxy" sky="none" height="280px"></piix-scene>

Repainted

Give it a palette and the whole scene is redrawn in those colours.

<div class="ex-row">
  <piix-scene kind="galaxy" palette="gameboy" height="180px"></piix-scene>
  <piix-scene kind="galaxy" palette="sunset" height="180px"></piix-scene>
  <piix-scene kind="galaxy" palette="paper" height="180px"></piix-scene>
</div>

Fewer colours

levels sets how many shades each colour channel gets. 2 or 3 is very retro.

<piix-scene kind="galaxy" levels="3" pixel="5" height="240px"></piix-scene>

API reference

Attribute	What it does	Default
`kind`	`sakura` `alps` `lake` `galaxy` `rays` `vortex` `train` `poppies` `castle` `vista`	`sakura`
`sky`	`none` makes the sky see-through	–
`fade`	`top` `bottom` `both`: dissolve that edge in dithered pixels	–
`palette`	repaint it in a palette instead of its own colours	–
`levels`	shades per colour channel, 2 to 16	`6`
`pixel`	size of one pixel, in px	`4`
`dither`	0 for flat colour, 1 for full dither	`1`
`speed`	1 is normal, 0 holds still	`1`
`height`	when not filling: px or any CSS length	`480px`
`fill`	sit behind the content of the parent element	–

Accessibility

Announced as an image with a description of the scene, unless it fills a parent (then it's decoration).
With reduced motion it renders one still frame.
Drawn entirely in a shader: no images to download, and it compiles in the background so the page never stalls.