A soft gradient blob that morphs toward the cursor
| 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 |
widthnumber | stringWidth of the component in pixels or CSS value
"100%"heightnumber | stringHeight of the component in pixels or CSS value
"100%"speednumberAnimation speed multiplier
1.0primaryColorstringPrimary blob color in hex format
"#5227FF"secondaryColorstringSecondary blob color in hex format
"#FF9FFC"accentColorstringAccent highlight color in hex format
"#B19EEF"baseColorstringBase color for the blob in hex format
"#27C5FF"sizenumberBlob size multiplier
1.0morphIntensitynumberMorphing intensity (0-1)
0.5enableCursorMorphbooleanEnable cursor-based morphing
truebreathebooleanEnable breathing animation effect
falsebreatheDurationnumberDuration of one breath cycle in seconds
2.0breatheDelaynumberDelay between breath cycles in seconds
0.5parallaxbooleanEnable parallax movement based on cursor
falseparallaxStrengthnumberStrength of parallax effect (0-1)
0.5metallicnumberMetallic surface appearance (0-1)
0.0opacitynumberOverall blob opacity (0-1)
1.0rotationSpeednumberRotation speed multiplier
1.0autoRotatebooleanEnable automatic rotation
truetouchEnabledbooleanEnable touch interaction on mobile
truequality"low" | "medium" | "high"Quality preset for performance/visual tradeoff
"medium"maxFPSnumberMaximum frames per second cap
60pauseWhenOffscreenbooleanPause rendering when component is off-screen
trueclassNamestringAdditional CSS classes
""childrenReact.ReactNodeContent to render on top of the blob
undefined