What is fold-gradient?

FoldGradient is a small visual effect for websites: soft, moving sheets of colored light that work well as a background for a hero section on a landing page. It is built as a custom shader, a small program that runs on the graphics card to draw the animation frame by frame, using an open source shader toolkit called Paper Shaders. Rather than publishing it as an installable package, the author distributes it by copy and paste. The project's demo site has a button that copies a ready made prompt containing the full component and shader code, which you can hand directly to a coding assistant like Claude Code or Cursor so it drops the files into your project for you. If you prefer, you can instead copy the two source files yourself and add one small dependency. Once added, the effect is a single React component you place on the page, with props to control up to five colors for the light sheets, the background color, how soft or sharp the edges look, saturation, the angle the sheets appear to drape at, how zoomed in the pattern is, an optional striped ribbon look, and the animation speed. Under the hood it uses a single WebGL2 shader that layers several rounds of a noise technique called domain warped fractal noise to create the flowing shapes, then adds directional lighting effects and careful color blending so the gradient looks smooth rather than banded. To try it locally, you install dependencies and run the development server. The project is released under the MIT license, which means you can use, modify, and redistribute it freely, including in commercial projects, as long as the license notice is kept.