React Truchet Shaders

Powered by

React

react-shaders

GPU Shaders

Need sophisticated Truchet tiling patterns with smooth animation? Most developers use static geometric patterns that can't create the complex, flowing connections of Truchet tiles. This React Truchet component uses GPU procedural generation to create dynamic tiling patterns with rotation, anti-aliasing, and color cycling.

Copy-paste TypeScript component that creates mesmerizing Truchet pattern effects with procedural tile generation, rotation matrices, and checkerboard logic. Mathematical tiling beauty with customizable parameters. Built for Next.js applications with shadcn/ui design system. GPU-accelerated—smooth pattern flow.

React Truchet with procedural tiling

Dynamic geometric patterns with rotation, anti-aliasing, and procedural noise generation:

import { TruchetShaders } from "@/components/ui/shadcn-io/truchet-shaders";export default function TruchetShadersDemo() {  return (    <TruchetShaders      speed={0.8}      scale={1.0}      complexity={1.2}      colorShift={1.0}      antiAliasing={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 TruchetShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  scale?: number;  complexity?: number;  colorShift?: number;  antiAliasing?: number;}const fragmentShader = `// Procedural noise to replace texture samplingvec2 noise2(vec2 p) {    return fract(sin(vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)))) * 43758.5453);}void mainImage(out vec4 O, vec2 P){    O = vec4(0.0);    for(float n = 0.0; n < 9.0; n++) {        // Skip iterations beyond anti-aliasing setting        if(n >= u_antiAliasing * 9.0) break;        // Anti-aliasing offset        vec2 offset = vec2(mod(n, 3.0), floor(n / 3.0)) / 3.0;        vec2 p = P + offset;        // Resolution for scaling        vec2 r = iResolution.xy;        // Apply rotation matrix and scaling        mat2 rotMat = mat2(cos(iTime * u_speed * 0.1 + vec4(0, 33, 11, 0)));        p = p * rotMat / r.y * (6.0 * u_scale) - iTime * u_speed;        // Cell coordinates        vec2 c = ceil(p);        // Use procedural noise instead of texture sampling        vec2 noiseVal = noise2(c / 200.0);        vec2 s = sign(noiseVal - 0.5);        // Fractional-cell coordinates (-0.5 to +0.5)        vec2 f = (c - p - 0.5) * s;        // Simplified Truchet distance calculation        float truchetDist = length(f - 0.5 - ceil(f.x + f.y));        float checkerboard = mod(c.x + c.y, 2.0);        float intensity = abs(truchetDist - 0.5) * u_complexity;        // Cleaner color generation without problematic clamp        vec4 color = 0.5 + 0.5 * cos((p * 0.4 + intensity).x + vec4(6, 1, 2, 0) * u_colorShift);        O += color / 9.0;    }}`;export const TruchetShaders = forwardRef<HTMLDivElement, TruchetShadersProps>(({  className,  speed = 1.0,  scale = 1.0,  complexity = 1.0,  colorShift = 1.0,  antiAliasing = 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_scale: { type: '1f', value: scale },          u_complexity: { type: '1f', value: complexity },          u_colorShift: { type: '1f', value: colorShift },          u_antiAliasing: { type: '1f', value: antiAliasing },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});TruchetShaders.displayName = "TruchetShaders";

Based on shader by ftjczG - Truchet tiling patterns

Perfect for React 19, Next.js 15, and modern TypeScript projects. Truchet patterns generated entirely on GPU using procedural noise and geometric mathematics. Customizable speed, scale, complexity, color shifting, and anti-aliasing. Full shadcn/ui compatibility with Tailwind CSS styling.

Installation

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

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

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

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

Usage

import { TruchetShaders } from "@/components/ui/truchet-shaders";

export default function GeometricPatterns() {
  return (
    <TruchetShaders
      speed={0.8}
      scale={1.0}
      complexity={1.2}
      colorShift={1.0}
      antiAliasing={1.0}
    >
      <div className="relative z-10">
        <h1>Content over Truchet patterns</h1>
      </div>
    </TruchetShaders>
  );
}

Why Truchet patterns require mathematical precision

Simple tiling approaches create disconnected patterns without flow. Static geometric designs lack the organic connectivity of true Truchet tiles. Most libraries can't handle the complex rotation and scaling needed for dynamic patterns. Traditional methods struggle with the anti-aliasing required for smooth geometric edges.

GPU procedural mathematics solve this with authentic tiling algorithms. Rotation matrices create smooth pattern flow. Checkerboard logic ensures proper tile connectivity. Procedural noise generates infinite pattern variations. Distance-based coloring provides natural shading and depth.

This React Truchet component uses professional geometric mathematics for authentic tiling behavior. Cell-based coordinate systems create perfect tessellation. Sign manipulation controls tile orientation. Anti-aliasing ensures smooth edges at all scales. Color phase cycling creates dynamic visual interest.

React Truchet shader features

• Procedural tile generation - Infinite pattern variations using GPU noise functions
• Rotation matrix animation - Smooth pattern flow with mathematical rotation
• Checkerboard tessellation logic - Proper tile connectivity following Truchet rules
• Anti-aliasing support - Smooth edges with customizable sampling quality
• Distance-based shading - Natural depth and dimension through mathematical gradients
• Cell coordinate system - Perfect geometric tessellation across all scales
• Sign manipulation - Control tile orientation for pattern complexity
• Color phase cycling - Dynamic spectrum transitions with customizable timing
• Scale-independent rendering - Consistent quality from macro to micro views
• Mathematical precision - GPU-accurate geometric calculations for perfect patterns
• Customizable complexity - Control pattern intricacy and connection density
• Speed variation - Animation timing for rotation and color cycling
• 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

TruchetShaders

Main container component for the Truchet tiling pattern effect.

GPU Truchet troubleshooting

Pattern rotation too slow/fast: Adjust speed for comfortable viewing. Lower values create meditative pattern flow, higher values create dynamic geometric animation.

Tiles too large/small: Use scale to control tile density. Higher values create finer patterns, lower values create larger, more visible geometric structures.

Pattern too simple/complex: Modify complexity for connection density. Higher values create more intricate tile relationships and pattern variations.

Colors cycling too fast/slow: Adjust colorShift for spectrum transition timing. This controls how quickly colors cycle through the geometric patterns.

Edges too jagged/soft: Use antiAliasing to control edge smoothing. Higher values create smoother edges but may impact performance on older devices.

Mobile performance: Reduce antiAliasing to 0.5 and complexity to 0.8 on older devices. Truchet calculations are well-optimized but benefit from reduced sampling.

Pattern connectivity: The checkerboard logic ensures proper Truchet tile connectivity - disconnected patterns indicate scaling issues.

More React shader components

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

React Truchet patterns FAQ