Floating Circles
A floating circles component with customizable data and optional title and description.
Gradient background
Install
Use Open-UI CLI or Shadcn CLI to install the component.
Open-UI CLI
Shadcn CLI
Usage
| Prop | Default | Description | Type |
|---|---|---|---|
| gradientBackgroundStart | "rgb(108, 0, 162)" | CSS color for the gradient background start (e.g. rgb(108, 0, 162)). | string |
| gradientBackgroundEnd | "rgb(0, 17, 82)" | CSS color for the gradient background end (e.g. rgb(0, 17, 82)). | string |
| firstColor | "20, 72, 140" | RGB values for the first circle color (e.g. "20, 72, 140"). | string |
| secondColor | "242, 61, 109" | RGB values for the second circle color. | string |
| thirdColor | "152, 50, 166" | RGB values for the third circle color. | string |
| fourthColor | "30, 164, 217" | RGB values for the fourth circle color. | string |
| fifthColor | "242, 87, 73" | RGB values for the fifth circle color. | string |
| pointerColor | "225, 160, 94" | RGB values for the pointer-following circle (shown when interactive). | string |
| size | "80%" | Size of the gradient circles (e.g. "80%" or CSS length). | string |
| blendingValue | "hard-light" | CSS mix-blend-mode for the circles (e.g. hard-light, overlay). | string |
| children | — | Content rendered above the background (e.g. hero text). | ReactNode |
| className | — | Additional CSS class for the content wrapper. | string |
| interactive | true | Whether to show a circle that follows the pointer. | boolean |
| containerClassName | — | Additional CSS class for the root container. | string |