From b5ada45295e04c7fd11b556855a51c849fa62ac3 Mon Sep 17 00:00:00 2001
From: Ksenia Kondrashova <kondrashova.ksenya@gmail.com>
Date: Sun, 4 Jan 2026 23:58:14 +0400
Subject: [PATCH 01/25] u_cellAngle added

---
 docs/src/app/(shaders)/dot-grid/page.tsx        |  1 +
 docs/src/shader-defs/dot-grid-def.ts            |  8 ++++++++
 packages/shaders-react/src/shaders/dot-grid.tsx | 10 ++++++++--
 packages/shaders/src/shaders/dot-grid.ts        | 12 +++++++++---
 4 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/docs/src/app/(shaders)/dot-grid/page.tsx b/docs/src/app/(shaders)/dot-grid/page.tsx
index 23a0f01f8..f34477944 100644
--- a/docs/src/app/(shaders)/dot-grid/page.tsx
+++ b/docs/src/app/(shaders)/dot-grid/page.tsx
@@ -26,6 +26,7 @@ const DotGridWithControls = () => {
       strokeWidth: { value: defaults.strokeWidth, min: 0, max: 50, order: 203 },
       sizeRange: { value: defaults.sizeRange, min: 0, max: 1, order: 204 },
       opacityRange: { value: defaults.opacityRange, min: 0, max: 1, order: 205 },
+      cellAngle: { value: defaults.cellAngle, min: 0, max: 90, order: 300 },
       shape: {
         value: defaults.shape,
         options: Object.keys(DotGridShapes) as DotGridShape[],
diff --git a/docs/src/shader-defs/dot-grid-def.ts b/docs/src/shader-defs/dot-grid-def.ts
index 1cb7ec220..dcd694f49 100644
--- a/docs/src/shader-defs/dot-grid-def.ts
+++ b/docs/src/shader-defs/dot-grid-def.ts
@@ -84,6 +84,14 @@ export const dotGridDef: ShaderDef = {
       defaultValue: defaultParams.opacityRange,
       description: 'Random variation in shape opacity (0 = all shapes opaque, higher = semi-transparent dots)',
     },
+    {
+      name: 'cellAngle',
+      type: 'number',
+      min: 0,
+      max: 360,
+      defaultValue: defaultParams.cellAngle,
+      description: 'Rotation of shape within each cell, degrees',
+    },
     ...staticCommonParams,
   ],
 };
diff --git a/packages/shaders-react/src/shaders/dot-grid.tsx b/packages/shaders-react/src/shaders/dot-grid.tsx
index 67c378d5b..b72e068a1 100644
--- a/packages/shaders-react/src/shaders/dot-grid.tsx
+++ b/packages/shaders-react/src/shaders/dot-grid.tsx
@@ -23,13 +23,14 @@ export const defaultPreset: DotGridPreset = {
     colorBack: '#000000',
     colorFill: '#ffffff',
     colorStroke: '#ffaa00',
-    size: 2,
+    size: 15,
     gapX: 32,
     gapY: 32,
     strokeWidth: 0,
     sizeRange: 0,
     opacityRange: 0,
-    shape: 'circle',
+    shape: 'square',
+    cellAngle: 0,
   },
 };
 
@@ -47,6 +48,7 @@ const trianglesPreset: DotGridPreset = {
     sizeRange: 0,
     opacityRange: 0,
     shape: 'triangle',
+    cellAngle: 0,
   },
 };
 
@@ -64,6 +66,7 @@ const treeLinePreset: DotGridPreset = {
     sizeRange: 1,
     opacityRange: 0.6,
     shape: 'circle',
+    cellAngle: 0,
   },
 };
 
@@ -81,6 +84,7 @@ const wallpaperPreset: DotGridPreset = {
     sizeRange: 0,
     opacityRange: 0,
     shape: 'diamond',
+    cellAngle: 0,
   },
 };
 
