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