React Random Grid Subdivision

Fractal-like polygonal patterns with CSG operations on randomly subdivided grids. Pure WebGL grid subdivision for React with TypeScript and shadcn/ui—fractal complexity meets performance.

React

WebGL

Building fractal grid effects?

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

Creating convincing fractal-like subdivision patterns requires sophisticated mathematical operations and careful balance between randomness and structure. This React component uses CSG operations on variable frequency grids with random rotation and offset to produce complex polygonal patterns reminiscent of subdivided Voronoi cells, all running smoothly at 60fps.

Fractal subdivision patterns

Beautiful random grid subdivision with CSG operations and procedural coloring:

Loading component...

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface RandomGridSubdivisionShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  scale?: number;  useHexagon?: number;  randomSubdivision?: number;  thickBorder?: number;  colorVariation?: number;}const fragmentShader = `#define HEXAGON#define RANDOM_SUBDIVISIONmat2 rot2(in float a){ float c = cos(a), s = sin(a); return mat2(c, -s, s, c); }float hash21(vec2 p){  return fract(sin(dot(p, vec2(27.619, 57.583)))*43758.5453); }float sBoxS(in vec2 p, in vec2 b, in float rf){  vec2 d = abs(p) - b + rf;  return min(max(d.x, d.y), 0.) + length(max(d, 0.)) - rf;}#define FLAT_TOP_HEXAGON#ifdef FLAT_TOP_HEXAGONvec2 s = vec2(1.7320508, 1);#elsevec2 s = vec2(1, 1.7320508);#endiffloat hex(in vec2 p){    p = abs(p);        #ifdef FLAT_TOP_HEXAGON    return max(dot(p, vec2(1.7320508, 1)*.5), p.y);    #else    return max(dot(p, vec2(1, 1.7320508)*.5), p.x);    #endif}vec4 getHex(vec2 p){    #ifdef FLAT_TOP_HEXAGON    vec4 hC = floor(vec4(p/s, p/s - vec2(1.7320508/3., .5))) + .5;    #else    vec4 hC = floor(vec4(p/s, p/s - vec2(.5, 1.7320508/3.))) + .5;    #endif           vec4 h = vec4(p - hC.xy*s, p - (hC.zw + .5)*s);        return dot(h.xy, h.xy)<dot(h.zw, h.zw) ? vec4(h.xy, hC.xy) : vec4(h.zw, hC.zw + .5);}float dHi;vec3 distField(vec2 p){    float d = -1e5;    dHi = -1e5;        vec2 gIP = vec2(0);        float sc = 1.;        vec2 ld = normalize(vec2(1, 1.5));        p *= rot2(iTime/8.*u_speed);    p -= iTime/16.*u_speed;    ld *= rot2(iTime/8.*u_speed);         for(int i = 0; i<6; i++){        vec2 ip;                if (u_useHexagon > 0.5) {            vec4 p4 = getHex(p);            p = p4.xy;            ip = p4.zw;            d = max(d, hex(p) - .5/sc);            dHi = max(dHi, (hex(p + ld*.001) - .5/sc));        } else {            ip = floor(p*sc) + .5;            p -= ip/sc;            d = max(d, sBoxS(p, vec2(.5/sc), 0.));            dHi = max(dHi, sBoxS(p + ld*.001, vec2(.5/sc), 0.));        }          if (u_useHexagon > 0.5) {            sc *= 1.4;            s /= 1.4;        } else {            sc *= 1.5;        }                gIP += ip/sc;                    p *= rot2((hash21(gIP + .05) - .5)*6.2831);        ld *= rot2((hash21(gIP + .05) - .5)*6.2831);               p -= vec2(hash21(gIP + .13), hash21(gIP + .04))/sc*.75;                if (u_randomSubdivision > 0.5) {            if(i>2 && hash21(gIP + .22)<.2) break;        }                p -= iTime/32.*u_speed;    }       return vec3(d, gIP);}void mainImage( out vec4 fragColor, in vec2 fragCoord ){    vec2 uv = (fragCoord - iResolution.xy*.5)/iResolution.y;    const float sc = 1.;    float sf = sc/iResolution.y;        vec2 p = sc*uv*u_scale;        vec3 d = distField(p);         float rnd = hash21(d.yz + .1);    float taper = rnd<.35? .7 : 1.;    vec3 oCol = .5 + .45*cos(6.2831*hash21(d.yz + .2)/5.*u_colorVariation + vec3(0, 1, 2)/taper);    if(rnd>=.35) oCol = mix(oCol.zyx, vec3(1)*dot(oCol, vec3(.299, .587, .114)), .75)/4.;        float b = max(dHi - d.x, 0.)/.001;      oCol = oCol*(.25 + b*.75)*1.35;       float lns = 120.*iResolution.y/450.;    vec2 rp = rot2(-3.14159/3.)*p;    float pat = abs(fract((rp.x)*lns) - .5)*2. - .05;    pat = smoothstep(0., sf*lns*2., pat);         float ew = .005*450./iResolution.y;        vec3 col = oCol*(pat*1. + .5);        float bw = u_thickBorder > 0.5 ? .0025 : .001;    float dBord = abs(d.x + bw) - bw;         col = mix(col, vec3(0), (1. - smoothstep(0., sf*8., dBord - ew))*.25);    col = mix(col, vec3(0), (1. - smoothstep(0., sf, dBord - ew - .005))*.8);    col = mix(col, mix(oCol, vec3(1), .125), 1. - smoothstep(0., sf, dBord - ew));    col = mix(col, vec3(0), 1. - smoothstep(0., sf, dBord));        float grad = clamp(uv.y + .65, 0., 1.);    col = mix(col.yxz, col.zyx, grad*grad);        fragColor = vec4(sqrt(max(col, 0.)), 1);}`;export const RandomGridSubdivisionShaders = forwardRef<HTMLDivElement, RandomGridSubdivisionShadersProps>(  (    {      className,      speed = 1.0,      scale = 1.0,      useHexagon = 1,      randomSubdivision = 1,      thickBorder = 0,      colorVariation = 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_useHexagon: { type: '1f', value: useHexagon },            u_randomSubdivision: { type: '1f', value: randomSubdivision },            u_thickBorder: { type: '1f', value: thickBorder },            u_colorVariation: { type: '1f', value: colorVariation },          }}          style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}        />      </div>    );  });RandomGridSubdivisionShaders.displayName = "RandomGridSubdivisionShaders";export default RandomGridSubdivisionShaders;

