Interactive Dot Wave is a fully interactive background component made of dots forming a fluid wave. It adds motion, depth, and interactivity to any section, making hero sections, landing pages, portfolios, or creative backgrounds more engaging and immersive.
The component responds to multiple forms of user interaction:
Mouse hover — points react, connect with lines, and emit a glowing effect.
Clicks — ripple effects create visually engaging responses.
Keyboard and mouse navigation — move through the wave using WASD keys, Q/CTRL to move down, E/Space to move up, and hold the mouse button to rotate the camera freely.
Touch controls — on mobile, two-finger drag moves the camera in the direction of the drag, pinch gestures move the camera up or down, and dragging with one finger while the other remains static moves through the wave (forward/backward and sideways). Mobile interaction is functional but may not be as smooth as desktop, so it is recommended to keep it disabled on mobile for the best experience.
Customization options include:
Dot layout — spacing (X/Y), size (X/Y), and colors.
Wave behavior — speed, size, frequency, complexity, and choppiness.
Camera controls — initial position, pitch, yaw, field of view (FOV), acceleration, max speed, vertical/horizontal movement, and idle movement with adjustable speed and timeout.
Mouse interaction — line color, distance, opacity, count, glow intensity, and repel strength/radius.
Click interaction — ripple strength, radius, and speed.
Performance settings — fade start and end distances to control rendering.
Background — color and opacity.
Interactive Dot Wave provides complete control over motion and interaction, allowing designers to create engaging, dynamic, and visually captivating experiences that respond to user input.
Iri Codes
