diff --git a/pln/package-lock.json b/pln/package-lock.json
index f2674dd..579550c 100644
--- a/pln/package-lock.json
+++ b/pln/package-lock.json
@@ -18,6 +18,7 @@
         "gatsby-plugin-sharp": "^3.2.1",
         "gatsby-source-filesystem": "^3.2.0",
         "gatsby-transformer-sharp": "^3.2.0",
+        "hydra-synth": "^1.3.8",
         "prop-types": "^15.7.2",
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
@@ -6353,6 +6354,14 @@
         "node": ">=0.11"
       }
     },
+    "node_modules/dct": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/dct/-/dct-0.0.3.tgz",
+      "integrity": "sha1-GTkKg0OIodOhNz+e3+UGIgdISdM=",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/debug": {
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
@@ -8777,6 +8786,19 @@
         "pend": "~1.2.0"
       }
     },
+    "node_modules/fftjs": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/fftjs/-/fftjs-0.0.4.tgz",
+      "integrity": "sha1-mfRwvPRI+LZbMd/3EkWupLMtOaA=",
+      "dependencies": {
+        "babel-plugin-add-module-exports": "^0.2.1"
+      }
+    },
+    "node_modules/fftjs/node_modules/babel-plugin-add-module-exports": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-add-module-exports/-/babel-plugin-add-module-exports-0.2.1.tgz",
+      "integrity": "sha1-mumh9KjcZ/DN7E9K7aHkOl/2XiU="
+    },
     "node_modules/figures": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
@@ -11617,6 +11639,17 @@
         "node": ">=8.12.0"
       }
     },
+    "node_modules/hydra-synth": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/hydra-synth/-/hydra-synth-1.3.8.tgz",
+      "integrity": "sha512-mIWPlgkETrwp8GRzZiRgocCg3P5ZokSqZ8JXAHD5hkM7dndnJs1ucQIDnWrcJqy1Cz2UoSGx7NVg4dZ+/deULA==",
+      "dependencies": {
+        "meyda": "^4.1.3",
+        "raf-loop": "^1.1.3",
+        "regl": "^1.3.9",
+        "web-audio-analyser": "^2.0.1"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -13819,6 +13852,24 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/meyda": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/meyda/-/meyda-4.2.0.tgz",
+      "integrity": "sha512-enK48Q82MtP1iVM1hYu3tKv3F1/Ar4zPBcgyNs/kmh3SX4UgL7TDnYKPQ9tG9KeJj+2IG5L/pOco0Zr75qSQnw==",
+      "dependencies": {
+        "dct": "0.0.3",
+        "fftjs": "0.0.4",
+        "node-getopt": "^0.2.3",
+        "through2": "^2.0.1",
+        "wav": "^1.0.0"
+      },
+      "bin": {
+        "meyda": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/microevent.ts": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/microevent.ts/-/microevent.ts-0.1.1.tgz",
@@ -14356,6 +14407,14 @@
         "node": ">= 6.0.0"
       }
     },
+    "node_modules/node-getopt": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/node-getopt/-/node-getopt-0.2.4.tgz",
+      "integrity": "sha512-06LC4wHO+nyH0J07dUzFsZTVZMsMMKTkXo8BUTmuYbJhbsKX2cVDn2xADoFqjbnBYThVlGSlaM10CDyEi+48Iw==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/node-object-hash": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/node-object-hash/-/node-object-hash-2.3.1.tgz",
@@ -15313,6 +15372,11 @@
       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
       "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA="
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
+    },
     "node_modules/phin": {
       "version": "2.9.3",
       "resolved": "https://registry.npmjs.org/phin/-/phin-2.9.3.tgz",
@@ -17919,6 +17983,33 @@
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
+    "node_modules/raf-loop": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/raf-loop/-/raf-loop-1.1.3.tgz",
+      "integrity": "sha1-h0emmilhUZcgaVS85HfT5l5lkpk=",
+      "dependencies": {
+        "events": "^1.0.2",
+        "inherits": "^2.0.1",
+        "raf": "^3.0.0",
+        "right-now": "^1.0.0"
+      }
+    },
+    "node_modules/raf-loop/node_modules/events": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
+      "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ=",
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -18632,6 +18723,11 @@
         "jsesc": "bin/jsesc"
       }
     },
