3D & WebGLProNew
Glass Blob
A few glass blobs merge and split. The backdrop bends through them, and one blob follows the cursor.
Customize
tint
background
stripeColor
A Codearia component · Terms of use
Props
10 properties| Property | Type | Default | Description |
|---|---|---|---|
| tint | string | "#ffffff" | Glass tint. White keeps it clear. |
| background | string | "#0a0a0a" | Background color. |
| stripeColor | string | "#737373" | Color of the stripes seen through the glass. |
| size | number | 1 | Blob size. |
| smoothness | number | 0.5 | How softly the blobs merge. |
| refraction | number | 0.6 | Strength of refraction in the glass. |
| speed | number | 1 | Speed. 0 stops the motion. |
| followPointer | boolean | true | One blob follows the cursor. |
| children | ReactNode | — | Content on top of the effect. |
| className | string | — | Classes for the wrapper. |
Dependencies
3 required packages
npm install ogl clsx tailwind-merge