pinu bot

expressive robot display runtime for modern web apps

v0.2.0 npm Showcase GitHub Star

Controls

Use the live panel below as the first-pass docs surface. Every selection updates the code sample on the right.

Emotions

Actions

Display

background color

Parts

scanline thickness scanline spacing

Install

npm install pinu-bot
pnpm add pinu-bot
bun add pinu-bot

Live Code

API Guide

createRobotFace(canvas, options?) Create a face runtime bound to a canvas.

options.transparentBackground = true Leave the canvas background transparent so your app's own background shows through.

face.emote(name, options?) Animate to a named emotion.

face.perform(name) / face.transitionTo(state) Run a cinematic sequence or push direct pose overrides.

face.lookAt(x, y) Move gaze using normalized coordinates.

face.lookLeft(amount?) / face.lookRight(amount?) / face.lookUp(amount?) / face.lookDown(amount?) Directional gaze helpers for quick expressions and glances.

face.smile(amount, { open }) / face.frown(amount, { open }) Convenience mouth actions with open or closed variants.

face.pout(amount, { open }) Pursed-lip mouth action with optional open depth.

face.blink() / face.wink(side) Trigger quick eye overlays.

face.speak({ intensity, cadence, durationMs }) Layer speaking animation on top of the current emotion.

face.perform("bootUp" | "glitch") Play cinematic display transitions.

face.setTheme(nameOrDefinition) / face.setFaceTheme(nameOrDefinition) Switch visual palettes or apply bundled character presets.

face.setStyle(nameOrDefinition) / face.setBackgroundFx(...) Change shell styling and screen lighting behavior.

face.setParts({ eyeShape, eyeWidthScale, eyeHeightScale, noseShape, mouthShape, browShape, scanlineThickness, scanlineSpacing })

Configure shape language and screen texture in one call.

face.setMode(...) / face.showSymbol(...) / face.showFace() Swap between face and symbol display modes. Symbols: question, exclamation, ellipsis, heart, offline, loading, warning.

face.eyes() / face.leftEye() / face.rightEye() / face.mouth() / face.nose() Use direct part-control chains for precise adjustments.

face.configure(...) / face.start() / face.stop() / face.render() / face.destroy() Configure and manage the runtime lifecycle.