🌈 Multicolor gradient wallpaper created algorithmically and shimmers smoothly.
MIT License
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>
.init(options?, container?)
Initialize animation (before reinitializing, calls the dispose()
method).
Type: TWallpaperOptions
Type: Element
.animate(start?)
Start or stop animation.
Type: boolean
Default: true
.dispose()
Destroy the instance wallpaper.
.scrollAnimate(start?)
Start or stop mouse scroll animation.
Type: boolean
Default: false
.toNextPosition(onNext?)
Next animation position (animation turns off after use).
Execution toNextPosition
is finished.
Type: function
.updateColors(colors)
Force update colors.
Type: string[]
.updateFrametime(fps?)
Force update frametime.
Type: number
Default: 30
.updatePattern(pattern)
Force update pattern options.
Type: PatternOptions
.updateTails(tails?)
Force update tails speed.
Type: number
Default 90