Code Snippets That Demonstrate the Repelling Effect in Web Design
Today, we’d like to highlight the repelling effect – a unique trend in web design that’s both repulsive and attractive at the same time.
By pushing elements in various directions or blowing them away encourages users to interact with the page and explore its details. Despite its seemingly off-putting behavior, it’s an incredibly engaging feature that can make the user experience more exciting.
We’ve curated a collection of inspiring demos complete with code snippets to showcase this trend. These examples will allow you to see firsthand the beauty and intrigue of the repelling effect.
Repelling Lines by Daniel Velasquez
This first repelling effect example is reminiscent of a set of guitar strings. At first glance, the lines appear static, but as soon as you move your cursor over them, something magical happens. The lines start to bend and deform, eventually forming a small sphere.
The options panel on the right-hand side of the screen gives you complete control over the effect. You can adjust the radius of the mouse range, add or reduce the number of lines, or change the distance between the strings—a truly impressive and realistic simulation.
See the Pen Repelling Lines by Daniel Velasquez
30,000 Particles by Justin Windle
Justin Windle’s example is a breathtaking example of the repelling effect applied to thousands of dots. The densely packed particles react dynamically to your mouse cursor, frantically scattering away as you hover over them.
Despite their frantic movement, the mouse range holds the dots in place, resulting in a large, hollow circle. This stunning and interactive display is a testament to the popularity of the repelling effect in modern web design.
See the Pen 30,000 Particles by Justin Windle
Interactive Particle Logo by Tamino Martinius
If a simple rectangular frame isn’t enough to inspire your creativity, take a cue from Tamino Martinius’ Interactive Particles project. In this mesmerizing demo, every letter of the word is constructed from hundreds of dots that can be blown away with your mouse cursor.
The project has controls where you can change the parameters of the demo and adjust it to your liking. This pen is a prime example of how the repelling effect can be used in creative ways.
See the Pen Interactive Particle Logo by Tamino Martinius
Text to Particles by Louis Hoebregts
Louis Hoebregts’ Text to Particles project is an excellent example of how color and size can add liveliness to the repelling effect. Unlike Tamino Martinius’ solution above, the dots in this project have varying radii and colors, making for a visually striking display.
You can even change the text by setting it using the input, allowing you to experiment with different phrases and words. The mouse cursor’s gentle behavior disperses the crowd, leading to a small but satisfying disturbance in the playground.
See the Pen Text to particles by Louis Hoebregts
Balls & Gravity by Marco Dell’Anna
The repelling effect can be combined with other physics-based solutions to create outstanding results, as exemplified in the Balls and Gravity project.
Gravity and the repelling effect are the central concepts behind this mesmerizing demo. In the demo, you must grab the circle and use it to push the other circles away, almost like a game of billiards. Each colorful flat ball reacts to your movements, creating an engaging and interactive experience.
See the Pen BALLS&GRAVITY by Marco Dell’Anna
Attractor with MatterJS by Marco Dell’Anna
What’s unique about this project is that even though the particles move away from their original position, they always strive to return to the circle, creating a fascinating visual effect. The mouse cursor plays the dual role of a magnet, attracting particles back to the circle and a tool for pushing the dots away, at least temporarily.
This project is a prime example of how the repelling effect can be used in conjunction with other physics-based concepts, resulting in stunning displays that capture the imagination.
See the Pen Attractor – MatterJS by Marco Dell’Anna
Repellers Project by Rein van der Woerd
The repelling effect is not just limited to particle and physics-based solutions. It can also be used to create stunning text effects, as demonstrated in this example, where a word is constructed from short, thin lines that are directed toward the viewer, creating a sense of depth and volume.
As you grab your mouse cursor and drag it across the text, the lines begin to dance and move in response to your movements.
The lines’ behavior is smooth and visually pleasing, creating a stunning effect that enhances the sharp and acute nature of the text. In addition, the lines move on their own, creating a sensation of a gentle breeze that sways parts of the demo.
See the Pen Repellers by Rein van der Woerd
Despite its purpose of pushing details away, the repelling effect is undeniably magnetic. Its playful behavior immediately catches the eye and encourages interaction with the scene.
The repelling effect is not alone in its quest to capture the audience’s attention. When combined with other types of animations and effects, it can result in unique and attention-grabbing solutions.
The possibilities are endless, and web designers can use the repelling effect as a powerful tool to enhance the user experience and create captivating web pages.
