Skip to content

Niekes/beautiful-backgrounds

Repository files navigation

Beautiful Backgrounds

Build Coverage Npm Storybook stars sponsor this project

The "Beautiful Backgrounds" library offers a collection of customizable web components designed to enhance web pages with visually appealing animated backgrounds. Easy to integrate and use, these components are perfect for adding dynamic and interactive elements to your web applications.

EXAMPLES

Features

  • Multiple Background Components: A variety of background components, each offering unique visual effects.
  • Customizable and Interactive: Each component comes with customizable properties to suit different design needs.
  • Responsive and Efficient: Components are responsive to screen size changes and optimized for performance.

Installation

Using npm:

npm i beautiful-backgrounds --save
import { BbStarTrail } from "beautiful-backgrounds";

In browsers with esm.sh:

<script type="module">
  import { BbStarTrail } from "https://esm.sh/beautiful-backgrounds";
</script>

Usage

The best way to explore all the possibilities, interactive controls, and properties for each background is through our Storybook. It provides a real-time environment to tweak parameters and see the results instantly.


A beautiful, flowing animation of multiple ribbons with deep control over wave physics, rotation, and color transitions. Perfect for high-end, elegant design themes.

A classic matrix-style falling character effect. Highly customizable with character sets, font sizes, speeds, and complex color gradients. Perfect for a retro-hacker or high-tech aesthetic.

A sleek, organic waving grid of hexagons (or other polygons). It features dynamic shading, lightness boosts, and wave physics that create a premium, rhythmic motion across the screen.

A fluid, undulating animation of multiple lines with gradients and 3D depth effects. It offers extensive control over wave physics, line thickness, and color transitions, making it perfect for organic or "liquid" design themes.

Fast-moving particles that follow a geometric grid, creating long neon trails. It's ideal for "electric" or "cyberpunk" themes, offering deep control over particle lifespan, grid geometry, and trail opacity.

A beautiful celestial animation featuring orbiting stars with fading trails. You can adjust orbit radii, star sizes, and colors to create anything from a subtle night sky to a vibrant cosmic nebula.

About

The "Beautiful Backgrounds" library offers a collection of customizable web components designed to enhance web pages with visually appealing animated backgrounds. Easy to integrate and use, these components are perfect for adding dynamic and interactive elements to your web applications.

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

 

Packages

 
 
 

Languages