Skip to content

🌈 Multicolor gradient wallpaper created algorithmically and shimmers smoothly.

License

Notifications You must be signed in to change notification settings

crashmax-dev/twallpaper

Repository files navigation



TWallpaper

🌈 Multicolor gradient wallpaper created algorithmically and shimmers smoothly.

GitHub Workflow Status npm npm npm bundle size

Features

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()
Edit twallpaper-typescript-example

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'
        ]
      }}
    />
  )
}
Edit twallpaper-react-example

Vue

npm install @twallpaper/vue
yarn add @twallpaper/vue
pnpm add @twallpaper/vue

Edit @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

KeyTypeDefaultDescription
colorsstring[]Array of colors in hex format. Allowed maximum of 4 colors.
fpsnumber30Animation speed.
tailsnumber90Tail speed animation.
animatebooleantrueAnimation is enabled.
scrollAnimatebooleanfalseAnimation is enabled when scrolling.
patternPatternOptionsPattern options.
pattern.imagestringWallpaper image. Use standard pattern or create your own.
pattern.maskbooleanfalseOption enables a mask for the background image using the mask-image css-property.
pattern.backgroundstring#000Background color for the pattern image. Background does not work when pattern.mask is enabled.
pattern.sizestringautoSize of the pattern image.
pattern.blurnumber0Blur of the pattern image. Blur does not work when pattern.mask is enabled.
pattern.opacitynumber0.5Opacity of the pattern image.