AI Blob
Animated 3D blob with customizable colors and glow effects
ai-blob-tw
Customize
Size
400
Animation Speed
1.0
Resolution
0.50
Glow Intensity
0.8
Noise Scale
3.0
Inner Scale
1.0
Color 1
Color 2
Color 3
Color 4
Props
9| Name | Type | Default | Description |
|---|---|---|---|
size | number | 400 | Width and height of the blob container in pixels |
animationSpeed | number | 1.0 | Animation speed multiplier (higher = faster) |
glowIntensity | number | 0.8 | Intensity of the glow effect (0-1) |
noiseScale | number | 3.0 | Scale of the noise pattern (higher = more detail) |
innerScale | number | 1.0 | Scale of the internal noise patterns (higher = smaller patterns) |
resolution | number | 1.0 | Resolution multiplier for performance (0.5 = half res, 1.0 = full) |
colors | string[] | ["#ff006e", "#8338ec", "#3a86ff", "#06ffa5"] | Array of color hex strings for gradient (2-4 colors recommended) |
className | string | "" | Additional CSS classes |
style | React.CSSProperties | undefined | Inline styles |
sizenumberWidth and height of the blob container in pixels
Default
400animationSpeednumberAnimation speed multiplier (higher = faster)
Default
1.0glowIntensitynumberIntensity of the glow effect (0-1)
Default
0.8noiseScalenumberScale of the noise pattern (higher = more detail)
Default
3.0innerScalenumberScale of the internal noise patterns (higher = smaller patterns)
Default
1.0resolutionnumberResolution multiplier for performance (0.5 = half res, 1.0 = full)
Default
1.0colorsstring[]Array of color hex strings for gradient (2-4 colors recommended)
Default
["#ff006e", "#8338ec", "#3a86ff", "#06ffa5"]classNamestringAdditional CSS classes
Default
""styleReact.CSSPropertiesInline styles
Default
undefined