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: about 1 month 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 3 years ago)
• Default Branch: master
• Last Pushed: 2023-09-21T13:51:56.000Z (about 1 year ago)
• Last Synced: 2024-10-28T12:01:26.200Z (about 1 month 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: 69
• Watchers: 2
• Forks: 5
• 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

        





  

    

    


    
TWallpaper


  





  🌈 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

```

[![Edit @twallpaper/vue](https://codesandbox.io/static/img/play-codesandbox.svg)](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.