A dot-matrix orb that animates through idle, listening and thinking states.
Use the controls to switch the orb between its idle, listening and thinking states.
Options you can pass to customize this component.
stateidlelisteningthinkingWhich animation the orb plays.
levelnumberHow far the orb blooms, 0 to 1. Falls back to a built-in envelope.
sizenumberDiameter of the orb in pixels.
colorstringAny CSS color for the dots.
dotsnumberHow many dots across the grid.
labelsPartial<Record<MatrixOrbState, string>>Caption under the orb, per state.
classNamestringExtra classes merged onto the root element (data-slot="matrix-orb").
npx shadcn@latest add swamimalode07/rare-ui/matrix-orb"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 (<MatrixOrbstate={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} />
Click the code icon in the top-right corner to view the source code.
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.
1