https://github.com/scottbedard/gradient

A customizable version of Stripe.com's background animation
https://github.com/scottbedard/gradient

Last synced: 2 months ago
JSON representation

A customizable version of Stripe.com's background animation

• Host: GitHub
• URL: https://github.com/scottbedard/gradient
• Owner: scottbedard
• Created: 2022-06-15T03:09:45.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-29T17:00:32.000Z (almost 2 years ago)
• Last Synced: 2024-10-20T04:34:19.367Z (2 months ago)
• Language: JavaScript
• Homepage: https://gradient.scottbedard.net
• Size: 60.5 KB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# `@bedard/gradient`

This library is a customizable version of the background animation at [Stripe.com](https://stripe.com/). I am not affiliated with Stripe, I just thought the animation was cool and wanted to learn how it worked. If you find this interesting, you may also like my exploration of [Warp's button animation](https://github.com/scottbedard/warp-buttons/).

[View live example →](https://gradient.scottbedard.net)

### Basic usage

Install the script using the CDN

```html

```

Or via NPM

```bash

npm install @bedard/gradient

```

Then create an instance with reference to a canvas

```js

const canvas = document.querySelector('canvas')

new Gradient(canvas, {

  colors: ['#ffffff', '#f87171', '#f9a8d4', '#fef08a'],

  seed: Math.random(),

})

```

The animation can be started / stopped using the play and pause methods.