Stripe Gradient

A reverse engineered JavaScript library using Three.js & Vite to replicate the animated Stripe gradients.

Basic usage

Install

Clone this repo and then in command line type:

• npm install / yarn install / pnpm to install to install all dependencies
• run dev to run dev-server
• run build to build project from sources

HTML

<canvas class="gradient-canvas" data-js-controller="Gradient"></canvas>

CSS

.HomepageHeroGradient {
  --gradientColorZero: #a960ee;
  --gradientColorOne: #ff333d;
  --gradientColorTwo: #90e0ff;
  --gradientColorThree: #ffcb57;
  ...;
}

JavaScript

new Gradient({
  dom: document.querySelector(`[data-js-controller~=Gradient]`)
});