@backbay/glia-three 0.2.0-alpha.2

package/src/three/ParticleField/ParticleField.stories.tsx

@@ -0,0 +1,162 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Canvas } from "@react-three/fiber";
+import { OrbitControls } from "@react-three/drei";
+import { ParticleField } from "./ParticleField";
+
+const meta: Meta<typeof ParticleField> = {
+  title: "Primitives/3D/Fields/ParticleField",
+  component: ParticleField,
+  parameters: {
+    layout: "fullscreen",
+    backgrounds: { default: "dark" },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    count: {
+      control: { type: "range", min: 10, max: 500, step: 10 },
+    },
+    range: {
+      control: { type: "range", min: 5, max: 50, step: 5 },
+    },
+    color: {
+      control: "color",
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: "100%", height: "500px", background: "#050812" }}>
+        <Canvas camera={{ position: [0, 0, 15], fov: 50 }}>
+          <ambientLight intensity={0.4} />
+          <directionalLight position={[10, 10, 5]} intensity={0.6} />
+          <OrbitControls autoRotate autoRotateSpeed={0.5} />
+          <Story />
+        </Canvas>
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof ParticleField>;
+
+export const Default: Story = {
+  args: {
+    count: 100,
+    range: 20,
+    color: "#00f0ff",
+  },
+};
+
+export const CyanNeon: Story = {
+  args: {
+    count: 150,
+    range: 20,
+    color: "#00f0ff",
+  },
+};
+
+export const MagentaNeon: Story = {
+  args: {
+    count: 150,
+    range: 20,
+    color: "#ff00aa",
+  },
+};
+
+export const EmeraldNeon: Story = {
+  args: {
+    count: 150,
+    range: 20,
+    color: "#00ff88",
+  },
+};
+
+export const Dense: Story = {
+  args: {
+    count: 400,
+    range: 15,
+    color: "#00f0ff",
+  },
+};
+
+export const Sparse: Story = {
+  args: {
+    count: 50,
+    range: 30,
+    color: "#00f0ff",
+  },
+};
+
+export const WideSpread: Story = {
+  args: {
+    count: 200,
+    range: 40,
+    color: "#6366f1",
+  },
+};
+
+export const Compact: Story = {
+  args: {
+    count: 100,
+    range: 8,
+    color: "#f59e0b",
+  },
+};
+
+export const MultiColor: Story = {
+  decorators: [
+    (Story) => (
+      <div style={{ width: "100%", height: "500px", background: "#050812" }}>
+        <Canvas camera={{ position: [0, 0, 20], fov: 50 }}>
+          <ambientLight intensity={0.4} />
+          <directionalLight position={[10, 10, 5]} intensity={0.6} />
+          <OrbitControls autoRotate autoRotateSpeed={0.3} />
+          <ParticleField count={80} range={15} color="#00f0ff" />
+          <ParticleField count={80} range={15} color="#ff00aa" />
+          <ParticleField count={80} range={15} color="#00ff88" />
+        </Canvas>
+      </div>
+    ),
+  ],
+  render: () => null,
+};
+
+export const BackgroundAmbience: Story = {
+  decorators: [
+    (Story) => (
+      <div style={{ width: "100%", height: "600px", background: "linear-gradient(to bottom, #050812, #0a0f1a)", position: "relative" }}>
+        <Canvas camera={{ position: [0, 0, 25], fov: 60 }} style={{ position: "absolute", inset: 0 }}>
+          <ambientLight intensity={0.3} />
+          <ParticleField count={300} range={35} color="#00f0ff" />
+          <OrbitControls
+            autoRotate
+            autoRotateSpeed={0.2}
+            enableZoom={false}
+            enablePan={false}
+          />
+        </Canvas>
+        <div style={{
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: "white",
+          textAlign: "center",
+          padding: "2rem",
+          pointerEvents: "none",
+        }}>
+          <div>
+            <h1 style={{ fontSize: "3rem", fontWeight: "bold", marginBottom: "1rem" }}>
+              Welcome to bb-ui
+            </h1>
+            <p style={{ fontSize: "1.25rem", color: "rgba(255,255,255,0.7)" }}>
+              A comprehensive component library for agent-native interfaces
+            </p>
+          </div>
+        </div>
+      </div>
+    ),
+  ],
+  render: () => null,
+};

package/src/three/ParticleField/ParticleField.tsx

@@ -0,0 +1,81 @@
+import { Instance, Instances } from "@react-three/drei";
+import { useFrame } from "@react-three/fiber";
+import { useRef } from "react";
+import * as THREE from "three";
+
+interface ParticleFieldProps {
+  count?: number;
+  range?: number;
+  color?: string;
+}
+
+interface ParticleProps {
+  factor: number;
+  speed: number;
+  xFactor: number;
+  yFactor: number;
+  zFactor: number;
+}
+
+const Particle = ({ factor, speed, xFactor, yFactor, zFactor }: ParticleProps) => {
+  const ref = useRef<THREE.Group>(null);
+
+  useFrame((state) => {
+    const t = factor + state.clock.elapsedTime * (speed / 2);
+    if (ref.current) {
+      ref.current.rotation.z = t * xFactor;
+      ref.current.rotation.y = t * yFactor;
+      ref.current.position.x =
+        Math.cos(t) +
+        Math.sin(t * 1) / 10 +
+        xFactor +
+        Math.cos((t / 10) * factor) +
+        (Math.sin(t * 1) * factor) / 10;
+      ref.current.position.y =
+        Math.sin(t) +
+        Math.cos(t * 2) / 10 +
+        yFactor +
+        Math.sin((t / 10) * factor) +
+        (Math.cos(t * 2) * factor) / 10;
+      ref.current.position.z =
+        Math.sin(t) +
+        Math.cos(t * 2) / 10 +
+        zFactor +
+        Math.cos((t / 10) * factor) +
+        (Math.sin(t * 3) * factor) / 10;
+    }
+  });
+
+  return <Instance ref={ref} />;
+};
+
+export const ParticleField = ({
+  count = 100,
+  range = 20,
+  color = "#00f0ff",
+}: ParticleFieldProps) => {
+  // Generate random data for instances
+  const particles: ParticleProps[] = new Array(count).fill(0).map(() => ({
+    factor: 0.5 + Math.random(),
+    speed: 0.01 + Math.random() / 200,
+    xFactor: -10 + Math.random() * 20,
+    yFactor: -10 + Math.random() * 20,
+    zFactor: -10 + Math.random() * 20,
+  }));
+
+  return (
+    <Instances range={range} limit={count}>
+      <dodecahedronGeometry args={[0.05, 0]} />
+      <meshStandardMaterial
+        color={color}
+        roughness={0}
+        metalness={0.5}
+        emissive={color}
+        emissiveIntensity={0.5}
+      />
+      {particles.map((data, i) => (
+        <Particle key={i} {...data} />
+      ))}
+    </Instances>
+  );
+};

package/src/three/ParticleField/index.ts

@@ -0,0 +1 @@
+export * from "./ParticleField";