feat: build responsive Three.js river journey

src/components/scenes/scenePrimitives.ts

@@ -58,6 +58,25 @@ export function fitOrthographicCamera(
   camera.updateProjectionMatrix();
 }
 
+export function createRibbonShape(points: THREE.Vector2[], width: number) {
+  const halfWidth = width / 2;
+  const offsetPoint = (index: number, direction: 1 | -1) => {
+    const current = points[index].clone();
+    const previous = points[Math.max(0, index - 1)];
+    const next = points[Math.min(points.length - 1, index + 1)];
+    const tangent = next.clone().sub(previous).normalize();
+    return current.add(new THREE.Vector2(-tangent.y, tangent.x).multiplyScalar(halfWidth * direction));
+  };
+
+  const left = points.map((_, index) => offsetPoint(index, 1));
+  const right = points.map((_, index) => offsetPoint(index, -1)).reverse();
+  const shape = new THREE.Shape();
+  shape.moveTo(left[0].x, left[0].y);
+  [...left.slice(1), ...right].forEach((point) => shape.lineTo(point.x, point.y));
+  shape.closePath();
+  return shape;
+}
+
 export function createMesa(
   width: number,
   height: number,