React 2D Noise Contours

Smooth fractal contour lines with numerical gradients on 2D simplex noise. Pure WebGL contour mapping for React with TypeScript and shadcn/ui—topographic beauty meets performance.

React

WebGL

Building contour mapping effects?

Join our Discord community for help from other developers working with WebGL shaders.

Creating smooth contour lines from noise functions is notoriously difficult due to aliasing artifacts. Most approaches either produce jagged edges or require expensive anti-aliasing. This React component uses numerical gradients and advanced smoothing techniques to create beautiful, smooth contour lines from 2D simplex noise that render perfectly at any scale.

Smooth anti-aliased contours

Beautiful 2D noise contour patterns with smooth fractal lines and gradient-based anti-aliasing:

Loading component...

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface TwoDNoiseContoursShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  scale?: number;  contours?: number;  colorIntensity?: number;  highlightStrength?: number;}const fragmentShader = `vec2 hash22(vec2 p) {     float n = sin(dot(p, vec2(41, 289)));    p = fract(vec2(2097152, 262144)*n);    return cos(p*6.283 + iTime*u_speed*2.);}float simplesque2D(vec2 p){    vec2 s = floor(p + (p.x + p.y)*.3660254);    p -= s - (s.x + s.y)*.2113249;        float i = p.x < p.y? 1. : 0.;        vec2 ioffs = vec2(1. - i, i);        vec2 p1 = p - ioffs + .2113249, p2 = p - .5773502;         vec3 d = max(.5 - vec3(dot(p, p), dot(p1, p1), dot(p2, p2)), 0.);        d *= d*d*12.;        vec3 w = vec3(dot(hash22(s), p), dot(hash22(s +  ioffs), p1), dot(hash22(s + 1.), p2));         return .5 + dot(w, d);}float valueNoise2D(vec2 p) {    vec2 f = fract(p);        f *= f*(3. -2.*f);        vec4 h = fract(sin(vec4(0, 41, 289, 330) + dot(floor(p), vec2(41, 289)))*43758.5453);    h = sin(h*6.283 + iTime*u_speed)*.5 + .5;        return dot(vec2(1. - f.y, f.y), vec2(1. - f.x, f.x)*mat2(h));}float func2D(vec2 p){    return simplesque2D(p*4.*u_scale)*.66 + simplesque2D(p*8.*u_scale)*0.34;}float smoothFract(float x, float sf){    x = fract(x);    return min(x, x*(1.-x)*sf);}void mainImage( out vec4 fragColor, in vec2 fragCoord ){    vec2 uv = (fragCoord.xy-iResolution.xy*.5) / iResolution.y;    vec2 e = vec2(0.001, 0);     float f = func2D(uv);        float g = length( vec2(f - func2D(uv-e.xy), f - func2D(uv-e.yx)) )/(e.x);       g = f/max(g, 0.001);        float c = smoothFract(f*u_contours, g*iResolution.y/4.);        vec3 col = vec3(c);        f *= u_contours;        float tx = smoothstep(0.0, 0.8, (func2D((uv + (1. - c)*.01)*vec2(12., 48.))));    if(f>2. && f<3.) col *= vec3(1., 0.0, 0.02)*(tx)*u_colorIntensity + (1.0 - u_colorIntensity);    else if(f>4. && f<5.) col *= vec3(0.15, 0.05, 1)*(tx)*u_colorIntensity + (1.0 - u_colorIntensity);    else col *= abs(tx - .5)*.4 + .8;        col += min(g*g*g*g*.1*u_highlightStrength, 1.)*(1.-col);        fragColor = vec4(sqrt(clamp(col, 0., 1.)), 1.0 );}`;export const TwoDNoiseContoursShaders = forwardRef<HTMLDivElement, TwoDNoiseContoursShadersProps>(  (    {      className,      speed = 1.0,      scale = 1.0,      contours = 6.0,      colorIntensity = 1.0,      highlightStrength = 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_contours: { type: '1f', value: contours },            u_colorIntensity: { type: '1f', value: colorIntensity },            u_highlightStrength: { type: '1f', value: highlightStrength },          }}          style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}        />      </div>    );  });TwoDNoiseContoursShaders.displayName = "TwoDNoiseContoursShaders";export default TwoDNoiseContoursShaders;

