showcase

pinu bot

robot face patterns for real interfaces.

Panel Off

You can remove the inner shell with features.panel: false for a cleaner embedded look.

Host Styling

The surrounding card, HUD frame, and brand atmosphere can belong to your app. pinu-bot only owns the canvas.

Transparent Canvas

Use transparentBackground: true when you want the host app background to show through the canvas instead of painting the theme background first.

Panel-Light Embed

This runs with a truly transparent canvas background. The panel shell is removed, scanlines are off, and the host interface provides the surrounding product chrome.

transparentBackground: true panel: false scanlines: false minimal

const face = createRobotFace(canvas, {
  theme: "white",
  style: "minimal",
  backgroundFx: "off",
  transparentBackground: true,
  features: {
    panel: false,
    scanlines: false
  },
  parts: {
    eyeShape: "capsule",
    noseShape: "bar",
    mouthShape: "arc"
  }
});

face.emote("listening");
face.lookRight(0.7);

Companion Card

A compact assistant surface with a friendly face theme and quiet lighting. This is the sort of UI where pinu-bot feels like a character layer rather than a whole app screen.

faceTheme: companion capsule eyes visor brows friendly idle motion

const face = createRobotFace(canvas, {
  faceTheme: "companion",
  theme: "amber",
  style: "soft",
  features: {
    nose: false,
  },
  parts: {
    eyeShape: "capsule",
    eyeWidthScale: 0.52,
    eyeHeightScale: 1.72,
    browShape: "visor",
    noseShape: "bar",
    scanlineThickness: 1.75,
  },
});

face.emote("happy");
face.wink("left");

Terminal Surface

The library also works well as a whole-screen display treatment: stronger panel frame, CRT palette, denser scanlines, and more mechanical face geometry.

green-crt industrial scanline tuning service face theme

const face = createRobotFace(canvas, {
  faceTheme: "service",
  theme: "green-crt",
  style: "industrial",
  backgroundFx: "emotion",
  parts: {
    noseShape: "bar",
    mouthShape: "visor",
    scanlineThickness: 2.5,
    scanlineSpacing: 5
  }
});

face.emote("thinking");

Status Strip

Faces can also read well in wide, low-height surfaces. This lets you treat the character more like a status system or robotic HUD than a centered mascot.

status-strip red-alert visor styling wide layout

const face = createRobotFace(canvas, {
  faceTheme: "status-strip",
  theme: "red-alert",
  style: "visor",
  backgroundFx: "emotion",
  parts: {
    noseShape: "bar",
    mouthShape: "visor"
  }
});

face.emote("angry");
face.perform("glitch");

Momentary Reactions

Symbol mode is useful for momentary strong reactions instead of a full facial pose: warning, question, loading, heart, and other quick response beats that can pop in, communicate, and clear fast.

mode: symbol momentary reactions question / warning / heart 8-bit symbols