diff --git a/packages/shaders-react/src/shaders/dots-grid.tsx b/packages/shaders-react/src/shaders/dots-grid.tsx
index 1f60021..7acdcf8 100644
--- a/packages/shaders-react/src/shaders/dots-grid.tsx
+++ b/packages/shaders-react/src/shaders/dots-grid.tsx
@@ -24,7 +24,7 @@ export const defaultPreset: DotsGridPreset = {
   params: {
     // Note: Keep default colors in HSLA format so that our Leva controls show a transparency channel (rgba and hex8 do not work)
     colorBack: 'hsla(358.2, 66.1%, 48.6%, 0)',
-    colorFill: 'hsla(145.2, 30.1%, 32.5%, 1)',
+    colorFill: 'hsla(145.2, 30.1%, 10%, 1)',
     colorStroke: 'hsla(39.4, 87.7%, 52.4%, 1)',
     dotSize: 2,
     gridSpacingX: 50,
@@ -32,6 +32,7 @@ export const defaultPreset: DotsGridPreset = {
     strokeWidth: 0,
     sizeRange: 0,
     opacityRange: 0,
+    // Shape code: 'Circle': 0, 'Diamond': 1, 'Square': 2, 'Triangle': 3
     shape: 0,
   },
 } as const;
@@ -46,9 +47,10 @@ const preset1: DotsGridPreset = {
     dotSize: 28,
     gridSpacingX: 60,
     gridSpacingY: 60,
-    strokeWidth: 7,
+    strokeWidth: 3,
     sizeRange: .5,
     opacityRange: 1,
+    // Shape code: 'Circle': 0, 'Diamond': 1, 'Square': 2, 'Triangle': 3
     shape: 0,
   },
 } as const;
@@ -66,6 +68,7 @@ const preset2: DotsGridPreset = {
     strokeWidth: 23,
     sizeRange: .35,
     opacityRange: .55,
+    // Shape code: 'Circle': 0, 'Diamond': 1, 'Square': 2, 'Triangle': 3
     shape: 0,
   },
 } as const;
@@ -83,6 +86,7 @@ const preset3: DotsGridPreset = {
     strokeWidth: 0,
     sizeRange: 1,
     opacityRange: .6,
+    // Shape code: 'Circle': 0, 'Diamond': 1, 'Square': 2, 'Triangle': 3
     shape: 0,
   },
 } as const;
@@ -91,20 +95,39 @@ const preset4: DotsGridPreset = {
   name: '4',
   params: {
     // Note: Keep default colors in HSLA format so that our Leva controls show a transparency channel (rgba and hex8 do not work)
-    colorBack: 'hsla(40, 100%, 36%, .3)',
+    colorBack: 'hsla(150, 100%, 36%, .3)',
     colorFill: 'hsla(50, 50%, 50%, 1)',
     colorStroke: 'hsla(0, 0%, 0%, 1)',
-    dotSize: 42,
+    dotSize: 55,
     gridSpacingX: 75,
     gridSpacingY: 75,
     strokeWidth: 0,
     sizeRange: 0,
     opacityRange: 1,
-    shape: 0,
+    // Shape code: 'Circle': 0, 'Diamond': 1, 'Square': 2, 'Triangle': 3
+    shape: 1,
+  },
+} as const;
+
+const preset5: DotsGridPreset = {
+  name: '5',
+  params: {
+    // Note: Keep default colors in HSLA format so that our Leva controls show a transparency channel (rgba and hex8 do not work)
+    colorBack: 'hsla(0, 100%, 100%, .1)',
+    colorFill: 'hsla(171, 50%, 50%, 1)',
+    colorStroke: 'hsla(0, 100%, 100%, 1)',
+    dotSize: 52,
+    gridSpacingX: 75,
+    gridSpacingY: 75,
+    strokeWidth: 16,
+    sizeRange: .6,
+    opacityRange: .5,
+    // Shape code: 'Circle': 0, 'Diamond': 1, 'Square': 2, 'Triangle': 3
+    shape: 2,
   },
 } as const;
 
-export const dotsGridPresets: DotsGridPreset[] = [defaultPreset, preset1, preset2, preset3, preset4];
+export const dotsGridPresets: DotsGridPreset[] = [defaultPreset, preset1, preset2, preset3, preset4, preset5];
 
 export const DotsGrid = (props: DotsGridProps): JSX.Element => {
   const uniforms: DotsGridUniforms = useMemo(() => {