Skip to content
Mox UI

Matrix orb

A dot-matrix orb that animates through idle, listening and thinking states.

Listening

Installation

  1. 1

    Install the packages

    pnpm add clsx tailwind-merge
  2. 2

    Add the utility file

    lib/utils.ts
    import { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs));}
  3. 3

    Copy and paste the code into your project

    Loading source…
  4. 4

    Update the import paths to match your project

    Point @/lib/utils to your utility file if your path aliases differ.

Usage

app/page.tsx
"use client"
import { useState } from "react"import MatrixOrb, { type MatrixOrbState } from "@/components/ui/matrix-orb"
export function Demo() {  const [state, setState] = useState<MatrixOrbState>("idle")
  return (    <MatrixOrb      state={state}      onClick={() => setState(state === "idle" ? "listening" : "idle")}      className="cursor-pointer"    />  )}
// drive the bloom yourself with any value from 0 to 1// <MatrixOrb state="listening" level={level} />

Options

Pick a value to see the prop you would pass. Defaults are left out.

state
snippet.tsx
<MatrixOrb />

Props

PropTypeDefaultDescription
state"idle" | "listening" | "thinking"Default: "idle"Which animation the orb plays.
levelnumberDefault: -How far the orb blooms, 0 to 1. Falls back to a built-in envelope.
sizenumberDefault: 240Diameter of the orb in pixels.
colorstringDefault: "#1A73F2"Any CSS color for the dots.
dotsnumberDefault: 11How many dots across the grid.
labelsPartial<Record<MatrixOrbState, string>>Default: -Caption under the orb, per state.
classNamestringDefault: -Extra classes merged onto the root element (data-slot="matrix-orb").

Use the controls to switch the orb between its idle, listening and thinking states.

Credits and license

Most components here are recreations of great work from around the web. I don't claim to be the original creator - this is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone; if I missed someone, let me know.

  • Free to use and modify in both personal and commercial projects.
  • Attribution to Mox UI is appreciated when using a component.
  • Please don't resell the components as your own kit.
Contact Mox UI