@@ -98,6 +102,7 @@ export const DotGrid: React.FC<DotGridProps> = memo(function DotGridImpl({
   sizeRange = defaultPreset.params.sizeRange,
   opacityRange = defaultPreset.params.opacityRange,
   shape = defaultPreset.params.shape,
+  cellAngle = defaultPreset.params.cellAngle,
 
   // Sizing props
   fit = defaultPreset.params.fit,
@@ -126,6 +131,7 @@ export const DotGrid: React.FC<DotGridProps> = memo(function DotGridImpl({
     u_sizeRange: sizeRange,
     u_opacityRange: opacityRange,
     u_shape: DotGridShapes[shape],
+    u_cellAngle: cellAngle,
 
     // Sizing uniforms
     u_fit: ShaderFitOptions[fit],
diff --git a/packages/shaders/src/shaders/dot-grid.ts b/packages/shaders/src/shaders/dot-grid.ts
index 8a53183e7..cd638dc24 100644
--- a/packages/shaders/src/shaders/dot-grid.ts
+++ b/packages/shaders/src/shaders/dot-grid.ts
@@ -15,6 +15,7 @@ import { declarePI, simplexNoise } from '../shader-utils.js';
  * - u_sizeRange (float): Random variation in shape size, 0 = uniform, higher = random up to base size (0 to 1)
  * - u_opacityRange (float): Random variation in shape opacity, 0 = opaque, higher = semi-transparent (0 to 1)
  * - u_shape (float): Shape type (0 = circle, 1 = diamond, 2 = square, 3 = triangle)
+ * - u_cellAngle (float): Rotation of shape within each cell in degrees (0 to 360)
  *
  * Vertex shader outputs (used in fragment shader):
  * - v_patternUV (vec2): UV coordinates in pixels (scaled by 0.01 for precision), with scale, rotation and offset applied
@@ -48,6 +49,7 @@ uniform float u_strokeWidth;
 uniform float u_sizeRange;
 uniform float u_opacityRange;
 uniform float u_shape;
+uniform float u_cellAngle;
 
 in vec2 v_patternUV;
 
@@ -81,6 +83,8 @@ void main() {
   float baseSize = u_dotSize * (1. - sizeRandomizer * u_sizeRange);
   float strokeWidth = u_strokeWidth * (1. - sizeRandomizer * u_sizeRange);
 
+  float cellAngleRad = -u_cellAngle * PI / 180.;
+
   float dist;
   if (u_shape < 0.5) {
     // Circle
@@ -88,10 +92,10 @@ void main() {
   } else if (u_shape < 1.5) {
     // Diamond
     strokeWidth *= 1.5;
-    dist = polygon(1.5 * p, 4., .25 * PI);
+    dist = polygon(1.5 * p, 4., .25 * PI + cellAngleRad);
   } else if (u_shape < 2.5) {
     // Square
-    dist = polygon(1.03 * p, 4., 1e-3);
+    dist = polygon(1.03 * p, 4., cellAngleRad);
   } else {
     // Triangle
     strokeWidth *= 1.5;
@@ -99,7 +103,7 @@ void main() {
     p *= .9;
     p.y = 1. - p.y;
     p.y -= .75 * baseSize;
-    dist = polygon(p, 3., 1e-3);
+    dist = polygon(p, 3., cellAngleRad);
   }
 
   float edgeWidth = fwidth(dist);
@@ -139,6 +143,7 @@ export interface DotGridUniforms extends ShaderSizingUniforms {
   u_sizeRange: number;
   u_opacityRange: number;
   u_shape: (typeof DotGridShapes)[DotGridShape];
+  u_cellAngle: number;
 }
 
 export interface DotGridParams extends ShaderSizingParams {
@@ -152,6 +157,7 @@ export interface DotGridParams extends ShaderSizingParams {
   sizeRange?: number;
   opacityRange?: number;
   shape?: DotGridShape;
+  cellAngle?: number;
 }
 
 export const DotGridShapes = {

From 7e4a9be79ecd5226d802f6113da84579083b118e Mon Sep 17 00:00:00 2001
From: Ksenia Kondrashova <kondrashova.ksenya@gmail.com>
Date: Mon, 5 Jan 2026 00:07:35 +0400
Subject: [PATCH 02/25] simplify shape selection (todo: shape size adjustment)

---
 packages/shaders/src/shaders/dot-grid.ts | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/packages/shaders/src/shaders/dot-grid.ts b/packages/shaders/src/shaders/dot-grid.ts
index cd638dc24..856184cdd 100644
--- a/packages/shaders/src/shaders/dot-grid.ts
+++ b/packages/shaders/src/shaders/dot-grid.ts
@@ -91,19 +91,13 @@ void main() {
     dist = length(p);
   } else if (u_shape < 1.5) {
     // Diamond
-    strokeWidth *= 1.5;
-    dist = polygon(1.5 * p, 4., .25 * PI + cellAngleRad);
+    dist = polygon(p, 4., cellAngleRad + .25 * PI);
   } else if (u_shape < 2.5) {
     // Square
-    dist = polygon(1.03 * p, 4., cellAngleRad);
+    dist = polygon(p, 4., cellAngleRad);
   } else {
     // Triangle
-    strokeWidth *= 1.5;
-    p = p * 2. - 1.;
-    p *= .9;
-    p.y = 1. - p.y;
-    p.y -= .75 * baseSize;
-    dist = polygon(p, 3., cellAngleRad);
+    dist = polygon(p, 3., cellAngleRad - .333333333333 * PI);
   }
 
   float edgeWidth = fwidth(dist);

From 9739c6022786b5ba2d45eef0593c23b22441b7ed Mon Sep 17 00:00:00 2001
From: Ksenia Kondrashova <kondrashova.ksenya@gmail.com>
Date: Mon, 5 Jan 2026 00:50:23 +0400
Subject: [PATCH 03/25] +2 shapes

---
 docs/src/shader-defs/dot-grid-def.ts          |  2 +-
 .../shaders-react/src/shaders/dot-grid.tsx    | 10 +++---
 packages/shaders/src/shaders/dot-grid.ts      | 32 +++++++++++++++----
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/docs/src/shader-defs/dot-grid-def.ts b/docs/src/shader-defs/dot-grid-def.ts
index dcd694f49..300e58a03 100644
--- a/docs/src/shader-defs/dot-grid-def.ts
+++ b/docs/src/shader-defs/dot-grid-def.ts
@@ -34,7 +34,7 @@ export const dotGridDef: ShaderDef = {
       type: 'enum',
       defaultValue: defaultParams.shape,
       description: 'The shape type',
-      options: ['circle', 'diamond', 'square', 'triangle'],
+      options: ['circle', 'diamond', 'square', 'triangle', 'line', 'cross'],
     },
     {
       name: 'size',
diff --git a/packages/shaders-react/src/shaders/dot-grid.tsx b/packages/shaders-react/src/shaders/dot-grid.tsx
index b72e068a1..287aaefc5 100644
--- a/packages/shaders-react/src/shaders/dot-grid.tsx
+++ b/packages/shaders-react/src/shaders/dot-grid.tsx
@@ -23,14 +23,14 @@ export const defaultPreset: DotGridPreset = {
     colorBack: '#000000',
     colorFill: '#ffffff',
     colorStroke: '#ffaa00',
-    size: 15,
-    gapX: 32,
-    gapY: 32,
+    size: 1,
+    gapX: 167,
+    gapY: 57,
     strokeWidth: 0,
     sizeRange: 0,
     opacityRange: 0,
-    shape: 'square',
-    cellAngle: 0,
+    shape: 'line',
+    cellAngle: 34,
   },
 };
 
diff --git a/packages/shaders/src/shaders/dot-grid.ts b/packages/shaders/src/shaders/dot-grid.ts
index 856184cdd..fd7b0f932 100644
--- a/packages/shaders/src/shaders/dot-grid.ts
+++ b/packages/shaders/src/shaders/dot-grid.ts
@@ -1,8 +1,8 @@
 import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-sizing.js';
-import { declarePI, simplexNoise } from '../shader-utils.js';
+import { declarePI, rotation2, simplexNoise } from '../shader-utils.js';
 
 /**
- * Static grid pattern made of circles, diamonds, squares or triangles.
+ * Static grid pattern made of circles, diamonds, squares, triangles, lines or crosses.
  *
  * Fragment shader uniforms:
  * - u_colorBack (vec4): Background color in RGBA
@@ -14,7 +14,7 @@ import { declarePI, simplexNoise } from '../shader-utils.js';
  * - u_strokeWidth (float): Outline stroke width in pixels (0 to 50)
  * - u_sizeRange (float): Random variation in shape size, 0 = uniform, higher = random up to base size (0 to 1)
  * - u_opacityRange (float): Random variation in shape opacity, 0 = opaque, higher = semi-transparent (0 to 1)
- * - u_shape (float): Shape type (0 = circle, 1 = diamond, 2 = square, 3 = triangle)
+ * - u_shape (float): Shape type (0 = circle, 1 = diamond, 2 = square, 3 = triangle, 4 = line, 5 = cross)
  * - u_cellAngle (float): Rotation of shape within each cell in degrees (0 to 360)
  *
  * Vertex shader outputs (used in fragment shader):
@@ -56,6 +56,7 @@ in vec2 v_patternUV;
 out vec4 fragColor;
 
 ${ declarePI }
+${ rotation2 }
 ${ simplexNoise }
 
 float polygon(vec2 p, float N, float rot) {
@@ -70,6 +71,9 @@ void main() {
   // x100 is a default multiplier between vertex and fragmant shaders
   // we use it to avoid UV presision issues
   vec2 shape_uv = 100. * v_patternUV;
+  if (u_shape > 3.) {
+    shape_uv -= 1e-4;
+  }
 
   vec2 gap = max(abs(vec2(u_gapX, u_gapY)), vec2(1e-6));
   vec2 grid = fract(shape_uv / gap) + 1e-4;
@@ -86,21 +90,33 @@ void main() {
   float cellAngleRad = -u_cellAngle * PI / 180.;
 
   float dist;
+  p = rotate(p, cellAngleRad);
   if (u_shape < 0.5) {
     // Circle
     dist = length(p);
   } else if (u_shape < 1.5) {
     // Diamond
-    dist = polygon(p, 4., cellAngleRad + .25 * PI);
+    dist = polygon(p, 4., .25 * PI);
   } else if (u_shape < 2.5) {
     // Square
-    dist = polygon(p, 4., cellAngleRad);
-  } else {
+    dist = polygon(p, 4., 0.);
+  } else if (u_shape < 3.5) {
     // Triangle
-    dist = polygon(p, 3., cellAngleRad - .333333333333 * PI);
+    dist = polygon(p, 3., - .333333333333 * PI);
+  } else if (u_shape < 4.5) {
+    // Line
+    dist = abs(p.y);
+    baseSize *= .5;
+  } else {
+    // Cross
+    dist = min(abs(p.x), abs(p.y));
+    baseSize *= .5;
   }
 
   float edgeWidth = fwidth(dist);
+  if (u_shape > 3.) {
+    edgeWidth = fwidth(shape_uv.y);
+  }
   float shapeOuter = 1. - smoothstep(baseSize - edgeWidth, baseSize + edgeWidth, dist - strokeWidth);
   float shapeInner = 1. - smoothstep(baseSize - edgeWidth, baseSize + edgeWidth, dist);
   float stroke = shapeOuter - shapeInner;
@@ -159,6 +175,8 @@ export const DotGridShapes = {
   diamond: 1,
   square: 2,
   triangle: 3,
+  line: 4,
+  cross: 5,
 } as const;
 
 export type DotGridShape = keyof typeof DotGridShapes;

From f503c7d278847cfffdd9a65a9e0fa95a9916783d Mon Sep 17 00:00:00 2001
From: Ksenia Kondrashova <kondrashova.ksenya@gmail.com>
Date: Mon, 5 Jan 2026 01:14:36 +0400
Subject: [PATCH 04/25] small fixes

---
 packages/shaders/src/shaders/dot-grid.ts | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/shaders/src/shaders/dot-grid.ts b/packages/shaders/src/shaders/dot-grid.ts
index fd7b0f932..2f385287a 100644
--- a/packages/shaders/src/shaders/dot-grid.ts
+++ b/packages/shaders/src/shaders/dot-grid.ts
@@ -87,7 +87,7 @@ void main() {
   float baseSize = u_dotSize * (1. - sizeRandomizer * u_sizeRange);
   float strokeWidth = u_strokeWidth * (1. - sizeRandomizer * u_sizeRange);
 
-  float cellAngleRad = -u_cellAngle * PI / 180.;
+  float cellAngleRad = u_cellAngle * PI / 180.;
 
   float dist;
   p = rotate(p, cellAngleRad);
@@ -113,10 +113,7 @@ void main() {
     baseSize *= .5;
   }
 
-  float edgeWidth = fwidth(dist);
-  if (u_shape > 3.) {
-    edgeWidth = fwidth(shape_uv.y);
-  }
+  float edgeWidth = fwidth(shape_uv.y);
   float shapeOuter = 1. - smoothstep(baseSize - edgeWidth, baseSize + edgeWidth, dist - strokeWidth);
   float shapeInner = 1. - smoothstep(baseSize - edgeWidth, baseSize + edgeWidth, dist);
   float stroke = shapeOuter - shapeInner;

From c1971679245b8f57a7ef9077af5db248bd0d42fe Mon Sep 17 00:00:00 2001
From: Ksenia Kondrashova <kondrashova.ksenya@gmail.com>
Date: Mon, 5 Jan 2026 01:20:27 +0400
Subject: [PATCH 05/25] 2x cellOffsets (in px)

---
 docs/src/app/(shaders)/dot-grid/page.tsx        |  2 ++
 docs/src/shader-defs/dot-grid-def.ts            | 16 ++++++++++++++++
 packages/shaders-react/src/shaders/dot-grid.tsx | 12 ++++++++++++
 packages/shaders/src/shaders/dot-grid.ts        | 10 +++++++++-
 4 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/docs/src/app/(shaders)/dot-grid/page.tsx b/docs/src/app/(shaders)/dot-grid/page.tsx
index f34477944..8e2e66af8 100644
--- a/docs/src/app/(shaders)/dot-grid/page.tsx
+++ b/docs/src/app/(shaders)/dot-grid/page.tsx
@@ -27,6 +27,8 @@ const DotGridWithControls = () => {
       sizeRange: { value: defaults.sizeRange, min: 0, max: 1, order: 204 },
       opacityRange: { value: defaults.opacityRange, min: 0, max: 1, order: 205 },
       cellAngle: { value: defaults.cellAngle, min: 0, max: 90, order: 300 },
+      cellOffsetX: { value: defaults.cellOffsetX, min: -200, max: 200, order: 301 },
+      cellOffsetY: { value: defaults.cellOffsetY, min: -200, max: 200, order: 302 },
       shape: {
         value: defaults.shape,
         options: Object.keys(DotGridShapes) as DotGridShape[],
diff --git a/docs/src/shader-defs/dot-grid-def.ts b/docs/src/shader-defs/dot-grid-def.ts
index 300e58a03..47d855e22 100644
--- a/docs/src/shader-defs/dot-grid-def.ts
+++ b/docs/src/shader-defs/dot-grid-def.ts
@@ -92,6 +92,22 @@ export const dotGridDef: ShaderDef = {
       defaultValue: defaultParams.cellAngle,
       description: 'Rotation of shape within each cell, degrees',
     },
+    {
+      name: 'cellOffsetX',
+      type: 'number',
+      min: -500,
+      max: 500,
+      defaultValue: defaultParams.cellOffsetX,
+      description: 'Horizontal offset of the pattern, pixels',
+    },
+    {
+      name: 'cellOffsetY',
+      type: 'number',
+      min: -500,
+      max: 500,
+      defaultValue: defaultParams.cellOffsetY,
+      description: 'Vertical offset of the pattern, pixels',
+    },
     ...staticCommonParams,
   ],
 };
diff --git a/packages/shaders-react/src/shaders/dot-grid.tsx b/packages/shaders-react/src/shaders/dot-grid.tsx
index 287aaefc5..11fe48ebc 100644
--- a/packages/shaders-react/src/shaders/dot-grid.tsx
+++ b/packages/shaders-react/src/shaders/dot-grid.tsx
@@ -31,6 +31,8 @@ export const defaultPreset: DotGridPreset = {
     opacityRange: 0,
     shape: 'line',
     cellAngle: 34,
+    cellOffsetX: 0,
+    cellOffsetY: 0,
   },
 };
 
@@ -49,6 +51,8 @@ const trianglesPreset: DotGridPreset = {
     opacityRange: 0,
     shape: 'triangle',
     cellAngle: 0,
+    cellOffsetX: 0,
+    cellOffsetY: 0,
   },
 };
 
@@ -67,6 +71,8 @@ const treeLinePreset: DotGridPreset = {
     opacityRange: 0.6,
     shape: 'circle',
     cellAngle: 0,
+    cellOffsetX: 0,
+    cellOffsetY: 0,
   },
 };
 
@@ -85,6 +91,8 @@ const wallpaperPreset: DotGridPreset = {
     opacityRange: 0,
     shape: 'diamond',
     cellAngle: 0,
+    cellOffsetX: 0,
+    cellOffsetY: 0,
   },
 };
 
@@ -103,6 +111,8 @@ export const DotGrid: React.FC<DotGridProps> = memo(function DotGridImpl({
   opacityRange = defaultPreset.params.opacityRange,
   shape = defaultPreset.params.shape,
   cellAngle = defaultPreset.params.cellAngle,
+  cellOffsetX = defaultPreset.params.cellOffsetX,
+  cellOffsetY = defaultPreset.params.cellOffsetY,
 
   // Sizing props
   fit = defaultPreset.params.fit,
@@ -132,6 +142,8 @@ export const DotGrid: React.FC<DotGridProps> = memo(function DotGridImpl({
     u_opacityRange: opacityRange,
     u_shape: DotGridShapes[shape],
     u_cellAngle: cellAngle,
+    u_cellOffsetX: cellOffsetX,
+    u_cellOffsetY: cellOffsetY,
 
     // Sizing uniforms
     u_fit: ShaderFitOptions[fit],
diff --git a/packages/shaders/src/shaders/dot-grid.ts b/packages/shaders/src/shaders/dot-grid.ts
index 2f385287a..0978eafec 100644
--- a/packages/shaders/src/shaders/dot-grid.ts
+++ b/packages/shaders/src/shaders/dot-grid.ts
@@ -16,6 +16,8 @@ import { declarePI, rotation2, simplexNoise } from '../shader-utils.js';
  * - u_opacityRange (float): Random variation in shape opacity, 0 = opaque, higher = semi-transparent (0 to 1)
  * - u_shape (float): Shape type (0 = circle, 1 = diamond, 2 = square, 3 = triangle, 4 = line, 5 = cross)
  * - u_cellAngle (float): Rotation of shape within each cell in degrees (0 to 360)
+ * - u_cellOffsetX (float): Horizontal offset of the pattern in pixels
+ * - u_cellOffsetY (float): Vertical offset of the pattern in pixels
  *
  * Vertex shader outputs (used in fragment shader):
  * - v_patternUV (vec2): UV coordinates in pixels (scaled by 0.01 for precision), with scale, rotation and offset applied
@@ -50,6 +52,8 @@ uniform float u_sizeRange;
 uniform float u_opacityRange;
 uniform float u_shape;
 uniform float u_cellAngle;
+uniform float u_cellOffsetX;
+uniform float u_cellOffsetY;
 
 in vec2 v_patternUV;
 
@@ -70,7 +74,7 @@ void main() {
 
   // x100 is a default multiplier between vertex and fragmant shaders
   // we use it to avoid UV presision issues
-  vec2 shape_uv = 100. * v_patternUV;
+  vec2 shape_uv = 100. * v_patternUV + vec2(u_cellOffsetX, u_cellOffsetY);
   if (u_shape > 3.) {
     shape_uv -= 1e-4;
   }
@@ -151,6 +155,8 @@ export interface DotGridUniforms extends ShaderSizingUniforms {
   u_opacityRange: number;
   u_shape: (typeof DotGridShapes)[DotGridShape];
   u_cellAngle: number;
+  u_cellOffsetX: number;
+  u_cellOffsetY: number;
 }
 
 export interface DotGridParams extends ShaderSizingParams {
@@ -165,6 +171,8 @@ export interface DotGridParams extends ShaderSizingParams {
   opacityRange?: number;
   shape?: DotGridShape;
   cellAngle?: number;
+  cellOffsetX?: number;
+  cellOffsetY?: number;
 }
 
 export const DotGridShapes = {

From 8ce88a95176208b13f30fc583424f97f6b092e14 Mon Sep 17 00:00:00 2001
From: Ksenia Kondrashova <kondrashova.ksenya@gmail.com>
Date: Mon, 5 Jan 2026 01:22:02 +0400
Subject: [PATCH 06/25] defaults back

---
 packages/shaders-react/src/shaders/dot-grid.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/shaders-react/src/shaders/dot-grid.tsx b/packages/shaders-react/src/shaders/dot-grid.tsx
index 11fe48ebc..dfaae81f6 100644
--- a/packages/shaders-react/src/shaders/dot-grid.tsx
+++ b/packages/shaders-react/src/shaders/dot-grid.tsx
@@ -23,14 +23,14 @@ export const defaultPreset: DotGridPreset = {
     colorBack: '#000000',
     colorFill: '#ffffff',
     colorStroke: '#ffaa00',
-    size: 1,
-    gapX: 167,
-    gapY: 57,
+    size: 2,
+    gapX: 32,
+    gapY: 32,
     strokeWidth: 0,
     sizeRange: 0,
     opacityRange: 0,
-    shape: 'line',
-    cellAngle: 34,
+    shape: 'circle',
+    cellAngle: 0,
     cellOffsetX: 0,
     cellOffsetY: 0,
   },

From d84b92cb799e10a0ed66d1c034fa0ecdf1e3c5c5 Mon Sep 17 00:00:00 2001
From: Ksenia Kondrashova <kondrashova.ksenya@gmail.com>
Date: Wed, 21 Jan 2026 20:55:59 +0400
Subject: [PATCH 07/25] u_cellOffsetX reversed

---
 packages/shaders/src/shaders/dot-grid.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shaders/src/shaders/dot-grid.ts b/packages/shaders/src/shaders/dot-grid.ts
index 0978eafec..a2ac9aded 100644
--- a/packages/shaders/src/shaders/dot-grid.ts
+++ b/packages/shaders/src/shaders/dot-grid.ts
@@ -74,7 +74,7 @@ void main() {
 
   // x100 is a default multiplier between vertex and fragmant shaders
   // we use it to avoid UV presision issues
-  vec2 shape_uv = 100. * v_patternUV + vec2(u_cellOffsetX, u_cellOffsetY);
+  vec2 shape_uv = 100. * v_patternUV + vec2(-u_cellOffsetX, u_cellOffsetY);
   if (u_shape > 3.) {
     shape_uv -= 1e-4;
   }

From 98264631235abb280c383850a79912e59c2f633b Mon Sep 17 00:00:00 2001
From: Ksenia Kondrashova <kondrashova.ksenya@gmail.com>
Date: Wed, 21 Jan 2026 21:20:15 +0400
Subject: [PATCH 08/25] shape size redone

---
 packages/shaders-react/src/shaders/dot-grid.tsx | 8 ++++----
 packages/shaders/src/shaders/dot-grid.ts        | 6 ++++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/shaders-react/src/shaders/dot-grid.tsx b/packages/shaders-react/src/shaders/dot-grid.tsx
index dfaae81f6..4d9967336 100644
--- a/packages/shaders-react/src/shaders/dot-grid.tsx
+++ b/packages/shaders-react/src/shaders/dot-grid.tsx
@@ -23,13 +23,13 @@ export const defaultPreset: DotGridPreset = {
     colorBack: '#000000',
     colorFill: '#ffffff',
     colorStroke: '#ffaa00',
-    size: 2,
-    gapX: 32,
-    gapY: 32,
+    size: 50,
+    gapX: 100,
+    gapY: 100,
     strokeWidth: 0,
     sizeRange: 0,
     opacityRange: 0,
-    shape: 'circle',
+    shape: 'triangle',
     cellAngle: 0,
     cellOffsetX: 0,
     cellOffsetY: 0,
diff --git a/packages/shaders/src/shaders/dot-grid.ts b/packages/shaders/src/shaders/dot-grid.ts
index a2ac9aded..e68412c56 100644
--- a/packages/shaders/src/shaders/dot-grid.ts
+++ b/packages/shaders/src/shaders/dot-grid.ts
@@ -95,26 +95,28 @@ void main() {
 
   float dist;
   p = rotate(p, cellAngleRad);
+  baseSize *= .5;
   if (u_shape < 0.5) {
     // Circle
     dist = length(p);
   } else if (u_shape < 1.5) {
     // Diamond
+    baseSize *= .7071;
     dist = polygon(p, 4., .25 * PI);
   } else if (u_shape < 2.5) {
     // Square
     dist = polygon(p, 4., 0.);
   } else if (u_shape < 3.5) {
     // Triangle
+    baseSize *= 1.1547;
+    p.y += baseSize * .75;
     dist = polygon(p, 3., - .333333333333 * PI);
   } else if (u_shape < 4.5) {
     // Line
     dist = abs(p.y);
-    baseSize *= .5;
   } else {
     // Cross
     dist = min(abs(p.x), abs(p.y));
-    baseSize *= .5;
   }
 
   float edgeWidth = fwidth(shape_uv.y);

From 81f638d8cac5ebd2d726d15eaf3f860edd73db6b Mon Sep 17 00:00:00 2001
From: Ksenia Kondrashova <kondrashova.ksenya@gmail.com>
Date: Wed, 21 Jan 2026 23:24:53 +0400
Subject: [PATCH 09/25] triangle rotation origin fix

---
 docs/src/app/(shaders)/dot-grid/page.tsx | 2 +-
 packages/shaders/src/shaders/dot-grid.ts | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/docs/src/app/(shaders)/dot-grid/page.tsx b/docs/src/app/(shaders)/dot-grid/page.tsx
index 8e2e66af8..8d2bb2e93 100644
--- a/docs/src/app/(shaders)/dot-grid/page.tsx
+++ b/docs/src/app/(shaders)/dot-grid/page.tsx
@@ -26,7 +26,7 @@ const DotGridWithControls = () => {
       strokeWidth: { value: defaults.strokeWidth, min: 0, max: 50, order: 203 },
       sizeRange: { value: defaults.sizeRange, min: 0, max: 1, order: 204 },
       opacityRange: { value: defaults.opacityRange, min: 0, max: 1, order: 205 },
-      cellAngle: { value: defaults.cellAngle, min: 0, max: 90, order: 300 },
+      cellAngle: { value: defaults.cellAngle, min: 0, max: 180, order: 300 },
       cellOffsetX: { value: defaults.cellOffsetX, min: -200, max: 200, order: 301 },
       cellOffsetY: { value: defaults.cellOffsetY, min: -200, max: 200, order: 302 },
       shape: {
diff --git a/packages/shaders/src/shaders/dot-grid.ts b/packages/shaders/src/shaders/dot-grid.ts
index e68412c56..b878370ea 100644
--- a/packages/shaders/src/shaders/dot-grid.ts
+++ b/packages/shaders/src/shaders/dot-grid.ts
@@ -94,7 +94,9 @@ void main() {
   float cellAngleRad = u_cellAngle * PI / 180.;
 
   float dist;
-  p = rotate(p, cellAngleRad);
+  if (u_shape != 3.) {
+    p = rotate(p, cellAngleRad);
+  }
   baseSize *= .5;
   if (u_shape < 0.5) {
     // Circle
@@ -108,9 +110,9 @@ void main() {
     dist = polygon(p, 4., 0.);
   } else if (u_shape < 3.5) {
     // Triangle
-    baseSize *= 1.1547;
+    baseSize *= .57735;
     p.y += baseSize * .75;
-    dist = polygon(p, 3., - .333333333333 * PI);
+    dist = polygon(p, 3., - .333333333333 * PI - cellAngleRad);
   } else if (u_shape < 4.5) {
     // Line
     dist = abs(p.y);

From 2607fc9497b1e479072a45936aa50d2c258af7de Mon Sep 17 00:00:00 2001
From: Ksenia Kondrashova <kondrashova.ksenya@gmail.com>
Date: Wed, 21 Jan 2026 23:32:15 +0400
Subject: [PATCH 10/25] u_cellAngleRange added

---
 docs/src/app/(shaders)/dot-grid/page.tsx        |  7 ++++---
 packages/shaders-react/src/shaders/dot-grid.tsx | 14 ++++++++++----
 packages/shaders/src/shaders/dot-grid.ts        |  7 ++++++-
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/docs/src/app/(shaders)/dot-grid/page.tsx b/docs/src/app/(shaders)/dot-grid/page.tsx
index 8d2bb2e93..5c4c3ed95 100644
--- a/docs/src/app/(shaders)/dot-grid/page.tsx
+++ b/docs/src/app/(shaders)/dot-grid/page.tsx
@@ -27,14 +27,15 @@ const DotGridWithControls = () => {
       sizeRange: { value: defaults.sizeRange, min: 0, max: 1, order: 204 },
       opacityRange: { value: defaults.opacityRange, min: 0, max: 1, order: 205 },
       cellAngle: { value: defaults.cellAngle, min: 0, max: 180, order: 300 },
-      cellOffsetX: { value: defaults.cellOffsetX, min: -200, max: 200, order: 301 },
-      cellOffsetY: { value: defaults.cellOffsetY, min: -200, max: 200, order: 302 },
+      cellAngleRange: { value: defaults.cellAngleRange, min: 0, max: 1, order: 301 },
+      cellOffsetX: { value: defaults.cellOffsetX, min: -200, max: 200, order: 302 },
+      cellOffsetY: { value: defaults.cellOffsetY, min: -200, max: 200, order: 303 },
       shape: {
         value: defaults.shape,
         options: Object.keys(DotGridShapes) as DotGridShape[],
         order: 199,
       },
-      rotation: { value: defaults.rotation, min: 0, max: 360, order: 303 },
+      rotation: { value: defaults.rotation, min: 0, max: 360, order: 304 },
     };
   });
 
diff --git a/packages/shaders-react/src/shaders/dot-grid.tsx b/packages/shaders-react/src/shaders/dot-grid.tsx
index 4d9967336..c519aed73 100644
--- a/packages/shaders-react/src/shaders/dot-grid.tsx
+++ b/packages/shaders-react/src/shaders/dot-grid.tsx
@@ -23,14 +23,15 @@ export const defaultPreset: DotGridPreset = {
     colorBack: '#000000',
     colorFill: '#ffffff',
     colorStroke: '#ffaa00',
-    size: 50,
-    gapX: 100,
-    gapY: 100,
+    size: 2,
+    gapX: 32,
+    gapY: 32,
     strokeWidth: 0,
     sizeRange: 0,
     opacityRange: 0,
-    shape: 'triangle',
+    shape: 'circle',
     cellAngle: 0,
+    cellAngleRange: 0,
     cellOffsetX: 0,
     cellOffsetY: 0,
   },
@@ -51,6 +52,7 @@ const trianglesPreset: DotGridPreset = {
     opacityRange: 0,
     shape: 'triangle',
     cellAngle: 0,
+    cellAngleRange: 0,
     cellOffsetX: 0,
     cellOffsetY: 0,
   },
@@ -71,6 +73,7 @@ const treeLinePreset: DotGridPreset = {
     opacityRange: 0.6,
     shape: 'circle',
     cellAngle: 0,
+    cellAngleRange: 0,
     cellOffsetX: 0,
     cellOffsetY: 0,
   },
@@ -91,6 +94,7 @@ const wallpaperPreset: DotGridPreset = {
     opacityRange: 0,
     shape: 'diamond',
     cellAngle: 0,
+    cellAngleRange: 0,
     cellOffsetX: 0,
     cellOffsetY: 0,
   },
@@ -111,6 +115,7 @@ export const DotGrid: React.FC<DotGridProps> = memo(function DotGridImpl({
   opacityRange = defaultPreset.params.opacityRange,
   shape = defaultPreset.params.shape,
   cellAngle = defaultPreset.params.cellAngle,
+  cellAngleRange = defaultPreset.params.cellAngleRange,
   cellOffsetX = defaultPreset.params.cellOffsetX,
   cellOffsetY = defaultPreset.params.cellOffsetY,
 
@@ -142,6 +147,7 @@ export const DotGrid: React.FC<DotGridProps> = memo(function DotGridImpl({
     u_opacityRange: opacityRange,
     u_shape: DotGridShapes[shape],
     u_cellAngle: cellAngle,
+    u_cellAngleRange: cellAngleRange,
     u_cellOffsetX: cellOffsetX,
     u_cellOffsetY: cellOffsetY,
 
diff --git a/packages/shaders/src/shaders/dot-grid.ts b/packages/shaders/src/shaders/dot-grid.ts
index b878370ea..69ac766dd 100644
--- a/packages/shaders/src/shaders/dot-grid.ts
+++ b/packages/shaders/src/shaders/dot-grid.ts
@@ -16,6 +16,7 @@ import { declarePI, rotation2, simplexNoise } from '../shader-utils.js';
  * - u_opacityRange (float): Random variation in shape opacity, 0 = opaque, higher = semi-transparent (0 to 1)
  * - u_shape (float): Shape type (0 = circle, 1 = diamond, 2 = square, 3 = triangle, 4 = line, 5 = cross)
  * - u_cellAngle (float): Rotation of shape within each cell in degrees (0 to 360)
+ * - u_cellAngleRange (float): Random variation in cell angle, 0 = uniform, higher = more random rotation (0 to 1)
  * - u_cellOffsetX (float): Horizontal offset of the pattern in pixels
  * - u_cellOffsetY (float): Vertical offset of the pattern in pixels
  *
@@ -52,6 +53,7 @@ uniform float u_sizeRange;
 uniform float u_opacityRange;
 uniform float u_shape;
 uniform float u_cellAngle;
+uniform float u_cellAngleRange;
 uniform float u_cellOffsetX;
 uniform float u_cellOffsetY;
 
@@ -84,6 +86,7 @@ void main() {
   vec2 grid_idx = floor(shape_uv / gap);
   float sizeRandomizer = .5 + .8 * snoise(2. * vec2(grid_idx.x * 100., grid_idx.y));
   float opacity_randomizer = .5 + .7 * snoise(2. * vec2(grid_idx.y, grid_idx.x));
+  float angleRandomizer = snoise(3. * vec2(grid_idx.x, grid_idx.y * 100.));
 
   vec2 center = vec2(0.5) - 1e-3;
   vec2 p = (grid - center) * vec2(u_gapX, u_gapY);
@@ -91,7 +94,7 @@ void main() {
   float baseSize = u_dotSize * (1. - sizeRandomizer * u_sizeRange);
   float strokeWidth = u_strokeWidth * (1. - sizeRandomizer * u_sizeRange);
 
-  float cellAngleRad = u_cellAngle * PI / 180.;
+  float cellAngleRad = u_cellAngle * PI / 180. + angleRandomizer * u_cellAngleRange * PI;
 
   float dist;
   if (u_shape != 3.) {
@@ -159,6 +162,7 @@ export interface DotGridUniforms extends ShaderSizingUniforms {
   u_opacityRange: number;
   u_shape: (typeof DotGridShapes)[DotGridShape];
   u_cellAngle: number;
+  u_cellAngleRange: number;
   u_cellOffsetX: number;
   u_cellOffsetY: number;
 }
@@ -175,6 +179,7 @@ export interface DotGridParams extends ShaderSizingParams {
   opacityRange?: number;
   shape?: DotGridShape;
   cellAngle?: number;
+  cellAngleRange?: number;
   cellOffsetX?: number;
   cellOffsetY?: number;
 }

From 729fa1daa24f1515147fcb4b491b6a858b557c83 Mon Sep 17 00:00:00 2001
From: Ksenia Kondrashova <kondrashova.ksenya@gmail.com>
Date: Thu, 22 Jan 2026 21:30:36 +0400
Subject: [PATCH 11/25] renamings

---
 docs/src/app/(shaders)/dot-grid/page.tsx      |  8 ++--
 docs/src/shader-defs/dot-grid-def.ts          | 28 +++++++----
 .../shaders-react/src/shaders/dot-grid.tsx    | 48 +++++++++----------
 packages/shaders/src/shaders/dot-grid.ts      | 36 +++++++-------
 4 files changed, 64 insertions(+), 56 deletions(-)

diff --git a/docs/src/app/(shaders)/dot-grid/page.tsx b/docs/src/app/(shaders)/dot-grid/page.tsx
index 5c4c3ed95..71e6899b2 100644
--- a/docs/src/app/(shaders)/dot-grid/page.tsx
+++ b/docs/src/app/(shaders)/dot-grid/page.tsx
@@ -26,10 +26,10 @@ const DotGridWithControls = () => {
       strokeWidth: { value: defaults.strokeWidth, min: 0, max: 50, order: 203 },
       sizeRange: { value: defaults.sizeRange, min: 0, max: 1, order: 204 },
       opacityRange: { value: defaults.opacityRange, min: 0, max: 1, order: 205 },
-      cellAngle: { value: defaults.cellAngle, min: 0, max: 180, order: 300 },
-      cellAngleRange: { value: defaults.cellAngleRange, min: 0, max: 1, order: 301 },
-      cellOffsetX: { value: defaults.cellOffsetX, min: -200, max: 200, order: 302 },
-      cellOffsetY: { value: defaults.cellOffsetY, min: -200, max: 200, order: 303 },
+      angle: { value: defaults.angle, min: 0, max: 180, order: 300 },
+      angleRange: { value: defaults.angleRange, min: 0, max: 1, order: 301 },
+      shiftX: { value: defaults.shiftX, min: -100, max: 100, order: 302 },
+      shiftY: { value: defaults.shiftY, min: -100, max: 100, order: 303 },
       shape: {
         value: defaults.shape,
         options: Object.keys(DotGridShapes) as DotGridShape[],
diff --git a/docs/src/shader-defs/dot-grid-def.ts b/docs/src/shader-defs/dot-grid-def.ts
index 47d855e22..3ae905311 100644
--- a/docs/src/shader-defs/dot-grid-def.ts
+++ b/docs/src/shader-defs/dot-grid-def.ts
@@ -85,27 +85,35 @@ export const dotGridDef: ShaderDef = {
       description: 'Random variation in shape opacity (0 = all shapes opaque, higher = semi-transparent dots)',
     },
     {
-      name: 'cellAngle',
+      name: 'angle',
       type: 'number',
       min: 0,
       max: 360,
-      defaultValue: defaultParams.cellAngle,
+      defaultValue: defaultParams.angle,
       description: 'Rotation of shape within each cell, degrees',
     },
     {
-      name: 'cellOffsetX',
+      name: 'angleRange',
       type: 'number',
-      min: -500,
-      max: 500,
-      defaultValue: defaultParams.cellOffsetX,
+      min: 0,
+      max: 1,
+      defaultValue: defaultParams.angleRange,
+      description: 'Random variation in cell angle (0 = uniform, higher = more random rotation)',
+    },
+    {
+      name: 'shiftX',
+      type: 'number',
+      min: -100,
+      max: 100,
+      defaultValue: defaultParams.shiftX,
       description: 'Horizontal offset of the pattern, pixels',
     },
     {
-      name: 'cellOffsetY',
+      name: 'shiftY',
       type: 'number',
-      min: -500,
-      max: 500,
-      defaultValue: defaultParams.cellOffsetY,
+      min: -100,
+      max: 100,
+      defaultValue: defaultParams.shiftY,
       description: 'Vertical offset of the pattern, pixels',
     },
     ...staticCommonParams,
diff --git a/packages/shaders-react/src/shaders/dot-grid.tsx b/packages/shaders-react/src/shaders/dot-grid.tsx
index c519aed73..68b505326 100644
--- a/packages/shaders-react/src/shaders/dot-grid.tsx
+++ b/packages/shaders-react/src/shaders/dot-grid.tsx
@@ -30,10 +30,10 @@ export const defaultPreset: DotGridPreset = {
     sizeRange: 0,
     opacityRange: 0,
     shape: 'circle',
-    cellAngle: 0,
-    cellAngleRange: 0,
-    cellOffsetX: 0,
-    cellOffsetY: 0,
+    angle: 0,
+    angleRange: 0,
+    shiftX: 0,
+    shiftY: 0,
   },
 };
 
@@ -51,10 +51,10 @@ const trianglesPreset: DotGridPreset = {
     sizeRange: 0,
     opacityRange: 0,
     shape: 'triangle',
-    cellAngle: 0,
-    cellAngleRange: 0,
-    cellOffsetX: 0,
-    cellOffsetY: 0,
+    angle: 0,
+    angleRange: 0,
+    shiftX: 0,
+    shiftY: 0,
   },
 };
 
@@ -72,10 +72,10 @@ const treeLinePreset: DotGridPreset = {
     sizeRange: 1,
     opacityRange: 0.6,
     shape: 'circle',
-    cellAngle: 0,
-    cellAngleRange: 0,
-    cellOffsetX: 0,
-    cellOffsetY: 0,
+    angle: 0,
+    angleRange: 0,
+    shiftX: 0,
+    shiftY: 0,
   },
 };
 
@@ -93,10 +93,10 @@ const wallpaperPreset: DotGridPreset = {
     sizeRange: 0,
     opacityRange: 0,
     shape: 'diamond',
-    cellAngle: 0,
-    cellAngleRange: 0,
-    cellOffsetX: 0,
-    cellOffsetY: 0,
+    angle: 0,
+    angleRange: 0,
+    shiftX: 0,
+    shiftY: 0,
   },
 };
 
@@ -114,10 +114,10 @@ export const DotGrid: React.FC<DotGridProps> = memo(function DotGridImpl({
   sizeRange = defaultPreset.params.sizeRange,
   opacityRange = defaultPreset.params.opacityRange,
   shape = defaultPreset.params.shape,
-  cellAngle = defaultPreset.params.cellAngle,
-  cellAngleRange = defaultPreset.params.cellAngleRange,
-  cellOffsetX = defaultPreset.params.cellOffsetX,
-  cellOffsetY = defaultPreset.params.cellOffsetY,
+  angle = defaultPreset.params.angle,
+  angleRange = defaultPreset.params.angleRange,
+  shiftX = defaultPreset.params.shiftX,
+  shiftY = defaultPreset.params.shiftY,
 
   // Sizing props
   fit = defaultPreset.params.fit,
@@ -146,10 +146,10 @@ export const DotGrid: React.FC<DotGridProps> = memo(function DotGridImpl({
     u_sizeRange: sizeRange,
     u_opacityRange: opacityRange,
     u_shape: DotGridShapes[shape],
-    u_cellAngle: cellAngle,
-    u_cellAngleRange: cellAngleRange,
-    u_cellOffsetX: cellOffsetX,
-    u_cellOffsetY: cellOffsetY,
+    u_angle: angle,
+    u_angleRange: angleRange,
+    u_shiftX: shiftX,
+    u_shiftY: shiftY,
 
     // Sizing uniforms
     u_fit: ShaderFitOptions[fit],
diff --git a/packages/shaders/src/shaders/dot-grid.ts b/packages/shaders/src/shaders/dot-grid.ts
index 69ac766dd..afc43bc1c 100644
--- a/packages/shaders/src/shaders/dot-grid.ts
+++ b/packages/shaders/src/shaders/dot-grid.ts
@@ -15,10 +15,10 @@ import { declarePI, rotation2, simplexNoise } from '../shader-utils.js';
  * - u_sizeRange (float): Random variation in shape size, 0 = uniform, higher = random up to base size (0 to 1)
  * - u_opacityRange (float): Random variation in shape opacity, 0 = opaque, higher = semi-transparent (0 to 1)
  * - u_shape (float): Shape type (0 = circle, 1 = diamond, 2 = square, 3 = triangle, 4 = line, 5 = cross)
- * - u_cellAngle (float): Rotation of shape within each cell in degrees (0 to 360)
- * - u_cellAngleRange (float): Random variation in cell angle, 0 = uniform, higher = more random rotation (0 to 1)
- * - u_cellOffsetX (float): Horizontal offset of the pattern in pixels
- * - u_cellOffsetY (float): Vertical offset of the pattern in pixels
+ * - u_angle (float): Rotation of shape within each cell in degrees (0 to 360)
+ * - u_angleRange (float): Random variation in cell angle, 0 = uniform, higher = more random rotation (0 to 1)
+ * - u_shiftX (float): Horizontal offset of the pattern in pixels
+ * - u_shiftY (float): Vertical offset of the pattern in pixels
  *
  * Vertex shader outputs (used in fragment shader):
  * - v_patternUV (vec2): UV coordinates in pixels (scaled by 0.01 for precision), with scale, rotation and offset applied
@@ -52,10 +52,10 @@ uniform float u_strokeWidth;
 uniform float u_sizeRange;
 uniform float u_opacityRange;
 uniform float u_shape;
-uniform float u_cellAngle;
-uniform float u_cellAngleRange;
-uniform float u_cellOffsetX;
-uniform float u_cellOffsetY;
+uniform float u_angle;
+uniform float u_angleRange;
+uniform float u_shiftX;
+uniform float u_shiftY;
 
 in vec2 v_patternUV;
 
@@ -76,7 +76,7 @@ void main() {
 
   // x100 is a default multiplier between vertex and fragmant shaders
   // we use it to avoid UV presision issues
-  vec2 shape_uv = 100. * v_patternUV + vec2(-u_cellOffsetX, u_cellOffsetY);
+  vec2 shape_uv = 100. * v_patternUV + vec2(-u_shiftX, u_shiftY);
   if (u_shape > 3.) {
     shape_uv -= 1e-4;
   }
@@ -94,7 +94,7 @@ void main() {
   float baseSize = u_dotSize * (1. - sizeRandomizer * u_sizeRange);
   float strokeWidth = u_strokeWidth * (1. - sizeRandomizer * u_sizeRange);
 
-  float cellAngleRad = u_cellAngle * PI / 180. + angleRandomizer * u_cellAngleRange * PI;
+  float cellAngleRad = u_angle * PI / 180. + angleRandomizer * u_angleRange * PI;
 
   float dist;
   if (u_shape != 3.) {
@@ -161,10 +161,10 @@ export interface DotGridUniforms extends ShaderSizingUniforms {
   u_sizeRange: number;
   u_opacityRange: number;
   u_shape: (typeof DotGridShapes)[DotGridShape];
-  u_cellAngle: number;
-  u_cellAngleRange: number;
-  u_cellOffsetX: number;
-  u_cellOffsetY: number;
+  u_angle: number;
+  u_angleRange: number;
+  u_shiftX: number;
+  u_shiftY: number;
 }
 
 export interface DotGridParams extends ShaderSizingParams {
@@ -178,10 +178,10 @@ export interface DotGridParams extends ShaderSizingParams {
   sizeRange?: number;
   opacityRange?: number;
   shape?: DotGridShape;
-  cellAngle?: number;
-  cellAngleRange?: number;
-  cellOffsetX?: number;
-  cellOffsetY?: number;
+  angle?: number;
+  angleRange?: number;
+  shiftX?: number;
+  shiftY?: number;
 }
 
 export const DotGridShapes = {

From 69032a4b6b0cbdb1aac45f2d708719568ec5b942 Mon Sep 17 00:00:00 2001
From: Ksenia Kondrashova <kondrashova.ksenya@gmail.com>
Date: Fri, 23 Jan 2026 16:28:42 +0400
Subject: [PATCH 12/25] glsl naming clean-up

---
 packages/shaders/src/shaders/dot-grid.ts | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/shaders/src/shaders/dot-grid.ts b/packages/shaders/src/shaders/dot-grid.ts
index afc43bc1c..1f8013404 100644
--- a/packages/shaders/src/shaders/dot-grid.ts
+++ b/packages/shaders/src/shaders/dot-grid.ts
@@ -2,7 +2,7 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
 import { declarePI, rotation2, simplexNoise } from '../shader-utils.js';
 
 /**
- * Static grid pattern made of circles, diamonds, squares, triangles, lines or crosses.
+ * Static gridF pattern made of circles, diamonds, squares, triangles, lines or crosses.
  *
  * Fragment shader uniforms:
  * - u_colorBack (vec4): Background color in RGBA
@@ -76,20 +76,20 @@ void main() {
 
   // x100 is a default multiplier between vertex and fragmant shaders
   // we use it to avoid UV presision issues
-  vec2 shape_uv = 100. * v_patternUV + vec2(-u_shiftX, u_shiftY);
+  vec2 shapeUV = 100. * v_patternUV + vec2(-u_shiftX, u_shiftY);
   if (u_shape > 3.) {
-    shape_uv -= 1e-4;
+    shapeUV -= 1e-4;
   }
 
   vec2 gap = max(abs(vec2(u_gapX, u_gapY)), vec2(1e-6));
-  vec2 grid = fract(shape_uv / gap) + 1e-4;
-  vec2 grid_idx = floor(shape_uv / gap);
-  float sizeRandomizer = .5 + .8 * snoise(2. * vec2(grid_idx.x * 100., grid_idx.y));
-  float opacity_randomizer = .5 + .7 * snoise(2. * vec2(grid_idx.y, grid_idx.x));
-  float angleRandomizer = snoise(3. * vec2(grid_idx.x, grid_idx.y * 100.));
+  vec2 gridF = fract(shapeUV / gap) + 1e-4;
+  vec2 gridI = floor(shapeUV / gap);
+  float sizeRandomizer = .5 + .8 * snoise(2. * vec2(gridI.x * 100., gridI.y));
+  float opacityRandomizer = .5 + .7 * snoise(2. * vec2(gridI.y, gridI.x));
+  float angleRandomizer = snoise(3. * vec2(gridI.x, gridI.y * 100.));
 
   vec2 center = vec2(0.5) - 1e-3;
-  vec2 p = (grid - center) * vec2(u_gapX, u_gapY);
+  vec2 p = (gridF - center) * vec2(u_gapX, u_gapY);
 
   float baseSize = u_dotSize * (1. - sizeRandomizer * u_sizeRange);
   float strokeWidth = u_strokeWidth * (1. - sizeRandomizer * u_sizeRange);
@@ -124,12 +124,12 @@ void main() {
     dist = min(abs(p.x), abs(p.y));
   }
 
-  float edgeWidth = fwidth(shape_uv.y);
+  float edgeWidth = fwidth(shapeUV.y);
   float shapeOuter = 1. - smoothstep(baseSize - edgeWidth, baseSize + edgeWidth, dist - strokeWidth);
   float shapeInner = 1. - smoothstep(baseSize - edgeWidth, baseSize + edgeWidth, dist);
   float stroke = shapeOuter - shapeInner;
 
-  float dotOpacity = max(0., 1. - opacity_randomizer * u_opacityRange);
+  float dotOpacity = max(0., 1. - opacityRandomizer * u_opacityRange);
   stroke *= dotOpacity;
   shapeInner *= dotOpacity;
 

From 6b5d6929f23143d8c23e04f96ab397650a210aba Mon Sep 17 00:00:00 2001
From: Ksenia Kondrashova <kondrashova.ksenya@gmail.com>
Date: Fri, 23 Jan 2026 18:33:29 +0100
Subject: [PATCH 13/25] presets to align with new sizing

---
 packages/shaders-react/src/shaders/dot-grid.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/shaders-react/src/shaders/dot-grid.tsx b/packages/shaders-react/src/shaders/dot-grid.tsx
index 68b505326..8219b37bf 100644
--- a/packages/shaders-react/src/shaders/dot-grid.tsx
+++ b/packages/shaders-react/src/shaders/dot-grid.tsx
@@ -44,7 +44,7 @@ const trianglesPreset: DotGridPreset = {
     colorBack: '#ffffff',
     colorFill: '#ffffff',
     colorStroke: '#808080',
-    size: 5,
+    size: 10,
     gapX: 32,
     gapY: 32,
     strokeWidth: 1,
@@ -65,7 +65,7 @@ const treeLinePreset: DotGridPreset = {
     colorBack: '#f4fce7',
     colorFill: '#052e19',
     colorStroke: '#000000',
-    size: 8,
+    size: 16,
     gapX: 20,
     gapY: 90,
     strokeWidth: 0,
@@ -86,7 +86,7 @@ const wallpaperPreset: DotGridPreset = {
     colorBack: '#204030',
     colorFill: '#000000',
     colorStroke: '#bd955b',
-    size: 9,
+    size: 18,
     gapX: 32,
     gapY: 32,
     strokeWidth: 1,

From 890c51a5d093945802aff19af0bbac5fdd97bc13 Mon Sep 17 00:00:00 2001
From: Ksenia Kondrashova <kondrashova.ksenya@gmail.com>
Date: Sat, 24 Jan 2026 14:41:34 +0100
Subject: [PATCH 14/25] new shapes

---
 packages/shaders/src/shaders/dot-grid.ts | 104 ++++++++++++++++++++++-
 1 file changed, 101 insertions(+), 3 deletions(-)

diff --git a/packages/shaders/src/shaders/dot-grid.ts b/packages/shaders/src/shaders/dot-grid.ts
index 1f8013404..109fe58e2 100644
--- a/packages/shaders/src/shaders/dot-grid.ts
+++ b/packages/shaders/src/shaders/dot-grid.ts
@@ -2,7 +2,7 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
 import { declarePI, rotation2, simplexNoise } from '../shader-utils.js';
 
 /**
- * Static gridF pattern made of circles, diamonds, squares, triangles, lines or crosses.
+ * Static gridF pattern made of circles, diamonds, squares, triangles, lines, crosses, stars, asterisks, rects or plus signs.
  *
  * Fragment shader uniforms:
  * - u_colorBack (vec4): Background color in RGBA
@@ -14,7 +14,7 @@ import { declarePI, rotation2, simplexNoise } from '../shader-utils.js';
  * - u_strokeWidth (float): Outline stroke width in pixels (0 to 50)
  * - u_sizeRange (float): Random variation in shape size, 0 = uniform, higher = random up to base size (0 to 1)
  * - u_opacityRange (float): Random variation in shape opacity, 0 = opaque, higher = semi-transparent (0 to 1)
- * - u_shape (float): Shape type (0 = circle, 1 = diamond, 2 = square, 3 = triangle, 4 = line, 5 = cross)
+ * - u_shape (float): Shape type (0 = circle, 1 = diamond, 2 = square, 3 = triangle, 4 = line, 5 = cross, 6 = star, 7 = asterisk, 8 = rect, 9 = plus)
  * - u_angle (float): Rotation of shape within each cell in degrees (0 to 360)
  * - u_angleRange (float): Random variation in cell angle, 0 = uniform, higher = more random rotation (0 to 1)
  * - u_shiftX (float): Horizontal offset of the pattern in pixels
@@ -72,6 +72,29 @@ float polygon(vec2 p, float N, float rot) {
   return cos(floor(.5 + a / r) * r - a) * length(p);
 }
 
+float sdStar5(vec2 p, float r, float rf) {
+  const vec2 k1 = vec2(0.809016994375, -0.587785252292);
+  const vec2 k2 = vec2(-k1.x, k1.y);
+  p.x = abs(p.x);
+  p -= 2. * max(dot(k1, p), 0.) * k1;
+  p -= 2. * max(dot(k2, p), 0.) * k2;
+  p.x = abs(p.x);
+  p.y -= r;
+  vec2 ba = rf * vec2(-k1.y, k1.x) - vec2(0, 1);
+  float h = clamp(dot(p, ba) / dot(ba, ba), 0., r);
+  return length(p - ba * h) * sign(p.y * ba.x - p.x * ba.y);
+}
+
+float asterisk6(vec2 p, float size, float armCoeff) {
+  float line1 = abs(p.y);
+  vec2 p60 = rotate(p, -PI / 3.);
+  float line2 = abs(p60.y);
+  vec2 p120 = rotate(p, -2. * PI / 3.);
+  float line3 = abs(p120.y);
+  float armDist = min(min(line1, line2), line3);
+  return max(armDist / armCoeff, length(p) / size) * size;
+}
+
 void main() {
 
   // x100 is a default multiplier between vertex and fragmant shaders
@@ -97,6 +120,7 @@ void main() {
   float cellAngleRad = u_angle * PI / 180. + angleRandomizer * u_angleRange * PI;
 
   float dist;
+  vec2 pUnrotated = p;
   if (u_shape != 3.) {
     p = rotate(p, cellAngleRad);
   }
@@ -119,9 +143,79 @@ void main() {
   } else if (u_shape < 4.5) {
     // Line
     dist = abs(p.y);
-  } else {
+  } else if (u_shape < 5.5) {
     // Cross
     dist = min(abs(p.x), abs(p.y));
+  } else if (u_shape < 6.5) {
+    // Star (5-pointed filled) - compute outer star for non-rounded stroke
+    // strokeWidth * 2 compensates for thinner stroke at valleys due to uniform scaling
+    float innerSDF = sdStar5(p, baseSize, .5);
+    float scale = (baseSize + strokeWidth * 2.) / baseSize;
+    float outerSDF = sdStar5(p / scale, baseSize, .5) * scale;
+    float edgeW = fwidth(shapeUV.y);
+    float starInner = 1. - smoothstep(-edgeW, edgeW, innerSDF);
+    float starOuter = 1. - smoothstep(-edgeW, edgeW, outerSDF);
+    float starStroke = starOuter - starInner;
+
+    float starOpacity = max(0., 1. - opacityRandomizer * u_opacityRange);
+    starStroke *= starOpacity;
+    starInner *= starOpacity;
+    starStroke *= u_colorStroke.a;
+    starInner *= u_colorFill.a;
+
+    vec3 starColor = vec3(0.);
+    starColor += starStroke * u_colorStroke.rgb;
+    starColor += starInner * u_colorFill.rgb;
+    starColor += (1. - starInner - starStroke) * u_colorBack.rgb * u_colorBack.a;
+
+    float starOpacityFinal = starStroke + starInner + (1. - starStroke - starInner) * u_colorBack.a;
+    fragColor = vec4(starColor, starOpacityFinal);
+    return;
+  } else if (u_shape < 7.5) {
+    // Asterisk (6 rectangular arms) - expand both size and arm width for consistent stroke
+    float armCoeff = baseSize * .15;
+    float innerSDF = asterisk6(p, baseSize, armCoeff) - baseSize;
+    float outerSDF = asterisk6(p, baseSize + strokeWidth, armCoeff + strokeWidth) - (baseSize + strokeWidth);
+
+    float edgeW = fwidth(shapeUV.y);
+    float astInner = 1. - smoothstep(-edgeW, edgeW, innerSDF);
+    float astOuter = 1. - smoothstep(-edgeW, edgeW, outerSDF);
+    float astStroke = astOuter - astInner;
+
+    float astOpacity = max(0., 1. - opacityRandomizer * u_opacityRange);
+    astStroke *= astOpacity;
+    astInner *= astOpacity;
+    astStroke *= u_colorStroke.a;
+    astInner *= u_colorFill.a;
+
+    vec3 astColor = vec3(0.);
+    astColor += astStroke * u_colorStroke.rgb;
+    astColor += astInner * u_colorFill.rgb;
+    astColor += (1. - astInner - astStroke) * u_colorBack.rgb * u_colorBack.a;
+
+    float astOpacityFinal = astStroke + astInner + (1. - astStroke - astInner) * u_colorBack.a;
+    fragColor = vec4(astColor, astOpacityFinal);
+    return;
+  } else if (u_shape < 8.5) {
+    float eps = 1.;
+    float c = abs(cos(cellAngleRad));
+    float s = abs(sin(cellAngleRad));
+    float margin = baseSize;
+    float maxWfromX = (u_gapX * .5 - margin - baseSize * s) / max(c, eps);
+    float maxWfromY = (u_gapY * .5 - margin - baseSize * c) / max(s, eps);
+    float halfWidth = max(baseSize, min(maxWfromX, maxWfromY));
+    dist = max(abs(p.y), max(0., abs(p.x) - halfWidth));
+  } else {
+    float eps = 1.;
+    float c = abs(cos(cellAngleRad));
+    float s = abs(sin(cellAngleRad));
+    float margin = baseSize;
+    float maxLfromX = (u_gapX * .5 - margin - baseSize * s) / max(c, eps);
+    float maxLfromY = (u_gapY * .5 - margin - baseSize * c) / max(s, eps);
+    float armLength = max(baseSize, min(maxLfromX, maxLfromY));
+    float crossDist = min(abs(p.x), abs(p.y));
+    float armCrop = max(0., max(abs(p.x), abs(p.y)) - armLength);
+    dist = max(crossDist, armCrop);
   }
 
   float edgeWidth = fwidth(shapeUV.y);
@@ -191,6 +285,10 @@ export const DotGridShapes = {
   triangle: 3,
   line: 4,
   cross: 5,
+  star: 6,
+  asterisk: 7,
+  rect: 8,
+  plus: 9,
 } as const;
 
 export type DotGridShape = keyof typeof DotGridShapes;

From e7e4473b193687c70448b9170b26cc73de09cfbc Mon Sep 17 00:00:00 2001
From: Ksenia Kondrashova <kondrashova.ksenya@gmail.com>
Date: Sat, 24 Jan 2026 15:37:07 +0100
Subject: [PATCH 15/25] opt rect and cross shapes

---
 packages/shaders/src/shaders/dot-grid.ts | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/shaders/src/shaders/dot-grid.ts b/packages/shaders/src/shaders/dot-grid.ts
index 109fe58e2..5d3940f84 100644
--- a/packages/shaders/src/shaders/dot-grid.ts
+++ b/packages/shaders/src/shaders/dot-grid.ts
@@ -197,21 +197,19 @@ void main() {
     fragColor = vec4(astColor, astOpacityFinal);
     return;
   } else if (u_shape < 8.5) {
-    float eps = 1.;
-    float c = abs(cos(cellAngleRad));
-    float s = abs(sin(cellAngleRad));
+    float maxH = min(u_gapX / 6., u_gapY / 6.);
+    baseSize = min(baseSize, maxH);
     float margin = baseSize;
-    float maxWfromX = (u_gapX * .5 - margin - baseSize * s) / max(c, eps);
-    float maxWfromY = (u_gapY * .5 - margin - baseSize * c) / max(s, eps);
+    float maxWfromX = (u_gapX * .5 - margin - baseSize);
+    float maxWfromY = (u_gapY * .5 - margin - baseSize);
     float halfWidth = max(baseSize, min(maxWfromX, maxWfromY));
     dist = max(abs(p.y), max(0., abs(p.x) - halfWidth));
   } else {
-    float eps = 1.;
-    float c = abs(cos(cellAngleRad));
-    float s = abs(sin(cellAngleRad));
+    float maxH = min(u_gapX / 6., u_gapY / 6.);
+    baseSize = min(baseSize, maxH);
     float margin = baseSize;
-    float maxLfromX = (u_gapX * .5 - margin - baseSize * s) / max(c, eps);
-    float maxLfromY = (u_gapY * .5 - margin - baseSize * c) / max(s, eps);
+    float maxLfromX = (u_gapX * .5 - margin - baseSize);
+    float maxLfromY = (u_gapY * .5 - margin - baseSize);
     float armLength = max(baseSize, min(maxLfromX, maxLfromY));
     float crossDist = min(abs(p.x), abs(p.y));
     float armCrop = max(0., max(abs(p.x), abs(p.y)) - armLength);

From 3edc4bef0381d6dd2d56a2b2dc7fc620607d32b8 Mon Sep 17 00:00:00 2001
From: Ksenia Kondrashova <kondrashova.ksenya@gmail.com>
Date: Sat, 24 Jan 2026 15:43:41 +0100
Subject: [PATCH 16/25] rearrange shapes

---
 packages/shaders/src/shaders/dot-grid.ts | 41 ++++++++++++------------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/packages/shaders/src/shaders/dot-grid.ts b/packages/shaders/src/shaders/dot-grid.ts
index 5d3940f84..c5e467cc8 100644
--- a/packages/shaders/src/shaders/dot-grid.ts
+++ b/packages/shaders/src/shaders/dot-grid.ts
@@ -126,29 +126,22 @@ void main() {
   }
   baseSize *= .5;
   if (u_shape < 0.5) {
-    // Circle
+    // Circle (0)
     dist = length(p);
   } else if (u_shape < 1.5) {
-    // Diamond
+    // Diamond (1)
     baseSize *= .7071;
     dist = polygon(p, 4., .25 * PI);
   } else if (u_shape < 2.5) {
-    // Square
+    // Square (2)
     dist = polygon(p, 4., 0.);
   } else if (u_shape < 3.5) {
-    // Triangle
+    // Triangle (3)
     baseSize *= .57735;
     p.y += baseSize * .75;
     dist = polygon(p, 3., - .333333333333 * PI - cellAngleRad);
   } else if (u_shape < 4.5) {
-    // Line
-    dist = abs(p.y);
-  } else if (u_shape < 5.5) {
-    // Cross
-    dist = min(abs(p.x), abs(p.y));
-  } else if (u_shape < 6.5) {
-    // Star (5-pointed filled) - compute outer star for non-rounded stroke
-    // strokeWidth * 2 compensates for thinner stroke at valleys due to uniform scaling
+    // Star (4) - compute outer star for non-rounded stroke
     float innerSDF = sdStar5(p, baseSize, .5);
     float scale = (baseSize + strokeWidth * 2.) / baseSize;
     float outerSDF = sdStar5(p / scale, baseSize, .5) * scale;
@@ -171,8 +164,8 @@ void main() {
     float starOpacityFinal = starStroke + starInner + (1. - starStroke - starInner) * u_colorBack.a;
     fragColor = vec4(starColor, starOpacityFinal);
     return;
-  } else if (u_shape < 7.5) {
-    // Asterisk (6 rectangular arms) - expand both size and arm width for consistent stroke
+  } else if (u_shape < 5.5) {
+    // Asterisk (5) - expand both size and arm width for consistent stroke
     float armCoeff = baseSize * .15;
     float innerSDF = asterisk6(p, baseSize, armCoeff) - baseSize;
     float outerSDF = asterisk6(p, baseSize + strokeWidth, armCoeff + strokeWidth) - (baseSize + strokeWidth);
@@ -196,7 +189,11 @@ void main() {
     float astOpacityFinal = astStroke + astInner + (1. - astStroke - astInner) * u_colorBack.a;
     fragColor = vec4(astColor, astOpacityFinal);
     return;
-  } else if (u_shape < 8.5) {
+  } else if (u_shape < 6.5) {
+    // Line (6)
+    dist = abs(p.y);
+  } else if (u_shape < 7.5) {
+    // Rect (7)
     float maxH = min(u_gapX / 6., u_gapY / 6.);
     baseSize = min(baseSize, maxH);
     float margin = baseSize;
@@ -204,7 +201,11 @@ void main() {
     float maxWfromY = (u_gapY * .5 - margin - baseSize);
     float halfWidth = max(baseSize, min(maxWfromX, maxWfromY));
     dist = max(abs(p.y), max(0., abs(p.x) - halfWidth));
+  } else if (u_shape < 8.5) {
+    // Cross (8)
+    dist = min(abs(p.x), abs(p.y));
   } else {
+    // Plus (9)
     float maxH = min(u_gapX / 6., u_gapY / 6.);
     baseSize = min(baseSize, maxH);
     float margin = baseSize;
@@ -281,11 +282,11 @@ export const DotGridShapes = {
   diamond: 1,
   square: 2,
   triangle: 3,
-  line: 4,
-  cross: 5,
-  star: 6,
-  asterisk: 7,
-  rect: 8,
+  star: 4,
+  asterisk: 5,
+  line: 6,
+  rect: 7,
+  cross: 8,
   plus: 9,
 } as const;
 

From 77d1571fdd778411f203a4812508cec9e2896d81 Mon Sep 17 00:00:00 2001
From: Ksenia Kondrashova <kondrashova.ksenya@gmail.com>
Date: Sat, 24 Jan 2026 15:50:04 +0100
Subject: [PATCH 17/25] glsl rearrange

---
 packages/shaders/src/shaders/dot-grid.ts | 74 +++++++++++-------------
 1 file changed, 34 insertions(+), 40 deletions(-)

diff --git a/packages/shaders/src/shaders/dot-grid.ts b/packages/shaders/src/shaders/dot-grid.ts
index c5e467cc8..e60e695b6 100644
--- a/packages/shaders/src/shaders/dot-grid.ts
+++ b/packages/shaders/src/shaders/dot-grid.ts
@@ -120,7 +120,8 @@ void main() {
   float cellAngleRad = u_angle * PI / 180. + angleRandomizer * u_angleRange * PI;
 
   float dist;
-  vec2 pUnrotated = p;
+  float edgeW = fwidth(shapeUV.y);
+
   if (u_shape != 3.) {
     p = rotate(p, cellAngleRad);
   }
@@ -145,49 +146,46 @@ void main() {
     float innerSDF = sdStar5(p, baseSize, .5);
     float scale = (baseSize + strokeWidth * 2.) / baseSize;
     float outerSDF = sdStar5(p / scale, baseSize, .5) * scale;
-    float edgeW = fwidth(shapeUV.y);
-    float starInner = 1. - smoothstep(-edgeW, edgeW, innerSDF);
+    float strokeInner = 1. - smoothstep(-edgeW, edgeW, innerSDF);
     float starOuter = 1. - smoothstep(-edgeW, edgeW, outerSDF);
-    float starStroke = starOuter - starInner;
+    float stroke = starOuter - strokeInner;
 
-    float starOpacity = max(0., 1. - opacityRandomizer * u_opacityRange);
-    starStroke *= starOpacity;
-    starInner *= starOpacity;
-    starStroke *= u_colorStroke.a;
-    starInner *= u_colorFill.a;
+    float shapeOpacity = max(0., 1. - opacityRandomizer * u_opacityRange);
+    stroke *= shapeOpacity;
+    strokeInner *= shapeOpacity;
+    stroke *= u_colorStroke.a;
+    strokeInner *= u_colorFill.a;
 
-    vec3 starColor = vec3(0.);
-    starColor += starStroke * u_colorStroke.rgb;
-    starColor += starInner * u_colorFill.rgb;
-    starColor += (1. - starInner - starStroke) * u_colorBack.rgb * u_colorBack.a;
+    vec3 color = vec3(0.);
+    color += stroke * u_colorStroke.rgb;
+    color += strokeInner * u_colorFill.rgb;
+    color += (1. - strokeInner - stroke) * u_colorBack.rgb * u_colorBack.a;
 
-    float starOpacityFinal = starStroke + starInner + (1. - starStroke - starInner) * u_colorBack.a;
-    fragColor = vec4(starColor, starOpacityFinal);
+    float opacity = stroke + strokeInner + (1. - stroke - strokeInner) * u_colorBack.a;
+    fragColor = vec4(color, opacity);
     return;
   } else if (u_shape < 5.5) {
     // Asterisk (5) - expand both size and arm width for consistent stroke
     float armCoeff = baseSize * .15;
     float innerSDF = asterisk6(p, baseSize, armCoeff) - baseSize;
     float outerSDF = asterisk6(p, baseSize + strokeWidth, armCoeff + strokeWidth) - (baseSize + strokeWidth);
-
-    float edgeW = fwidth(shapeUV.y);
-    float astInner = 1. - smoothstep(-edgeW, edgeW, innerSDF);
+    float strokeInner = 1. - smoothstep(-edgeW, edgeW, innerSDF);
     float astOuter = 1. - smoothstep(-edgeW, edgeW, outerSDF);
-    float astStroke = astOuter - astInner;
+    float stroke = astOuter - strokeInner;
 
-    float astOpacity = max(0., 1. - opacityRandomizer * u_opacityRange);
-    astStroke *= astOpacity;
-    astInner *= astOpacity;
-    astStroke *= u_colorStroke.a;
-    astInner *= u_colorFill.a;
+    float shapeOpacity = max(0., 1. - opacityRandomizer * u_opacityRange);
+    stroke *= shapeOpacity;
+    strokeInner *= shapeOpacity;
+    stroke *= u_colorStroke.a;
+    strokeInner *= u_colorFill.a;
 
-    vec3 astColor = vec3(0.);
-    astColor += astStroke * u_colorStroke.rgb;
-    astColor += astInner * u_colorFill.rgb;
-    astColor += (1. - astInner - astStroke) * u_colorBack.rgb * u_colorBack.a;
+    vec3 color = vec3(0.);
+    color += stroke * u_colorStroke.rgb;
+    color += strokeInner * u_colorFill.rgb;
+    color += (1. - strokeInner - stroke) * u_colorBack.rgb * u_colorBack.a;
 
-    float astOpacityFinal = astStroke + astInner + (1. - astStroke - astInner) * u_colorBack.a;
-    fragColor = vec4(astColor, astOpacityFinal);
+    float opacity = stroke + strokeInner + (1. - stroke - strokeInner) * u_colorBack.a;
+    fragColor = vec4(color, opacity);
     return;
   } else if (u_shape < 6.5) {
     // Line (6)
@@ -217,15 +215,13 @@ void main() {
     dist = max(crossDist, armCrop);
   }
 
-  float edgeWidth = fwidth(shapeUV.y);
-  float shapeOuter = 1. - smoothstep(baseSize - edgeWidth, baseSize + edgeWidth, dist - strokeWidth);
-  float shapeInner = 1. - smoothstep(baseSize - edgeWidth, baseSize + edgeWidth, dist);
+  float shapeOuter = 1. - smoothstep(baseSize - edgeW, baseSize + edgeW, dist - strokeWidth);
+  float shapeInner = 1. - smoothstep(baseSize - edgeW, baseSize + edgeW, dist);
   float stroke = shapeOuter - shapeInner;
 
-  float dotOpacity = max(0., 1. - opacityRandomizer * u_opacityRange);
-  stroke *= dotOpacity;
-  shapeInner *= dotOpacity;
-
+  float shapeOpacity = max(0., 1. - opacityRandomizer * u_opacityRange);
+  stroke *= shapeOpacity;
+  shapeInner *= shapeOpacity;
   stroke *= u_colorStroke.a;
   shapeInner *= u_colorFill.a;
 
@@ -234,9 +230,7 @@ void main() {
   color += shapeInner * u_colorFill.rgb;
   color += (1. - shapeInner - stroke) * u_colorBack.rgb * u_colorBack.a;
 
-  float opacity = 0.;
-  opacity += stroke;
-  opacity += shapeInner;
+  float opacity = stroke + shapeInner;
   opacity += (1. - opacity) * u_colorBack.a;
 
   fragColor = vec4(color, opacity);

From 05e5a13618349ea84985cfe339d866eee48fe9c7 Mon Sep 17 00:00:00 2001
From: Ksenia Kondrashova <kondrashova.ksenya@gmail.com>
Date: Sat, 24 Jan 2026 16:16:20 +0100
Subject: [PATCH 18/25] new presets

---
 .../shaders-react/src/shaders/dot-grid.tsx    | 67 ++++++++++++++++++-
 1 file changed, 65 insertions(+), 2 deletions(-)

diff --git a/packages/shaders-react/src/shaders/dot-grid.tsx b/packages/shaders-react/src/shaders/dot-grid.tsx
index 8219b37bf..9e2375b06 100644
--- a/packages/shaders-react/src/shaders/dot-grid.tsx
+++ b/packages/shaders-react/src/shaders/dot-grid.tsx
@@ -23,7 +23,7 @@ export const defaultPreset: DotGridPreset = {
     colorBack: '#000000',
     colorFill: '#ffffff',
     colorStroke: '#ffaa00',
-    size: 2,
+    size: 6,
     gapX: 32,
     gapY: 32,
     strokeWidth: 0,
@@ -100,7 +100,70 @@ const wallpaperPreset: DotGridPreset = {
   },
 };
 
-export const dotGridPresets: DotGridPreset[] = [defaultPreset, trianglesPreset, treeLinePreset, wallpaperPreset];
+const snowPreset: DotGridPreset = {
+  name: 'Snow',
+  params: {
+    ...defaultPatternSizing,
+    colorBack: '#1b1e31',
+    colorFill: '#ffffff',
+    colorStroke: '#000000',
+    size: 18,
+    gapX: 30,
+    gapY: 55,
+    strokeWidth: 0,
+    sizeRange: 0,
+    opacityRange: 1,
+    shape: 'asterisk',
+    angle: 0,
+    angleRange: 1,
+    shiftX: 0,
+    shiftY: 0,
+  },
+};
+
+const bricksPreset: DotGridPreset = {
+  name: 'Bricks',
+  params: {
+    ...defaultPatternSizing,
+    colorBack: '#ff9e9e',
+    colorFill: '#00ffb3',
+    colorStroke: '#000000',
+    size: 15,
+    gapX: 70,
+    gapY: 70,
+    strokeWidth: 0,
+    sizeRange: 0,
+    opacityRange: .05,
+    shape: 'rect',
+    angle: 0,
+    angleRange: 1,
+    shiftX: 0,
+    shiftY: 0,
+  },
+};
+
+const starsPreset: DotGridPreset = {
+  name: 'Stars',
+  params: {
+    ...defaultPatternSizing,
+    colorBack: '#000000',
+    colorFill: '#3a37cd',
+    colorStroke: '#ffee00',
+    size: 45,
+    gapX: 70,
+    gapY: 70,
+    strokeWidth: 5,
+    sizeRange: 0,
+    opacityRange: .05,
+    shape: 'star',
+    angle: 0,
+    angleRange: 1,
+    shiftX: 0,
+    shiftY: 0,
+  },
+};
+
+export const dotGridPresets: DotGridPreset[] = [defaultPreset, trianglesPreset, treeLinePreset, wallpaperPreset, snowPreset, bricksPreset, starsPreset];
 
 export const DotGrid: React.FC<DotGridProps> = memo(function DotGridImpl({
   // Own props

From b08b8e12dec1703be667cd6bd9165eeb98212e9b Mon Sep 17 00:00:00 2001
From: Ksenia Kondrashova <kondrashova.ksenya@gmail.com>
Date: Sat, 24 Jan 2026 16:44:50 +0100
Subject: [PATCH 19/25] rowShift + relative sizing

---
 docs/src/app/(shaders)/dot-grid/page.tsx      | 20 ++++++-----
 docs/src/shader-defs/dot-grid-def.ts          | 36 +++++++++++++------
 .../shaders-react/src/shaders/dot-grid.tsx    | 32 +++++++++++++----
 packages/shaders/src/shaders/dot-grid.ts      | 35 +++++++++++++-----
 4 files changed, 89 insertions(+), 34 deletions(-)

diff --git a/docs/src/app/(shaders)/dot-grid/page.tsx b/docs/src/app/(shaders)/dot-grid/page.tsx
index 71e6899b2..21ce70841 100644
--- a/docs/src/app/(shaders)/dot-grid/page.tsx
+++ b/docs/src/app/(shaders)/dot-grid/page.tsx
@@ -20,7 +20,12 @@ const DotGridWithControls = () => {
       colorBack: { value: toHsla(defaults.colorBack), order: 100 },
       colorFill: { value: toHsla(defaults.colorFill), order: 101 },
       colorStroke: { value: toHsla(defaults.colorStroke), order: 102 },
-      size: { value: defaults.size, min: 1, max: 100, order: 200 },
+      shape: {
+        value: defaults.shape,
+        options: Object.keys(DotGridShapes) as DotGridShape[],
+        order: 103,
+      },
+      size: { value: defaults.size, min: 0, max: 1, order: 200 },
       gapX: { value: defaults.gapX, min: 2, max: 500, order: 201 },
       gapY: { value: defaults.gapY, min: 2, max: 500, order: 202 },
       strokeWidth: { value: defaults.strokeWidth, min: 0, max: 50, order: 203 },
@@ -28,14 +33,11 @@ const DotGridWithControls = () => {
       opacityRange: { value: defaults.opacityRange, min: 0, max: 1, order: 205 },
       angle: { value: defaults.angle, min: 0, max: 180, order: 300 },
       angleRange: { value: defaults.angleRange, min: 0, max: 1, order: 301 },
-      shiftX: { value: defaults.shiftX, min: -100, max: 100, order: 302 },
-      shiftY: { value: defaults.shiftY, min: -100, max: 100, order: 303 },
-      shape: {
-        value: defaults.shape,
-        options: Object.keys(DotGridShapes) as DotGridShape[],
-        order: 199,
-      },
-      rotation: { value: defaults.rotation, min: 0, max: 360, order: 304 },
+      rowShift: { value: defaults.shiftX, min: 0, max: 1, order: 302 },
+      rowShiftRange: { value: defaults.rowShiftRange, min: 0, max: 1, order: 303 },
+      shiftX: { value: defaults.shiftX, min: -100, max: 100, order: 320 },
+      shiftY: { value: defaults.shiftY, min: -100, max: 100, order: 321 },
+      rotation: { value: defaults.rotation, min: 0, max: 360, order: 330 },
     };
   });
 
diff --git a/docs/src/shader-defs/dot-grid-def.ts b/docs/src/shader-defs/dot-grid-def.ts
index 3ae905311..8c3762fe7 100644
--- a/docs/src/shader-defs/dot-grid-def.ts
+++ b/docs/src/shader-defs/dot-grid-def.ts
@@ -34,15 +34,15 @@ export const dotGridDef: ShaderDef = {
       type: 'enum',
       defaultValue: defaultParams.shape,
       description: 'The shape type',
-      options: ['circle', 'diamond', 'square', 'triangle', 'line', 'cross'],
+      options: ['circle', 'diamond', 'square', 'triangle', 'star', 'asterisk', 'line', 'rect', 'cross', 'plus'],
     },
     {
       name: 'size',
       type: 'number',
-      min: 1,
-      max: 100,
+      min: 0,
+      max: 1,
       defaultValue: defaultParams.size,
-      description: 'Base size of each shape, pixels',
+      description: 'Base size of each shape (0-1, relative to smaller cell side)',
     },
     {
       name: 'gapX',
@@ -103,18 +103,34 @@ export const dotGridDef: ShaderDef = {
     {
       name: 'shiftX',
       type: 'number',
-      min: -100,
-      max: 100,
+      min: -1,
+      max: 1,
       defaultValue: defaultParams.shiftX,
-      description: 'Horizontal offset of the pattern, pixels',
+      description: 'Horizontal offset of the pattern (0-1, relative to gapX)',
     },
     {
       name: 'shiftY',
       type: 'number',
-      min: -100,
-      max: 100,
+      min: -1,
+      max: 1,
       defaultValue: defaultParams.shiftY,
-      description: 'Vertical offset of the pattern, pixels',
+      description: 'Vertical offset of the pattern (0-1, relative to gapY)',
+    },
+    {
+      name: 'rowShift',
+      type: 'number',
+      min: 0,
+      max: 1,
+      defaultValue: defaultParams.rowShift,
+      description: 'Horizontal shift for every 2nd row (brick pattern) (0-1, relative to gapX)',
+    },
+    {
+      name: 'rowShiftRange',
+      type: 'number',
+      min: 0,
+      max: 1,
+      defaultValue: defaultParams.rowShiftRange,
+      description: 'Randomize row shift (0 = only 2nd row shifts, 1 = all rows shift randomly)',
     },
     ...staticCommonParams,
   ],
diff --git a/packages/shaders-react/src/shaders/dot-grid.tsx b/packages/shaders-react/src/shaders/dot-grid.tsx
index 9e2375b06..c78a3592d 100644
--- a/packages/shaders-react/src/shaders/dot-grid.tsx
+++ b/packages/shaders-react/src/shaders/dot-grid.tsx
@@ -23,7 +23,7 @@ export const defaultPreset: DotGridPreset = {
     colorBack: '#000000',
     colorFill: '#ffffff',
     colorStroke: '#ffaa00',
-    size: 6,
+    size: 0.2,
     gapX: 32,
     gapY: 32,
     strokeWidth: 0,
@@ -34,6 +34,8 @@ export const defaultPreset: DotGridPreset = {
     angleRange: 0,
     shiftX: 0,
     shiftY: 0,
+    rowShift: 0,
+    rowShiftRange: 0,
   },
 };
 
@@ -44,7 +46,7 @@ const trianglesPreset: DotGridPreset = {
     colorBack: '#ffffff',
     colorFill: '#ffffff',
     colorStroke: '#808080',
-    size: 10,
+    size: 0.3,
     gapX: 32,
     gapY: 32,
     strokeWidth: 1,
@@ -55,6 +57,8 @@ const trianglesPreset: DotGridPreset = {
     angleRange: 0,
     shiftX: 0,
     shiftY: 0,
+    rowShift: 0,
+    rowShiftRange: 0,
   },
 };
 
@@ -65,7 +69,7 @@ const treeLinePreset: DotGridPreset = {
     colorBack: '#f4fce7',
     colorFill: '#052e19',
     colorStroke: '#000000',
-    size: 16,
+    size: 0.8,
     gapX: 20,
     gapY: 90,
     strokeWidth: 0,
@@ -76,6 +80,8 @@ const treeLinePreset: DotGridPreset = {
     angleRange: 0,
     shiftX: 0,
     shiftY: 0,
+    rowShift: 0,
+    rowShiftRange: 0,
   },
 };
 
@@ -86,7 +92,7 @@ const wallpaperPreset: DotGridPreset = {
     colorBack: '#204030',
     colorFill: '#000000',
     colorStroke: '#bd955b',
-    size: 18,
+    size: 0.55,
     gapX: 32,
     gapY: 32,
     strokeWidth: 1,
@@ -97,6 +103,8 @@ const wallpaperPreset: DotGridPreset = {
     angleRange: 0,
     shiftX: 0,
     shiftY: 0,
+    rowShift: 0,
+    rowShiftRange: 0,
   },
 };
 
@@ -107,7 +115,7 @@ const snowPreset: DotGridPreset = {
     colorBack: '#1b1e31',
     colorFill: '#ffffff',
     colorStroke: '#000000',
-    size: 18,
+    size: 0.6,
     gapX: 30,
     gapY: 55,
     strokeWidth: 0,
@@ -118,6 +126,8 @@ const snowPreset: DotGridPreset = {
     angleRange: 1,
     shiftX: 0,
     shiftY: 0,
+    rowShift: 0,
+    rowShiftRange: 0,
   },
 };
 
@@ -128,7 +138,7 @@ const bricksPreset: DotGridPreset = {
     colorBack: '#ff9e9e',
     colorFill: '#00ffb3',
     colorStroke: '#000000',
-    size: 15,
+    size: 0.2,
     gapX: 70,
     gapY: 70,
     strokeWidth: 0,
@@ -139,6 +149,8 @@ const bricksPreset: DotGridPreset = {
     angleRange: 1,
     shiftX: 0,
     shiftY: 0,
+    rowShift: 0,
+    rowShiftRange: 0,
   },
 };
 
@@ -149,7 +161,7 @@ const starsPreset: DotGridPreset = {
     colorBack: '#000000',
     colorFill: '#3a37cd',
     colorStroke: '#ffee00',
-    size: 45,
+    size: 0.65,
     gapX: 70,
     gapY: 70,
     strokeWidth: 5,
@@ -160,6 +172,8 @@ const starsPreset: DotGridPreset = {
     angleRange: 1,
     shiftX: 0,
     shiftY: 0,
+    rowShift: 0,
+    rowShiftRange: 0,
   },
 };
 
@@ -181,6 +195,8 @@ export const DotGrid: React.FC<DotGridProps> = memo(function DotGridImpl({
   angleRange = defaultPreset.params.angleRange,
   shiftX = defaultPreset.params.shiftX,
   shiftY = defaultPreset.params.shiftY,
+  rowShift = defaultPreset.params.rowShift,
+  rowShiftRange = defaultPreset.params.rowShiftRange,
 
   // Sizing props
   fit = defaultPreset.params.fit,
@@ -213,6 +229,8 @@ export const DotGrid: React.FC<DotGridProps> = memo(function DotGridImpl({
     u_angleRange: angleRange,
     u_shiftX: shiftX,
     u_shiftY: shiftY,
+    u_rowShift: rowShift,
+    u_rowShiftRange: rowShiftRange,
 
     // Sizing uniforms
     u_fit: ShaderFitOptions[fit],
diff --git a/packages/shaders/src/shaders/dot-grid.ts b/packages/shaders/src/shaders/dot-grid.ts
index e60e695b6..f824d3938 100644
--- a/packages/shaders/src/shaders/dot-grid.ts
+++ b/packages/shaders/src/shaders/dot-grid.ts
@@ -2,23 +2,25 @@ import { type ShaderSizingParams, type ShaderSizingUniforms } from '../shader-si
 import { declarePI, rotation2, simplexNoise } from '../shader-utils.js';
 
 /**
- * Static gridF pattern made of circles, diamonds, squares, triangles, lines, crosses, stars, asterisks, rects or plus signs.
+ * Static grid pattern made of circles, diamonds, squares, triangles, stars, asterisks, lines, rects, crosses or plus signs.
  *
  * Fragment shader uniforms:
  * - u_colorBack (vec4): Background color in RGBA
  * - u_colorFill (vec4): Shape fill color in RGBA
  * - u_colorStroke (vec4): Shape stroke color in RGBA
- * - u_dotSize (float): Base size of each shape in pixels (1 to 100)
+ * - u_dotSize (float): Base size of each shape (0 to 1, relative to smaller cell side)
  * - u_gapX (float): Pattern horizontal spacing in pixels (2 to 500)
  * - u_gapY (float): Pattern vertical spacing in pixels (2 to 500)
  * - u_strokeWidth (float): Outline stroke width in pixels (0 to 50)
  * - u_sizeRange (float): Random variation in shape size, 0 = uniform, higher = random up to base size (0 to 1)
  * - u_opacityRange (float): Random variation in shape opacity, 0 = opaque, higher = semi-transparent (0 to 1)
- * - u_shape (float): Shape type (0 = circle, 1 = diamond, 2 = square, 3 = triangle, 4 = line, 5 = cross, 6 = star, 7 = asterisk, 8 = rect, 9 = plus)
+ * - u_shape (float): Shape type (0 = circle, 1 = diamond, 2 = square, 3 = triangle, 4 = star, 5 = asterisk, 6 = line, 7 = rect, 8 = cross, 9 = plus)
  * - u_angle (float): Rotation of shape within each cell in degrees (0 to 360)
  * - u_angleRange (float): Random variation in cell angle, 0 = uniform, higher = more random rotation (0 to 1)
- * - u_shiftX (float): Horizontal offset of the pattern in pixels
- * - u_shiftY (float): Vertical offset of the pattern in pixels
+ * - u_shiftX (float): Horizontal offset of the pattern (-1 to 1, relative to gapX)
+ * - u_shiftY (float): Vertical offset of the pattern (-1 to 1, relative to gapY)
+ * - u_rowShift (float): Horizontal shift for every 2nd row, brick pattern (0 to 1, relative to gapX)
+ * - u_rowShiftRange (float): Randomize row shift, 0 = only 2nd row shifts, 1 = all rows shift randomly (0 to 1)
  *
  * Vertex shader outputs (used in fragment shader):
  * - v_patternUV (vec2): UV coordinates in pixels (scaled by 0.01 for precision), with scale, rotation and offset applied
@@ -56,6 +58,8 @@ uniform float u_angle;
 uniform float u_angleRange;
 uniform float u_shiftX;
 uniform float u_shiftY;
+uniform float u_rowShift;
+uniform float u_rowShiftRange;
 
 in vec2 v_patternUV;
 
@@ -99,12 +103,21 @@ void main() {
 
   // x100 is a default multiplier between vertex and fragmant shaders
   // we use it to avoid UV presision issues
-  vec2 shapeUV = 100. * v_patternUV + vec2(-u_shiftX, u_shiftY);
+  vec2 gap = max(abs(vec2(u_gapX, u_gapY)), vec2(1e-6));
+
+  // Shifts are relative to gaps (0-1 range means 0-100% of gap)
+  vec2 shapeUV = 100. * v_patternUV + vec2(-u_shiftX * gap.x, u_shiftY * gap.y);
   if (u_shape > 3.) {
     shapeUV -= 1e-4;
   }
 
-  vec2 gap = max(abs(vec2(u_gapX, u_gapY)), vec2(1e-6));
+  // Row shift: every 2nd row shifts by rowShift, randomized by rowShiftRange
+  // rowShift is relative to gapX (0-1 range)
+  float rowIndex = floor(shapeUV.y / gap.y);
+  float rowShiftRandomizer = .5 + .5 * snoise(6. * vec2(rowIndex * 73., rowIndex));
+  float rowShiftAmount = u_rowShift * gap.x * mix(mod(rowIndex, 2.), 2. * rowShiftRandomizer, u_rowShiftRange);
+  shapeUV.x += rowShiftAmount;
+
   vec2 gridF = fract(shapeUV / gap) + 1e-4;
   vec2 gridI = floor(shapeUV / gap);
   float sizeRandomizer = .5 + .8 * snoise(2. * vec2(gridI.x * 100., gridI.y));
@@ -114,7 +127,9 @@ void main() {
   vec2 center = vec2(0.5) - 1e-3;
   vec2 p = (gridF - center) * vec2(u_gapX, u_gapY);
 
-  float baseSize = u_dotSize * (1. - sizeRandomizer * u_sizeRange);
+  // Size is relative to smaller cell side (0-1 range means 0-100% of min gap)
+  float minGap = min(gap.x, gap.y);
+  float baseSize = u_dotSize * minGap * (1. - sizeRandomizer * u_sizeRange);
   float strokeWidth = u_strokeWidth * (1. - sizeRandomizer * u_sizeRange);
 
   float cellAngleRad = u_angle * PI / 180. + angleRandomizer * u_angleRange * PI;
@@ -252,6 +267,8 @@ export interface DotGridUniforms extends ShaderSizingUniforms {
   u_angleRange: number;
   u_shiftX: number;
   u_shiftY: number;
+  u_rowShift: number;
+  u_rowShiftRange: number;
 }
 
 export interface DotGridParams extends ShaderSizingParams {
@@ -269,6 +286,8 @@ export interface DotGridParams extends ShaderSizingParams {
   angleRange?: number;
   shiftX?: number;
   shiftY?: number;
+  rowShift?: number;
+  rowShiftRange?: number;
 }
 
 export const DotGridShapes = {

From 8aa514a3f6e5fb097292a745e7e5033039adfb75 Mon Sep 17 00:00:00 2001
From: Ksenia Kondrashova <kondrashova.ksenya@gmail.com>
Date: Sat, 24 Jan 2026 17:01:28 +0100
Subject: [PATCH 20/25] remove unnecessary snoise, presets tweaks

---
 .../shaders-react/src/shaders/dot-grid.tsx    | 38 +++++++++++++++----
 packages/shaders/src/shaders/dot-grid.ts      | 10 +++--
 2 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/packages/shaders-react/src/shaders/dot-grid.tsx b/packages/shaders-react/src/shaders/dot-grid.tsx
index c78a3592d..b28c1f294 100644
--- a/packages/shaders-react/src/shaders/dot-grid.tsx
+++ b/packages/shaders-react/src/shaders/dot-grid.tsx
@@ -103,7 +103,7 @@ const wallpaperPreset: DotGridPreset = {
     angleRange: 0,
     shiftX: 0,
     shiftY: 0,
-    rowShift: 0,
+    rowShift: 0.5,
     rowShiftRange: 0,
   },
 };
@@ -149,8 +149,8 @@ const bricksPreset: DotGridPreset = {
     angleRange: 1,
     shiftX: 0,
     shiftY: 0,
-    rowShift: 0,
-    rowShiftRange: 0,
+    rowShift: 0.5,
+    rowShiftRange: 0.25,
   },
 };
 
@@ -159,12 +159,12 @@ const starsPreset: DotGridPreset = {
   params: {
     ...defaultPatternSizing,
     colorBack: '#000000',
-    colorFill: '#3a37cd',
+    colorFill: '#ff0a78',
     colorStroke: '#ffee00',
-    size: 0.65,
+    size: 0.5,
     gapX: 70,
     gapY: 70,
-    strokeWidth: 5,
+    strokeWidth: 1,
     sizeRange: 0,
     opacityRange: .05,
     shape: 'star',
@@ -177,7 +177,31 @@ const starsPreset: DotGridPreset = {
   },
 };
 
-export const dotGridPresets: DotGridPreset[] = [defaultPreset, trianglesPreset, treeLinePreset, wallpaperPreset, snowPreset, bricksPreset, starsPreset];
+const cellsPreset: DotGridPreset = {
+  name: 'Cells',
+  params: {
+    ...defaultPatternSizing,
+    colorBack: '#ffffff00',
+    colorFill: '#94d2ff',
+    colorStroke: '#203979',
+    size: 0.15,
+    gapX: 80,
+    gapY: 55,
+    strokeWidth: 4,
+    sizeRange: 0,
+    opacityRange: .05,
+    shape: 'cross',
+    angle: 0,
+    angleRange: 0,
+    shiftX: 0,
+    shiftY: 0,
+    rowShift: 0,
+    rowShiftRange: 0,
+    rotation: 148
+  },
+};
+
+export const dotGridPresets: DotGridPreset[] = [defaultPreset, trianglesPreset, treeLinePreset, wallpaperPreset, snowPreset, bricksPreset, starsPreset, cellsPreset];
 
 export const DotGrid: React.FC<DotGridProps> = memo(function DotGridImpl({
   // Own props
diff --git a/packages/shaders/src/shaders/dot-grid.ts b/packages/shaders/src/shaders/dot-grid.ts
index f824d3938..30464da07 100644
--- a/packages/shaders/src/shaders/dot-grid.ts
+++ b/packages/shaders/src/shaders/dot-grid.ts
@@ -99,6 +99,10 @@ float asterisk6(vec2 p, float size, float armCoeff) {
   return max(armDist / armCoeff, length(p) / size) * size;
 }
 
+float hash(float n) {
+  return fract(sin(n) * 43758.5453123);
+}
+
 void main() {
 
   // x100 is a default multiplier between vertex and fragmant shaders
@@ -114,15 +118,15 @@ void main() {
   // Row shift: every 2nd row shifts by rowShift, randomized by rowShiftRange
   // rowShift is relative to gapX (0-1 range)
   float rowIndex = floor(shapeUV.y / gap.y);
-  float rowShiftRandomizer = .5 + .5 * snoise(6. * vec2(rowIndex * 73., rowIndex));
-  float rowShiftAmount = u_rowShift * gap.x * mix(mod(rowIndex, 2.), 2. * rowShiftRandomizer, u_rowShiftRange);
+  float rowShiftRandomizer = hash(rowIndex * 73.129);
+  float rowShiftAmount = u_rowShift * gap.x * mix(mod(rowIndex, 2.), 3. * rowShiftRandomizer, u_rowShiftRange);
   shapeUV.x += rowShiftAmount;
 
   vec2 gridF = fract(shapeUV / gap) + 1e-4;
   vec2 gridI = floor(shapeUV / gap);
   float sizeRandomizer = .5 + .8 * snoise(2. * vec2(gridI.x * 100., gridI.y));
   float opacityRandomizer = .5 + .7 * snoise(2. * vec2(gridI.y, gridI.x));
-  float angleRandomizer = snoise(3. * vec2(gridI.x, gridI.y * 100.));
+  float angleRandomizer = hash(gridI.x * 37.197 + gridI.y * 91.853) * 2. - 1.;
 
   vec2 center = vec2(0.5) - 1e-3;
   vec2 p = (gridF - center) * vec2(u_gapX, u_gapY);

From a7bb10bc7a9fad180ad52488f17b0f2b816243d8 Mon Sep 17 00:00:00 2001
From: Ksenia Kondrashova <kondrashova.ksenya@gmail.com>
Date: Sun, 25 Jan 2026 12:38:06 +0100
Subject: [PATCH 21/25] sizing polishing

---
 packages/shaders-react/src/shaders/dot-grid.tsx | 6 +++---
 packages/shaders/src/shaders/dot-grid.ts        | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/shaders-react/src/shaders/dot-grid.tsx b/packages/shaders-react/src/shaders/dot-grid.tsx
index b28c1f294..6253c7abd 100644
--- a/packages/shaders-react/src/shaders/dot-grid.tsx
+++ b/packages/shaders-react/src/shaders/dot-grid.tsx
@@ -23,15 +23,15 @@ export const defaultPreset: DotGridPreset = {
     colorBack: '#000000',
     colorFill: '#ffffff',
     colorStroke: '#ffaa00',
-    size: 0.2,
+    size: 1,
     gapX: 32,
     gapY: 32,
     strokeWidth: 0,
     sizeRange: 0,
     opacityRange: 0,
-    shape: 'circle',
+    shape: 'triangle',
     angle: 0,
-    angleRange: 0,
+    angleRange: 1,
     shiftX: 0,
     shiftY: 0,
     rowShift: 0,
diff --git a/packages/shaders/src/shaders/dot-grid.ts b/packages/shaders/src/shaders/dot-grid.ts
index 30464da07..3ceb4dd29 100644
--- a/packages/shaders/src/shaders/dot-grid.ts
+++ b/packages/shaders/src/shaders/dot-grid.ts
@@ -154,11 +154,11 @@ void main() {
     dist = polygon(p, 4., .25 * PI);
   } else if (u_shape < 2.5) {
     // Square (2)
+    baseSize *= .7071;
     dist = polygon(p, 4., 0.);
   } else if (u_shape < 3.5) {
     // Triangle (3)
-    baseSize *= .57735;
-    p.y += baseSize * .75;
+    baseSize *= .5;
     dist = polygon(p, 3., - .333333333333 * PI - cellAngleRad);
   } else if (u_shape < 4.5) {
     // Star (4) - compute outer star for non-rounded stroke

From ff0466fa1763296e8fc7c3b8b463b7a6a068b53d Mon Sep 17 00:00:00 2001
From: Ksenia Kondrashova <kondrashova.ksenya@gmail.com>
Date: Sat, 31 Jan 2026 20:50:33 +0100
Subject: [PATCH 22/25] presets update

---
 .../shaders-react/src/shaders/dot-grid.tsx    | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/shaders-react/src/shaders/dot-grid.tsx b/packages/shaders-react/src/shaders/dot-grid.tsx
index 6253c7abd..4a9b46e32 100644
--- a/packages/shaders-react/src/shaders/dot-grid.tsx
+++ b/packages/shaders-react/src/shaders/dot-grid.tsx
@@ -23,15 +23,15 @@ export const defaultPreset: DotGridPreset = {
     colorBack: '#000000',
     colorFill: '#ffffff',
     colorStroke: '#ffaa00',
-    size: 1,
+    size: 0.05,
     gapX: 32,
     gapY: 32,
     strokeWidth: 0,
     sizeRange: 0,
     opacityRange: 0,
-    shape: 'triangle',
+    shape: 'circle',
     angle: 0,
-    angleRange: 1,
+    angleRange: 0,
     shiftX: 0,
     shiftY: 0,
     rowShift: 0,
@@ -43,18 +43,18 @@ const trianglesPreset: DotGridPreset = {
   name: 'Triangles',
   params: {
     ...defaultPatternSizing,
-    colorBack: '#ffffff',
+    colorBack: '#000000',
     colorFill: '#ffffff',
-    colorStroke: '#808080',
-    size: 0.3,
+    colorStroke: '#ffffff',
+    size: 1,
     gapX: 32,
     gapY: 32,
-    strokeWidth: 1,
+    strokeWidth: 0,
     sizeRange: 0,
     opacityRange: 0,
     shape: 'triangle',
     angle: 0,
-    angleRange: 0,
+    angleRange: 1,
     shiftX: 0,
     shiftY: 0,
     rowShift: 0,
@@ -89,7 +89,7 @@ const wallpaperPreset: DotGridPreset = {
   name: 'Wallpaper',
   params: {
     ...defaultPatternSizing,
-    colorBack: '#204030',
+    colorBack: '#4b2033',
     colorFill: '#000000',
     colorStroke: '#bd955b',
     size: 0.55,
@@ -159,14 +159,14 @@ const starsPreset: DotGridPreset = {
   params: {
     ...defaultPatternSizing,
     colorBack: '#000000',
-    colorFill: '#ff0a78',
+    colorFill: '#4294d7',
     colorStroke: '#ffee00',
-    size: 0.5,
-    gapX: 70,
-    gapY: 70,
-    strokeWidth: 1,
-    sizeRange: 0,
-    opacityRange: .05,
+    size: 0.65,
+    gapX: 45,
+    gapY: 45,
+    strokeWidth: 6,
+    sizeRange: 0.65,
+    opacityRange: 1,
     shape: 'star',
     angle: 0,
     angleRange: 1,

From 95af66d1728b1af5c7fe03414aa90328a8cfe3b3 Mon Sep 17 00:00:00 2001
From: Ksenia Kondrashova <kondrashova.ksenya@gmail.com>
Date: Tue, 3 Feb 2026 14:08:58 +0100
Subject: [PATCH 23/25] presets update

---
 .../shaders-react/src/shaders/dot-grid.tsx    | 32 ++++++++++++++++---
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/packages/shaders-react/src/shaders/dot-grid.tsx b/packages/shaders-react/src/shaders/dot-grid.tsx
index 4a9b46e32..c4818d4ef 100644
--- a/packages/shaders-react/src/shaders/dot-grid.tsx
+++ b/packages/shaders-react/src/shaders/dot-grid.tsx
@@ -161,10 +161,10 @@ const starsPreset: DotGridPreset = {
     colorBack: '#000000',
     colorFill: '#4294d7',
     colorStroke: '#ffee00',
-    size: 0.65,
+    size: 0.75,
     gapX: 45,
     gapY: 45,
-    strokeWidth: 6,
+    strokeWidth: 3,
     sizeRange: 0.65,
     opacityRange: 1,
     shape: 'star',
@@ -172,7 +172,7 @@ const starsPreset: DotGridPreset = {
     angleRange: 1,
     shiftX: 0,
     shiftY: 0,
-    rowShift: 0,
+    rowShift: 0.5,
     rowShiftRange: 0,
   },
 };
@@ -201,7 +201,31 @@ const cellsPreset: DotGridPreset = {
   },
 };
 
-export const dotGridPresets: DotGridPreset[] = [defaultPreset, trianglesPreset, treeLinePreset, wallpaperPreset, snowPreset, bricksPreset, starsPreset, cellsPreset];
+const crossPreset: DotGridPreset = {
+  name: 'Cross',
+  params: {
+    ...defaultPatternSizing,
+    colorBack: '#ffffff00',
+    colorFill: '#000000',
+    colorStroke: '#000000',
+    size: 0.01,
+    gapX: 100,
+    gapY: 45,
+    strokeWidth: 0,
+    sizeRange: 0,
+    opacityRange: 0,
+    shape: 'cross',
+    angle: 90,
+    angleRange: 1,
+    shiftX: 0,
+    shiftY: 0,
+    rowShift: 0.65,
+    rowShiftRange: 0,
+    rotation: 260
+  },
+};
+
+export const dotGridPresets: DotGridPreset[] = [defaultPreset, trianglesPreset, treeLinePreset, wallpaperPreset, snowPreset, bricksPreset, starsPreset, cellsPreset, crossPreset];
 
 export const DotGrid: React.FC<DotGridProps> = memo(function DotGridImpl({
   // Own props

From 6698c19b5b6e0032f5669fa642246ecf5ac9ce81 Mon Sep 17 00:00:00 2001
From: Ksenia Kondrashova <kondrashova.ksenya@gmail.com>
Date: Tue, 3 Feb 2026 14:18:33 +0100
Subject: [PATCH 24/25] presets update

---
 packages/shaders-react/src/shaders/dot-grid.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/shaders-react/src/shaders/dot-grid.tsx b/packages/shaders-react/src/shaders/dot-grid.tsx
index c4818d4ef..94ff64b7f 100644
--- a/packages/shaders-react/src/shaders/dot-grid.tsx
+++ b/packages/shaders-react/src/shaders/dot-grid.tsx
@@ -116,8 +116,8 @@ const snowPreset: DotGridPreset = {
     colorFill: '#ffffff',
     colorStroke: '#000000',
     size: 0.6,
-    gapX: 30,
-    gapY: 55,
+    gapX: 45,
+    gapY: 35,
     strokeWidth: 0,
     sizeRange: 0,
     opacityRange: 1,
@@ -162,9 +162,9 @@ const starsPreset: DotGridPreset = {
     colorFill: '#4294d7',
     colorStroke: '#ffee00',
     size: 0.75,
-    gapX: 45,
-    gapY: 45,
-    strokeWidth: 3,
+    gapX: 25,
+    gapY: 25,
+    strokeWidth: 1,
     sizeRange: 0.65,
     opacityRange: 1,
     shape: 'star',

From de7419568542acdcb5f92edbd0aea7268428577d Mon Sep 17 00:00:00 2001
From: Ksenia Kondrashova <kondrashova.ksenya@gmail.com>
Date: Tue, 3 Feb 2026 14:19:32 +0100
Subject: [PATCH 25/25] prettier

---
 .../shaders-react/src/shaders/dot-grid.tsx    | 20 ++++++++++++++-----
 packages/shaders/src/shaders/dot-grid.ts      |  6 +++---
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/shaders-react/src/shaders/dot-grid.tsx b/packages/shaders-react/src/shaders/dot-grid.tsx
index 94ff64b7f..6a4996a49 100644
--- a/packages/shaders-react/src/shaders/dot-grid.tsx
+++ b/packages/shaders-react/src/shaders/dot-grid.tsx
@@ -143,7 +143,7 @@ const bricksPreset: DotGridPreset = {
     gapY: 70,
     strokeWidth: 0,
     sizeRange: 0,
-    opacityRange: .05,
+    opacityRange: 0.05,
     shape: 'rect',
     angle: 0,
     angleRange: 1,
@@ -189,7 +189,7 @@ const cellsPreset: DotGridPreset = {
     gapY: 55,
     strokeWidth: 4,
     sizeRange: 0,
-    opacityRange: .05,
+    opacityRange: 0.05,
     shape: 'cross',
     angle: 0,
     angleRange: 0,
@@ -197,7 +197,7 @@ const cellsPreset: DotGridPreset = {
     shiftY: 0,
     rowShift: 0,
     rowShiftRange: 0,
-    rotation: 148
+    rotation: 148,
   },
 };
 
@@ -221,11 +221,21 @@ const crossPreset: DotGridPreset = {
     shiftY: 0,
     rowShift: 0.65,
     rowShiftRange: 0,
-    rotation: 260
+    rotation: 260,
   },
 };
 
-export const dotGridPresets: DotGridPreset[] = [defaultPreset, trianglesPreset, treeLinePreset, wallpaperPreset, snowPreset, bricksPreset, starsPreset, cellsPreset, crossPreset];
+export const dotGridPresets: DotGridPreset[] = [
+  defaultPreset,
+  trianglesPreset,
+  treeLinePreset,
+  wallpaperPreset,
+  snowPreset,
+  bricksPreset,
+  starsPreset,
+  cellsPreset,
+  crossPreset,
+];
 
 export const DotGrid: React.FC<DotGridProps> = memo(function DotGridImpl({
   // Own props
diff --git a/packages/shaders/src/shaders/dot-grid.ts b/packages/shaders/src/shaders/dot-grid.ts
index 3ceb4dd29..408b1ce0d 100644
--- a/packages/shaders/src/shaders/dot-grid.ts
+++ b/packages/shaders/src/shaders/dot-grid.ts
@@ -65,9 +65,9 @@ in vec2 v_patternUV;
 
 out vec4 fragColor;
 
-${ declarePI }
-${ rotation2 }
-${ simplexNoise }
+${declarePI}
+${rotation2}
+${simplexNoise}
 
 float polygon(vec2 p, float N, float rot) {
   float a = atan(p.x, p.y) + rot;