React Abstract Mod Shaders

3D abstract raymarching with procedural geometry and atmospheric effects. Pure WebGL shaders for React with TypeScript and shadcn/ui—smooth GPU animations.

React

WebGL

Building abstract 3D effects?

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

Look, we've all tried to build abstract 3D effects. You either end up with basic geometric primitives that look nothing like proper procedural art or JavaScript calculations that can't handle complex raymarching smoothly. This React component uses advanced WebGL raymarching with procedural geometry generation that actually runs at 60fps without melting your CPU.

Smooth abstract mod animation

Mesmerizing 3D procedural geometry with atmospheric lighting that won't destroy your performance metrics:

Loading component...

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface AbstractModShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  rotationSpeed?: number;  lightIntensity?: number;  fogDensity?: number;}const fragmentShader = `#define NEAR 0.0#define FAR 50.0#define MAX_STEPS 64#define PI 3.14159265359#define EPS 0.001// Hash by iqfloat hash(vec2 p) {    float h = 1.0 + dot(p, vec2(127.1, 311.7));    return fract(sin(h) * 43758.5453123);}float rbox(vec3 p, vec3 s, float r) {    return length(max(abs(p) - s + vec3(r), 0.0)) - r;}vec2 rot(vec2 k, float t) {    float ct = cos(t);    float st = sin(t);    return vec2(ct * k.x - st * k.y, st * k.x + ct * k.y);}void oprep2(inout vec2 p, float q, float s, float k) {    float r = 1.0 / q;    float ofs = s;    float angle = atan(p.x, p.y);    float a = mod(angle, 2.0 * PI * r) - PI * r;    p.xy = vec2(sin(a), cos(a)) * length(p.xy) - ofs;    p.x += ofs;}float map(vec3 p) {    p.y -= 1.0;    p.xy = rot(p.xy, p.z * 0.15 * u_rotationSpeed);    p.z += iTime * u_speed;    p.xy = mod(p.xy, 6.0) - 0.5 * 6.0;    p.xy = rot(p.xy, -floor(p.z / 0.75) * 0.35 * u_rotationSpeed);    p.z = mod(p.z, 0.75) - 0.5 * 0.75;    oprep2(p.xy, 6.0, 0.45, iTime * u_speed);    return rbox(p, vec3(0.1, 0.025, 0.25), 0.05);}vec3 getNormal(vec3 p) {    float h = 0.0001;    return normalize(        vec3(map(p + vec3(h, 0, 0)) - map(p - vec3(h, 0, 0)),             map(p + vec3(0, h, 0)) - map(p - vec3(0, h, 0)),             map(p + vec3(0, 0, h)) - map(p - vec3(0, 0, h))));}float saw(float x, float d, float s, float shift) {    float xp = PI * (x * d + iTime * 0.5 * u_speed + shift);    float as = asin(s);    float train = 0.5 * sign(sin(xp - as) - s) + 0.5;    float range = (PI - 2.0 * as);    xp = mod(xp, 2.0 * PI);    float y = mod(-(xp - 2.0 * as), range) / range;    y *= train;    return y;}vec3 getShading(vec3 p, vec3 normal, vec3 lightPos) {    vec3 lightDirection = normalize(lightPos - p);    float lightIntensity = clamp(dot(normal, lightDirection), 0.0, 1.0) * u_lightIntensity;    vec2 id = floor((p.xy + 3.0) / 6.0);    float fid = hash(id);    float ve = hash(id);    vec3 col = vec3(0.0, 1.0, 0.0);    col *= 4.0 * saw(p.z, 0.092, 0.77, fid * 2.5);    vec3 amb = vec3(0.15, 0.2, 0.32);    vec3 tex = vec3(0.8098039, 0.8607843, 1.0);    return col * tex * lightIntensity + amb * (1.0 - lightIntensity);}void raymarch(vec3 ro, vec3 rd, out int i, out float t) {    t = 0.0;    for (int j = 0; j < MAX_STEPS; ++j) {        vec3 p = ro + rd * t;        float h = map(p);        i = j;        if (h < EPS || t > FAR) {            break;        }        t += h * 0.7;    }}float computeSun(vec3 ro, vec3 rd, float t, float lp) {    vec3 lpos = vec3(0.0, 0.0, 54.0);    ro -= lpos;    float m = dot(rd, -ro);    float d = length(ro - vec3(0.0, 0.0, 0.7) + m * rd);    float a = -m;    float b = t - m;    float aa = atan(a / d);    float ba = atan(b / d);    float to = (ba - aa) / d;    return to * 0.15 * lp;}vec3 computeColor(vec3 ro, vec3 rd) {    int i;    float t;    raymarch(ro, rd, i, t);    float lp = sin(iTime * u_speed - 1.0) + 1.3;    vec3 color = vec3(0.0, 1.0, 0.0);    if (i < MAX_STEPS && t >= NEAR && t <= FAR) {        vec3 p = ro + rd * t;        vec3 normal = getNormal(p);        float z = 1.0 - (NEAR + t) / (FAR - NEAR);        color = getShading(p, normal, vec3(0.0));        color *= lp;        float zSqrd = z * z;        color = mix(vec3(0.0), color, zSqrd * (3.0 - 2.0 * z) * u_fogDensity); // Fog        color += computeSun(ro, rd, t, lp);        return pow(color, vec3(0.8));    }    return color * computeSun(ro, rd, t, lp);}void mainImage(out vec4 fragColor, in vec2 fragCoord) {    vec2 q = fragCoord.xy / iResolution.xy;    vec2 coord = 2.0 * q - 1.0;    coord.x *= iResolution.x / iResolution.y;    coord *= 0.84;    vec3 dir = vec3(0.0, 0.0, 1.0);    vec3 up = vec3(0.0, 1.0, 0.0);    vec3 right = normalize(cross(dir, up));    vec3 ro = vec3(0.0, 0.0, 8.74);    vec3 rd = normalize(dir * 2.0 + coord.x * right + coord.y * up);    vec3 col = computeColor(ro, rd);    fragColor = vec4(col, 1.0);}`;export const AbstractModShaders = forwardRef<HTMLDivElement, AbstractModShadersProps>((  {    className,    speed = 1.0,    rotationSpeed = 1.0,    lightIntensity = 1.0,    fogDensity = 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_rotationSpeed: { type: '1f', value: rotationSpeed },          u_lightIntensity: { type: '1f', value: lightIntensity },          u_fogDensity: { type: '1f', value: fogDensity },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});AbstractModShaders.displayName = "AbstractModShaders";export default AbstractModShaders;

Created by revers in 2014-11-29 (Modified version of shader "abstract" by avix)

Built for React applications with TypeScript and Next.js in mind. The animation runs entirely on the GPU using WebGL raymarching with distance field operations and atmospheric fog effects. Works seamlessly with shadcn/ui design systems.

Installation

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

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

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

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

Usage

import { AbstractModShaders } from "@/components/ui/abstract-mod-shaders";

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

Why most abstract 3D implementations suck

Most developers try to animate 3D abstract art with Three.js meshes or basic geometric primitives. Bad idea. You're dealing with expensive polygon rendering, complex scene graphs, and wondering why your React app feels sluggish. Some use canvas drawing with JavaScript 3D math, which sounds smart until you realize you're computing transformations for every vertex on every frame.

This React component uses mathematical raymarching with distance field operations and procedural geometry generation. The GPU handles everything using optimized 3D mathematics with authentic atmospheric lighting. No JavaScript calculations, no polygon rendering, just smooth 60fps mathematical 3D art.

Features

Zero JavaScript animation overhead - Pure WebGL raymarching runs on GPU
Distance field operations with efficient 3D geometric primitives
Procedural geometry generation using mathematical transformations
Atmospheric lighting and fog for realistic depth and ambiance
TypeScript definitions for proper IDE support in React projects
Customizable parameters with 4 props for complete control
Performance optimization through efficient raymarching algorithms
shadcn/ui compatible for consistent design systems
Responsive design with automatic canvas resizing

API Reference

AbstractModShaders

Main container component for the abstract mod effect.

Prop	Type	Default	Description
`speed`	`number`	`1.0`	Animation speed multiplier (0.1 to 3.0)
`rotationSpeed`	`number`	`1.0`	Rotation animation speed (0.1 to 3.0)
`lightIntensity`	`number`	`1.0`	Lighting brightness and intensity (0.1 to 2.0)
`fogDensity`	`number`	`1.0`	Atmospheric fog density (0.1 to 2.0)
`className`	`string`	-	Additional Tailwind CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	-	All standard div props

Common gotchas

Animation not working: WebGL might not be supported in the browser. The component logs warnings when WebGL initialization fails. Check browser compatibility.

Performance issues on mobile: Some older phones struggle with complex raymarching operations. Consider reducing speed and rotationSpeed props for better performance.

Scene appears too dark: Increase the lightIntensity prop. Values around 1.5-2.0 work well for brighter, more visible geometry.

Fog too heavy: Lower the fogDensity prop for clearer visibility of distant geometry. Values around 0.5-0.7 create subtle atmospheric effects.

Rotation too fast: Lower the rotationSpeed prop for more controlled geometric transformations. Values around 0.5-0.7 work well for smooth rotation.

Explore other shader-based background components for React applications:

React Abstract Mod Shaders

Smooth abstract mod animation

Installation

Usage

Why most abstract 3D implementations suck

Features

API Reference

AbstractModShaders

Common gotchas

You might also like

Raymarching Shaders

Biomine Shaders

Monster Tunnel Shaders

Sphere Field Shaders

Digital Tunnel Shaders

Cosmic Waves Shaders

Questions developers actually ask

On this page

React Abstract Mod Shaders