WebGL-Powered Procedural Shapes for React

FlowShapes - Artistic procedural shapes for react | Product Hunt

Quick Start

npm install flowshapes

import { ProceduralShapeRenderer } from 'flowshapes';

function App() {
  return (
    <ProceduralShapeRenderer
      shapeType="rectangle"
      width={400}
      height={400}
      script={`
        vec3 color = vec3(x/width, y/height, 0.5);
        gl_FragColor = vec4(color, 1.0);
      `}
      autoAnimate={true}
    />
  );
}

Features

WebGL Powered

Hardware-accelerated rendering with custom GLSL shaders for stunning visual effects.

React Support

Seamlessly integrates into your React applications with an intuitive component API.

Highly Customizable

Create unique shapes with custom shaders, animations, and interactive parameters.

Interactive Demos

⚠️Experimental: This library is currently experimental and may be unstable. Use with caution in production.

<ProceduralShapeRenderer
  shapeType="ellipse"
  width={700}
  height={700}
  autoAnimate={true}
  script={`
float centerX = width / 2.0;
float centerY = height / 2.0;

float normX = x / width;
float normY = y / height;

float wave1 = sin(normX * 4.0 + time * 1.2) * 0.5;
float wave2 = cos(normY * 3.0 - time * 0.8) * 0.5;
float wave3 = sin((normX + normY) * 2.0 + time * 1.5) * 0.3;

float waveBlend = (wave1 + wave2 + wave3) * 0.5 + 0.5;

float noiseVal = noise(normX * 2.0, normY * 2.0, time * 0.3) * 0.5 + 0.5;

float diagonalGrad = (normX + normY) * 0.5;
float animatedGrad = diagonalGrad + waveBlend * 0.3 + sin(time * 0.7) * 0.2;

float finalGrad = animatedGrad * 0.7 + noiseVal * 0.3;

float ditherSize = 4.0;
float ditherX = floor(mod(x, ditherSize) / ditherSize * 4.0);
float ditherY = floor(mod(y, ditherSize) / ditherSize * 4.0);

float ditherThreshold = 0.0;
int dX = int(ditherX);
int dY = int(ditherY);
if (dY == 0) {
    if (dX == 0) ditherThreshold = 0.0;
    else if (dX == 1) ditherThreshold = 8.0;
    else if (dX == 2) ditherThreshold = 2.0;
    else ditherThreshold = 10.0;
} else if (dY == 1) {
    if (dX == 0) ditherThreshold = 12.0;
    else if (dX == 1) ditherThreshold = 4.0;
    else if (dX == 2) ditherThreshold = 14.0;
    else ditherThreshold = 6.0;
} else if (dY == 2) {
    if (dX == 0) ditherThreshold = 3.0;
    else if (dX == 1) ditherThreshold = 11.0;
    else if (dX == 2) ditherThreshold = 1.0;
    else ditherThreshold = 9.0;
} else {
    if (dX == 0) ditherThreshold = 15.0;
    else if (dX == 1) ditherThreshold = 7.0;
    else if (dX == 2) ditherThreshold = 13.0;
    else ditherThreshold = 5.0;
}
ditherThreshold = ditherThreshold / 16.0;

float ditherPattern = finalGrad + ditherThreshold * 0.15 - 0.075;

float hueShift = sin(time * 0.5) * 0.15;
float hue = map(ditherPattern, 0.0, 1.0, 0.55, 0.95) + hueShift;
float saturation = 0.85 + sin(ditherPattern * 3.0 + time) * 0.1;
float brightness = 0.5 + ditherPattern * 0.4 + sin(time * 1.3 + normX * 5.0) * 0.1;

float h = hue * 6.0;
float i = floor(h);
float f = h - i;
float p = brightness * (1.0 - saturation);
float q = brightness * (1.0 - f * saturation);
float t = brightness * (1.0 - (1.0 - f) * saturation);

float r, g, b;
int iMod = int(mod(i, 6.0));
if (iMod == 0) {
    r = brightness; g = t; b = p;
} else if (iMod == 1) {
    r = q; g = brightness; b = p;
} else if (iMod == 2) {
    r = p; g = brightness; b = t;
} else if (iMod == 3) {
    r = p; g = q; b = brightness;
} else if (iMod == 4) {
    r = t; g = p; b = brightness;
} else {
    r = brightness; g = p; b = q;
}

gl_FragColor = vec4(r, g, b, 1.0);
    `}
/>

Ready to Get Started?

Install FlowShapes and start creating stunning visual effects for your React applications.

Generate YoursView on NPM