v0.3 · 11 new shaders, zero dependencies

Gradients
that feel alive.

A WebGL gradient component for React. Twenty shaders, one prop to move between them, and nothing else to install.

Get started Open the playground

npm install gradflow

Now playing

default

01/12

type="aurora"

The collection

20 shaders, 22 presets.

Each one is a hand-written fragment shader driven by the same three colors. Every tile below is live, and all of them share a single WebGL context.

aurora

Curtains of light over a dark sky.

New

eclipse

A ring of light around a dark disc.

New

prism

One band field, split three ways.

New

horizon

A soft glow rising from the bottom edge.

New

caustics

Light through moving water.

New

glass

A soft field behind fluted glass.

New

nebula

Warped dust clouds and a star field.

New

dunes

Ridgelines drifting at their own pace.

silk

Folded, iterated sine cloth.

New

fold

Sheets of light, creased and overlapping.

New

rays

Shafts of light from above.

New

topo

A contour map that keeps redrawing.

mesh

Three blobs of color, always blending.

New

halftone

A rotated dot screen, print style.

smoke

Turbulent, slow-rolling plumes.

animated

A rotating two-layer blend.

wave

Stacked sine waves across the frame.

stripe

Warped diagonal bands.

conic

A sweep around the center.

linear

A vertical ramp with a gentle sway.

What is new

Rebuilt from the triangle up.

The renderer was rewritten for this release. It is smaller, it survives things the old one did not, and it learned a few tricks.

preset="spectrumspectrum"

It morphs. It never cuts.

Change the type, the colors or the speed and the canvas blends there over a noise front, at whatever duration you set.

It follows the pointer.

Set interactive and the pattern swells under the cursor. Try it on this card.

Dependencies.

Raw WebGL: one fragment shader and one triangle, 11 kB gzipped. The rendering library the last version shipped with is gone.

Scrolled out of viewPaused
Tab in the backgroundPaused
Reduced motion requestedStill frame
WebGL context lostRestored

Asleep when unseen.

The render loop only runs while someone can see it. No props, no observers to wire up.

Three colors in.

Every shader reads the same three colors, as hex strings or RGB objects, so a palette carries across all twenty.

Quick start

From install to a living background in a minute.

It is a client component that renders one canvas and fills its parent. Put it behind your content and it is done.

01Install
Source codebash
```
npm install gradflow
```

02Put it behind something

import { GradFlow } from 'gradflow'

export default function Hero() {
  return (
    <section className="relative isolate h-screen">
      <div className="absolute inset-0 -z-10">
        <GradFlow preset="borealis" />
      </div>

      <h1>Your content, on top.</h1>
    </section>
  )
}

03Make it yours

<GradFlow
  config={{
    type: 'prism',
    color1: '#ff5a1e',
    color2: '#285aff',
    color3: '#78d2ff',
    speed: 0.5,
    scale: 1,
    noise: 0.1,
  }}
  transition={900}
  interactive
/>

In an interface

Behind real UI, not just a hero.

A gradient earns its place when there is something on top of it. These are working components, and their source is one click away.

See all five

Studio

$19per seat / month

Unlimited projects
Custom domains
Priority rendering
Team seats included

Questions

Things people ask first.

Yes. GradFlow is marked as a client component, so you can import it straight into a server component. It renders an empty canvas on the server and starts drawing once it mounts.

Each gradient is a single full-screen triangle and one fragment shader, capped at twice the device pixel ratio. The loop stops whenever the canvas is off screen or the tab is hidden, so a gradient nobody is looking at costs nothing.

Every GradFlow owns a WebGL context, and browsers allow roughly sixteen per page before they start dropping the oldest. A handful is fine. For a grid of dozens, render them from one shared context, which is how the collection on this page works.

They get a single still frame of the same gradient. Nothing animates, and the pointer effect is switched off. You can force the same behaviour yourself with the paused prop.

Yes. GradFlow forwards its ref to the canvas, so with preserveDrawingBuffer set you can call toBlob or toDataURL on it at any time. The playground does exactly that.

Not through the public API yet. The twenty built-in types cover a wide range, and each responds to scale, speed, noise and your three colors.

Gradientsthat feel alive.

20 shaders, 22 presets.

Rebuilt from the triangle up.

It morphs. It never cuts.

It follows the pointer.

Dependencies.

Asleep when unseen.

Three colors in.

From install to a living background in a minute.

01Install

02Put it behind something

03Make it yours

Behind real UI, not just a hero.

Welcome back

Studio

Things people ask first.

Does it work with Next.js and server components?

How heavy is it at runtime?

How many can I put on one page?

What happens for people who prefer reduced motion?

Can I export a still image?

Can I write my own shader?

Gradients
that feel alive.