From 79ff24bcddfbc77f5032e7c81fbc2b3b66d0c4fb Mon Sep 17 00:00:00 2001 From: Rob Colbert Date: Fri, 1 May 2026 21:17:04 -0400 Subject: [PATCH] created --- docs/gadget-grid.md | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 docs/gadget-grid.md diff --git a/docs/gadget-grid.md b/docs/gadget-grid.md new file mode 100644 index 0000000..93c6998 --- /dev/null +++ b/docs/gadget-grid.md @@ -0,0 +1,36 @@ +# Gadget Grid + +The Gadget Grid is a React ThreeJS-based component for a ThreeJS scene that serves as a dynamic, infinite circuit board background for the Home view. + +The scene evokes a geometric, algorithmically generated representation of a PC motherboard with random traces, chips, capacitors, and integrated circuits. The board should be rendered in a dark black color, with glowing green particles (representing 'bits of information/energy') traveling along the traces. + +The camera is situated directly above the circuit board, and will slowly move in small amounts closer, farther away, side-to-side, up and down, but never strays too far from the original point above the board. The camera should keep the circuit board framed to fill the view at all times - the edge of the circuit board should never be visible - it should appear to continue infinitely out of view. + +Camera movement, and the energy particles moving along the traces, are the only animation in the scene. + +### Requirements: + +1. **Scene Generation**: + - The circuit board and components (traces, chips, capacitors) should be procedurally generated once at the start of the component. + - Use basic geometric shapes (rectangles, cylinders, tori) to represent components and traces. + - The board should appear infinite in the background, with the animation looping continuously until the user navigates away. + +2. **Particle System**: + - Green glowing particles should randomly spawn at junctions (points where traces connect). + - These particles travel along the traces via a predefined pathfinding algorithm, simulating energy flow. + - When a particle reaches a junction, it disappears and re-spawns elsewhere. + +3. **Animation**: + - The scene should animate smoothly, with particles moving along traces and the background components appearing static (but with subtle motion to enhance the infinite effect). + - Use ThreeJS materials (e.g., MeshStandardMaterial with emissive properties) for glowing effects. + +4. **Integration with React**: + - The component should be compatible with React Three Fiber and Drei libraries. + - Ensure the scene is responsive and performs well in a React application. + +5. **Usage**: + - This component should be used as a background for the unauthenticated home page and the sign-in dialog flow. + +### Output Format: + +Provide a complete, runnable React ThreeJS component in a single file (e.g., `CircuitBoardBackground.jsx`). Include all necessary imports, ThreeJS configurations, and animation logic. Ensure the component is self-contained and can be integrated into an existing React project.