git404hub

what is fold-gradient fr?

mattrothenberg/fold-gradient — explained in plain English

Analysis updated 2026-05-18

23TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

tl;dr

A copy-paste React component and WebGL shader that renders soft, animated sheets of colored light for landing page hero backgrounds.

vibe map

mindmap
  root((FoldGradient))
    What it does
      Animated gradient background
      WebGL shader
      Hero section effect
    Tech stack
      TypeScript
      React
      WebGL2
    Use cases
      Landing page backgrounds
      Copy paste install
      Customizable colors
    Audience
      Frontend developers

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

what do people make with this?

VIBE 1

Add an animated, glowing gradient background to a website hero section.

VIBE 2

Copy a ready made shader component into a React project without installing an npm package.

VIBE 3

Customize the colors, softness, zoom, and animation speed of a flowing light effect.

what's the stack?

TypeScriptReactWebGL2GLSL

how it stacks up fr

mattrothenberg/fold-gradientad3lre/echoaffaan-m/x-algorithm-score
Stars232323
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyhardmoderate
Complexity2/54/52/5
Audiencedeveloperdevelopergeneral

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · easy time til it works · 5min
MIT license: free to use, modify, and redistribute, including for commercial projects, as long as you keep the copyright notice.

in plain english

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.

prompts (copy fr)

prompt 1
Copy for your agent: install FoldGradient into my React project and use it as the hero background.
prompt 2
Explain how the domain-warped fractal noise in this shader creates the flowing sheet effect.
prompt 3
Show me how to customize the colors and rotation of the FoldGradient component.
prompt 4
How do I run the FoldGradient demo locally?

Frequently asked questions

what is fold-gradient fr?

A copy-paste React component and WebGL shader that renders soft, animated sheets of colored light for landing page hero backgrounds.

What language is fold-gradient written in?

Mainly TypeScript. The stack also includes TypeScript, React, WebGL2.

What license does fold-gradient use?

MIT license: free to use, modify, and redistribute, including for commercial projects, as long as you keep the copyright notice.

How hard is fold-gradient to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is fold-gradient for?

Mainly developer.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.