Gradient Blob

Morphing 3D blob with gradient colors and cursor interaction

gradient-blob-tw

Customize

Speed

1.0

Size

1.0

Rotation Speed

1.0

Auto Rotate

Morph Intensity

1.5

Enable Cursor MorphBreathe Animation

Breathe Duration

2.0

Breathe Delay

0.5

Metallic

0.0

Opacity

1.0

Parallax Effect

Parallax Strength

0.5

Touch Enabled

Max FPS

Pause When Offscreen

Primary Color

Secondary Color

Accent Color

Base Color

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

widthnumber | string

Width of the component in pixels or CSS value

Default"100%"

heightnumber | string

Height of the component in pixels or CSS value

Default"100%"

speednumber

Animation speed multiplier

Default1.0

primaryColorstring

Primary blob color in hex format

Default"#5227FF"

secondaryColorstring

Secondary blob color in hex format

Default"#FF9FFC"

accentColorstring

Accent highlight color in hex format

Default"#B19EEF"

baseColorstring

Base color for the blob in hex format

Default"#27C5FF"

sizenumber

Blob size multiplier

Default1.0

morphIntensitynumber

Morphing intensity (0-1)

Default0.5

enableCursorMorphboolean

Enable cursor-based morphing

Defaulttrue

breatheboolean

Enable breathing animation effect

Defaultfalse

breatheDurationnumber

Duration of one breath cycle in seconds

Default2.0

breatheDelaynumber

Delay between breath cycles in seconds

Default0.5

parallaxboolean

Enable parallax movement based on cursor

Defaultfalse

parallaxStrengthnumber

Strength of parallax effect (0-1)

Default0.5

metallicnumber

Metallic surface appearance (0-1)

Default0.0

opacitynumber

Overall blob opacity (0-1)

Default1.0

rotationSpeednumber

Rotation speed multiplier

Default1.0

autoRotateboolean

Enable automatic rotation

Defaulttrue

touchEnabledboolean

Enable touch interaction on mobile

Defaulttrue

quality"low" | "medium" | "high"

Quality preset for performance/visual tradeoff

Default"medium"

maxFPSnumber

Maximum frames per second cap

Default60

pauseWhenOffscreenboolean

Pause rendering when component is off-screen

Defaulttrue

classNamestring

Additional CSS classes

Default""

childrenReact.ReactNode

Content to render on top of the blob

Defaultundefined