Created by Shane in 2022-05-25

Built for React applications with TypeScript and Next.js in mind. The animation runs entirely on the GPU using WebGL with CSG operations, hexagonal/square grid mathematics, and sophisticated random subdivision algorithms. Works seamlessly with shadcn/ui design systems.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/random-grid-subdivision-shaders.json

npx shadcn@latest add https://www.shadcn.io/registry/random-grid-subdivision-shaders.json

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

bunx shadcn@latest add https://www.shadcn.io/registry/random-grid-subdivision-shaders.json

Usage

import { RandomGridSubdivisionShaders } from "@/components/ui/random-grid-subdivision-shaders";

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

Why most subdivision implementations fail

Most developers try to create subdivision patterns using simple recursive algorithms or pre-computed textures. Poor approach. You miss the mathematical complexity of CSG operations and the organic randomness that makes patterns truly fractal-like. Basic implementations often produce regular, predictable results that lack the natural variation found in real subdivision processes.

This React component uses authentic CSG operations with variable frequency grids, random rotation matrices, and probabilistic subdivision termination. The GPU handles everything using optimized hexagonal/square grid mathematics with procedural coloring and directional lighting. No pre-computed patterns, no regular artifacts, just pure mathematical subdivision at 60fps.

Features

Zero pre-computation - Pure mathematical CSG operations with real-time grid subdivision
Dual grid systems supporting both hexagonal and square grid subdivision patterns
Random subdivision control with probabilistic termination for organic fractal-like complexity
CSG operation chains using variable frequency grids with rotation and offset transformations
TypeScript definitions for proper IDE support in React projects
Customizable parameters with 6 props for complete subdivision control
Performance optimization through efficient GPU-based grid mathematics
shadcn/ui compatible for consistent design systems
Responsive design with automatic canvas resizing and resolution independence

API Reference

RandomGridSubdivisionShaders

Main container component for the random grid subdivision effect.

Prop	Type	Default	Description
`speed`	`number`	`1.0`	Animation speed multiplier (0.1 to 3.0)
`scale`	`number`	`1.0`	Grid scale factor (0.5 to 3.0)
`useHexagon`	`number`	`1`	Grid type (0: Square, 1: Hexagon)
`randomSubdivision`	`number`	`1`	Random subdivision (0: Off, 1: On)
`thickBorder`	`number`	`0`	Border thickness (0: Thin, 1: Thick)
`colorVariation`	`number`	`1.0`	Color variation intensity (0.0 to 3.0)
`className`	`string`	-	Additional Tailwind CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	-	All standard div props

Common gotchas

Pattern appears too regular: Enable randomSubdivision to introduce probabilistic termination that creates more organic, fractal-like subdivision patterns instead of uniform recursive division.

Performance issues on mobile: CSG operations and multiple grid iterations are GPU-intensive. Reduce scale and consider limiting subdivision depth for better mobile performance.

Grid type differences: Hexagonal grids (useHexagon=1) create more organic patterns but require more complex mathematics. Square grids (useHexagon=0) are faster but more geometric.

Animation too fast/slow: The speed parameter affects both grid movement and rotation. Lower values create more contemplative, slowly evolving patterns.

Colors too similar: Increase colorVariation to enhance the procedural coloring differences between subdivision cells. Higher values create more dramatic color contrasts.

Explore other shader-based background components for React applications:

React Random Grid Subdivision

Fractal subdivision patterns

Installation

Usage

Why most subdivision implementations fail

Features

API Reference

RandomGridSubdivisionShaders

Common gotchas

You might also like

Pyramid Pattern

2D Noise Contours

Mandelbrot Patterns

3-Tap Voronoi Shaders

Cellular Tiled Tunnel

Smooth Voronoi Contours

Questions developers actually ask

On this page

React Random Grid Subdivision