Shining Examples of the Flashlight Effect Web Design Trend

2019 has already seen numerous tiny trends where the mouse cursor played first fiddle: mouse trails, repelling effects, interactive 3D globes and fantastic hover effects – to name a few. Playing with the canvas has become mainstream. Everyone wants to become a proud part of it and make a valuable contribution.

Indeed, HTML5 and modern experimental JavaScript libraries have opened enormous possibilities for web developers. And, it seems that we have finally moved from the stage of dipping the toe with occasional experiments to a stage of constant innovation.

The practice shows that artists keep both feet on the ground. They are eager to push the boundaries and test the limits of technology. Today we are going to examine another small trend.

We have already explored the outstanding X-Ray effect. Now, it is time to turn our gaze towards effects that mimic the flashlight. Both of these tricks let us see something that is hidden from the naked eye. However, while the first one feels techy and advanced, this one, on the contrary, feels simple and rustic.

It picks up our interest in a playful and unobtrusive way. Here, the mouse cursor reminds us of a wand that produces a flash of light to illuminate the surrounding area. It feels truly magical. Lumos Maxima, one of the popular incantations in Harry Potter universe, was skillfully imitated in the web expanses; and we are going to enjoy its digital incarnation. Let’s begin.

thePXA

ThePXA is a creative agency. It is only natural that the team wants to stand out from the crowd. Therefore, their website greets the audience with a unique welcome area. The entire screen is an interactive playground. It is dark with lots of particles that looks like a night sky with hundreds of snowflakes.

Here the mouse cursor is a flashlight with quite a big range. It efficiently illuminates elements of the interface, making them brighter. The trick triggers a sensation that you can peek inside and find something interesting in the darkest corners. Simple, but truly engaging.

Creative Nights

Creative Nights is another point in case. The website also has dark aesthetics; I’d even say almost noir. However, it does not feel ominous; it feels intricate and sophisticated. Much like the previous example, here the mouse cursor creates a halo around itself, highlighting a relatively large area.

Unlike thePXA where all the elements of the user interface are visible, here the scene is hidden behind the darkness. Only the mouse cursor turned into a flashlight is able to cut through and reveal what is there.

Note this trick is used to transform a regular carousel with portfolio pieces into an area of play. It interacts with users and ignites their interest on a subconscious level.

L2D

The effect plays nicely with 3D solutions as well. Consider L2D.

Here, you can see a hero area where a 3D experiment with canvas steals the show. It entertains online visitors as well as demonstrates the professionalism of the company.

While some may find it more than enough for producing an impression, the team has decided to reinforce the impact even more. They have transformed the mouse cursor into a flashlight that lightens all of the object’s faces. Smart and creative.

Pygar

Pygar is an example where the flashlight effect meets the X-Ray effect, resulting in a thrilling outcome. It differs from the previously-mentioned in several ways:

• First of all, the website has a light aesthetic with an almost white background.
• Secondly, the mouse cursor is a huge blob that is smoothly and continuously morphing. Sometimes, it feels like it lives its own life.
• Third, it shifts its color from purple to blue, continually drawing attention.
• Fourth, it changes its size from small to large.
• And finally, it illuminates text by painting it in various colors.

I bet it is something that Luna Lovegood would appreciate. Though, we also find it amazing.

Lusion

Much like in the previous example, the team behind Lusion has ditched the traditional white light beam and opted in favor of a colored one. Although it does not change its tone constantly, it still looks outstanding.

Here, the mouse cursor is a small red dot that reminds a bit of a laser pointer. Unlike its real-life analog, this one has a little halo that lightens the surrounding surface. It goes perfectly with the purplish environment. What’s more, it nicely co-opts with the interactive piece on the back, creating an intricate interplay.

We have already seen how the solution is used as a searchlight. Now, it is time to examine another way of implementing this trend.

Le Mirabeau Hotel / Once Upon a Time Mag

Le Mirabeau Hotel and Once Upon a Time Mag are two representative examples. Here, the solution is not loud, overwhelming, or attention-grabbing. It is a finishing touch that nicely completes the composition, as well as adds a subtle bit of interactivity to the project. Both cases feature a barely-perceptible flashlight effect. Yet it is here, and it certainly makes its contribution to the user experience.

In the case of Le Mirabeau Hotel, the mouse cursor just slightly lightens the background. In this way, the team has unobtrusively highlighted the magical wintery atmosphere that is presented in the pictures.

The team behind the website design of “Once upon a Time Mag” pulls the same trick. However, this time the mouse cursor gently reveals the edges of the surface, thereby showing its subtle volumetric nature.

Mynrd

Joel Maynard takes this trend not just seriously, but also literally. While in all the above examples, the mouse cursor feels like a wand whose end exudes light, here it has the shape of a classic flashlight.

In actuality, you are moving a torch across the surface. It is also a seeking game. The author invites you to take part in a small hunt. You need to find his works that are hidden throughout the homepage.

For those of you who are in no mood to search, there is a “magic word” that reveals everything in one click.

Looking for the Light

It is safe to say that this is the year of the mouse cursor. It stands behind numerous outstanding solutions, findings and extravaganzas. They not only energize the interface with JavaScript magic, but also enrich the user experience with lovely surprises.

While the flashlight effect may sound a bit ordinary at first, it is certainly inspiring. And unlike the rest, it has a hint of mystery that naturally drums up the interest and encourages us to explore the project longer.