Atelier UI®

DocsCatalogShader StudioPricingGithub
Docs 1.0.0

tools

  • Browse Catalog
  • Shader Studio
    pro
  • Collage
    new

Documentation

  • Installation
  • How to contribute

Components (45)

  • Orbit Gallery
  • Sphere Gallery
  • Glowing Fog
  • Gradient Flow
  • Halftone Glow
  • Scattered Grid
  • Tag Cloud
  • Edge Bounce
  • Fluid Distortion
  • Image Trail
  • Lens Media
  • Liquid Media
  • Magnetic Dot Grid
  • Pixel Media
  • Pixel Trail
  • Dither Cursor
  • Hover Burst
  • Image Bloom
  • Curve Media
  • Infinite Gallery
  • Infinite Parallax
  • Infinite Zoom
  • Pixel Scroll
  • Scattered Scroll
  • Elastic Stick
  • Letter Swarm
  • Magnify Trail
  • Stacking Grid
  • Wavy Scroll
  • Pixelated Text
  • Text Bounce
  • Text Fluid
  • Text Scramble
  • Falling Text
  • Text Roll
  • Clip Reveal
  • Stripe Wipe
  • Sweep Exit
  • Smooth Scroll
  • 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

One license unlocks every pro feature for life, including the ones we haven't built yet.

Get pro access

Already have an account? Sign in


API

NameTypeDefaultDescription
colorsstring[]["#2D1499", "#C2D0F5", "#F7EBEB"]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