What is Calamansi UI?

Calamansi UI is a free, open-source registry of animated React components with a little sour, installed with the shadcn CLI.

Is Calamansi UI free?

Yes. Calamansi UI components are free to use and modify in personal and commercial React or Next.js projects.

How do I install a Calamansi UI component?

Run npx shadcn@latest add fujiDevv/calamansi-ui/ , replacing with the component registry name.

What is Calamansi UI built with?

Calamansi UI components are built for React with TypeScript, Tailwind CSS, Motion, GSAP, and shadcn/ui conventions.

Does Calamansi UI work with Next.js?

Yes. Calamansi UI components are React components and the examples are designed to fit naturally into Next.js projects.

Can I customize Calamansi UI components?

Yes. Components are copied into your project, so you can edit the source, Tailwind classes, props, and behavior after installation.

How do I install Matrix orb from Calamansi UI?

Install it with the shadcn CLI by running: npx shadcn@latest add fujiDevv/calamansi-ui/matrix-orb.

Can I customize the Matrix orb component?

Yes. Calamansi UI components are copied into your project, so you can edit the TypeScript, Tailwind classes, props, and behavior after installation.

DocsaiMatrix orb

Matrix orb

A liquid orb that breathes while idle, ripples while listening and churns up droplets while it thinks.

View source

Palette

Calamansi

Listening

Installation

npx shadcn@latest add fujiDevv/calamansi-ui/matrix-orb

How to use

demo.tsx

import { MatrixOrb } from "@/components/ui/matrix-orb"
export function Demo() {
  return <MatrixOrb state="thinking" variant="calamansi" />
}

Props

Options you can pass to customize this component.

stateoptional
idlelisteningthinking
What the orb is doing. Each state has its own motion, and changing it blends from the state currently on screen.
leveloptional
number
Amplitude from 0 to 1, for driving the orb from a real signal such as an audio level. Omit it and the orb runs its own envelope.
variantoptional
whitecalamansislatecitrus
Accent the dots are painted in — brand lime by default. White is the ink, read from the theme, so the sphere stays monochrome and follows light and dark.
coloroptional
string
Dot colour, overriding the palette accent. A change recolours the sphere without restarting its motion.
sizeoptional
number
Width and height of the orb in pixels. The gap under its caption scales with it.
lobesoptional
number
Satellites around the core, 2 to 10. More of them means a busier body and shorter necks between the lobes.
gooeyoptional
boolean
Run the fuse at all. Off, the circles simply overlap and you can see the body's construction.
viscosityoptional
number
The blur behind the fuse, in pixels — how far a lobe reaches for its neighbour before the neck parts. Defaults to 0.078 of the stage, which at five lobes leaves neighbouring bulges just touching: one silhouette with a dip between them, rather than a pinwheel of separate drops. It scales with the stage, so the body reads the same at every size.
thresholdoptional
number
The alpha ramp's slope — how hard the fused edge is, and how much a lobe stretches before it comes off.
labelsoptional
Partial<Record<MatrixOrbState, string>>
Caption under the orb, per state. Defaults to "Idle", "Listening" and "Thinking".
captionoptional
boolean
Show the caption under the orb. Turn it off when the orb is a small decorative indicator instead of a status the reader is reading.
classNameoptional
string
Extra classes merged onto the orb's wrapper.

Prop

Type

Description

state

idlelisteningthinking

What the orb is doing. Each state has its own motion, and changing it blends from the state currently on screen.

level

number

Amplitude from 0 to 1, for driving the orb from a real signal such as an audio level. Omit it and the orb runs its own envelope.

variant

whitecalamansislatecitrus

Accent the dots are painted in — brand lime by default. White is the ink, read from the theme, so the sphere stays monochrome and follows light and dark.

color

string

Dot colour, overriding the palette accent. A change recolours the sphere without restarting its motion.

size

number

Width and height of the orb in pixels. The gap under its caption scales with it.

lobes

number

Satellites around the core, 2 to 10. More of them means a busier body and shorter necks between the lobes.

gooey

boolean

Run the fuse at all. Off, the circles simply overlap and you can see the body's construction.

viscosity

number

The blur behind the fuse, in pixels — how far a lobe reaches for its neighbour before the neck parts. Defaults to 0.078 of the stage, which at five lobes leaves neighbouring bulges just touching: one silhouette with a dip between them, rather than a pinwheel of separate drops. It scales with the stage, so the body reads the same at every size.

threshold

number

The alpha ramp's slope — how hard the fused edge is, and how much a lobe stretches before it comes off.

labels

Partial<Record<MatrixOrbState, string>>

Caption under the orb, per state. Defaults to "Idle", "Listening" and "Thinking".

caption

boolean

Show the caption under the orb. Turn it off when the orb is a small decorative indicator instead of a status the reader is reading.

className

string

Extra classes merged onto the orb's wrapper.

Dependencies

motionfigma-squirclereact-use-measure

Contact

Found a bug or issue? Open an issue or send a note.

License & Usage

•Free to use and modify in personal and commercial projects.
•Attribution to Calamansi UI is appreciated when using a component.
•Please do not resell the components as your own kit.

PreviousGitHub activity

NextSidebar