React Accretion Shaders

Powered by

React

react-shaders

GPU Shaders

Need stunning accretion disk effects with realistic refraction and turbulence? Most developers struggle with complex 3D raymarching or can't achieve the intricate turbulence patterns of cosmic phenomena. This React accretion component uses GPU raymarching with polar coordinates to create authentic accretion disk visualization with refraction effects.

Copy-paste TypeScript component that creates mesmerizing accretion disk effects with raymarching algorithms, turbulence refraction, and polar coordinate transformations. Advanced cosmic physics with customizable parameters. Built for Next.js applications with shadcn/ui design system. GPU-accelerated—smooth cosmic disk rotation.

React accretion with raymarching and refraction

Cosmic accretion disk with turbulence, refraction effects, and polar coordinate mapping:

import { AccretionShaders } from "@/components/ui/shadcn-io/accretion-shaders";export default function AccretionShadersDemo() {  return (    <AccretionShaders      speed={1.0}      turbulence={1.2}      depth={1.0}      brightness={1.1}      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 AccretionShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  turbulence?: number;  depth?: number;  brightness?: number;  colorShift?: number;}const fragmentShader = `// Tanh approximation for tone mappingvec4 tanhApprox(vec4 x) {    vec4 x2 = x * x;    return x * (3.0 + x2) / (3.0 + 3.0 * x2);}void mainImage(out vec4 O, vec2 I){    float z = 0.0, d, i = 0.0;    O = vec4(0.0);    for(float step = 0.0; step < 20.0; step++) {        i = step;        // Sample point from ray direction        vec3 p = z * normalize(vec3(I + I, 0) - iResolution.xyx) + 0.1 * u_depth;        // Polar coordinates and transformations        p = vec3(atan(p.y / 0.2, p.x) * 2.0, p.z / 3.0, length(p.xy) - 5.0 - z * 0.2);        // Apply turbulence and refraction effect        for(float turb = 0.0; turb < 7.0; turb++) {            p += sin(p.yzx * (turb + 1.0) + iTime * u_speed + 0.3 * i * u_turbulence) / (turb + 1.0);        }        // Distance to cylinder and waves with refraction        d = length(vec4(0.4 * cos(p) - 0.4, p.z));        z += d;        // Coloring and brightness        vec4 color = (1.0 + cos(p.x + i * 0.4 + z + vec4(6, 1, 2, 0) * u_colorShift)) / d;        O += color * u_brightness;    }    // Tanh tonemap    O = tanhApprox(O * O / 400.0);}`;export const AccretionShaders = forwardRef<HTMLDivElement, AccretionShadersProps>(({  className,  speed = 1.0,  turbulence = 1.0,  depth = 1.0,  brightness = 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_turbulence: { type: '1f', value: turbulence },          u_depth: { type: '1f', value: depth },          u_brightness: { type: '1f', value: brightness },          u_colorShift: { type: '1f', value: colorShift },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});AccretionShaders.displayName = "AccretionShaders";

Original shader by XorDev - "Accretion"

Perfect for React 19, Next.js 15, and modern TypeScript projects. Accretion effects generated entirely on GPU using raymarching with polar coordinate transformations. Customizable speed, turbulence, depth, brightness, and color shifting. Full shadcn/ui compatibility with Tailwind CSS styling.

Installation

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

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

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

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

Usage

import { AccretionShaders } from "@/components/ui/accretion-shaders";

export default function CosmicAccretion() {
  return (
    <AccretionShaders
      speed={1.0}
      turbulence={1.2}
      depth={1.0}
      brightness={1.1}
      colorShift={1.0}
    >
      <div className="relative z-10">
        <h1>Content over accretion disk</h1>
      </div>
    </AccretionShaders>
  );
}

Why accretion disk effects require advanced techniques

Simple 2D rotation effects can't capture the complex 3D structure of accretion disks. Static turbulence patterns lack the dynamic flow of cosmic matter. Most approaches can't handle the polar coordinate transformations needed for disk geometry. Traditional methods struggle with the refraction effects that make matter appear to bend and flow.

GPU raymarching solves this with authentic 3D space traversal. Polar coordinate transformations create natural disk geometry. Multi-layer turbulence functions simulate magnetic field interactions. Refraction effects from adding the raymarch iterator create unique visual distortions. Distance-based coloring provides realistic brightness falloff.

This React accretion component uses professional astrophysical visualization techniques. Raymarching traces paths through 3D space. Polar coordinates naturally model disk structures. Turbulence layers create complex matter flow patterns. Tanh tone mapping handles extreme brightness ranges.

React accretion shader features

• Raymarching algorithms - 3D space traversal for authentic volumetric rendering
• Polar coordinate transformation - Natural disk geometry with atan2 angular mapping
• Multi-layer turbulence - Complex matter flow simulation with sine wave synthesis
• Refraction effects - Unique visual distortions from iterator-based turbulence interaction
• Distance-based coloring - Realistic brightness falloff with 3D depth calculation
• Cylindrical distance functions - Authentic accretion disk shape with wave patterns
• Tanh tone mapping - Professional brightness compression for extreme dynamic ranges
• Customizable depth control - Adjust 3D perspective and disk thickness
• Turbulence intensity - Control matter flow complexity and refraction strength
• Speed variation - Animation timing for disk rotation and matter flow
• Brightness scaling - Overall intensity control for different environments
• Color phase shifting - Spectrum cycling with thermal radiation simulation
• 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

AccretionShaders

Main container component for the accretion disk effect.

GPU accretion troubleshooting

Disk rotation too slow/fast: Adjust speed for comfortable viewing. Lower values create meditative cosmic rotation, higher values create dynamic matter flow.

Turbulence too calm/chaotic: Use turbulence to control matter flow complexity. Higher values create more dramatic refraction and swirling patterns.

Disk appears flat/too 3D: Modify depth for optimal 3D perspective. Lower values create flatter disks, higher values create pronounced thickness.

Effect too dim/bright: Use brightness to adjust overall intensity. Accretion disks have extreme brightness ranges - adjust for your display.

Colors cycling too fast/slow: Adjust colorShift for spectrum transition rate. This affects the thermal radiation color patterns.

Mobile performance: Reduce turbulence to 0.8 and consider lower depth values. Raymarching is intensive but well-optimized for mobile GPUs.

Refraction artifacts: The unique refraction effect is intentional and creates the characteristic matter flow appearance.

More React shader components

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

React accretion FAQ