Orb
Free
A glowing, breathing energy orb with a swirling surface that brightens and wobbles under the pointer.
Charge up
Hover the orb
Customize
#ff784f
0.6
0.6
Spin on hover
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/orb.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/orb.tsx.
Usage
import { Orb } from "@/components/ui/orb";
<section className="relative h-[600px] bg-ink-950">
<Orb color="#ff784f" size={0.6} />
</section>Props
6 properties| Property | Type | Default | Description |
|---|---|---|---|
| color | string | "#ff784f" | Orb color as a hex value. |
| size | number | 0.6 | Diameter as a share of the shorter side, from 0.2 to 1. |
| hoverIntensity | number | 0.6 | How much the orb distorts and brightens under the pointer, from 0 to 1. |
| rotateOnHover | boolean | true | Spin the swirling surface faster while hovered. |
| quality | number | 1 | Render resolution from 0.25 to 1. Lower is cheaper. |
| className | string | — | Extra classes for the canvas. It fills its nearest positioned parent. |
Dependencies: motion