Drift Field

NewFree

Tens of thousands of particles drawn along an animated curl-noise flow into long, silky trails, that part around the cursor like water around a stone.

webgl
particles
flow field
curl noise
background
interactive
hero

Preset

Open in new tab

Particles

Particle density0.45

Line width0.8px

Flow

Flow speed1.00

Flow scale1.45

Curl turbulence0.35

Current0.55

Light

Trail length0.55

Line brightness1.00

Glow0.80

Pointer

Pointer force1.00

Pointer radius0.17

Colour

Colour A

Colour B

Colour C

Background

Grain0.35

<DriftField />

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/drift-field.json

Needs a React + Tailwind project set up with shadcn. Copies the effect into your project, along with lib/effect-runtime.ts, the small WebGL layer it runs on. No other dependencies.

Or from npm

pnpm add @kagadmodyaa/effects

import { DriftField } from '@kagadmodyaa/effects/drift-field'

One package with every free effect, one import path each. No Tailwind or shadcn needed, and no stylesheet to import: the few layout rules an effect needs come with it. The npm package and the command above ship the same source.

Usage

The effect fills its parent, so give the parent a height and put your content above it. Choose a theme with preset; any prop you pass as well overrides the preset.

import { DriftField } from '@/components/effects/drift-field/drift-field'

export function Hero() {
  return (
    <section className="relative h-[600px] overflow-hidden">
      <DriftField className="absolute inset-0" />
      <div className="relative z-10">{/* your content */}</div>
    </section>
  )
}

<DriftField preset="Nebula" density={0.45} />

Presets

Silk
Nebula
Tide
Moss
Ink on Paper

Props

Name	Type	Default	Description
preset	'Silk' \| 'Nebula' \| 'Tide' \| 'Moss' \| 'Ink on Paper'	none (the defaults below)	A named theme. Any prop you pass as well overrides the preset’s value.
density	number	0.45	How many particles. The count scales with the size of the stage and backs off on slow devices. Range 0.1 to 1.
lineWidth	number	0.85	Width of each line. Range 0.5 to 3 px.
speed	number	1	How fast the water runs. Range 0.1 to 2.5.
scale	number	1.45	Size of the flow's features. Larger is broader and calmer. Range 0.4 to 2.5.
turbulence	number	0.35	Finer, restless curls mixed into the flow. 0 gives long smooth sweeps. Range 0 to 1.5.
drift	number	0.55	Steady current the curls ride on. 0 is pure eddies. Range 0 to 1.
trail	number	0.55	How long trails linger. Range 0 to 1.
brightness	number	1	Brightness of the lines. Range 0 to 2.
glow	number	0.8	Soft bloom around the lines. Range 0 to 1.5.
pointerForce	number	1	How strongly the pointer parts the flow and how hard a click ripples. 0 turns it off. Range 0 to 2.
pointerRadius	number	0.17	Size of the pointer's influence, as a fraction of the stage's shorter side. Range 0.04 to 0.4.
colorA	string	'#f6ecd6'	Slow, downward-flowing water. A hex colour.
colorB	string	'#e6b04a'	The main current. A hex colour.
colorC	string	'#dd9068'	Fast, upward-flowing water. A hex colour.
background	string	'#0d0c0b'	Background colour. A light colour switches the trails to ink on paper. A hex colour.
grain	number	0.35	Film grain. Range 0 to 1.
className	string	—	Extra class on the root element. The effect fills its parent: give the parent a height.
style	CSSProperties	—	Inline style on the root element.

Files

What the command adds to your project, and where.

components/effects/drift-field/drift-field.tsx
The component.
components/effects/drift-field/engine.ts
The component.
components/effects/drift-field/fallback.ts
The component.
components/effects/drift-field/loop.ts
The component.
components/effects/drift-field/passes.ts
The component.
components/effects/drift-field/shaders.ts
The fragment shader, as a string. Edit it to change the picture.
lib/effect-runtime.ts
Shared by every shader effect: resizing, pausing, reduced motion, context loss and the no-WebGL fallback. Installed once.

Behaviour

Draws on a WebGL canvas that is created in the browser only, so there is nothing to hydrate differently.
Pauses while it is off screen or the tab is hidden, and lowers its resolution automatically if frames run slow.
With prefers-reduced-motion it draws one still frame instead of animating.
Without WebGL you see a still gradient in the same colours.
It is decorative: hidden from assistive technology, and it never takes focus or captures clicks.

See all effects