How To create the Stripe Website Gradient Effect

Written by / Original link on Oct. 13, 2021


Kevin Hufnagl reverse engineered Stripe’s Website Gradient Effect. Here’s what he found on the JavaScript side of things:

Essentially they are using a minimalistic implementation of WebGL which they called minigl and a Gradient Class which is used to store all of our animation properties and control the animation.

See the Pen
Stripe Website Gradient Animation
by Kevin Hufnagl (@kevinhufnagl)
on CodePen.

How To create the Stripe Website Gradient Effect →

Related : Keep an eye on this interactive Mesh and Light Gradients Generator:

stripe-y gradients, of course#threejs #r3f

— Chase Davis (@Chase_Davis_) December 20, 2020

No way to export things yet, but the author is thinking about it …

bram link bram stripe webgl bram

« How opcache works - CSS Logical Properties Mapping »