37 lines
2.6 KiB
Markdown
37 lines
2.6 KiB
Markdown
# 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 home page, the sign-in dialog flow, and the authenticated home page.
|
|
|
|
### 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.
|