Minimal Jigsaw Shaders

Powered by

React

WebGL

Look, we've all tried to build jigsaw patterns. You either end up with basic grid overlays that look nothing like proper puzzle pieces or JavaScript calculations that can't handle complex interlocking geometry smoothly. This React component uses optimized diagonal partitioning with minimal instruction count that actually runs at 60fps without melting your CPU.

Elegant minimal jigsaw animation

Sophisticated puzzle piece patterns with mathematical precision and minimal computational overhead:

import { MinimalJigsawShaders } from "@/components/ui/shadcn-io/minimal-jigsaw-shaders";export default function MinimalJigsawShadersDemo() {  return (    <div className="relative w-full h-full bg-black rounded-lg overflow-hidden">      <MinimalJigsawShaders        speed={1.0}        scale={8.0}        colorPalette={0}        noduleSize={1.0}        className="w-full h-full"      />    </div>  );}

"use client";import React, { forwardRef } from "react";import { Shader } from "react-shaders";import { cn } from "@/lib/utils";export interface MinimalJigsawShadersProps extends React.HTMLAttributes<HTMLDivElement> {  speed?: number;  scale?: number;  colorPalette?: number;  noduleSize?: number;}const fragmentShader = `#extension GL_OES_standard_derivatives : enablefloat h21(vec2 p) {    return fract(sin(dot(p, vec2(27.3, 57.7))) * 1e4);}float di(vec2 p) {    p = abs(p);    return (p.x + p.y - 1.) * .7 + .05;}vec3 jigsaw(vec2 p) {    vec2 ip = floor(p);    p -= ip + .5;    vec2 m = fract(ip / 2.) * 2. - .5;    vec2 dirV = dot(m, p) < 0. ? -m : m;    vec2 rD = (h21(ip) - .5) * dirV;    float d = di(p - dirV), c = length(p - dirV * .2) - .2 * u_noduleSize;    if (rD.x < 0.) {        d = max(d, .1 - c);        if (c < d) ip -= dirV * 2.;    }    return vec3(min(d, c), ip + dirV);}void mainImage(out vec4 fragColor, in vec2 fragCoord) {    vec2 R = iResolution.xy;    vec2 u = (fragCoord - R * .5) / R.y * u_scale + vec2(1, .5) * iTime * u_speed;    vec3 d = jigsaw(u);    vec3 col;    if (u_colorPalette == 0.) {        col = .8 + .2 * cos(6.3 * h21(d.yz) + vec3(0, 23, 21));    } else if (u_colorPalette == 1.) {        col = .5 + .4 * cos(6.3 * h21(d.yz) + vec3(0, 1, 2));    } else if (u_colorPalette == 2.) {        col = .6 + .4 * cos(6. * h21(d.yz) + vec3(1, 3, 5));    } else {        col = vec3(1, h21(d.yz) * .65 + .35, h21(d.yz + .5) * .7 + .3);        col = mix(col.yzx, col, h21(d.yz + .2));    }    col = mix(col, vec3(0), smoothstep(0., 8. / R.y, d.x));    fragColor = vec4(sqrt(col), 1);}`;export const MinimalJigsawShaders = forwardRef<HTMLDivElement, MinimalJigsawShadersProps>((  {    className,    speed = 1.0,    scale = 8.0,    colorPalette = 0,    noduleSize = 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_colorPalette: { type: '1f', value: colorPalette },          u_noduleSize: { type: '1f', value: noduleSize },        }}        style={{ width: '100%', height: '100%' } as CSSStyleDeclaration}      />    </div>  );});MinimalJigsawShaders.displayName = "MinimalJigsawShaders";export default MinimalJigsawShaders;

Created by Shane in 2019-09-21

Built for React applications with TypeScript and Next.js in mind. The animation runs entirely on the GPU using WebGL diagonal partitioning with nodule placement algorithms and efficient distance field calculations. Works seamlessly with shadcn/ui design systems.

Installation

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

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

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

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

Usage

import { MinimalJigsawShaders } from "@/components/ui/minimal-jigsaw-shaders";

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

Why most jigsaw implementations suck

Most developers try to create jigsaw patterns with SVG path combinations or Canvas API polygon drawing. Bad idea. You're dealing with expensive DOM manipulations, complex intersection calculations, and wondering why your React app feels sluggish. Some use CSS clip-path with manual positioning, which sounds smart until you realize you're computing piece geometry for every element on every frame.

This React component uses mathematical diagonal partitioning with GPU-accelerated distance field rendering. The GPU handles everything using optimized geometric algorithms with authentic puzzle piece mathematics. No JavaScript calculations, no DOM rendering, just smooth 60fps jigsaw art.

Features

• Zero JavaScript animation overhead - Pure WebGL pattern generation runs on GPU
• Minimal instruction count with optimized diagonal partitioning algorithm
• Authentic puzzle piece geometry using diamond shapes and circular nodules
• Multiple color palettes including IQ's cosine-based palette formulas
• TypeScript definitions for proper IDE support in React projects
• Customizable parameters with 4 props for complete control
• Performance optimization through efficient GPU geometric algorithms
• shadcn/ui compatible for consistent design systems
• Responsive design with automatic canvas resizing

API Reference

MinimalJigsawShaders

Main container component for the jigsaw puzzle effect.

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 pattern calculations. Consider reducing scale and using simpler color palettes for better performance.

Pieces too small: Increase the scale prop for larger puzzle pieces with clearer geometric definition. Values around 12.0-16.0 work well for prominent piece visibility.

Nodules too faint: Increase the noduleSize prop for more prominent puzzle piece connections. Values around 1.5-2.0 create clear interlocking geometry.

Animation too fast: Lower the speed prop for more controlled pattern movement. Values around 0.3-0.5 work well for subtle puzzle piece flow.

You might also like

Explore other shader-based background components for React applications:

Questions developers actually ask