Gradient Blob

Morphing 3D blob with gradient colors and cursor interaction

gradient-blob-tw

Customize

Tweak the props live

Animation

Speed1

Size1

Rotation Speed1

Auto Rotate

Morph & Breathe

Morph Intensity1.5

Enable Cursor Morph

Breathe Animation

Breathe Duration2

Breathe Delay0.5

Appearance

Metallic0

Opacity1

Parallax & Interaction

Parallax Effect

Parallax Strength0.5

Touch Enabled

Performance

Quality

Max FPS60

Pause When Offscreen

Colors

Primary Color

#5227FF

Secondary Color

#FF9FFC

Accent Color

#B19EEF

Base Color

#27C5FF

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

Default:1.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

Default:1.0

morphIntensitynumber

Morphing intensity (0-1)

Default:0.5

enableCursorMorphboolean

Enable cursor-based morphing

Default:true

breatheboolean

Enable breathing animation effect

Default:false

breatheDurationnumber

Duration of one breath cycle in seconds

Default:2.0

breatheDelaynumber

Delay between breath cycles in seconds

Default:0.5

parallaxboolean

Enable parallax movement based on cursor

Default:false

parallaxStrengthnumber

Strength of parallax effect (0-1)

Default:0.5

metallicnumber

Metallic surface appearance (0-1)

Default:0.0

opacitynumber

Overall blob opacity (0-1)

Default:1.0

rotationSpeednumber

Rotation speed multiplier

Default:1.0

autoRotateboolean

Enable automatic rotation

Default:true

touchEnabledboolean

Enable touch interaction on mobile

Default:true

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

Quality preset for performance/visual tradeoff

Default:"medium"

maxFPSnumber

Maximum frames per second cap

Default:60

pauseWhenOffscreenboolean

Pause rendering when component is off-screen

Default:true

classNamestring

Additional CSS classes

Default:""

childrenReact.ReactNode

Content to render on top of the blob

Default:undefined