Bubble Gradient

A premium, modular React component from the React Bytes collection. Built with React and TypeScript.

Installation

npm install @reactbytes/bubble-gradient

Usage

import { BubbleGradient } from "@reactbytes/bubble-gradient";

export default function Example() {
  return (
    <BubbleGradient />
  );
}

Properties

| Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | backgroundStart | color | #050608 | Starting color for the dark background gradient. | | backgroundEnd | color | #171B21 | Ending color for the dark background gradient. | | bubbleColors | string | #F6F7F8, #CDD2D8, #9AA2AD, #5B6470, #262C33 | Five comma-separated bubble colors. Keeps grayscale by default. | | interactiveColor | color | #FFFFFF | Highlight color for the cursor-following glow bubble. | | circleSize | number | 78 | Base bubble size as a percentage of the container. | | speedMultiplier | number | 1 | Scales the animation speed for all background bubbles. | | blurStrength | number | 40 | Additional blur applied after the goo filter for a softer cloud effect. | | gooBlur | number | 10 | Blur amount inside the SVG goo filter before the bubbles merge. | | gooStrength | number | 18 | Controls how aggressively overlapping bubbles fuse together. | | gooOffset | number | -8 | Threshold offset for the goo filter. | | blendMode | select | screen | Blend mode used for all bubble layers. | | interactiveRadius | number | 280 | Radius of the cursor-following highlight bubble in pixels. | | interactiveFollow | number | 0.12 | Follow smoothing for the interactive bubble. Lower feels floatier. | | bubbleOpacity | number | 0.84 | Master opacity multiplier for the animated layers. | | interactiveOpacity | number | 0.7 | Opacity of the interactive cursor glow bubble. | | contrast | number | 118 | Final contrast applied to the merged bubble stack. | | brightness | number | 94 | Final brightness applied to the merged bubble stack. | | saturation | number | 72 | Final saturation applied to the merged bubble stack. | | noiseOpacity | number | 0.08 | Opacity of the subtle texture overlay. | | vignetteOpacity | number | 0.26 | Strength of the outer vignette. |

Presets

This component includes the following design presets:

• Graphite Mist (Default) (default)
• Smoked Chrome (smoke)
• Ash Bloom (ash)

Credits & Inspiration

Component Source

• ChandruMIT-o - Design & Development

Visual Direction

• Gooey Bubble Gradient - Reference Style

For interactive playgrounds, customizable controls, and code copy-pasting, visit the full showcase page at React Bytes - Bubble Gradient.