React Worley Noise Shaders

Powered by

React

react-shaders

GPU Shaders

Need sophisticated cellular pattern effects with authentic Worley noise? Most developers use simple geometric patterns that can't capture the organic complexity of cellular structures. This React Worley noise component uses GPU distance field algorithms to create authentic cellular patterns with customizable animation and coloring.

Copy-paste TypeScript component that creates mesmerizing Worley noise effects with cellular distance calculations, hash-based random point generation, and smooth animation. Professional procedural noise with customizable parameters. Built for Next.js applications with shadcn/ui design system. GPU-accelerated—smooth cellular patterns.

React Worley noise with cellular mathematics

Procedural cellular patterns with distance fields and animated point distribution:

import { WorleyNoiseShaders } from "@/components/ui/shadcn-io/worley-noise-shaders";export default function WorleyNoiseShadersDemo() {  return (    <WorleyNoiseShaders      speed={0.1}      scale={1.0}      brightness={1.0}      contrast={1.0}      colorShift={0.3}      className="h-full w-full"    />  );}

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface WorleyNoiseShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  scale?: number;  brightness?: number;  contrast?: number;  colorShift?: number;}const fragmentShader = `// Hash function for random point generationvec2 Hash(vec2 P){    return fract(cos(P * mat2(-64.2, 71.3, 81.4, -29.8)) * 8321.3);}// Worley noise functionfloat Worley(vec2 P){    float Dist = 1.0;    vec2 I = floor(P);    vec2 F = fract(P);    for(int X = -1; X <= 1; X++)    {        for(int Y = -1; Y <= 1; Y++)        {            vec2 cellOffset = vec2(float(X), float(Y));            vec2 randomPoint = Hash(I + cellOffset) + cellOffset;            float D = distance(randomPoint, F);            Dist = min(Dist, D);        }    }    return Dist;}void mainImage(out vec4 Color, in vec2 Coord){    // Scale and animate the coordinates    vec2 scaledCoord = Coord.xy / (32.0 / u_scale) + iTime * u_speed;    // Generate Worley noise    float worleyValue = Worley(scaledCoord);    // Apply contrast and brightness adjustments    worleyValue = pow(worleyValue * u_brightness, u_contrast);    // Create color variation    vec3 baseColor = vec3(worleyValue);    vec3 colorVariation = vec3(        worleyValue,        worleyValue * 0.8 + 0.2 * sin(worleyValue * 10.0 + u_colorShift),        worleyValue * 0.6 + 0.4 * cos(worleyValue * 8.0 + u_colorShift * 1.5)    );    // Mix between grayscale and colored version    vec3 finalColor = mix(baseColor, colorVariation, u_colorShift * 0.5);    Color = vec4(finalColor, 1.0);}`;export const WorleyNoiseShaders = forwardRef<HTMLDivElement, WorleyNoiseShadersProps>(({  className,  speed = 0.1,  scale = 1.0,  brightness = 1.0,  contrast = 1.0,  colorShift = 0.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_brightness: { type: '1f', value: brightness },          u_contrast: { type: '1f', value: contrast },          u_colorShift: { type: '1f', value: colorShift },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});WorleyNoiseShaders.displayName = "WorleyNoiseShaders";

Based on shader by 4l2GzW - Worley Noise implementation

Perfect for React 19, Next.js 15, and modern TypeScript projects. Worley patterns generated entirely on GPU using distance field algorithms and hash functions. Customizable speed, scale, brightness, contrast, and color variation. Full shadcn/ui compatibility with Tailwind CSS styling.

Installation

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

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

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

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

Usage

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

export default function CellularPatterns() {
  return (
    <WorleyNoiseShaders
      speed={0.1}
      scale={1.0}
      brightness={1.0}
      contrast={1.0}
      colorShift={0.3}
    >
      <div className="relative z-10">
        <h1>Content over cellular patterns</h1>
      </div>
    </WorleyNoiseShaders>
  );
}

Why Worley noise requires mathematical precision

Simple geometric patterns lack the organic randomness of natural cellular structures. Static cellular textures can't capture the dynamic evolution of living systems. Most libraries struggle with the distance field calculations needed for authentic Worley noise. Traditional approaches can't handle the hash functions required for proper random point distribution.

GPU distance field mathematics solve this with authentic Worley noise algorithms. Hash functions generate truly random point distributions. Distance field calculations create natural cellular boundaries. Matrix transformations provide efficient hash generation. Minimum distance operations ensure proper cellular structure.

This React Worley noise component uses professional procedural generation techniques. Distance fields create authentic cellular patterns. Hash functions ensure random point distribution. Animation flows smoothly through cellular evolution. Color variations enhance visual complexity.

React Worley noise shader features

• Authentic Worley algorithm - True cellular noise using distance field calculations
• Hash-based randomization - Professional random point generation using matrix transformations
• Distance field optimization - Efficient cellular boundary calculation with GPU parallelization
• Cellular animation - Smooth evolution of cellular patterns over time
• Scale transformation - Zoom in/out while maintaining cellular structure integrity
• Brightness control - Overall intensity adjustment for different lighting environments
• Contrast enhancement - Power function adjustment for pattern definition
• Color variation - Procedural color generation with sine/cosine modulation
• Speed animation - Customizable timing for cellular pattern evolution
• 9-cell neighborhood - Complete Worley noise implementation with proper boundary handling
• Minimum distance calculation - Authentic cellular structure using mathematical optimization
• 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

API Reference

WorleyNoiseShaders

Main container component for the Worley noise cellular pattern effect.

GPU Worley noise troubleshooting

Animation too slow/fast: Adjust speed for comfortable cellular evolution. Worley noise typically works best with slower animations to appreciate the cellular structure.

Cells too small/large: Use scale to control cellular density. Higher values create finer cellular patterns, lower values create larger cellular structures.

Pattern too dim/bright: Modify brightness for overall pattern intensity. Cellular patterns can be subtle - adjust for optimal visibility against content.

Cells too soft/sharp: Adjust contrast to control pattern definition. Higher contrast creates sharper cellular boundaries, lower contrast creates softer transitions.

Grayscale vs color: Use colorShift to add color variation. Zero creates pure grayscale Worley noise, higher values add procedural color patterns.

Mobile performance: Worley noise requires intensive distance calculations. Consider reducing scale or using static speed values on older mobile devices.

Cellular authenticity: The 9-cell neighborhood ensures authentic Worley noise that matches the mathematical definition and produces proper cellular structures.

More React shader components

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

React Worley noise FAQ