Components/3D

3D

The pals as real 3D models: toys you can spin, trading cards, a tiny planet, a snow globe, a hologram and little voxel rooms. Every one can be drawn glossy, in clay, cel-shaded, as a wireframe, a hologram, or in halftone, dither or ASCII.

Pals in 3D 6

Voxel

<piix-voxel>

Any pal as a 3D toy you can spin, in eight looks from glossy to ASCII.

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

<piix-voxel pal="bitbug"></piix-voxel>
<piix-voxel pal="frog" look="toon"></piix-voxel>
<piix-voxel pal="whale" look="halftone"></piix-voxel>

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

<piix-voxel pal="bitbug"></piix-voxel>
<piix-voxel pal="frog" look="toon"></piix-voxel>
<piix-voxel pal="whale" look="halftone"></piix-voxel>

<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/voxel.min.js"
  data-pals="voxel@main"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/voxel.min.js");
Piixpal.add("voxel", "main");

// npm install piixpal
import { PiixVoxel } from "piixpal/react";

<PiixVoxel />

npx shadcn@latest add https://piixpal.dvkk.dev/r/voxel.json

import { Voxel } from "@/components/piixpal/voxel";

<Voxel />

// main.js: app.use(Piixpal) from "piixpal/vue"

<piix-voxel pal="bitbug"></piix-voxel>
<piix-voxel pal="frog" look="toon"></piix-voxel>
<piix-voxel pal="whale" look="halftone"></piix-voxel>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<piix-voxel pal="bitbug"></piix-voxel>
<piix-voxel pal="frog" look="toon"></piix-voxel>
<piix-voxel pal="whale" look="halftone"></piix-voxel>

Options

pal: any pal or sprite name (default bitbug)
look: glossy | clay | toon | wire | holo | halftone | dither | ascii (default glossy)
size: width in px (default 200)
spin: turns a minute when nobody holds it, 0 to stay still (default 6)
depth: how puffy, 1–6 (default 3)
clip: which animation to play
tilt: how far you look down on it, in degrees (default 22)
light: pointer or fixed (default pointer)
floor: "none" hides the shadow
events: piix:poke

Card

<piix-card>

A holographic trading card for any pal, with the pal standing in 3D.

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

<piix-card pal="frog"></piix-card>
<piix-card pal="whale" rarity="rare"></piix-card>

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

<piix-card pal="frog"></piix-card>
<piix-card pal="whale" rarity="rare"></piix-card>

<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/card.min.js"
  data-pals="card@main"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/card.min.js");
Piixpal.add("card", "main");

// npm install piixpal
import { PiixCard } from "piixpal/react";

<PiixCard />

npx shadcn@latest add https://piixpal.dvkk.dev/r/card.json

import { Card } from "@/components/piixpal/card";

<Card />

// main.js: app.use(Piixpal) from "piixpal/vue"

<piix-card pal="frog"></piix-card>
<piix-card pal="whale" rarity="rare"></piix-card>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<piix-card pal="frog"></piix-card>
<piix-card pal="whale" rarity="rare"></piix-card>

Options

pal: any pal or sprite name (default bitbug)
rarity: common, rare or holo; holo has the foil (default holo)
look: how the pal is drawn: glossy | clay | toon | wire | holo | halftone | dither | ascii
size: card width in px; it is 1.4 times as tall (default 240)
color: the card colour (default: picked from the pal)
events: piix:poke

Planet

<piix-planet>

A tiny voxel world with pals walking round it.

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

<piix-planet pals="bitbug,frog,penguin"></piix-planet>

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

<piix-planet pals="bitbug,frog,penguin"></piix-planet>

<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/planet.min.js"
  data-pals="planet@main"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/planet.min.js");
Piixpal.add("planet", "main");

// npm install piixpal
import { PiixPlanet } from "piixpal/react";

<PiixPlanet />

npx shadcn@latest add https://piixpal.dvkk.dev/r/planet.json

import { Planet } from "@/components/piixpal/planet";

<Planet />

// main.js: app.use(Piixpal) from "piixpal/vue"

<piix-planet pals="bitbug,frog,penguin"></piix-planet>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<piix-planet pals="bitbug,frog,penguin"></piix-planet>

Options

pals: comma-separated pal names (default bitbug,frog,penguin)
seed: a number: a different world for each (default 7)
size: width in px (default 260)
spin: turns a minute when idle (default 3)
look: glossy | clay | toon | wire | holo | halftone | dither | ascii

Globe

<piix-globe>

A pal in a snow globe. Shake it.

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

<piix-globe pal="penguin"></piix-globe>

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

<piix-globe pal="penguin"></piix-globe>

<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/globe.min.js"
  data-pals="globe@main"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/globe.min.js");
Piixpal.add("globe", "main");

// npm install piixpal
import { PiixGlobe } from "piixpal/react";

<PiixGlobe />

npx shadcn@latest add https://piixpal.dvkk.dev/r/globe.json

import { Globe } from "@/components/piixpal/globe";

<Globe />

// main.js: app.use(Piixpal) from "piixpal/vue"

<piix-globe pal="penguin"></piix-globe>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<piix-globe pal="penguin"></piix-globe>

Options

pal: any pal or sprite name (default penguin)
sky: night, dusk or day (default night)
snow: how many flakes, 20–300 (default 140)
size: width in px (default 220)
look: how the pal is drawn
API: el.shake()
events: piix:poke

Holo

<piix-holo>

A pal projected as a flickering hologram.

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

<piix-holo pal="astronaut"></piix-holo>

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

<piix-holo pal="astronaut"></piix-holo>

<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/holo.min.js"
  data-pals="holo@main"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/holo.min.js");
Piixpal.add("holo", "main");

// npm install piixpal
import { PiixHolo } from "piixpal/react";

<PiixHolo />

npx shadcn@latest add https://piixpal.dvkk.dev/r/holo.json

import { Holo } from "@/components/piixpal/holo";

<Holo />

// main.js: app.use(Piixpal) from "piixpal/vue"

<piix-holo pal="astronaut"></piix-holo>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<piix-holo pal="astronaut"></piix-holo>

Options

pal: any pal or sprite name (default astronaut)
color: cyan, lime, pink or amber (default cyan)
size: width in px (default 220)
look: how the pal is drawn (default holo)

Room

<piix-room>

A little isometric voxel diorama with a pal living in it.

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

<piix-room scene="desk"></piix-room>
<piix-room scene="pond"></piix-room>
<piix-room scene="night"></piix-room>

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

<piix-room scene="desk"></piix-room>
<piix-room scene="pond"></piix-room>
<piix-room scene="night"></piix-room>

<script src="https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/room.min.js"
  data-pals="room@main"></script>

await import("https://cdn.jsdelivr.net/npm/piixpal@0.4/dist/c/room.min.js");
Piixpal.add("room", "main");

// npm install piixpal
import { PiixRoom } from "piixpal/react";

<PiixRoom />

npx shadcn@latest add https://piixpal.dvkk.dev/r/room.json

import { Room } from "@/components/piixpal/room";

<Room />

// main.js: app.use(Piixpal) from "piixpal/vue"

<piix-room scene="desk"></piix-room>
<piix-room scene="pond"></piix-room>
<piix-room scene="night"></piix-room>

<script>import Piixpal from "piixpal/svelte";</script>
<Piixpal />

<piix-room scene="desk"></piix-room>
<piix-room scene="pond"></piix-room>
<piix-room scene="night"></piix-room>

Options

scene: desk, pond or night (default desk)
pal: who lives there (default termi, frog or shibe)
size: width in px (default 300)
look: glossy, clay, toon, wire, halftone, dither or ascii (default clay)