Create an animation of an abstract vector background with gentle movement. Design a pattern of interconnected geometric lines and nodes resembling a network or constellation against a deep blue gradient background that transitions from midnight blue at the bottom to a slightly lighter cobalt blue at the top. Have the nodes gently pulse with a soft white-blue glow while the connecting lines subtly shift positions as if responding to an invisible breeze. The movement should be slow and meditative, creating a calming effect without distracting from the foreground content that would typically overlay such a background.
Add an interactive cursor effect where the nodes and connecting lines dynamically respond to mouse movement - when the cursor approaches any part of the network, the nearby nodes and lines should gracefully move away from the cursor position, creating a gentle ripple effect as if the cursor is pushing through a fluid medium. The avoidance movement should be smooth and natural, with elements gradually returning to their original positions after the cursor moves away. The repulsion radius should extend about 100 pixels from the cursor, with the strength of movement decreasing with distance. This interaction should maintain the calm, meditative quality of the animation while adding a subtle layer of user engagement.
I'll create an interactive animated background with the network/constellation effect and cursor interaction you described. This will use HTML Canvas for performance with the animations and interactions.
This implementation creates exactly what you described:
Interactive cursor effect where:
The animation runs on HTML Canvas for optimal performance. You can adjust parameters like node count, connection distance, and animation speed by modifying the values in the code.
To use this in your project, simply import the InteractiveBackground component and place it in your layout. I've included a sample page.tsx that shows how you might overlay content on top of the background.
add more lines and noes and make them move on their own and change the background to black
I'll update the interactive background with more nodes and lines, add more autonomous movement, and change the background to black.
I've updated the interactive background with the changes you requested:
More Nodes and Lines:
Enhanced Autonomous Movement:
Black Background:
The result is a more dynamic and dense constellation network with autonomous movement that still responds to your cursor. The black background creates a space-like atmosphere that makes the glowing nodes and lines stand out more dramatically.
add nterconnected geometric lines and nodes