React Singularity Shaders

Powered by

React

react-shaders

GPU Shaders

Need mesmerizing blackhole effects with realistic gravitational distortion? Most developers use simple spiral animations that can't capture the complex physics of spacetime warping. This React singularity component uses GPU mathematical transformations to create authentic blackhole visualization with accretion disk and event horizon.

Copy-paste TypeScript component that creates stunning singularity effects with gravitational lensing, spiral distortion, and cosmic coloring. Advanced spacetime mathematics with customizable parameters. Built for Next.js applications with shadcn/ui design system. GPU-accelerated—smooth cosmic vortex.

React singularity with gravitational physics

Whirling blackhole with accretion disk, rim highlighting, and spiral distortion:

import { SingularityShaders } from "@/components/ui/shadcn-io/singularity-shaders";export default function SingularityShadersDemo() {  return (    <SingularityShaders      speed={1.0}      intensity={1.2}      size={1.1}      waveStrength={1.0}      colorShift={1.0}      className="h-full w-full"    />  );}

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface SingularityShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  intensity?: number;  size?: number;  waveStrength?: number;  colorShift?: number;}const fragmentShader = `void mainImage(out vec4 O, vec2 F){    float i = .2 * u_speed, a;    vec2 r = iResolution.xy,         p = ( F+F - r ) / r.y / (.7 * u_size),         d = vec2(-1,1),         b = p - i*d,         c = p * mat2(1, 1, d/(.1 + i/dot(b,b))),         v = c * mat2(cos(.5*log(a=dot(c,c)) + iTime*i*u_speed + vec4(0,33,11,0)))/i,         w = vec2(0.0);    for(float j = 0.0; j < 9.0; j++) {        i++;        w += 1.0 + sin(v * u_waveStrength);        v += .7 * sin(v.yx * i + iTime * u_speed) / i + .5;    }    i = length( sin(v/.3)*.4 + c*(3.+d) );    vec4 colorGrad = vec4(.6,-.4,-1,0) * u_colorShift;    O = 1. - exp( -exp( c.x * colorGrad )                   / w.xyyx                   / ( 2. + i*i/4. - i )                   / ( .5 + 1. / a )                   / ( .03 + abs( length(p)-.7 ) )                   * u_intensity             );}`;export const SingularityShaders = forwardRef<HTMLDivElement, SingularityShadersProps>(({  className,  speed = 1.0,  intensity = 1.0,  size = 1.0,  waveStrength = 1.0,  colorShift = 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_intensity: { type: '1f', value: intensity },          u_size: { type: '1f', value: size },          u_waveStrength: { type: '1f', value: waveStrength },          u_colorShift: { type: '1f', value: colorShift },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});SingularityShaders.displayName = "SingularityShaders";

Original shader by XorDev - "Singularity"

Perfect for React 19, Next.js 15, and modern TypeScript projects. Blackhole effects generated entirely on GPU using matrix transformations and logarithmic spirals. Customizable speed, intensity, size, wave strength, and color gradients. Full shadcn/ui compatibility with Tailwind CSS styling.

Installation

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

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

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

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

Usage

import { SingularityShaders } from "@/components/ui/singularity-shaders";

export default function CosmicSingularity() {
  return (
    <SingularityShaders
      speed={1.0}
      intensity={1.2}
      size={1.1}
      waveStrength={1.0}
      colorShift={1.0}
    >
      <div className="relative z-10">
        <h1>Content over singularity</h1>
      </div>
    </SingularityShaders>
  );
}

Why blackhole effects are scientifically challenging

Simple rotational effects can't capture gravitational lensing. Static spiral patterns lack the complex distortion of spacetime warping. Most animations ignore the physics of accretion disks and event horizons. Traditional approaches can't simulate the exponential intensity gradients near the singularity.

GPU matrix mathematics solve this with authentic gravitational physics simulation. Logarithmic spiral coordinates mimic spacetime curvature. Perspective transformations create lensing effects. Exponential gradients simulate the extreme brightness of matter falling into the blackhole.

This React singularity component uses professional astrophysical visualization techniques. Matrix rotations create spiral distortion. Distance-squared attenuation simulates gravitational fields. Wave accumulation creates accretion disk turbulence. Rim highlighting shows the photon sphere.

React singularity shader features

• Gravitational lensing - Matrix transformations simulate spacetime curvature and distortion
• Logarithmic spirals - Authentic spiral coordinates based on blackhole physics
• Accretion disk simulation - Wave accumulation creates turbulent matter patterns
• Event horizon darkness - Distance-based attenuation creates the central void
• Photon sphere highlighting - Rim lighting at the critical orbital radius
• Perspective warping - Dynamic field-of-view changes near the singularity
• Exponential gradients - Realistic brightness falloff from extreme gravitational effects
• Red/blue shifting - Color gradients simulate Doppler effects from rotating matter
• Wave distortion - Sine wave patterns simulate magnetic field interactions
• Iterative accumulation - Multiple wave layers create complex turbulence patterns
• Speed control - Animation timing for rotation and time dilation effects
• Size scaling - Blackhole diameter and gravitational field strength
• Intensity modulation - Overall brightness and contrast control
• 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

SingularityShaders

Main container component for the blackhole singularity effect.

GPU singularity troubleshooting

Rotation too slow/fast: Adjust speed for comfortable viewing. Lower values create meditative cosmic rotation, higher values create intense gravitational dynamics.

Effect too dim/bright: Use intensity to control overall brightness. Blackholes have extreme dynamic ranges - adjust for your display and viewing conditions.

Blackhole too small/large: Modify size for optimal visual impact. Smaller values create intense, focused singularities. Larger values create expansive gravitational fields.

Accretion disk too calm/chaotic: Adjust waveStrength for turbulence level. Lower values create smooth matter flow, higher values create violent magnetic interactions.

Colors too muted/vivid: Use colorShift to control Doppler effect intensity. This affects the red/blue gradient that simulates matter velocity.

Mobile performance: Singularity effects are moderately intensive but well-optimized. Modern mobile GPUs handle the matrix operations and wave calculations smoothly.

Scientific accuracy: While visually inspired by blackhole physics, this is an artistic interpretation optimized for beauty rather than strict scientific accuracy.

More React shader components

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

React singularity FAQ