React Gradient Blinds

React gradient blinds with WebGL rendering. Features animated venetian blind effects, mouse interaction, and customizable spotlight with OGL.

React

OGL

Creating interactive blind patterns?

Join our Discord community for help from other developers working with shader effects and WebGL.

Remember those old-school venetian blinds that would create mesmerizing light patterns on the wall as the sun moved throughout the day? The way slats of light and shadow would dance and shift, creating rhythmic stripes that seemed to pulse with their own life? Most interfaces settle for boring, flat backgrounds that don't respond to user interaction. This React component recreates that captivating blind effect with gradient colors, mouse-following spotlights, and customizable distortion that transforms any surface into an interactive light canvas.

Interactive venetian blinds with spotlight

Watch gradient stripes bend and flow with responsive mouse interaction and lighting:

Loading component...

'use client';import React, { useEffect, useRef } from "react";// @ts-ignoreimport { Renderer, Program, Mesh, Triangle } from "ogl";export interface GradientBlindsProps {  className?: string;  dpr?: number;  paused?: boolean;  gradientColors?: string[];  angle?: number;  noise?: number;  blindCount?: number;  blindMinWidth?: number;  mouseDampening?: number;  mirrorGradient?: boolean;  spotlightRadius?: number;  spotlightSoftness?: number;  spotlightOpacity?: number;  distortAmount?: number;  shineDirection?: "left" | "right";  mixBlendMode?: string;}const MAX_COLORS = 8;const hexToRGB = (hex: string): [number, number, number] => {  const c = hex.replace("#", "").padEnd(6, "0");  const r = parseInt(c.slice(0, 2), 16) / 255;  const g = parseInt(c.slice(2, 4), 16) / 255;  const b = parseInt(c.slice(4, 6), 16) / 255;  return [r, g, b];};const prepStops = (stops?: string[]) => {  const base = (stops && stops.length ? stops : ["#FF9FFC", "#5227FF"]).slice(    0,    MAX_COLORS  );  if (base.length === 1) base.push(base[0]);  while (base.length < MAX_COLORS) base.push(base[base.length - 1]);  const arr: [number, number, number][] = [];  for (let i = 0; i < MAX_COLORS; i++) arr.push(hexToRGB(base[i]));  const count = Math.max(2, Math.min(MAX_COLORS, stops?.length ?? 2));  return { arr, count };};const GradientBlinds: React.FC<GradientBlindsProps> = ({  className,  dpr,  paused = false,  gradientColors,  angle = 0,  noise = 0.3,  blindCount = 16,  blindMinWidth = 60,  mouseDampening = 0.15,  mirrorGradient = false,  spotlightRadius = 0.5,  spotlightSoftness = 1,  spotlightOpacity = 1,  distortAmount = 0,  shineDirection = "left",  mixBlendMode = "lighten",}) => {  const containerRef = useRef<HTMLDivElement | null>(null);  const rafRef = useRef<number | null>(null);  const programRef = useRef<Program | null>(null);  const meshRef = useRef<Mesh<Triangle> | null>(null);  const geometryRef = useRef<Triangle | null>(null);  const rendererRef = useRef<Renderer | null>(null);  const mouseTargetRef = useRef<[number, number]>([0, 0]);  const lastTimeRef = useRef<number>(0);  const firstResizeRef = useRef<boolean>(true);  useEffect(() => {    const container = containerRef.current;    if (!container) return;    const renderer = new Renderer({      dpr:        dpr ??        (typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1),      alpha: true,      antialias: true,    });    rendererRef.current = renderer;    const gl = renderer.gl;    const canvas = gl.canvas as HTMLCanvasElement;    canvas.style.width = "100%";    canvas.style.height = "100%";    canvas.style.display = "block";    container.appendChild(canvas);    const vertex = `attribute vec2 position;attribute vec2 uv;varying vec2 vUv;void main() {  vUv = uv;  gl_Position = vec4(position, 0.0, 1.0);}`;    const fragment = `#ifdef GL_ESprecision mediump float;#endifuniform vec3  iResolution;uniform vec2  iMouse;uniform float iTime;uniform float uAngle;uniform float uNoise;uniform float uBlindCount;uniform float uSpotlightRadius;uniform float uSpotlightSoftness;uniform float uSpotlightOpacity;uniform float uMirror;uniform float uDistort;uniform float uShineFlip;uniform vec3  uColor0;uniform vec3  uColor1;uniform vec3  uColor2;uniform vec3  uColor3;uniform vec3  uColor4;uniform vec3  uColor5;uniform vec3  uColor6;uniform vec3  uColor7;uniform int   uColorCount;varying vec2 vUv;float rand(vec2 co){  return fract(sin(dot(co, vec2(12.9898,78.233))) * 43758.5453);}vec2 rotate2D(vec2 p, float a){  float c = cos(a);  float s = sin(a);  return mat2(c, -s, s, c) * p;}vec3 getGradientColor(float t){  float tt = clamp(t, 0.0, 1.0);  int count = uColorCount;  if (count < 2) count = 2;  float scaled = tt * float(count - 1);  float seg = floor(scaled);  float f = fract(scaled);  if (seg < 1.0) return mix(uColor0, uColor1, f);  if (seg < 2.0 && count > 2) return mix(uColor1, uColor2, f);  if (seg < 3.0 && count > 3) return mix(uColor2, uColor3, f);  if (seg < 4.0 && count > 4) return mix(uColor3, uColor4, f);  if (seg < 5.0 && count > 5) return mix(uColor4, uColor5, f);  if (seg < 6.0 && count > 6) return mix(uColor5, uColor6, f);  if (seg < 7.0 && count > 7) return mix(uColor6, uColor7, f);  if (count > 7) return uColor7;  if (count > 6) return uColor6;  if (count > 5) return uColor5;  if (count > 4) return uColor4;  if (count > 3) return uColor3;  if (count > 2) return uColor2;  return uColor1;}void mainImage( out vec4 fragColor, in vec2 fragCoord ){    vec2 uv0 = fragCoord.xy / iResolution.xy;    float aspect = iResolution.x / iResolution.y;    vec2 p = uv0 * 2.0 - 1.0;    p.x *= aspect;    vec2 pr = rotate2D(p, uAngle);    pr.x /= aspect;    vec2 uv = pr * 0.5 + 0.5;    vec2 uvMod = uv;    if (uDistort > 0.0) {      float a = uvMod.y * 6.0;      float b = uvMod.x * 6.0;      float w = 0.01 * uDistort;      uvMod.x += sin(a) * w;      uvMod.y += cos(b) * w;    }    float t = uvMod.x;    if (uMirror > 0.5) {      t = 1.0 - abs(1.0 - 2.0 * fract(t));    }    vec3 base = getGradientColor(t);    vec2 offset = vec2(iMouse.x/iResolution.x, iMouse.y/iResolution.y);  float d = length(uv0 - offset);  float r = max(uSpotlightRadius, 1e-4);  float dn = d / r;  float spot = (1.0 - 2.0 * pow(dn, uSpotlightSoftness)) * uSpotlightOpacity;  vec3 cir = vec3(spot);  float stripe = fract(uvMod.x * max(uBlindCount, 1.0));  if (uShineFlip > 0.5) stripe = 1.0 - stripe;    vec3 ran = vec3(stripe);    vec3 col = cir + base - ran;    col += (rand(gl_FragCoord.xy + iTime) - 0.5) * uNoise;    fragColor = vec4(col, 1.0);}void main() {    vec4 color;    mainImage(color, vUv * iResolution.xy);    gl_FragColor = color;}`;    const { arr: colorArr, count: colorCount } = prepStops(gradientColors);    const uniforms: {      iResolution: { value: [number, number, number] };      iMouse: { value: [number, number] };      iTime: { value: number };      uAngle: { value: number };      uNoise: { value: number };      uBlindCount: { value: number };      uSpotlightRadius: { value: number };      uSpotlightSoftness: { value: number };      uSpotlightOpacity: { value: number };      uMirror: { value: number };      uDistort: { value: number };      uShineFlip: { value: number };      uColor0: { value: [number, number, number] };      uColor1: { value: [number, number, number] };      uColor2: { value: [number, number, number] };      uColor3: { value: [number, number, number] };      uColor4: { value: [number, number, number] };      uColor5: { value: [number, number, number] };      uColor6: { value: [number, number, number] };      uColor7: { value: [number, number, number] };      uColorCount: { value: number };    } = {      iResolution: {        value: [gl.drawingBufferWidth, gl.drawingBufferHeight, 1],      },      iMouse: { value: [0, 0] },      iTime: { value: 0 },      uAngle: { value: (angle * Math.PI) / 180 },      uNoise: { value: noise },      uBlindCount: { value: Math.max(1, blindCount) },      uSpotlightRadius: { value: spotlightRadius },      uSpotlightSoftness: { value: spotlightSoftness },      uSpotlightOpacity: { value: spotlightOpacity },      uMirror: { value: mirrorGradient ? 1 : 0 },      uDistort: { value: distortAmount },      uShineFlip: { value: shineDirection === "right" ? 1 : 0 },      uColor0: { value: colorArr[0] },      uColor1: { value: colorArr[1] },      uColor2: { value: colorArr[2] },      uColor3: { value: colorArr[3] },      uColor4: { value: colorArr[4] },      uColor5: { value: colorArr[5] },      uColor6: { value: colorArr[6] },      uColor7: { value: colorArr[7] },      uColorCount: { value: colorCount },    };    const program = new Program(gl, {      vertex,      fragment,      uniforms,    });    programRef.current = program;    const geometry = new Triangle(gl);    geometryRef.current = geometry;    const mesh = new Mesh(gl, { geometry, program });    meshRef.current = mesh;    const resize = () => {      const rect = container.getBoundingClientRect();      renderer.setSize(rect.width, rect.height);      uniforms.iResolution.value = [        gl.drawingBufferWidth,        gl.drawingBufferHeight,        1,      ];      if (blindMinWidth && blindMinWidth > 0) {        const maxByMinWidth = Math.max(          1,          Math.floor(rect.width / blindMinWidth)        );        const effective = blindCount          ? Math.min(blindCount, maxByMinWidth)          : maxByMinWidth;        uniforms.uBlindCount.value = Math.max(1, effective);      } else {        uniforms.uBlindCount.value = Math.max(1, blindCount);      }      if (firstResizeRef.current) {        firstResizeRef.current = false;        const cx = gl.drawingBufferWidth / 2;        const cy = gl.drawingBufferHeight / 2;        uniforms.iMouse.value = [cx, cy];        mouseTargetRef.current = [cx, cy];      }    };    resize();    const ro = new ResizeObserver(resize);    ro.observe(container);    const onPointerMove = (e: PointerEvent) => {      const rect = canvas.getBoundingClientRect();      const scale = (renderer as unknown as { dpr?: number }).dpr || 1;      const x = (e.clientX - rect.left) * scale;      const y = (rect.height - (e.clientY - rect.top)) * scale;      mouseTargetRef.current = [x, y];      if (mouseDampening <= 0) {        uniforms.iMouse.value = [x, y];      }    };    canvas.addEventListener("pointermove", onPointerMove);    const loop = (t: number) => {      rafRef.current = requestAnimationFrame(loop);      uniforms.iTime.value = t * 0.001;      if (mouseDampening > 0) {        if (!lastTimeRef.current) lastTimeRef.current = t;        const dt = (t - lastTimeRef.current) / 1000;        lastTimeRef.current = t;        const tau = Math.max(1e-4, mouseDampening);        let factor = 1 - Math.exp(-dt / tau);        if (factor > 1) factor = 1;        const target = mouseTargetRef.current;        const cur = uniforms.iMouse.value;        cur[0] += (target[0] - cur[0]) * factor;        cur[1] += (target[1] - cur[1]) * factor;      } else {        lastTimeRef.current = t;      }      if (!paused && programRef.current && meshRef.current) {        try {          renderer.render({ scene: meshRef.current });        } catch (e) {          console.error(e);        }      }    };    rafRef.current = requestAnimationFrame(loop);    return () => {      if (rafRef.current) cancelAnimationFrame(rafRef.current);      canvas.removeEventListener("pointermove", onPointerMove);      ro.disconnect();      if (canvas.parentElement === container) {        container.removeChild(canvas);      }      const callIfFn = <T extends object, K extends keyof T>(        obj: T | null,        key: K      ) => {        if (obj && typeof obj[key] === "function") {          (obj[key] as unknown as () => void).call(obj);        }      };      callIfFn(programRef.current, "remove");      callIfFn(geometryRef.current, "remove");      callIfFn(meshRef.current as unknown as { remove?: () => void }, "remove");      callIfFn(        rendererRef.current as unknown as { destroy?: () => void },        "destroy"      );      programRef.current = null;      geometryRef.current = null;      meshRef.current = null;      rendererRef.current = null;    };  }, [    dpr,    paused,    gradientColors,    angle,    noise,    blindCount,    blindMinWidth,    mouseDampening,    mirrorGradient,    spotlightRadius,    spotlightSoftness,    spotlightOpacity,    distortAmount,    shineDirection,  ]);  return (    <div      ref={containerRef}      className={`w-full h-full overflow-hidden relative ${className}`}      style={{        ...(mixBlendMode && {          mixBlendMode: mixBlendMode as React.CSSProperties["mixBlendMode"],        }),      }}    />  );};export default GradientBlinds;

