React Binary Shaders

Powered by

React

react-shaders

GPU Shaders

Need sophisticated binary grid effects with dynamic matrix switching? Most developers use static digital patterns that can't achieve the complex mathematical transformations of real binary systems. This React binary component uses GPU matrix operations to create dynamic grid patterns with binary state switching and distance-based selection.

Copy-paste TypeScript component that creates mesmerizing binary effects with grid tessellation, matrix transformations, and binary state logic. Advanced digital mathematics with customizable parameters. Built for Next.js applications with shadcn/ui design system. GPU-accelerated—smooth digital patterns.

React binary with matrix transformations

Dynamic digital grid with binary matrix selection and distance-based switching:

import { BinaryShaders } from "@/components/ui/shadcn-io/binary-shaders";export default function BinaryShadersDemo() {  return (    <BinaryShaders      speed={1.0}      gridScaleX={1.0}      gridScaleY={1.0}      intensity={1.0}      threshold={10.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 BinaryShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  gridScaleX?: number;  gridScaleY?: number;  intensity?: number;  threshold?: number;}const fragmentShader = `// Modf function implementation for WebGL compatibilityvec2 modf_impl(vec2 x, out vec2 i) {    i = floor(x);    return x - i;}void mainImage(out vec4 O, vec2 I){    // Grid scaling    vec2 gridScale = vec2(u_gridScaleX * 6.0, u_gridScaleY * 9.0);    // Calculate grid coordinates    vec2 gridCoord;    vec2 fractional = modf_impl(I / gridScale, gridCoord);    fractional -= 0.5;    // Binary matrix selection based on distance and time    float distanceValue = length(I) / (9e-5 * u_threshold);    float timeOffset = distanceValue - iTime * u_speed;    // Use mod to simulate bitwise & 1 operation (gives 0 or 1)    float binaryValue = mod(floor(timeOffset), 2.0);    // Create transformation matrix based on binary value    mat2 selectedMatrix;    if (binaryValue < 0.5) {        selectedMatrix = mat2(6.0, 6.0, 10.0, 6.0);    } else {        selectedMatrix = mat2(6.0, 10.0, 6.0, 6.0);    }    // Apply transformation and calculate distance    vec2 transformed = fractional * selectedMatrix;    float distance = length(transformed);    // Generate green channel intensity    float greenValue = (2.5 * u_intensity) - distance;    // Create final color    O = vec4(0.0, greenValue, 0.0, 1.0);    // Apply color mixing: O *= 2.0 - O (creates interesting color curves)    O *= 2.0 - O;}`;export const BinaryShaders = forwardRef<HTMLDivElement, BinaryShadersProps>(({  className,  speed = 1.0,  gridScaleX = 1.0,  gridScaleY = 1.0,  intensity = 1.0,  threshold = 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_gridScaleX: { type: '1f', value: gridScaleX },          u_gridScaleY: { type: '1f', value: gridScaleY },          u_intensity: { type: '1f', value: intensity },          u_threshold: { type: '1f', value: threshold },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});BinaryShaders.displayName = "BinaryShaders";

Original shader by XorDev - "Binary"

Perfect for React 19, Next.js 15, and modern TypeScript projects. Binary patterns generated entirely on GPU using matrix operations and bitwise logic. Customizable speed, grid scaling, intensity, and threshold. Full shadcn/ui compatibility with Tailwind CSS styling.

Installation

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

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

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

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

Usage

import { BinaryShaders } from "@/components/ui/binary-shaders";

export default function DigitalMatrix() {
  return (
    <BinaryShaders
      speed={1.0}
      gridScaleX={1.0}
      gridScaleY={1.0}
      intensity={1.0}
      threshold={1.0}
    >
      <div className="relative z-10">
        <h1>Content over binary matrix</h1>
      </div>
    </BinaryShaders>
  );
}

Why binary matrix effects require mathematical precision

Simple grid patterns lack the dynamic switching behavior of binary systems. Static digital effects can't capture the complex state transitions needed for authentic binary visualization. Most libraries struggle with the matrix operations and bitwise logic required for true binary patterns. Traditional approaches can't handle the distance-based state selection that creates organic digital flow.

GPU matrix mathematics solve this with authentic binary system simulation. Bitwise operations create true binary state switching. Matrix transformations provide different pattern modes. Distance-based selection creates organic state transitions. Grid tessellation ensures perfect digital alignment.

This React binary component uses professional digital visualization techniques. Matrix operations create different transformation states. Bitwise logic handles binary switching. Grid coordinates ensure perfect tessellation. Distance calculations provide smooth state transitions.

React binary shader features

• Binary matrix switching - True binary state selection using bitwise operations
• Dual matrix transformations - Two different matrix modes for pattern variation
• Grid tessellation - Perfect digital grid alignment with customizable scaling
• Distance-based selection - Organic state switching based on pixel distance
• Modf grid coordinates - Fractional coordinate system for smooth grid patterns
• Color curve transformation - Non-linear color mixing for enhanced visual depth
• Customizable grid scaling - Independent X and Y axis grid density control
• Speed animation - Time-based binary state progression
• Intensity control - Overall brightness and pattern prominence
• Threshold adjustment - Distance sensitivity for state switching
• Compact algorithm - Highly optimized GPU implementation
• 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

BinaryShaders

Main container component for the binary matrix effect.

GPU binary troubleshooting

Switching too slow/fast: Adjust speed for comfortable binary state transitions. Lower values create slower digital evolution, higher values create rapid matrix switching.

Grid too coarse/fine: Use gridScaleX and gridScaleY to control grid density. Higher values create finer grids, lower values create larger digital cells.

Pattern too dim/bright: Modify intensity for overall pattern brightness. Digital patterns can be subtle - adjust for optimal visibility against content.

State transitions: Adjust threshold to control how distance affects binary switching. Lower values create more frequent switching, higher values create stable regions.

Aspect ratio: Independent X and Y grid scaling allows for rectangular vs square grid patterns to match different content layouts.

Mobile performance: Binary effects are extremely lightweight and run smoothly on all modern mobile devices. The compact algorithm ensures excellent performance.

Digital authenticity: The bitwise operations ensure true binary behavior rather than approximated digital effects.

More React shader components

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

React binary FAQ