React Cosmic Discs Shaders

Powered by

React

react-shaders

GPU Shaders

Need mesmerizing cosmic disc effects with glowing radial arcs? Most developers use simple circular animations that can't achieve the complex arc patterns and smooth glow falloff. This React cosmic discs component uses GPU mathematical transformations to create stunning radial patterns with ring attenuation and arc masking.

Copy-paste TypeScript component that creates beautiful cosmic disc effects with concentric glowing rings, angular arc patterns, and smooth color transitions. Professional radial mathematics with customizable parameters. Built for Next.js applications with shadcn/ui design system. GPU-accelerated—smooth cosmic rotation.

React cosmic discs with radial arc patterns

Glowing concentric rings with angular arc masking and color cycling:

import { CosmicDiscsShaders } from "@/components/ui/shadcn-io/cosmic-discs-shaders";export default function CosmicDiscsShadersDemo() {  return (    <CosmicDiscsShaders      speed={1.0}      intensity={1.2}      ringCount={0.8}      arcWidth={0.6}      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 CosmicDiscsShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  intensity?: number;  ringCount?: number;  arcWidth?: number;  colorShift?: number;}const fragmentShader = `void mainImage(out vec4 O, vec2 I){    O = vec4(0.0);    vec2 r = iResolution.xy,         p = (I - r * 0.6) * mat2(1, -1, 2, 2);    for(float i = 0.0; i < 30.0; i++) {        // Skip iterations beyond user-specified ring count        if(i >= 30.0 * u_ringCount) break;        vec2 coords = p / (r + r - p).y;        float ringDist = length(coords) * 80.0;        float ringAttenuation = abs(ringDist - i) + 40.0 / r.y;        float a = atan(coords.y, coords.x) * ceil(i * 0.1) + iTime * sin(i * i) * u_speed + i * i;        float arcMask = clamp(cos(a), 0.0, u_arcWidth);        vec4 color = cos(a - i + vec4(0, 1, 2, 0) * u_colorShift) + 1.0;        O += (0.2 * u_intensity / ringAttenuation) * arcMask * color;    }}`;export const CosmicDiscsShaders = forwardRef<HTMLDivElement, CosmicDiscsShadersProps>(({  className,  speed = 1.0,  intensity = 1.0,  ringCount = 1.0,  arcWidth = 0.6,  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_ringCount: { type: '1f', value: ringCount },          u_arcWidth: { type: '1f', value: arcWidth },          u_colorShift: { type: '1f', value: colorShift },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});CosmicDiscsShaders.displayName = "CosmicDiscsShaders";

Original shader by XorDev - "Cosmic"

Perfect for React 19, Next.js 15, and modern TypeScript projects. Cosmic patterns generated entirely on GPU using polar coordinate mathematics and ring attenuation. Customizable speed, intensity, ring count, arc width, and color shifting. Full shadcn/ui compatibility with Tailwind CSS styling.

Installation

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

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

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

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

Usage

import { CosmicDiscsShaders } from "@/components/ui/cosmic-discs-shaders";

export default function CosmicBackground() {
  return (
    <CosmicDiscsShaders
      speed={1.0}
      intensity={1.2}
      ringCount={0.8}
      arcWidth={0.6}
      colorShift={1.0}
    >
      <div className="relative z-10">
        <h1>Content over cosmic discs</h1>
      </div>
    </CosmicDiscsShaders>
  );
}

Why radial cosmic effects are mathematically complex

Simple circular animations lack the complexity of true radial patterns. Static arc segments can't create smooth rotation and color flow. Most libraries struggle with proper ring attenuation and glow falloff. Traditional approaches can't handle the polar coordinate transformations needed for authentic cosmic effects.

GPU polar mathematics solve this with authentic radial coordinate systems. Atan2 functions create perfect angular positioning. Distance-based attenuation creates realistic ring glow. Matrix transformations add organic distortion. Color phase shifting creates smooth spectrum cycling.

This React cosmic discs component uses professional radial mathematics for authentic cosmic behavior. Each ring has independent angular frequency. Arc masking creates selective visibility patterns. Ring attenuation provides natural glow falloff. Color cycling flows smoothly through the spectrum.

React cosmic discs shader features

• Concentric ring patterns - Mathematical ring generation with distance-based positioning
• Angular arc masking - Cosine-based visibility control for selective arc segments
• Ring attenuation glow - Distance-based brightness falloff for natural radial glow
• Polar coordinate system - Atan2 angular positioning for perfect radial mathematics
• Matrix coordinate transformation - Organic distortion through linear transformation
• Independent ring frequencies - Each ring rotates at unique angular velocity
• Color phase cycling - Smooth spectrum transitions with mathematical color generation
• Customizable ring density - Control number of concentric rings for complexity
• Arc width control - Adjust visibility range for thin arcs or broad segments
• Speed variation - Independent control of rotation and animation timing
• Intensity scaling - Overall brightness multiplier for different environments
• Resolution-adaptive - Automatic scaling based on display resolution
• 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

CosmicDiscsShaders

Main container component for the cosmic disc radial effect.

GPU cosmic discs troubleshooting

Rotation too slow/fast: Adjust speed for comfortable viewing. Lower values create meditative cosmic rotation, higher values create dynamic energy effects.

Glow too dim/bright: Use intensity to control overall brightness. Higher values create dramatic glowing effects, lower values create subtle ambient patterns.

Too few/many rings: Modify ringCount for optimal complexity. Lower values create simple patterns, higher values create dense cosmic fields.

Arcs too thin/wide: Adjust arcWidth for arc segment visibility. Lower values create thin arc lines, higher values create broad glowing segments.

Colors cycling too fast/slow: Use colorShift to control spectrum transitions. This affects how quickly colors cycle through the rainbow spectrum.

Mobile performance: Reduce ringCount to 0.6 and intensity to 0.8 on older devices. Radial mathematics are well-optimized but benefit from reduced complexity.

Resolution scaling: The effect automatically adapts to different screen sizes and pixel densities for consistent appearance across devices.

More React shader components

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

React cosmic discs FAQ