Built for React applications with TypeScript and Next.js. Uses WebGL through OGL for hardware-accelerated shader rendering that maintains 60fps with complex gradient calculations and mouse tracking. The mathematical blind simulation creates authentic stripe patterns while the spotlight system adds dynamic illumination. Perfect for hero sections, interactive galleries, or any interface needing sophisticated visual depth. Seamless integration with shadcn/ui design systems.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/gradient-blinds.json

npx shadcn@latest add https://www.shadcn.io/registry/gradient-blinds.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/gradient-blinds.json

bunx shadcn@latest add https://www.shadcn.io/registry/gradient-blinds.json

Why flat patterns feel lifeless

Developers create a striped background with CSS repeating gradients and consider it dynamic. Maybe they add a hover state that changes opacity. The problem? Static patterns don't respond to user presence or create the illusion of depth that makes interfaces feel alive and interactive.

Gradient blinds with mouse interaction change everything. They tap into our fascination with light and shadow—the way architectural elements create ever-changing patterns, how lighting transforms spaces throughout the day. The shader-based calculations create mathematically precise stripe patterns while mouse tracking adds the organic responsiveness that makes digital surfaces feel physical.

This component handles the complex WebGL mathematics automatically. Gradient interpolation, coordinate rotation, distance calculations, and spotlight blending all work together seamlessly. The result feels like controlling real venetian blinds with dynamic lighting, not a simple CSS effect.

