https://github.com/crashmax-dev/twallpaper
🌈 Multicolor gradient wallpaper created algorithmically and shimmers smoothly.
https://github.com/crashmax-dev/twallpaper
animation background canvas gradient hacktoberfest javascript library multicolor npm-package telegram typescript wallpaper zero-dependency
Last synced: 5 months ago
JSON representation
🌈 Multicolor gradient wallpaper created algorithmically and shimmers smoothly.
- Host: GitHub
- URL: https://github.com/crashmax-dev/twallpaper
- Owner: crashmax-dev
- License: mit
- Created: 2022-03-05T16:03:44.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2023-09-21T13:51:56.000Z (over 2 years ago)
- Last Synced: 2025-08-04T02:53:17.834Z (6 months ago)
- Topics: animation, background, canvas, gradient, hacktoberfest, javascript, library, multicolor, npm-package, telegram, typescript, wallpaper, zero-dependency
- Language: TypeScript
- Homepage: https://twallpaper.js.org
- Size: 9.05 MB
- Stars: 88
- Watchers: 2
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - crashmax-dev/twallpaper - 🌈 Multicolor gradient wallpaper created algorithmically and shimmers smoothly. (TypeScript)
README
🌈 Multicolor gradient wallpaper created algorithmically and shimmers smoothly.
## Features
- 🔥 Zero [dependencies](https://www.npmjs.com/package/twallpaper?activeTab=dependents)
- ⚙️ Flexible [configuration](#options-1)
- 📦 Lightweight ([~2.5kB gzipped](https://bundlephobia.com/package/twallpaper))
- 📜 Supports [TypeScript](https://www.typescriptlang.org) type definition
## Installation
```sh
npm install twallpaper
```
```sh
yarn add twallpaper
```
```sh
pnpm add twallpaper
```
## Demo
You can play with `twallpaper` on [twallpaper.js.org](https://twallpaper.js.org)
## Usage (vanilla)
```js
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
```sh
npm install @twallpaper/react
```
```sh
yarn add @twallpaper/react
```
```sh
pnpm add @twallpaper/react
```
```js
import { TWallpaper } from '@twallpaper/react'
import '@twallpaper/react/css'
export function App() {
return (
)
}
```
## Vue
```sh
npm install @twallpaper/vue
```
```sh
yarn add @twallpaper/vue
```
```sh
pnpm add @twallpaper/vue
```
[](https://codesandbox.io/s/compassionate-fog-wmhg4d?fontsize=14&hidenavigation=1&theme=dark)
## Using CDN
```html
```
## API
### `.init(options?, container?)`
Initialize animation (before reinitializing, calls the `dispose()` method).
#### options
Type: [`TWallpaperOptions`](https://github.com/crashmax-dev/twallpaper/blob/master/packages/twallpaper/src/types.ts#L21-L28)
#### 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`](https://github.com/crashmax-dev/twallpaper/blob/master/packages/twallpaper/src/types.ts#L12-L19)
### `.updateTails(tails?)`
Force update tails speed.
#### tails
Type: `number`\
Default `90`
## Options
KeyTypeDefaultDescriptioncolorsstring[]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.
