Gradient Blob
gradient-blob-tw
Customize
1
1
1.5
2
0.5
0.5
0
1
1
60
Props
| Name | Type | Default | Description |
|---|---|---|---|
| width | number | string | "100%" | Width of the component in pixels or CSS value |
| height | number | string | "100%" | Height of the component in pixels or CSS value |
| speed | number | 1.0 | Animation speed multiplier |
| primaryColor | string | "#5227FF" | Primary blob color in hex format |
| secondaryColor | string | "#FF9FFC" | Secondary blob color in hex format |
| accentColor | string | "#B19EEF" | Accent highlight color in hex format |
| baseColor | string | "#27C5FF" | Base color for the blob in hex format |
| size | number | 1.0 | Blob size multiplier |
| morphIntensity | number | 0.5 | Morphing intensity (0-1) |
| enableCursorMorph | boolean | true | Enable cursor-based morphing |
| breathe | boolean | false | Enable breathing animation effect |
| breatheDuration | number | 2.0 | Duration of one breath cycle in seconds |
| breatheDelay | number | 0.5 | Delay between breath cycles in seconds |
| parallax | boolean | false | Enable parallax movement based on cursor |
| parallaxStrength | number | 0.5 | Strength of parallax effect (0-1) |
| metallic | number | 0.0 | Metallic surface appearance (0-1) |
| opacity | number | 1.0 | Overall blob opacity (0-1) |
| rotationSpeed | number | 1.0 | Rotation speed multiplier |
| autoRotate | boolean | true | Enable automatic rotation |
| touchEnabled | boolean | true | Enable touch interaction on mobile |
| quality | "low" | "medium" | "high" | "medium" | Quality preset for performance/visual tradeoff |
| maxFPS | number | 60 | Maximum frames per second cap |
| pauseWhenOffscreen | boolean | true | Pause rendering when component is off-screen |
| className | string | "" | Additional CSS classes |
| children | React.ReactNode | undefined | Content to render on top of the blob |