Features

Dynamic gradient stripes with up to 8 customizable colors and smooth interpolation
Mouse-responsive spotlight with configurable radius, softness, and opacity
Blind count automation adapting to screen width with minimum blind width constraints
Rotation and distortion for angular blind effects and organic movement
Mirror gradient option creating symmetrical patterns for balanced compositions
Exponential mouse dampening for smooth, physics-based cursor tracking
Mix blend modes for creative layering with underlying content
Performance optimization with pause controls and efficient shader rendering
Noise integration for subtle texture variation and film grain effects
TypeScript support with complete prop forwarding and type safety

API Reference

GradientBlinds

Prop	Type	Default	Description
`gradientColors`	`string[]`	`["#FF9FFC", "#5227FF"]`	Up to 8 hex colors for gradient (min 2 colors)
`blindCount`	`number`	`16`	Number of venetian blind stripes
`blindMinWidth`	`number`	`60`	Minimum blind width in pixels (overrides count if needed)
`angle`	`number`	`0`	Rotation angle in degrees (-180 to 180)
`spotlightRadius`	`number`	`0.5`	Mouse spotlight size (0.1 to 2.0)
`spotlightSoftness`	`number`	`1`	Spotlight edge softness (0.1 to 5.0)
`spotlightOpacity`	`number`	`1`	Spotlight intensity (0.0 to 2.0)
`mouseDampening`	`number`	`0.15`	Mouse follow smoothness (0.01 to 1.0)
`mirrorGradient`	`boolean`	`false`	Create symmetrical gradient pattern
`distortAmount`	`number`	`0`	Sine wave distortion strength (0.0 to 2.0)
`shineDirection`	`"left" \| "right"`	`"left"`	Blind highlight direction
`noise`	`number`	`0.3`	Random noise intensity for texture
`paused`	`boolean`	`false`	Pause animation and mouse tracking
`mixBlendMode`	`string`	`"lighten"`	CSS blend mode for layering
`dpr`	`number`	-	Device pixel ratio override
`className`	`string`	-	Additional CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	-	All standard div props

