React Fractals Shaders

Powered by

React

react-shaders

GPU Shaders

Need mesmerizing fractal animations without complex setup? Most developers use static images or heavy computation that can't create dynamic fractal patterns. This React fractals component uses GPU mathematical algorithms to generate infinite geometric patterns with smooth transformations.

Copy-paste TypeScript component that creates hypnotic fractal effects with iterative geometric transformations and color palette cycling. Mathematical beauty with customizable parameters. Built for Next.js applications with shadcn/ui design system. GPU-accelerated—smooth fractal evolution.

React fractals with GPU mathematics

Infinite geometric patterns with IFS algorithms and volumetric rendering:

import { FractalsShaders } from "@/components/ui/shadcn-io/fractals-shaders";export default function FractalsShadersDemo() {  return (    <FractalsShaders      speed={0.8}      iterations={4.0}      colorShift={0.2}      brightness={1.2}      zoom={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 FractalsShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  iterations?: number;  colorShift?: number;  brightness?: number;  zoom?: number;}const fragmentShader = `vec3 palette( float t ) {    vec3 a = vec3(0.5, 0.5, 0.5);    vec3 b = vec3(0.5, 0.5, 0.5);    vec3 c = vec3(1.0, 1.0, 1.0);    vec3 d = vec3(0.263,0.416,0.557);    return a + b*cos( 6.28318*(c*t+d) );}void mainImage( out vec4 fragColor, in vec2 fragCoord ) {    vec2 uv = (fragCoord * 2.0 - iResolution.xy) / iResolution.y;    vec2 uv0 = uv;    vec3 finalColor = vec3(0.0);    for (float i = 0.0; i < 4.0; i++) {        if (i >= u_iterations) break;        uv = fract(uv * 1.5) - 0.5;        float d = length(uv) * exp(-length(uv0));        vec3 col = palette(length(uv0) + i*.4 + iTime * u_speed * .4 + u_colorShift);        d = sin(d*8. + iTime * u_speed)/8.;        d = abs(d);        d = pow(0.01 / d, 1.2);        finalColor += col * d;    }    finalColor *= u_brightness;    fragColor = vec4(finalColor, 1.0);}`;export const FractalsShaders = forwardRef<HTMLDivElement, FractalsShadersProps>(({  className,  speed = 1.0,  iterations = 4.0,  colorShift = 0.0,  brightness = 1.0,  zoom = 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_iterations: { type: '1f', value: iterations },          u_colorShift: { type: '1f', value: colorShift },          u_brightness: { type: '1f', value: brightness },          u_zoom: { type: '1f', value: zoom },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});FractalsShaders.displayName = "FractalsShaders";

Original shader tutorial by Art of Code - Creative Coding with GLSL

Perfect for React 19, Next.js 15, and modern TypeScript projects. Fractal patterns generated entirely on GPU using iterative function systems with exponential decay. Customizable speed, iterations, color palette, brightness, and zoom. Full shadcn/ui compatibility with Tailwind CSS styling.

Installation

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

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

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

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

Usage

import { FractalsShaders } from "@/components/ui/fractals-shaders";

export default function FractalBackground() {
  return (
    <FractalsShaders
      speed={0.8}
      iterations={4.0}
      colorShift={0.2}
      brightness={1.2}
      zoom={1.0}
    >
      <div className="relative z-10">
        <h1>Content over fractals</h1>
      </div>
    </FractalsShaders>
  );
}

Why fractal animations struggle with performance

Static fractal images can't show dynamic evolution. CPU-based fractal generation is too slow for real-time animation. Most libraries use simple geometric shapes that don't capture mathematical fractal beauty. Complex fractal algorithms require extensive computation that blocks the main thread.

GPU iterative mathematics solve this with parallel processing. Inigo Quilez color palette technique creates smooth hue transitions. Exponential decay prevents infinite recursion while maintaining fractal depth. Fractional iteration creates smooth, organic movement at 60fps.

This React fractals component uses GLSL iterative function systems for authentic fractal behavior. Multiple fractal layers with different transformations create complex patterns. Color cycling flows smoothly through mathematical palette functions. Mathematical beauty meets modern performance.

React fractals shader features

• Iterative function systems - Mathematical IFS algorithms create authentic fractal patterns
• Inigo Quilez color palette - Smooth color transitions using sine wave mathematics
• Exponential decay - Prevents infinite recursion while maintaining fractal depth
• Fractional iteration - Smooth animation with customizable iteration count
• Dynamic transformations - Real-time geometric scaling and rotation
• Color palette cycling - Smooth hue shifts through spectrum over time
• Brightness control - Adjustable intensity for different aesthetic needs
• Zoom functionality - Scale fractal patterns for different viewing distances
• Speed variation - Control animation timing from slow meditation to fast energy
• Mathematical precision - Authentic fractal mathematics with GPU acceleration
• 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
• Infinite complexity - Recursive patterns that never repeat exactly

API Reference

FractalsShaders

Main container component for the fractal generation effect.

GPU fractals troubleshooting

Patterns too simple: Increase iterations to 5-6 for more complex fractal detail. Higher iteration counts create deeper recursive patterns.

Animation too fast/slow: Adjust speed for comfortable viewing. 0.5 creates meditative, slow evolution. 1.5+ creates energetic, dynamic transformation.

Colors too monotone: Modify colorShift to explore different palette regions. Values from -0.5 to 0.5 create varied color schemes.

Fractals too dim/bright: Use brightness to adjust overall intensity. 1.5+ creates vivid, glowing effects. 0.8 creates subtle, ambient patterns.

Scale issues: Adjust zoom for optimal viewing distance. Higher zoom shows fractal detail, lower zoom shows overall structure.

Mobile performance: Reduce iterations to 3-4 on older devices. Fractal calculation is intensive but modern mobile GPUs handle it well.

Pattern repetition: Fractals are mathematically infinite - apparent repetition means zoom or iteration adjustments needed.

More React shader components

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

React fractals effect FAQ