TWallpaper

🌈 Multicolor gradient wallpaper created algorithmically and shimmers smoothly.

Features

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

Browsers support

Edge / IE	Firefox	Chrome	Safari	iOS Safari	Opera	Yandex
✔ , IE11 (partial)	✔	✔	✔	✔	✔	✔

Installation

# with npm:
npm install twallpaper

# or yarn:
yarn add twallpaper

Demo

You can play with twallpaper on twallpaper.js.org

Usage

import { TWallpaper } from 'twallpaper'

const container = document.querySelector('.tw-wrap')
const wallpaper = new TWallpaper(container, { /* options */ })

Using CDN

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

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

API

.init(options)

Re/initilize animation (before reinitializing, calls the dispose() method).

options

Type: TWallpaperOptions and Container

.animate(start?)

Start/stop animation.

start

Type: boolean
Default: true

.scrollAnimate(start?)

Start/stop mouse scroll animation.

start

Type: boolean
Default: false

.toNextPosition(callback?)

Next animation position (animation turns off after use).

callback

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

.dispose()

Destroy the instance wallpaper.

Options