React Sigmoids Sines Shaders

Psychedelic 2001 space odyssey effects with sigmoid functions and sine waves. Pure WebGL shaders for React with TypeScript and shadcn/ui—smooth GPU animations.

React

WebGL

Building psychedelic effects?

Join our Discord community for help from other developers working with WebGL shaders.

Look, we've all tried to build psychedelic visual effects. You either end up with basic CSS animations that look nothing like proper mathematical trippy visuals or JavaScript calculations that can't handle complex iterative functions smoothly. This React component uses advanced WebGL shaders with sigmoid functions and sine wave iterations that actually runs at 60fps without melting your CPU.

Smooth sigmoids sines animation

Mesmerizing 2001 space odyssey-inspired psychedelic patterns that won't destroy your performance metrics:

Loading component...

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface SigmoidsSinesShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  intensity?: number;  complexity?: number;  stereoEffect?: number;}const fragmentShader = `const float pi = 3.14159;float sigmoid(float x) {    return x / (1.0 + abs(x));   }float iter(vec2 p, vec4 a, vec4 wt, vec4 ws, float t, float m, float stereo) {    float wp = 0.2;    vec4 phase = vec4(mod(t, wp), mod(t + wp * 0.25, wp), mod(t + wp * 0.5, wp), mod(t + wp * 0.75, wp)) / wp;    float zoom = 1.0 / (1.0 + 0.5 * (p.x * p.x + p.y * p.y));    vec4 scale = zoom * pow(vec4(2.0), -4.0 * phase);    vec4 ms = 0.5 - 0.5 * cos(2.0 * pi * phase);    vec4 pan = stereo / scale * (1.0 - phase) * (1.0 - phase);    vec4 v = ms * sin(wt * (t + m) + (m + ws * scale) * ((p.x + pan) * cos((t + m) * a) + p.y * sin((t + m) * a)));    return sigmoid(v.x + v.y + v.z + v.w + m);}vec3 scene(float gt, vec2 uv, vec4 a0, vec4 wt0, vec4 ws0, float blur) {    // Time modulation    float tm = mod(0.0411 * gt, 1.0);    tm = sin(2.0 * pi * tm * tm);    float t = (0.04 * gt + 0.05 * tm) * u_speed;        float stereo = u_stereoEffect * (sigmoid(2.0 * (sin(1.325 * t * cos(0.5 * t)) + sin(-0.7 * t * sin(0.77 * t)))));        // Apply spatial offset    uv += 0.5 * sin(0.33 * t) * vec2(cos(t), sin(t));        // Wildly iterate and divide    float p0 = iter(uv, a0, wt0, ws0, t, 0.0, stereo);        float p1 = iter(uv, a0, wt0, ws0, t, p0, stereo);        float p2 = sigmoid(p0 / (p1 + blur));        float p3 = iter(uv, a0, wt0, ws0, t, p2, stereo);        float p4 = sigmoid(p3 / (p2 + blur));        float p5 = iter(uv, a0, wt0, ws0, t, p4, stereo);        float p6 = sigmoid(p4 / (p5 + blur));        float p7 = iter(uv, a0, wt0, ws0, t, p6, stereo);        float p8 = sigmoid(p4 / (p2 + blur));        float p9 = sigmoid(p8 / (p7 + blur));        float p10 = iter(uv, a0, wt0, ws0, t, p8, stereo);        float p11 = iter(uv, a0, wt0, ws0, t, p9, stereo);        float p12 = sigmoid(p11 / (p10 + blur));        float p13 = iter(uv, a0, wt0, ws0, t, p12, stereo);        // Colors    vec3 accent_color = vec3(1.0, 0.2, 0.0);        float r = sigmoid(p0 + p1 + p5 + p7 + p10 + p11 + p13) * u_intensity;    float g = sigmoid(p0 - p1 + p3 + p7 + p10 + p11) * u_intensity;    float b = sigmoid(p0 + p1 + p3 + p5 + p11 + p13) * u_intensity;        vec3 c = max(vec3(0.0), 0.4 + 0.6 * vec3(r, g, b));        float eps = 0.4;    float canary = min(abs(p1), abs(p2));    canary = min(canary, abs(p5));    canary = min(canary, abs(p7));    canary = min(canary, abs(p10));    float m = max(0.0, eps - canary) / eps;    m = sigmoid((m - 0.5) * 700.0 / (1.0 + 10.0 * blur)) * 0.5 + 0.5;    vec3 m3 = m * (1.0 - accent_color);    c *= 0.8 * (1.0 - m3) + 0.3;        return c * u_complexity;}void mainImage(out vec4 fragColor, in vec2 fragCoord) {    float s = min(iResolution.x, iResolution.y);    vec2 uv = (2.0 * fragCoord.xy - vec2(iResolution.xy)) / s;        float blur = 0.5 * (uv.x * uv.x + uv.y * uv.y);        // Angular, spatial and temporal frequencies    vec4 a0 = pi * vec4(0.1, -0.11, 0.111, -0.1111);     vec4 wt0 = 2.0 * pi * vec4(0.3);    vec4 ws0 = 2.5 * vec4(11.0, 13.0, 11.0, 5.0);    // AA and motion blur    float mb = 1.0;    float t = 1100.0 + iTime;    vec3 c = scene(t, uv, a0, wt0, ws0, blur)        + scene(t - mb * 0.00185, uv + (1.0 + blur) * vec2(0.66 / s, 0.0), a0, wt0, ws0, blur)        + scene(t - mb * 0.00370, uv + (1.0 + blur) * vec2(-0.66 / s, 0.0), a0, wt0, ws0, blur)        + scene(t - mb * 0.00555, uv + (1.0 + blur) * vec2(0.0, 0.66 / s), a0, wt0, ws0, blur)        + scene(t - mb * 0.00741, uv + (1.0 + blur) * vec2(0.0, -0.66 / s), a0, wt0, ws0, blur)        + scene(t - mb * 0.00926, uv + (1.0 + blur) * vec2(0.5 / s, 0.5 / s), a0, wt0, ws0, blur)        + scene(t - mb * 0.01111, uv + (1.0 + blur) * vec2(-0.5 / s, 0.5 / s), a0, wt0, ws0, blur)        + scene(t - mb * 0.01296, uv + (1.0 + blur) * vec2(-0.5 / s, -0.5 / s), a0, wt0, ws0, blur)        + scene(t - mb * 0.01481, uv + (1.0 + blur) * vec2(0.5 / s, -0.5 / s), a0, wt0, ws0, blur);            c /= 9.0;        fragColor = vec4(c, 1.0);}`;export const SigmoidsSinesShaders = forwardRef<HTMLDivElement, SigmoidsSinesShadersProps>((  {    className,    speed = 1.0,    intensity = 1.0,    complexity = 1.0,    stereoEffect = 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_complexity: { type: '1f', value: complexity },          u_stereoEffect: { type: '1f', value: stereoEffect },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});SigmoidsSinesShaders.displayName = "SigmoidsSinesShaders";export default SigmoidsSinesShaders;

Created by victor_shepardson in 2015-08-07

Built for React applications with TypeScript and Next.js in mind. The animation runs entirely on the GPU using WebGL shaders with mathematical sigmoid functions, iterative sine waves, and motion blur. Works seamlessly with shadcn/ui design systems.

Installation

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

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

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

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

Usage

import { SigmoidsSinesShaders } from "@/components/ui/sigmoids-sines-shaders";

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

Why most psychedelic implementations suck

Most developers try to animate trippy visuals with CSS transforms or basic particle systems. Bad idea. You're dealing with linear transformations that can't capture mathematical complexity, poor color transitions, and wondering why your React app feels sluggish. Some use canvas drawing with JavaScript trigonometry, which sounds smart until you realize you're computing iterative functions for every pixel on every frame.

This React component uses mathematical sigmoid activation functions with iterative sine wave calculations and built-in motion blur. The GPU handles everything using optimized mathematical operations with authentic psychedelic color generation. No JavaScript calculations, no approximations, just smooth 60fps mathematical visual chaos.

Features

Zero JavaScript animation overhead - Pure WebGL mathematical functions run on GPU
Sigmoid activation functions for smooth non-linear transformations
Iterative sine wave calculations with phase modulation and stereo effects
Built-in motion blur and anti-aliasing for cinematic quality
TypeScript definitions for proper IDE support in React projects
Customizable parameters with 4 props for complete control
Performance optimization through efficient mathematical operations
shadcn/ui compatible for consistent design systems
Responsive design with automatic canvas resizing

API Reference

SigmoidsSinesShaders

Main container component for the sigmoids sines effect.

Prop	Type	Default	Description
`speed`	`number`	`1.0`	Animation speed multiplier (0.1 to 3.0)
`intensity`	`number`	`1.0`	Color intensity and brightness (0.1 to 2.0)
`complexity`	`number`	`1.0`	Mathematical complexity factor (0.5 to 2.0)
`stereoEffect`	`number`	`1.0`	Stereo panning effect strength (0.0 to 2.0)
`className`	`string`	-	Additional Tailwind CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	-	All standard div props

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 complex iterative mathematical functions. Consider reducing complexity and intensity props for better performance.

Colors appear too intense: Lower the intensity prop. Values around 0.7-0.8 work well for subtle psychedelic effects without overwhelming content.

Effect too chaotic: Reduce the complexity prop for simpler patterns. Lower values (0.5-0.7) create more controlled mathematical patterns.

No stereo effect: Increase the stereoEffect prop for more pronounced spatial panning. Values around 1.5-2.0 create stronger spatial effects.

Explore other shader-based background components for React applications:

React Sigmoids Sines Shaders

Smooth sigmoids sines animation

Installation

Usage

Why most psychedelic implementations suck

Features

API Reference

SigmoidsSinesShaders

Common gotchas

You might also like

Plasma Shaders

Cosmic Waves Shaders

Glitch Shaders

Digital Tunnel Shaders

Matrix Shaders

Aurora Shaders

Questions developers actually ask

On this page

React Sigmoids Sines Shaders