React Warped Noise Shaders

Powered by

React

react-shaders

GPU Shaders

Need organic, flowing noise textures without heavy image files? Most developers use static noise images or simple gradients that lack dynamic movement. This React warped noise component uses GPU fractional Brownian motion (fBM) with domain warping to create smooth, organic noise patterns.

Copy-paste TypeScript component that creates mesmerizing warped noise effects with multiple octaves and recursive domain distortion. Sophisticated noise mathematics with customizable parameters. Built for Next.js applications with shadcn/ui design system. GPU-accelerated—smooth organic movement.

React warped noise with fBM mathematics

Organic noise textures with recursive domain warping and custom colormap:

import { WarpedNoiseShaders } from "@/components/ui/shadcn-io/warped-noise-shaders";export default function WarpedNoiseShadersDemo() {  return (    <WarpedNoiseShaders      speed={0.6}      scale={1.2}      warpStrength={1.5}      colorIntensity={1.3}      noiseDetail={2.0}      className="h-full w-full"    />  );}

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface WarpedNoiseShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  scale?: number;  warpStrength?: number;  colorIntensity?: number;  noiseDetail?: number;}const fragmentShader = `float colormap_red(float x) {    if (x < 0.0) {        return 54.0 / 255.0;    } else if (x < 20049.0 / 82979.0) {        return (829.79 * x + 54.51) / 255.0;    } else {        return 1.0;    }}float colormap_green(float x) {    if (x < 20049.0 / 82979.0) {        return 0.0;    } else if (x < 327013.0 / 810990.0) {        return (8546482679670.0 / 10875673217.0 * x - 2064961390770.0 / 10875673217.0) / 255.0;    } else if (x <= 1.0) {        return (103806720.0 / 483977.0 * x + 19607415.0 / 483977.0) / 255.0;    } else {        return 1.0;    }}float colormap_blue(float x) {    if (x < 0.0) {        return 54.0 / 255.0;    } else if (x < 7249.0 / 82979.0) {        return (829.79 * x + 54.51) / 255.0;    } else if (x < 20049.0 / 82979.0) {        return 127.0 / 255.0;    } else if (x < 327013.0 / 810990.0) {        return (792.02249341361393720147485376583 * x - 64.364790735602331034989206222672) / 255.0;    } else {        return 1.0;    }}vec4 colormap(float x) {    return vec4(colormap_red(x), colormap_green(x), colormap_blue(x), 1.0);}float rand(vec2 n) {    return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);}float noise(vec2 p){    vec2 ip = floor(p);    vec2 u = fract(p);    u = u*u*(3.0-2.0*u);    float res = mix(        mix(rand(ip),rand(ip+vec2(1.0,0.0)),u.x),        mix(rand(ip+vec2(0.0,1.0)),rand(ip+vec2(1.0,1.0)),u.x),u.y);    return res*res;}float fbm( vec2 p ){    const mat2 mtx = mat2( 0.80,  0.60, -0.60,  0.80 );    float f = 0.0;    f += 0.500000*noise( p + iTime * u_speed  ); p = mtx*p*2.02;    f += 0.031250*noise( p ); p = mtx*p*2.01;    f += 0.250000*noise( p ); p = mtx*p*2.03;    f += 0.125000*noise( p ); p = mtx*p*2.01;    f += 0.062500*noise( p ); p = mtx*p*2.04;    f += 0.015625*noise( p + sin(iTime * u_speed) );    return f/0.96875;}float pattern( in vec2 p ){    return fbm( p + fbm( p + fbm( p ) ) * u_warpStrength );}void mainImage( out vec4 fragColor, in vec2 fragCoord ){    vec2 uv = fragCoord/iResolution.x * u_scale;    float shade = pattern(uv * u_noiseDetail);    vec4 color = colormap(shade);    color.rgb *= u_colorIntensity;    fragColor = vec4(color.rgb, shade);}`;export const WarpedNoiseShaders = forwardRef<HTMLDivElement, WarpedNoiseShadersProps>(({  className,  speed = 1.0,  scale = 1.0,  warpStrength = 1.0,  colorIntensity = 1.0,  noiseDetail = 1.0,  ...props}, ref) => {  return (    <div      ref={ref}      className={cn('w-full h-full', className)}      {...props}    >      <Shader        fs={fragmentShader}        uniforms={{          u_speed: { type: '1f', value: speed },          u_scale: { type: '1f', value: scale },          u_warpStrength: { type: '1f', value: warpStrength },          u_colorIntensity: { type: '1f', value: colorIntensity },          u_noiseDetail: { type: '1f', value: noiseDetail },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});WarpedNoiseShaders.displayName = "WarpedNoiseShaders";

Original shader by tdG3Rd - Base warp fBM

Perfect for React 19, Next.js 15, and modern TypeScript projects. Noise patterns generated entirely on GPU using fractional Brownian motion with domain warping. Customizable speed, scale, warp strength, color intensity, and detail. Full shadcn/ui compatibility with Tailwind CSS styling.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/warped-noise-shaders.json

npx shadcn@latest add https://www.shadcn.io/registry/warped-noise-shaders.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/warped-noise-shaders.json

bunx shadcn@latest add https://www.shadcn.io/registry/warped-noise-shaders.json

Usage

import { WarpedNoiseShaders } from "@/components/ui/warped-noise-shaders";

export default function OrganicBackground() {
  return (
    <WarpedNoiseShaders
      speed={0.6}
      scale={1.2}
      warpStrength={1.5}
      colorIntensity={1.3}
      noiseDetail={2.0}
    >
      <div className="relative z-10">
        <h1>Content over warped noise</h1>
      </div>
    </WarpedNoiseShaders>
  );
}

Why noise textures struggle with organic feel

Static noise images can't show dynamic evolution. Simple gradient noise lacks the complexity of natural patterns. Most procedural noise is too regular or geometric. CPU-based noise generation is too slow for real-time warping effects.

GPU fractional Brownian motion solves this with multiple octaves of noise at different frequencies. Domain warping creates organic distortion by feeding noise back into itself recursively. Custom colormap functions create smooth color transitions. Mathematical complexity produces naturally organic results.

This React warped noise component uses fBM with recursive domain warping for authentic organic behavior. Multiple noise octaves create rich detail. Matrix transformations add rotation and scaling. Custom colormap creates beautiful color gradients from dark to pink to white.

React warped noise shader features

• Fractional Brownian motion - Multiple noise octaves create rich, detailed patterns
• Recursive domain warping - Noise feeds back into itself for organic distortion
• Custom colormap function - Mathematically defined color transitions from dark to pink
• Matrix transformations - Rotation and scaling for dynamic pattern evolution
• Multi-octave noise - Six layers of noise at different frequencies and amplitudes
• Smooth interpolation - Hermite smoothing for natural noise transitions
• Time-based animation - Dynamic noise evolution with customizable speed
• Scale control - Zoom in/out to show different pattern details
• Warp strength - Control how much domain distortion affects the pattern
• Color intensity - Brightness multiplier for different aesthetic needs
• Detail control - Adjust noise frequency for fine or coarse patterns
• TypeScript React component - Full IDE support with prop definitions
• Next.js compatible - Works with App Router and modern React patterns
• shadcn/ui integration - Consistent with Tailwind CSS design systems
• Copy-paste installation - No vendor lock-in, you own the shader code
• Organic movement - Natural-looking flow patterns that never repeat exactly

API Reference

WarpedNoiseShaders

Main container component for the warped noise effect.

GPU warped noise troubleshooting

Patterns too static: Increase speed to 1.5+ for more dynamic movement. Lower values create slow, meditative flow.

Scale too large/small: Adjust scale for optimal pattern size. Higher values show more detail, lower values show broader patterns.

Not enough distortion: Increase warpStrength to 2.0+ for more organic warping. Zero creates regular fBM without domain distortion.

Colors too dim/bright: Use colorIntensity to adjust overall brightness. 1.5+ creates vivid colors, 0.8 creates subtle tones.

Pattern too coarse/fine: Modify noiseDetail to adjust frequency. Higher values create finer detail, lower values create broader patterns.

Mobile performance: Reduce noiseDetail to 1.5 and warpStrength to 1.0 on older devices for optimal performance.

Pattern repetition: fBM patterns have very long periods - increase scale or noiseDetail for more variety.

More React shader components

Explore other GPU-accelerated shader components for Next.js applications:

React warped noise FAQ