Gradient System

The component supports complex color gradients:

Colors	Interpolation	Performance	Visual Complexity
2 colors	Linear blend	Optimal	Simple gradient
3-4 colors	Multi-segment	Good	Rich transitions
5-8 colors	Complex ramp	Higher GPU load	Rainbow effects

Effect Combinations

// Classic venetian blinds
<GradientBlinds 
  gradientColors={["#f3f4f6", "#1f2937"]}
  blindCount={25}
  angle={0}
  spotlightRadius={0.4}
/>

// Neon cyberpunk effect
<GradientBlinds 
  gradientColors={["#ff0080", "#8000ff", "#0080ff"]}
  blindCount={12}
  angle={45}
  distortAmount={1.0}
  mixBlendMode="screen"
/>

// Organic flowing pattern
<GradientBlinds 
  gradientColors={["#fbbf24", "#f59e0b", "#d97706"]}
  mirrorGradient={true}
  distortAmount={0.8}
  mouseDampening={0.3}
/>

// High-contrast architecture
<GradientBlinds 
  gradientColors={["#000000", "#ffffff"]}
  blindCount={8}
  blindMinWidth={120}
  spotlightSoftness={2.0}
/>

Shader mathematics

Coordinate Rotation: Uses 2D rotation matrices to transform the gradient space, allowing blinds to appear at any angle while maintaining proper aspect ratio correction.