+    "node_modules/regl": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/regl/-/regl-1.7.0.tgz",
+      "integrity": "sha512-bEAtp/qrtKucxXSJkD4ebopFZYP0q1+3Vb2WECWv/T8yQEgKxDxJ7ztO285tAMaYZVR6mM1GgI6CCn8FROtL1w=="
+    },
     "node_modules/remark-mdx": {
       "version": "2.0.0-next.9",
       "resolved": "https://registry.npmjs.org/remark-mdx/-/remark-mdx-2.0.0-next.9.tgz",
@@ -19013,6 +19109,11 @@
       "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
       "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM="
     },
+    "node_modules/right-now": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/right-now/-/right-now-1.0.0.tgz",
+      "integrity": "sha1-bolgne69fc2vja7Mmuo5z1haCRg="
+    },
     "node_modules/rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -21790,6 +21891,47 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/wav": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wav/-/wav-1.0.2.tgz",
+      "integrity": "sha512-viHtz3cDd/Tcr/HbNqzQCofKdF6kWUymH9LGDdskfWFoIy/HJ+RTihgjEcHfnsy1PO4e9B+y4HwgTwMrByquhg==",
+      "dependencies": {
+        "buffer-alloc": "^1.1.0",
+        "buffer-from": "^1.0.0",
+        "debug": "^2.2.0",
+        "readable-stream": "^1.1.14",
+        "stream-parser": "^0.3.1"
+      }
+    },
+    "node_modules/wav/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/wav/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    },
+    "node_modules/wav/node_modules/readable-stream": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+      "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.1",
+        "isarray": "0.0.1",
+        "string_decoder": "~0.10.x"
+      }
+    },
+    "node_modules/wav/node_modules/string_decoder": {
+      "version": "0.10.31",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+      "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+    },
     "node_modules/wbuf": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
@@ -21798,6 +21940,11 @@
         "minimalistic-assert": "^1.0.0"
       }
     },
+    "node_modules/web-audio-analyser": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/web-audio-analyser/-/web-audio-analyser-2.0.1.tgz",
+      "integrity": "sha1-zUgSYrs1vM62GHuQqbk54QYpKvw="
+    },
     "node_modules/webpack": {
       "version": "5.34.0",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.34.0.tgz",
@@ -28899,6 +29046,11 @@
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.21.1.tgz",
       "integrity": "sha512-m1WR0xGiC6j6jNFAyW4Nvh4WxAi4JF4w9jRJwSI8nBmNcyZXPcP9VUQG+6gHQXAmqaGEKDKhOqAtENDC941UkA=="
     },
+    "dct": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/dct/-/dct-0.0.3.tgz",
+      "integrity": "sha1-GTkKg0OIodOhNz+e3+UGIgdISdM="
+    },
     "debug": {
       "version": "3.2.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
@@ -30890,6 +31042,21 @@
         "pend": "~1.2.0"
       }
     },
+    "fftjs": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/fftjs/-/fftjs-0.0.4.tgz",
+      "integrity": "sha1-mfRwvPRI+LZbMd/3EkWupLMtOaA=",
+      "requires": {
+        "babel-plugin-add-module-exports": "^0.2.1"
+      },
+      "dependencies": {
+        "babel-plugin-add-module-exports": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/babel-plugin-add-module-exports/-/babel-plugin-add-module-exports-0.2.1.tgz",
+          "integrity": "sha1-mumh9KjcZ/DN7E9K7aHkOl/2XiU="
+        }
+      }
+    },
     "figures": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
@@ -33277,6 +33444,17 @@
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
       "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw=="
     },
