Atelier UI®

DocsShader StudioGithub
Docs 1.0.0

Getting started

  • Installation
  • How to contribute

tools

  • Browse Catalog
  • Shader Studio
    new
  • Fluid Scene

Components (34)

  • Clip Reveal
  • Stripe Wipe
  • Sweep Exit
  • Orbit Gallery
  • Sphere Gallery
  • Glowing Fog
    pro
  • Gradient Flow
    pro
  • Halftone Glow
    pro
  • Edge Bounce
  • Fluid Distortion
  • Image Trail
  • Lens Media
  • Liquid Media
  • Magnetic Dot Grid
  • Pixel Media
  • Pixel Trail
  • Pixelated Text
  • Text Bounce
  • Text Fluid
  • Text Roll
  • Text Scramble
  • Curve Media
  • Infinite Gallery
  • Infinite Parallax
  • Infinite Zoom
  • Pixel Scroll
  • Scattered Scroll
  • Elastic Stick
    pro
  • Text Split
  • WebGL Image
  • WebGL Provider
  • WebGL Scene
  • WebGL Text
  • WebGL Video
Atelier UI 1.0.0 ©2026
Star on githubBuy me a coffeellms.txt
  1. Docs
  2. /
  3. Components
  4. /
  5. Gradient Flow

Gradient Flow

An animated multi-color gradient WebGL flow field background.

React Three Fiber
Drei
Postprocessing
https://atelier-ui.com/gradient-flow
Unlock Code
Open in Shader StudioChange settings live and export the exact component.
Unlock component

Unlock the source code and CLI installation with a one-time license.

Get pro accessSign in
One-time payment. Lifetime access to all current and future pro components.

API

NameTypeDefaultDescription
colorsstring[]["#2D1499", "#F5C2D8", "#D5B2B2"]Palette blended across the flow, interpolated in Oklab. 2 to 8 colors.
speednumber0.1Animation speed of the flow field.
scalenumber0.5Scale of the flow pattern.
amplitudenumber0.5Strength of the domain warping.
frequencynumber0.5Frequency of the warping detail.
stripesnumber4Number of banding stripes across the gradient.
seednumber0Random seed that shifts the pattern.
ditherbooleanfalseEnables ordered (Bayer) dithering.
ditherAmountnumber5Dither strength. Only applies when dither is on.
ditherSizenumber4Size of each dither cell in pixels. Only applies when dither is on.
grainbooleantrueEnables animated film grain.
grainAmountnumber0.22Grain strength. Only applies when grain is on.
  • Install
  • Usage
  • API
Star on githubBuy me a coffeellms.txt