Is there any specific reason for windows callendar to have this flashlight-like hover effect?


If anything it seems to me to be distracting by spreading the area of your current mouse position. Is it suppoused to have any benefits over a single box hover, or is it purely decorational?

  • Pure speculation: As the entire calendar is kept "flat" (i.e. no visible button/box borders at all), the hovered box would pop up out of nowhere. In particular, moving the cursor across several dates could give the impression that you are moving around a little box, rather than that nothing is moving, but different date boxes enable or disable their highlight. By making the frames of adjacent boxes visible before the cursor enters them, the impression may be more along the lines that it's many boxes that change visually upon hovering. May 29, 2019 at 11:49

1 Answer 1


This effect was made as part of the Microsoft's new design system called Fluent Design.

There are 5 principles to it:

Light: Light controls how user interface interacts with illumination and how it helps the users to avoid distraction.

Depth: Depth brings parallax effect and makes use of layering. This highlights the relationship between objects and elements.

Motion: Motion can be used to show connection, relation, and context between elements and objects.

Material: Material allows to control an element’s texture and change as one interacts with it.

Scale: Scale lets elements and objects to go beyond two dimensions and adapt themselves according to the size of a screen.

In the demo video for the Fluent design they demo that flashlight effect as part of the 'Light' principle - controlling UI depending of the angle and movement of the pointer.

While, personally, I have no attachment to this sort of effect and it provided no usability perks to me or anyone I know in UX fields, it does look snazzy; and it's simply part of Microsoft's Design system.




PS: I do not work for Microsoft nor have any connections with any employees to conduct any further research or ask questions.

PPS: a fun little link to a similar effect: https://codepen.io/gubb/pen/PdZqKy It works much better with lighter colours for me. Makes more of a contrast with highlighted spotlight vs those around it ('negative space effect almost').

Hope this helps.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.