π Multicolor gradient wallpaper created algorithmically and shimmers smoothly.
GitHub Workflow Status npm npm npm bundle size
- π₯ Zero dependencies
- βοΈ Flexible configuration
- π¦ Lightweight (~2.5kB gzipped)
- π Supports TypeScript type definition
npm install twallpaper
yarn add twallpaper
pnpm add twallpaper
You can play with twallpaper on twallpaper.js.org
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()
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' ] }} /> ) }
npm install @twallpaper/vue
yarn add @twallpaper/vue
pnpm add @twallpaper/vue
<!-- 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>
Initialize animation (before reinitializing, calls the dispose() method).
Type: TWallpaperOptions
Type: Element
Start or stop animation.
Type: boolean
Default: true
Destroy the instance wallpaper.
Start or stop mouse scroll animation.
Type: boolean
Default: false
Next animation position (animation turns off after use).
Execution toNextPosition is finished.
Type: function
Force update colors.
Type: string[]
Force update frametime.
Type: number
Default: 30
Force update pattern options.
Type: PatternOptions
Force update tails speed.
Type: number
Default 90
| 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. |