Created by Shane in 2015-12-17

Built for React applications with TypeScript and Next.js in mind. The animation runs entirely on the GPU using WebGL with 2D simplex-based noise, numerical gradient calculations, and sophisticated anti-aliasing. Works seamlessly with shadcn/ui design systems.

Installation

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

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

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

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

Usage

import { TwoDNoiseContoursShaders } from "@/components/ui/2d-noise-contours-shaders";

export default function Hero() {
  return (
    <TwoDNoiseContoursShaders>
      <div className="relative z-10">
        <h1>Your content here</h1>
      </div>
    </TwoDNoiseContoursShaders>
  );
}

Why most contour implementations fail

Most developers try to create contour lines using simple fract() operations on noise functions. Terrible approach. You get severe aliasing artifacts that look pixelated and jagged, especially when zooming or animating. Traditional anti-aliasing methods are either too expensive or don't work well with procedural content.

This React component uses numerical gradient calculations combined with distance-based smoothing functions. The GPU handles everything using optimized 2D simplex noise with smooth fractal operations and gradient-aware anti-aliasing. No aliasing artifacts, no expensive MSAA, just mathematically perfect contour lines at 60fps.

Features

Zero aliasing artifacts - Numerical gradient-based anti-aliasing produces smooth contour lines
2D simplex-based noise using custom simplesque algorithm for artifact-free patterns
Smooth fractal operations with multiple noise octaves for natural complexity
Gradient-aware smoothing using distance estimation techniques for perfect edge quality
TypeScript definitions for proper IDE support in React projects
Customizable parameters with 5 props for complete contour control
Performance optimization through efficient GPU-based noise generation
shadcn/ui compatible for consistent design systems
Responsive design with automatic canvas resizing

API Reference

TwoDNoiseContoursShaders

Main container component for the 2D noise contour effect.

Prop	Type	Default	Description
`speed`	`number`	`1.0`	Animation speed multiplier (0.1 to 3.0)
`scale`	`number`	`1.0`	Noise scale factor (0.1 to 5.0)
`contours`	`number`	`6.0`	Number of contour lines (2.0 to 20.0)
`colorIntensity`	`number`	`1.0`	Color band intensity (0.0 to 2.0)
`highlightStrength`	`number`	`1.0`	Gradient highlight strength (0.0 to 3.0)
`className`	`string`	-	Additional Tailwind CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	-	All standard div props

Common gotchas

Contour lines appear jagged: The anti-aliasing system requires WebGL with proper gradient support. Check that your browser supports the necessary WebGL extensions.

Performance issues on mobile: Numerical gradient calculations are GPU-intensive. Consider reducing contours count and scale for better mobile performance.

Colors too vibrant/muted: Adjust colorIntensity to control the strength of the red and blue color bands. Set to 0 for pure grayscale contours.

Missing detail in highlights: Increase highlightStrength to enhance the gradient-based highlighting that shows the noise structure beneath the contours.

Animation too fast/slow: The speed parameter affects both the noise animation and color cycling. Reduce for slower, more contemplative movement.

Explore other shader-based background components for React applications:

React 2D Noise Contours

Smooth anti-aliased contours

Installation

Usage

Why most contour implementations fail

Features

API Reference

TwoDNoiseContoursShaders

Common gotchas

You might also like

Smooth Noise Contours

Smooth Voronoi Contours

3-Tap Voronoi Shaders

Cellular Tiled Tunnel

Perspex Web Lattice

Abstract Mod Shaders

Questions developers actually ask

On this page

React 2D Noise Contours