BoomBot Overlay

A plug-and-play Boombot that follows your cursor like oneko.js, but in 3D.

Download Source

Move your cursor around, you can already see it running on this site!

Setup with a new Next.js project

Add BoomBot to your project in just a few minutes.

Create a new Next.js project

Run the following command to bootstrap your Next.js application

Configure shadcn

Run this command to setup shadcn/ui

Add Button Component

Run this command to add button component

Install required dependencies

Run this command to install required dependencies

Now download the zip file from this page and extract it

Copy the boombot folder to your /components directory.
Move the files from public in the extracted folder to your project's /public folder.

Add BoomBot to your root layout

Wrap your app with the provider and mount the BoomBot overlay inside layout.tsx.

import "./globals.css";
import { BoomBotOverlayGate, BoomBotProvider } from "@/components/BoomBot";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <BoomBotProvider>
          <BoomBotOverlayGate
            lightingPreset="studio"
            modelPath="/boombot.glb"
            depth={80}
            speed={20}
            showFloor={false}
          />
          {children}
        </BoomBotProvider>
      </body>
    </html>
  );
}

Use the BoomBot toggle button

Import the toggle button and place it anywhere in your UI to let users open or close BoomBot.

import { BoomBotToggleButton } from "@/components/BoomBot";

export default function Home() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-zinc-50 dark:bg-black">
      <BoomBotToggleButton />
    </div>
  );
}

BoomBot is now ready

Start your development server and use the toggle button to launch it in your app.

Props

Customize BoomBot's behavior and appearance.

✓

modelPath

stringdefault: —

Path to the GLB / GLTF model file.

✓

depth

numberdefault: 10

Camera distance from origin (controls zoom level).

✓

speed

numberdefault: 5

Bot movement speed toward the cursor.

✓

arriveThreshold

numberdefault: 0.1

Distance at which the bot stops moving toward the cursor.

✓

rotateSpeed

numberdefault: 1

Camera rotation sensitivity when dragging the bot.

✓

zIndex

numberdefault: 9999

CSS z-index for overlay positioning.

✓

showFloor

booleandefault: false

Show a ground plane and grid beneath the bot.

✓

modelScale

numberdefault: 1.3

Scale multiplier for the 3D model.

✓

lightingPreset

LightingPresetdefault: "default"

Lighting environment preset (default | studio | sunset | neon | spotlight).

✓

floorSize

numberdefault: 50

Size of the ground plane and grid (when showFloor is true).

Ready to integrate?

Download the complete component package and start using BoomBot in your project today.

Download (ZIP)