Pixel UI/Scenes/Train window

Train window

A train window with the countryside rushing past.

<piix-scene>WebGL

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

Colours

Sky

Fade

Levels6Pixel4

Look out of a train: clouds and far mountains crawl, the hills roll by faster, a fence whips past and telegraph poles flash through the frame with their wires sagging between them. The carriage sways and bumps over every rail joint. Move the pointer to look around. With sky="none" the carriage wall disappears and the window floats on your own page.

Installation

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

<!-- just train window (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="train" height="460px"></piix-scene>
  );
}

Usage

<piix-scene kind="train" 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="train" 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="train" 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="train" palette="gameboy" height="180px"></piix-scene>
  <piix-scene kind="train" palette="sunset" height="180px"></piix-scene>
  <piix-scene kind="train" 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="train" 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.