docs: Homepage BG Effect

Author: iwoplaza

apps/typegpu-docs/package.json

@@ -20,6 +20,7 @@
     "@babel/standalone": "^7.28.6",
     "@dimforge/rapier2d-compat": "^0.19.3",
     "@loaders.gl/core": "^4.3.4",
+    "@loaders.gl/gltf": "^4.3.4",
     "@loaders.gl/obj": "^4.3.4",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-select": "^2.2.6",

apps/typegpu-docs/public/assets/plum.glb

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react';
+import { initHeroEffect } from './hero-effect.ts';
+
+export function HeroEffect() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctrl = new AbortController();
+    initHeroEffect({ canvas, signal: ctrl.signal });
+
+    return () => {
+      ctrl.abort();
+    };
+  });
+
+  return (
+    <div className="relative h-[48rem] w-[48rem]">
+      <canvas ref={canvasRef} className="absolute inset-0 h-full w-full bg-transparent" />
+    </div>
+  );
+}