+    "hydra-synth": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/hydra-synth/-/hydra-synth-1.3.8.tgz",
+      "integrity": "sha512-mIWPlgkETrwp8GRzZiRgocCg3P5ZokSqZ8JXAHD5hkM7dndnJs1ucQIDnWrcJqy1Cz2UoSGx7NVg4dZ+/deULA==",
+      "requires": {
+        "meyda": "^4.1.3",
+        "raf-loop": "^1.1.3",
+        "regl": "^1.3.9",
+        "web-audio-analyser": "^2.0.1"
+      }
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -35066,6 +35244,18 @@
       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
       "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
     },
+    "meyda": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/meyda/-/meyda-4.2.0.tgz",
+      "integrity": "sha512-enK48Q82MtP1iVM1hYu3tKv3F1/Ar4zPBcgyNs/kmh3SX4UgL7TDnYKPQ9tG9KeJj+2IG5L/pOco0Zr75qSQnw==",
+      "requires": {
+        "dct": "0.0.3",
+        "fftjs": "0.0.4",
+        "node-getopt": "^0.2.3",
+        "through2": "^2.0.1",
+        "wav": "^1.0.0"
+      }
+    },
     "microevent.ts": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/microevent.ts/-/microevent.ts-0.1.1.tgz",
@@ -35506,6 +35696,11 @@
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
       "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA=="
     },
+    "node-getopt": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/node-getopt/-/node-getopt-0.2.4.tgz",
+      "integrity": "sha512-06LC4wHO+nyH0J07dUzFsZTVZMsMMKTkXo8BUTmuYbJhbsKX2cVDn2xADoFqjbnBYThVlGSlaM10CDyEi+48Iw=="
+    },
     "node-object-hash": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/node-object-hash/-/node-object-hash-2.3.1.tgz",
@@ -36281,6 +36476,11 @@
       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
       "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA="
     },
+    "performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
+    },
     "phin": {
       "version": "2.9.3",
       "resolved": "https://registry.npmjs.org/phin/-/phin-2.9.3.tgz",
@@ -38372,6 +38572,32 @@
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
     },
+    "raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "requires": {
+        "performance-now": "^2.1.0"
+      }
+    },
+    "raf-loop": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/raf-loop/-/raf-loop-1.1.3.tgz",
+      "integrity": "sha1-h0emmilhUZcgaVS85HfT5l5lkpk=",
+      "requires": {
+        "events": "^1.0.2",
+        "inherits": "^2.0.1",
+        "raf": "^3.0.0",
+        "right-now": "^1.0.0"
+      },
+      "dependencies": {
+        "events": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/events/-/events-1.1.1.tgz",
+          "integrity": "sha1-nr23Y1rQmccNzEwqH1AEKI6L2SQ="
+        }
+      }
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -38938,6 +39164,11 @@
         }
       }
     },
+    "regl": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/regl/-/regl-1.7.0.tgz",
+      "integrity": "sha512-bEAtp/qrtKucxXSJkD4ebopFZYP0q1+3Vb2WECWv/T8yQEgKxDxJ7ztO285tAMaYZVR6mM1GgI6CCn8FROtL1w=="
+    },
     "remark-mdx": {
       "version": "2.0.0-next.9",
       "resolved": "https://registry.npmjs.org/remark-mdx/-/remark-mdx-2.0.0-next.9.tgz",
@@ -39269,6 +39500,11 @@
       "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
       "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM="
     },
+    "right-now": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/right-now/-/right-now-1.0.0.tgz",
+      "integrity": "sha1-bolgne69fc2vja7Mmuo5z1haCRg="
+    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -41599,6 +41835,49 @@
         "graceful-fs": "^4.1.2"
       }
     },
+    "wav": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wav/-/wav-1.0.2.tgz",
+      "integrity": "sha512-viHtz3cDd/Tcr/HbNqzQCofKdF6kWUymH9LGDdskfWFoIy/HJ+RTihgjEcHfnsy1PO4e9B+y4HwgTwMrByquhg==",
+      "requires": {
+        "buffer-alloc": "^1.1.0",
+        "buffer-from": "^1.0.0",
+        "debug": "^2.2.0",
+        "readable-stream": "^1.1.14",
+        "stream-parser": "^0.3.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        },
+        "readable-stream": {
+          "version": "1.1.14",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+          "integrity": "sha1-fPTFTvZI44EwhMY23SB54WbAgdk=",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+        }
+      }
+    },
     "wbuf": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz",
