AI Blob
Animated 3D blob with customizable colors and glow effects
ai-blob-tw
Customize
Tweak the props liveSize & Animation
400
1
0.5
Effects
0.8
3
1
Colors
#ff006e#8338ec#3a86ff#06ffa5Props
| 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