React Noise Shaders

React noise with GPU procedural generation. Advanced noise patterns for Next.js with TypeScript and shadcn/ui—free code.

React

react-shaders

GPU Shaders

Building procedural effects?

Join our Discord community for help from other developers working with GPU noise generation and procedural patterns.

Need advanced procedural noise without complex algorithms? Most developers struggle with basic random functions that lack quality and performance. This React noise component uses David Hoskins' legendary hash functions to create sophisticated procedural patterns with fractal detail, domain warping, and multiple noise types.

Copy-paste TypeScript component that creates professional procedural noise with ridged terrain, billowy clouds, cellular patterns, and turbulence. Hash-based algorithms ensure consistent, high-quality randomness. Built for Next.js applications with shadcn/ui design system. GPU-accelerated—procedural perfection.

React noise with legendary hash functions

Advanced procedural patterns with fractal detail, domain warping, and multiple noise types:

Loading component...

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface NoiseShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  scale?: number;  octaves?: number;  persistence?: number;  lacunarity?: number;}const fragmentShader = `// Hash without Sine// MIT License.../* Copyright (c)2014 David Hoskins.Permission is hereby granted, free of charge, to any person obtaining a copyof this software and associated documentation files (the "Software"), to dealin the Software without restriction, including without limitation the rightsto use, copy, modify, merge, publish, distribute, sublicense, and/or sellcopies of the Software, and to permit persons to whom the Software isfurnished to do so, subject to the following conditions:The above copyright notice and this permission notice shall be included in allcopies or substantial portions of the Software.THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS ORIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THEAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHERLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THESOFTWARE.*///----------------------------------------------------------------------------------------//  1 out, 2 in...float hash12(vec2 p){    vec3 p3  = fract(vec3(p.xyx) * .1031);    p3 += dot(p3, p3.yzx + 33.33);    return fract((p3.x + p3.y) * p3.z);}//----------------------------------------------------------------------------------------///  2 out, 2 in...vec2 hash22(vec2 p){    vec3 p3 = fract(vec3(p.xyx) * vec3(.1031, .1030, .0973));    p3 += dot(p3, p3.yzx+33.33);    return fract((p3.xx+p3.yz)*p3.zy);}//----------------------------------------------------------------------------------------///  3 out, 2 in...vec3 hash32(vec2 p){    vec3 p3 = fract(vec3(p.xyx) * vec3(.1031, .1030, .0973));    p3 += dot(p3, p3.yxz+33.33);    return fract((p3.xxy+p3.yzz)*p3.zyx);}// Smooth noise using David Hoskins hashfloat noise(vec2 p) {    vec2 i = floor(p);    vec2 f = fract(p);    // Smooth interpolation    f = f * f * (3.0 - 2.0 * f);    // Four corner hash values    float a = hash12(i);    float b = hash12(i + vec2(1.0, 0.0));    float c = hash12(i + vec2(0.0, 1.0));    float d = hash12(i + vec2(1.0, 1.0));    // Bilinear interpolation    return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);}// Fractal Brownian Motion using hash-based noisefloat fbm(vec2 p, int octaves, float persistence, float lacunarity) {    float value = 0.0;    float amplitude = 0.5;    float frequency = 1.0;    for(int i = 0; i < 8; i++) {        if(i >= octaves) break;        value += amplitude * noise(p * frequency);        amplitude *= persistence;        frequency *= lacunarity;    }    return value;}// Ridged noise patternfloat ridgedNoise(vec2 p) {    return 1.0 - abs(noise(p) * 2.0 - 1.0);}// Billowy noise (absolute value)float billowyNoise(vec2 p) {    return abs(noise(p) * 2.0 - 1.0);}// Voronoi-style cellular pattern using hashfloat voronoi(vec2 p) {    vec2 i = floor(p);    vec2 f = fract(p);    float minDist = 1.0;    for(int x = -1; x <= 1; x++) {        for(int y = -1; y <= 1; y++) {            vec2 neighbor = vec2(float(x), float(y));            vec2 point = hash22(i + neighbor);            vec2 diff = neighbor + point - f;            float dist = length(diff);            minDist = min(minDist, dist);        }    }    return minDist;}// Turbulence patternfloat turbulence(vec2 p, int octaves) {    float value = 0.0;    float amplitude = 0.5;    float frequency = 1.0;    for(int i = 0; i < 8; i++) {        if(i >= octaves) break;        value += amplitude * abs(noise(p * frequency));        amplitude *= 0.5;        frequency *= 2.0;    }    return value;}// Domain warping using hash-based noisevec2 domainWarp(vec2 p, float time) {    float warpStrength = 0.1;    vec2 warp = vec2(        noise(p + vec2(time * u_speed, 0.0)),        noise(p + vec2(0.0, time * u_speed))    );    return p + warp * warpStrength;}// Generate dynamic color palettevec3 colorPalette(float t) {    // Smooth color transitions using cosine palette    vec3 a = vec3(0.5, 0.5, 0.5);    vec3 b = vec3(0.5, 0.5, 0.5);    vec3 c = vec3(1.0, 1.0, 1.0);    vec3 d = vec3(0.0, 0.33, 0.67);    return a + b * cos(6.28318 * (c * t + d));}void mainImage( out vec4 fragColor, in vec2 fragCoord ) {    vec2 uv = fragCoord / iResolution.xy;    vec2 p = uv * u_scale;    float time = iTime * u_speed;    // Apply domain warping for organic movement    vec2 warpedP = domainWarp(p, time);    // Create layered noise patterns    float baseNoise = fbm(warpedP, int(u_octaves), u_persistence, u_lacunarity);    // Add ridged noise for sharp features    float ridged = ridgedNoise(warpedP * 2.0 + time * 0.1);    // Add billowy clouds    float billowy = billowyNoise(warpedP * 4.0 - time * 0.05);    // Voronoi cellular pattern    float cells = voronoi(warpedP * 8.0);    // Turbulence for additional detail    float turb = turbulence(warpedP * 6.0, int(u_octaves * 0.5));    // Combine different noise types    float combinedNoise = baseNoise * 0.4;    combinedNoise += ridged * 0.3;    combinedNoise += billowy * 0.2;    combinedNoise += (1.0 - cells) * 0.1;    combinedNoise += turb * 0.1;    // Add temporal variation    float timeVariation = sin(time * 0.5) * 0.1 + 0.9;    combinedNoise *= timeVariation;    // Create color from noise using palette    float colorIndex = combinedNoise + time * 0.1;    vec3 color = colorPalette(colorIndex);    // Add contrast and brightness    color = pow(color, vec3(0.8));    color *= 1.2;    // Add subtle glow effect    float glow = 1.0 - length(uv - 0.5) * 0.5;    color *= glow;    // Final color adjustments    color = clamp(color, 0.0, 1.0);    fragColor = vec4(color, 1.0);}`;export const NoiseShaders = forwardRef<HTMLDivElement, NoiseShadersProps>(({  className,  speed = 1.0,  scale = 1.0,  octaves = 4.0,  persistence = 0.5,  lacunarity = 2.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_octaves: { type: '1f', value: octaves },          u_persistence: { type: '1f', value: persistence },          u_lacunarity: { type: '1f', value: lacunarity },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});NoiseShaders.displayName = "NoiseShaders";

Hash functions by David Hoskins

Perfect for React 19, Next.js 15, and modern TypeScript projects. Procedural noise rendered entirely on GPU using David Hoskins' hash algorithms with fractal generation. Customizable speed, scale, octaves, persistence, and lacunarity. Full shadcn/ui compatibility with Tailwind CSS styling.

Installation

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

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

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

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

Usage

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

export default function ProceduralBackground() {
  return (
    <NoiseShaders
      speed={0.5}
      scale={4.0}
      octaves={6.0}
      persistence={0.6}
      lacunarity={2.1}
    >
      <div className="relative z-10">
        <h1>Content over noise</h1>
      </div>
    </NoiseShaders>
  );
}

Why procedural generation struggles with quality

Basic random functions produce poor, inconsistent patterns. Sine-based noise lacks true randomness and creates artifacts. Most libraries use simplified algorithms that don't provide the detail and control needed for professional procedural generation.

David Hoskins' hash functions solve this with mathematically superior randomness without sine dependencies. Multiple noise types (fractal, ridged, billowy, cellular) create diverse patterns. Domain warping adds organic movement. Fractal Brownian Motion builds complex detail from simple foundations.

This React noise component uses legendary hash algorithms for professional procedural generation. Multiple octaves create fractal complexity. Persistence and lacunarity control detail distribution. Domain warping creates natural, flowing movement patterns.

React noise shader features

David Hoskins hash functions - Industry-standard hash algorithms without sine dependencies
Fractal Brownian Motion - Multiple octaves create complex procedural detail
Multiple noise types - Ridged terrain, billowy clouds, cellular patterns, turbulence
Domain warping - Organic movement and natural flow patterns
Voronoi cellular patterns - Geometric cellular structures for variety
Dynamic color palettes - Cosine-based color generation with smooth transitions
Octave control - Adjustable fractal complexity from simple to highly detailed
Persistence settings - Control amplitude decay across frequency octaves
Lacunarity adjustment - Frequency scaling between octave levels
Temporal animation - Time-based evolution with controlled speed
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
Professional quality - Industry-standard algorithms for production use

API Reference

NoiseShaders

Main container component for the advanced procedural noise effect.

Prop	Type	Default	Description
`speed`	`number`	`1.0`	Animation and evolution speed (0.1 to 3.0)
`scale`	`number`	`1.0`	Noise pattern scale and zoom (0.5 to 10.0)
`octaves`	`number`	`4.0`	Fractal complexity levels (1.0 to 8.0)
`persistence`	`number`	`0.5`	Amplitude decay between octaves (0.1 to 1.0)
`lacunarity`	`number`	`2.0`	Frequency scaling factor (1.5 to 4.0)
`className`	`string`	-	Additional Tailwind CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	-	All standard div props

GPU noise troubleshooting

Patterns too simple: Increase octaves to 6-8 for more complex fractal detail. Higher octaves add fine details but use more GPU resources.

Animation too slow/fast: Adjust speed for comfortable pattern evolution. 0.3 creates slow, meditative changes. 1.5+ creates dynamic, active patterns.

Scale too large/small: Use scale to control pattern size. 2.0 creates large features. 8.0+ creates fine, detailed patterns with rapid variation.

Not enough contrast: Increase persistence to 0.7+ for stronger amplitude differences. Lower values create smoother, more uniform patterns.

Frequency jumps too harsh: Adjust lacunarity to 1.8 for smoother octave transitions. Higher values create more dramatic frequency changes between detail levels.

Mobile performance issues: GPU procedural generation is intensive. Lower octaves to 4 and consider reducing scale on mobile devices for smoother performance.

GPU compatibility: Noise generation requires GPU for real-time hash calculation. Provide CSS gradient fallbacks for older devices without sufficient processing power.

React Noise Shaders

React noise with legendary hash functions

Installation

Usage

Why procedural generation struggles with quality

React noise shader features

API Reference

NoiseShaders

GPU noise troubleshooting

More React shader components

Tunnel Shaders

Smoke Shaders

Sea Shaders

Fire Shaders

Gradient Mesh Shaders

Plasma Shaders

React procedural noise FAQ

On this page

React Noise Shaders