Gradient Interpolation: Implements multi-segment color blending with floor and fract functions to smoothly transition between up to 8 colors with mathematically precise positioning.

Distance-Based Lighting: The spotlight uses Euclidean distance calculations with exponential falloff curves to create realistic circular illumination that follows mouse movement.

Exponential Dampening: Mouse tracking uses exponential decay functions (1 - exp(-dt/tau)) for physics-accurate smoothing that feels natural and responsive.

Performance considerations

Blind Count Optimization: The component automatically limits blind count based on blindMinWidth to prevent performance issues on small screens. More blinds increase fragment shader complexity.

Mouse Dampening Balance: Very low dampening values (< 0.05) can cause jittery animations, while high values (> 0.5) feel sluggish. The default 0.15 provides optimal responsiveness.

Color Count Impact: Each additional gradient color increases shader branching complexity. For best performance, use 2-4 colors unless complex rainbows are essential.

Mix Blend Modes: Hardware-accelerated blend modes like "screen", "multiply", and "lighten" perform better than complex modes like "color-dodge" or "hard-light".

Common gotchas

Minimum Blind Width: The component prioritizes visual quality over exact blind count. If blindMinWidth forces fewer blinds than blindCount, the minimum width takes precedence for better appearance.

Angle Limitations: Rotation angles beyond ±90 degrees may cause visual artifacts due to aspect ratio corrections. For extreme angles, consider adjusting the gradient colors for better contrast.

Mouse Coordinate System: The spotlight uses WebGL coordinate space (Y-up) internally but handles screen coordinates automatically. No coordinate conversion is needed when using the component.

Gradient Color Order: Colors are interpolated in array order from left to right. Changing the order dramatically affects the visual result, especially with mirrorGradient enabled.

Pause State: When paused={true}, mouse tracking stops but the last spotlight position remains visible. This is intentional for maintaining visual consistency during pause states.

React Gradient Blinds

Interactive venetian blinds with spotlight

Installation

Why flat patterns feel lifeless

Features

API Reference

GradientBlinds

Gradient System

Effect Combinations

Shader mathematics

Performance considerations

Common gotchas

You might also like

Gradient Animation

Grid Pattern

Dot Pattern

Retro Grid

Questions developers actually ask

On this page

React Gradient Blinds