ProductVisit discovery

color4bg.js

Cool colorful backgrounds, generated by JS

Detected 22h ago·viaMicrolaunch

Built bywinterx

#javascript

Visit Product

Overview

Grounded in available product and source data

color4bg.js

Super easily generate dynamic, abstract, and visually stunning background images for your web pages based on WebGL and JavaScript. High performance.

Demo

Please visit: color4bg.com

🚀 Features

Customizable Colors: You can specify an array of up to 6 colors that will be used to generate the background pattern.
Dynamic Animation: The generated background can be set to loop, creating a mesmerizing, fluid animation.
Consistent Patterns: By providing a seed value, you can ensure that the same pattern is generated every time, making it easy to integrate into your web design.
Easy Integration: Simply import the **Bg class and create an instance with your desired settings.

📦 Installation

Install color4bg via npm:

npm install color4bg

Or via yarn:

yarn add color4bg

Or via pnpm:

pnpm add color4bg

📖 Usage

To use color4bg.js, follow these steps:

For example, if you want to add Aesthetic Fluid Bg:

Import the AestheticFluidBg class from the package:

import { AestheticFluidBg } from "color4bg"

Create an instance of AestheticFluidBg with your customized settings:

let colorbg = new AestheticFluidBg({ dom: "box", colors: ["#D1ADFF", "#98D69B", "#FAE390", "#FFACD8", "#7DD5FF", "#D1ADFF"], seed: 1000, loop: true
})

Integrations

React

For React projects, you can use the @color4bg/react package which provides a ready-to-use React component.

Installation:

npm install @color4bg/react

Quick Start:

import { Color4Bg } from '@color4bg/react' function App() { return ( <div style={{ width: '100%', height: '100vh', position: 'relative' }}> <Color4Bg style="abstract-shape" /> <h1>Your content here</h1> </div> )
}

With Custom Colors:

<Color4Bg style="aesthetic-fluid" colors={["#D1ADFF", "#98D69B", "#FAE390", "#FFACD8", "#7DD5FF", "#D1ADFF"]} loop={true} seed={1000}
/>

📚 For more details, examples, and API documentation, please visit the @color4bg/react package directory

All Background(Bg) Types

Available Background Classes

You can import any of the following background classes:

import { AbstractShapeBg, AestheticFluidBg, AmbientLightBg, BigBlobBg, BlurDotBg, BlurGradientBg, ChaosWavesBg, CurveGradientBg, GridArrayBg, RandomCubesBg, StepGradientBg, SwirlingCurvesBg, TrianglesMosaicBg, WavyWavesBg, ColorBg // Base class
} from "color4bg"

Configuration Options

Key	Value	Describe
`dom`	`string`	Id of DOM element where to append colorbg, no need to add "#"
`colors`	`Array`	An array of up to 6 hexadecimal color values
`seed`	`Number`	A Pseudo-random numerical value used to generate a consistent pattern.
`loop`	`Bool`	Determines whether the background should animated looply or not