@@ -41607,6 +41886,11 @@
         "minimalistic-assert": "^1.0.0"
       }
     },
+    "web-audio-analyser": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/web-audio-analyser/-/web-audio-analyser-2.0.1.tgz",
+      "integrity": "sha1-zUgSYrs1vM62GHuQqbk54QYpKvw="
+    },
     "webpack": {
       "version": "5.34.0",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.34.0.tgz",
diff --git a/pln/package.json b/pln/package.json
index 7c07edc..da2ce05 100644
--- a/pln/package.json
+++ b/pln/package.json
@@ -14,6 +14,7 @@
     "gatsby-plugin-sharp": "^3.2.1",
     "gatsby-source-filesystem": "^3.2.0",
     "gatsby-transformer-sharp": "^3.2.0",
+    "hydra-synth": "^1.3.8",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
diff --git a/pln/src/components/canvas.js b/pln/src/components/canvas.js
new file mode 100644
index 0000000..9a528b3
--- /dev/null
+++ b/pln/src/components/canvas.js
@@ -0,0 +1,25 @@
+// we create a React context with a _null_ default value
+const SharingContext = React.createContext(null);
+
+const Canvas = (props) => {
+  const canvasRef = React.useRef(null);
+  const [
+    renderingContext,
+    setRenderingContext,
+  ] = React.useState(null);
+
+  // the canvas rendering context is not immediately avalaible
+  // the canvas node first needs to be added to the DOM by react
+  React.useEffect(() => {
+    const context2d = canvasRef.current.getContext("2d");
+    setRenderingContext(context2d);
+  }, []);
+
+  return (
+    <SharingContext.Provider value={renderingContext}>
+      <canvas ref={canvasRef} />
+      {/* hexagons are passed through the `children` prop */}
+      {props.children}
+    </SharingContext.Provider>
+  );
+};
diff --git a/pln/src/components/hydra-synth.js b/pln/src/components/hydra-synth.js
new file mode 100644
index 0000000..7505dfc
--- /dev/null
+++ b/pln/src/components/hydra-synth.js
@@ -0,0 +1,25 @@
+import PropTypes from "prop-types"
+
+const Hydra = require('hydra-synth')
+
+function HydraSynth({ canvasId }) {
+  const hydra = new Hydra({
+    canvas: document.getElementById(canvasId),
+    detectAudio: false,
+    makeGlobal: true })
+
+  const synth = hydra.synth
+
+  synth.osc(4, 0.1, 1.2).out()
+
+  return null
+}
+HydraSynth.defaultProps = {
+  canvasId: `canvas`,
+}
+
+HydraSynth.propTypes = {
+  canvasId: PropTypes.string.isRequired,
+}
+
+export default HydraSynth
diff --git a/pln/src/pages/hydra.js b/pln/src/pages/hydra.js
index 5872fa9..216de95 100644
--- a/pln/src/pages/hydra.js
+++ b/pln/src/pages/hydra.js
@@ -4,18 +4,23 @@ import { StaticImage } from "gatsby-plugin-image"
 
 import Layout from "../components/layout"
 import Seo from "../components/seo"
+import HydraSynth from "../components/hydra-synth"
+
 
 const Hydra = () => (
   <Layout>
     <Seo title="Hydra" />
+    <HydraSynth canvasId="myCanvas"/>
     <h1>Hydra</h1>
     <p>With <a href="https://github.com/ojack/hydra/">Hydra</a>, I create some eye-catchers:</p>
+    <canvas id="canvas"/>
+    <h2>Work Process</h2>
     <StaticImage
       src="../images/WIP_GaLactic.png"
       width={2048}
       quality={95}
       formats={["AUTO", "WEBP", "AVIF"]}
-      alt="A Gatsby astronaut"
+      alt="A screenshot of four intermediary steps of the GaLactic work"
       style={{ marginBottom: `1.45rem` }}
     />
     <Link to="/">Home</Link>