3D & WebGLProNew
Dot Globe
A 3D sphere of dots in three.js. It turns slowly, some dots pulse, and you can spin it with the mouse.
Customize
dotColor
highlightColor
A Codearia component ยท Terms of use
Props
10 properties| Property | Type | Default | Description |
|---|---|---|---|
| dotCount | number | 2400 | Number of dots on the sphere. |
| dotColor | string | "#a3a3a3" | Color of the regular dots. |
| highlightColor | string | "#ffffff" | Color of the pulsing dots. |
| dotSize | number | 2.4 | Dot size, in pixels. |
| highlightRatio | number | 0.04 | Share of pulsing dots. |
| speed | number | 1 | Speed. 0 stops the motion. |
| tilt | number | 18 | Axis tilt, in degrees. |
| draggable | boolean | true | The globe can be spun by mouse or finger. |
| children | ReactNode | โ | Content on top of the effect. |
| className | string | โ | Classes for the wrapper. |
Dependencies
3 required packages
npm install three clsx tailwind-merge