BrandBot 🤖

A 3D robot mascot you brand with your own logo and colors. A drop-in React component that gestures, blinks, and follows the visitor's cursor. It renders with Three.js, is written in TypeScript with full type declarations, and bundles the model — so there's nothing to configure or host. Works in any React app (see the Next.js note below).

▶ Live demo · Configure & copy code

Install

npm install brandbot three react

Use

import { BrandBot } from 'brandbot';

export function Hero() {
  return (
    <div style={{ height: 600 }}>
      <BrandBot primary="#13294b" eyes="#7fd4ff" logoText="ACME" />
    </div>
  );
}

That's it. The component fills its parent, renders on a transparent background, and starts moving. The default needs no extra CSS — drop it in a sized box and it looks right.

Full-bleed hero (optional)

To have the robot rise from the bottom of a full-height hero with its legs fading into the page (like the demo), wrap it:

<div style={{ height: '100vh', overflow: 'hidden',
              WebkitMaskImage: 'linear-gradient(180deg,#000 88%,transparent 100%)' }}>
  <div style={{ position: 'absolute', inset: 0,
                transform: 'scale(1.1) translateY(8%)', transformOrigin: 'center top' }}>
    <BrandBot />
  </div>
</div>

By default it stays put — locked in its box, facing forward, following the cursor. It does not let visitors drag-rotate it (rarely what you want in a hero or card). Add orbit to enable drag-to-rotate for demos.

Brand it

Every color and the chest logo is a prop. Drop in your logo as text, an uploaded image (inlined as base64), or a URL:

<BrandBot
  primary="#0e1a2b"
  accent="#1d3350"
  eyes="#7fd4ff"
  logoImage="/logo.png"   // or logoText="ACME"
/>

The configurator lets you tweak everything visually and copies the exact JSX for your setup.

Props

Prop	Type	Default
primary	color	near-black	body shell + carbon parts
accent	color	dark metal	joints, mechanical internals
visor	color	chrome	face plate
hands	color	chrome	hands
eyes	color	white-blue	LED dot-matrix eyes
logoText	string	—	text logo on the chest (1–3 words)
logoColor	color	white
logoImage	url	—	image logo (transparent PNG/SVG best); overrides text
legs	boolean	true	false shows the upper body only
orbit	boolean	false	true lets visitors drag to rotate (for demos)
intro	boolean	true	one-time zoom-in when the model loads
trackPointer	'window' | 'element' | false	'window'	what the head watches
shadow	boolean	true	soft ground shadow
modelUrl	url	bundled	load a different glTF instead of the bundled model
className, style			passed to the wrapper div

All color/logo/legs props are live — update them in state and the robot changes instantly. (orbit and intro are set once at mount.)

Imperative handle via ref:

const bot = useRef(null);
<BrandBot ref={bot} />
<button onClick={() => bot.current.spin()}>Spin</button>     {/* one full turn   */}
<button onClick={() => bot.current.replay()}>Replay</button> {/* the zoom-in intro */}

Next.js

WebGL can't server-render, so load it client-side:

import dynamic from 'next/dynamic';
const BrandBot = dynamic(() => import('brandbot').then(m => m.BrandBot), { ssr: false });

Without React

The engine is framework-agnostic:

import { createBrandbot } from 'brandbot/core';
import model from 'brandbot/model';

const robot = createBrandbot(document.querySelector('#hero'), { gltf: model });
robot.set({ primary: '#13294b', logoText: 'ACME' });

Demo

The demo/ folder is a no-build static site (works on GitHub Pages):

• demo/index.html — showcase: the robot rising from a light-grid hero with the zoom-in intro and cursor tracking.
• demo/configure.html — live configurator with tabbed code, "copy code", and "copy prompt for agent".

Run python3 -m http.server in the package folder and open demo/index.html.

Development

npm install      # toolchain (typescript, @types/three, @types/react)
npm run build    # compile src/*.ts → dist/ (+ .d.ts) and copy the model
npm run typecheck

Source lives in src/ (TypeScript). The committed dist/ is what the demo and npm package consume; rebuild it after changing src/.

License

• Code: MIT.
• Model: the bundled robot is the NEXBOT character, a Spline Community file under CC0 1.0 (public domain). Per Spline's docs: "All the community files are licensed under CC0 1.0 Universal Deed." Free to use, modify, and redistribute — including commercially — with no attribution required. Credited anyway, because it's a great model.