React Sphere Field Shaders

Powered by

React

WebGL

Look, we've all tried to build 3D sphere field effects. You either end up with complex particle systems that drain your performance or JavaScript calculations that can't handle multiple spheres smoothly. This React component uses advanced WebGL raymarching with spherical projection that actually runs at 60fps without melting your CPU.

Smooth sphere field animation

Mesmerizing 3D sphere field with organic distortion that won't destroy your performance metrics:

import { SphereFieldShaders } from "@/components/ui/shadcn-io/sphere-field-shaders";export default function SphereFieldShadersDemo() {  return (    <div className="relative w-full h-full bg-black rounded-lg overflow-hidden">      <SphereFieldShaders        speed={1.0}        rotationSpeed={1.0}        sphereSize={1.0}        fieldDensity={1.0}        className="w-full h-full"      />    </div>  );}

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface SphereFieldShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  rotationSpeed?: number;  sphereSize?: number;  fieldDensity?: number;}const fragmentShader = `// Signed Distance Function for spheres in a repeating fieldfloat sdf(in vec3 pos) {    // Create repeating field with spacing based on fieldDensity    pos = mod(pos, 10.0 * u_fieldDensity);    return length(pos - vec3(5.0 * u_fieldDensity)) - u_sphereSize;}void mainImage( out vec4 fragColor, in vec2 fragCoord ){    // Normalized coordinates centered and aspect-corrected    vec2 uv = (fragCoord * 2.0 - iResolution.xy) / max(iResolution.x, iResolution.y);    // Move and rotate camera over time    vec3 origin = vec3(0.0, 5.0, 0.0) * iTime * u_speed;    float angle = radians(iTime * 3.0 * u_rotationSpeed);        // Apply rotation matrix to UV coordinates    uv *= mat2(cos(angle), -sin(angle), sin(angle), cos(angle));        // Use spherical projection for ray direction    vec3 ray_dir = vec3(sin(uv.x), cos(uv.x) * cos(uv.y), sin(uv.y));    vec3 ray_pos = vec3(origin);        float ray_length = 0.0;        // Raymarching loop with constant iterations    for(int i = 0; i < 7; i++) {        float dist = sdf(ray_pos);        ray_length += dist;        ray_pos += ray_dir * dist;        // Push rays outward with increasing distance for organic distortion        ray_dir = normalize(ray_dir + vec3(uv.x, 0.0, uv.y) * dist * 0.3);    }        // Create color based on distance field    vec3 color = vec3(sdf(ray_pos));    color = cos(color + vec3(6.0, 0.0, 0.5));        // Apply distance-based fading    color *= smoothstep(38.0, 20.0, ray_length);    fragColor = vec4(color, 1.0);}`;export const SphereFieldShaders = forwardRef<HTMLDivElement, SphereFieldShadersProps>((  {    className,    speed = 1.0,    rotationSpeed = 1.0,    sphereSize = 1.0,    fieldDensity = 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_sphereSize: { type: '1f', value: sphereSize },          u_fieldDensity: { type: '1f', value: fieldDensity },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});SphereFieldShaders.displayName = "SphereFieldShaders";export default SphereFieldShaders;

Inspired by nocrex Created by nocrex in 2025-07-15

Built for React applications with TypeScript and Next.js in mind. The animation runs entirely on the GPU using WebGL raymarching with signed distance functions and spherical projection. Works seamlessly with shadcn/ui design systems.

Installation

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

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

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

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

Usage

import { SphereFieldShaders } from "@/components/ui/sphere-field-shaders";

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

Why most sphere field implementations suck

Most developers try to animate sphere fields with particle systems or Three.js instanced meshes. Bad idea. You're dealing with thousands of draw calls, complex collision detection, and wondering why your React app feels sluggish. Some use canvas drawing with JavaScript sphere calculations, which sounds smart until you realize you're computing distances for every sphere on every frame.

This React component uses mathematical raymarching with signed distance functions and spherical projection. The GPU handles everything using optimized distance field calculations with organic ray distortion. No JavaScript calculations, no draw calls, just smooth 60fps mathematical 3D sphere fields.

Features

• Zero JavaScript animation overhead - Pure WebGL raymarching runs on GPU
• Signed distance functions with efficient sphere field generation
• Spherical projection for realistic 3D camera movement
• TypeScript definitions for proper IDE support in React projects
• Customizable parameters with 4 props for complete control
• Performance optimization through efficient raymarching loops
• shadcn/ui compatible for consistent design systems
• Responsive design with automatic canvas resizing

API Reference

SphereFieldShaders

Main container component for the sphere field effect.

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 raymarching shaders. Consider reducing the speed prop (try 0.5-0.7) or using lighter field density settings.

Spheres look too small/large: Adjust the sphereSize prop. Values below 0.5 create tiny spheres, while values above 2.0 create overlapping giant spheres.

Field appears too sparse/dense: Use the fieldDensity prop to control spacing. Lower values (0.5-0.7) create denser fields, higher values (1.5-2.0) create more spread out spheres.

Camera movement too fast: Lower the speed prop for more controlled movement. Values around 0.3-0.5 work well for background effects.

You might also like

Explore other shader-based background components for React applications:

Questions developers actually ask