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:

1. Import the AestheticFluidBg class from the package:

import { AestheticFluidBg } from "color4bg"

2. 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 |

For more usage, see examples

License

This project is licensed under the MIT License.