Pixel UI/Scenes/Anime vista

Anime vista

A summer sky with towering clouds, a snowy peak and grass in the breeze.

<piix-scene>WebGL

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

Colours

Sky

Fade

Levels6Pixel4

Big sunlit cumulus clouds with warm undersides, a snowy peak in the haze, and long grass waving in the foreground. Everything slides a little with the pointer.

Installation

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

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

Usage

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