diff --git a/package-lock.json b/package-lock.json
index e185949..227e756 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@myriaddreamin/rehype-typst": "^0.5.4",
         "@napi-rs/simple-git": "0.1.19",
         "@tweenjs/tween.js": "^25.0.0",
+        "@webgpu/types": "^0.1.60",
         "ansi-truncate": "^1.2.0",
         "async-mutex": "^0.5.0",
         "chalk": "^5.4.1",
@@ -2001,9 +2002,9 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ=="
     },
     "node_modules/@webgpu/types": {
-      "version": "0.1.44",
-      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.44.tgz",
-      "integrity": "sha512-JDpYJN5E/asw84LTYhKyvPpxGnD+bAKPtpW9Ilurf7cZpxaTbxkQcGwOd7jgB9BPBrTYQ+32ufo4HiuomTjHNQ==",
+      "version": "0.1.60",
+      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.60.tgz",
+      "integrity": "sha512-8B/tdfRFKdrnejqmvq95ogp8tf52oZ51p3f4QD5m5Paey/qlX4Rhhy5Y8tgFMi7Ms70HzcMMw3EQjH/jdhTwlA==",
       "license": "BSD-3-Clause"
     },
     "node_modules/@xmldom/xmldom": {
diff --git a/package.json b/package.json
index 0378c53..ddcb5f2 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "@myriaddreamin/rehype-typst": "^0.5.4",
     "@napi-rs/simple-git": "0.1.19",
     "@tweenjs/tween.js": "^25.0.0",
+    "@webgpu/types": "^0.1.60",
     "ansi-truncate": "^1.2.0",
     "async-mutex": "^0.5.0",
     "chalk": "^5.4.1",
diff --git a/quartz/components/scripts/graph.inline.ts b/quartz/components/scripts/graph.inline.ts
index a669b05..87e2958 100644
--- a/quartz/components/scripts/graph.inline.ts
+++ b/quartz/components/scripts/graph.inline.ts
@@ -68,6 +68,15 @@ type TweenNode = {
   stop: () => void
 }
 
+async function determineGraphicsAPI(): Promise<"webgpu" | "webgl"> {
+  const adapter = await navigator.gpu?.requestAdapter().catch(() => null)
+  if (!adapter) {
+    return "webgl"
+  }
+  // Devices with WebGPU but no float32-blendable feature fail to render the graph
+  return adapter.features.has("float32-blendable") ? "webgpu" : "webgl"
+}
+
 async function renderGraph(graph: HTMLElement, fullSlug: FullSlug) {
   const slug = simplifySlug(fullSlug)
   const visited = getVisited()
@@ -349,6 +358,7 @@ async function renderGraph(graph: HTMLElement, fullSlug: FullSlug) {
   tweens.forEach((tween) => tween.stop())
   tweens.clear()
 
+  const pixiPreference = await determineGraphicsAPI()
   const app = new Application()
   await app.init({
     width,
@@ -357,7 +367,7 @@ async function renderGraph(graph: HTMLElement, fullSlug: FullSlug) {
     autoStart: false,
     autoDensity: true,
     backgroundAlpha: 0,
-    preference: "webgpu",
+    preference: pixiPreference,
     resolution: window.devicePixelRatio,
     eventMode: "static",
   })