| name | robot-components |
| description | Add features to the Node Editor Canvas - visual effects, interactions, physics, keyboard shortcuts Use when this capability is needed. |
| metadata | {"author":"dashrobotco"} |
Node Editor Expansion
You are helping expand the Node Editor Canvas component. The user wants to add or modify features.
User Request
$ARGUMENTS
Key Files
- Main component:
app/nodegrid/page.tsx (~4500 lines)
- Global styles:
app/globals.css
- Sound effects:
src/utils/SoundEffects.ts
Architecture
-
GridPlayground (line ~3600) - Main orchestrator
- State:
floatingPanels, connections, connectionDrag, topPanelId, sliceTrail
-
FloatingPanel (line ~850) - Draggable/resizable panels
- Physics: velocity tracking, friction, bounce damping
- Features: resize from edges/corners, connection handles
-
DotGridCanvas (line ~2250) - Animated dot grid background
- Responds to panel positions and mouse movement
- Draws connection lines between panels
-
NoiseOverlay (line ~2050) - WebGL film grain effect
Design System (Tailwind neutral palette)
Use these colors with comments:
#fafafa /* neutral-50 */ - Primary text#e5e5e5 /* neutral-200 */ - Headings#a3a3a3 /* neutral-400 */ - Secondary text#737373 /* neutral-500 */ - Muted text#525252 /* neutral-600 */ - Subtle icons#404040 /* neutral-700 */ - Borders#262626 /* neutral-800 */ - Card backgrounds#171717 /* neutral-900 */ - Page background#2563eb /* blue-600 */ - Active/processing#4ade80 /* green-400 */ - Success/completed
Guidelines
- Use inline styles for layout in nodegrid - The nodegrid page has issues with some Tailwind layout classes (
fixed, min-h-screen). Use inline style={{}} for position, display, and dimensions.
- Use Tailwind color values - Always use colors from the palette above with comments
- Test positioning - Verify new elements appear on screen
- Maintain physics - Preserve the velocity/friction/bounce system
- Sound feedback - Add sounds using
soundEffects.playHoverSound() or playBounceSound()
Instructions
- Read the relevant sections of
app/nodegrid/page.tsx
- Implement the requested feature
- Follow existing patterns in the codebase
- Test that changes don't break existing functionality
- Suggest gradual implementation and fine tuning vs. multiple new features at once
Now implement the user's request.
Source: dashrobotco/robot-components — distributed by TomeVault.
