TWallpaper

🌈 Multicolor gradient wallpaper created algorithmically and shimmers smoothly.

Features

• 🔥 Zero dependencies
• ⚙️ Flexible configuration
• 📦 Lightweight (~2.5kB gzipped)
• 📜 Supports TypeScript type definition

Installation

npm install twallpaper

yarn add twallpaper

pnpm add twallpaper

Demo

You can play with twallpaper on twallpaper.js.org

Usage (vanilla)

import { TWallpaper } from 'twallpaper'
import 'twallpaper/css'

const container = document.querySelector('.tw-wrap')
const wallpaper = new TWallpaper(container, {
  colors: [
    '#dbddbb',
    '#6ba587',
    '#d5d88d',
    '#88b884'
  ]
})
wallpaper.init()

React

npm install @twallpaper/react

yarn add @twallpaper/react

pnpm add @twallpaper/react

import { TWallpaper } from '@twallpaper/react'
import '@twallpaper/react/css'

export function App() {
  return (
    <TWallpaper
      options={{
        colors: [
          '#dbddbb',
          '#6ba587',
          '#d5d88d',
          '#88b884'
        ]
      }}
    />
  )
}

Vue

npm install @twallpaper/vue

yarn add @twallpaper/vue

pnpm add @twallpaper/vue

Using CDN

<!-- JSDelivr  -->
<script src="https://cdn.jsdelivr.net/npm/twallpaper@latest/dist/index.umd.js"></script>

<!-- UNPKG -->
<script src="https://unpkg.com/twallpaper@latest/dist/index.umd.js"></script>

API

.init(options?, container?)

Initialize animation (before reinitializing, calls the dispose() method).

options

Type: TWallpaperOptions

container

Type: Element

.animate(start?)

Start or stop animation.

start

Type: boolean
Default: true

.dispose()

Destroy the instance wallpaper.

.scrollAnimate(start?)

Start or stop mouse scroll animation.

start

Type: boolean
Default: false

.toNextPosition(onNext?)

Next animation position (animation turns off after use).

onNext

Execution toNextPosition is finished.
Type: function

.updateColors(colors)

Force update colors.

colors

Type: string[]

.updateFrametime(fps?)

Force update frametime.

fps

Type: number
Default: 30

.updatePattern(pattern)

Force update pattern options.

pattern

Type: PatternOptions

.updateTails(tails?)

Force update tails speed.

tails

Type: number
Default 90

Options

Key	Type	Default	Description
colors	string[]		Array of colors in hex format. Allowed maximum of 4 colors.
fps	number	30	Animation speed.
tails	number	90	Tail speed animation.
animate	boolean	true	Animation is enabled.
scrollAnimate	boolean	false	Animation is enabled when scrolling.
pattern	PatternOptions		Pattern options.
pattern.image	string		Wallpaper image. Use standard pattern or create your own.
pattern.mask	boolean	false	Option enables a mask for the background image using the mask-image css-property.
pattern.background	string	#000	Background color for the pattern image. Background does not work when pattern.mask is enabled.
pattern.size	string	auto	Size of the pattern image.
pattern.blur	number	0	Blur of the pattern image. Blur does not work when pattern.mask is enabled.
pattern.opacity	number	0.5	Opacity of the pattern image.