Interactive HTML Canvas Web Design
Budget: ₹100 – ₹400 INR
HTML Structure:
A <canvas> element for the interactive background.
A central <div class="content"> with a title text "FLashU".
A custom cursor <div class="cursor">.
CSS Styling:
Full-screen dark background with hidden overflow.
Centered white text with padding and rounded borders.
Canvas is fixed and behind other elements (z-index: 1).
Custom white circular cursor that follows the mouse.
JavaScript Functionality:
Canvas Setup: Initializes the canvas to the window size.
Configuration Object: Defines the number of nodes, max connection distance, node/line color, forces, etc.
Nodes Initialization: Generates random node positions and velocities.
Animation Loop:
Clears and redraws the canvas each frame.
Draws lines between nearby nodes with opacity based on distance.
Draws connecting lines from nodes to the mouse cursor if nearby.
Draws each node as a circle.
Physics Updates:
Applies velocity to move nodes.
Applies wall-bouncing to keep nodes on screen.
Adds a centering force pulling nodes towards the center.
Applies repulsion between nodes.
Attracts nodes slightly to the mouse cursor.
Friction slows down node velocities over time.
Mouse Tracking:
Updates mouse coordinates and positions the custom cursor.
Clears the mouse position when the cursor leaves the window.
Responsive Design:
Reinitializes the canvas and nodes when the window is resized.
A <canvas> element for the interactive background.
A central <div class="content"> with a title text "FLashU".
A custom cursor <div class="cursor">.
CSS Styling:
Full-screen dark background with hidden overflow.
Centered white text with padding and rounded borders.
Canvas is fixed and behind other elements (z-index: 1).
Custom white circular cursor that follows the mouse.
JavaScript Functionality:
Canvas Setup: Initializes the canvas to the window size.
Configuration Object: Defines the number of nodes, max connection distance, node/line color, forces, etc.
Nodes Initialization: Generates random node positions and velocities.
Animation Loop:
Clears and redraws the canvas each frame.
Draws lines between nearby nodes with opacity based on distance.
Draws connecting lines from nodes to the mouse cursor if nearby.
Draws each node as a circle.
Physics Updates:
Applies velocity to move nodes.
Applies wall-bouncing to keep nodes on screen.
Adds a centering force pulling nodes towards the center.
Applies repulsion between nodes.
Attracts nodes slightly to the mouse cursor.
Friction slows down node velocities over time.
Mouse Tracking:
Updates mouse coordinates and positions the custom cursor.
Clears the mouse position when the cursor leaves the window.
Responsive Design:
Reinitializes the canvas and nodes when the window is resized.