{"id":27330,"date":"2021-07-23T15:00:26","date_gmt":"2021-07-23T13:00:26","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=27330"},"modified":"2022-01-18T09:56:50","modified_gmt":"2022-01-18T08:56:50","slug":"examples-of-imaginative-mouse-cursor-design","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/examples-of-imaginative-mouse-cursor-design\/","title":{"rendered":"10 Examples of Imaginative Mouse Cursor Design"},"content":{"rendered":"<div class=\"wpb-content-wrapper\" id=\"wpb-content-root\"><p>[vc_row][vc_column][vc_column_text]The invention of the mouse and implementation of the cursor led to a revolution in user interaction. Until then, data had to be entered and manipulated by using commands on a keyboard, which, at times, was quite time-consuming and tiring. But in the 1960s, Douglas Engelbart created the world\u2019s first mouse, forever changing the way people interact with computers.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first cursor was designed as a simple arrow pointing up. However, back in the day, computer displays had low resolution, which made the small vertical arrow hard to notice on the screen. Engelbart then decided to tilt the arrow at an approximately 45\u00b0 angle. And the rest is history. Steve Jobs then used the angled pointer on Apple\u2019s first Mac, opting for the all-black design with a white outline. Microsoft debuted a pointer on their Windows 98 operating system, but they inverted the colors, making the outline black and the inner part white.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]From then on, designers began to experiment with the appearance of mouse pointers, sometimes using illustrations or even images as cursors. Depending on the site or the software, we\u2019ve probably all operated watermelon and pizza slices, rockets, sharpies, and different hand gestures in place of the arrow.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Mouse cursors have an immense functional value, and because of that, it&#8217;s important their design is well-thought-out. They should look good, but also incite immersive hover and transition effects on a site to make the browsing experience more intuitive and enjoyable for the user. The following roundup illustrates how beautiful and effective mouse pointer design can be and just how much it can help enhance the appeal of the entire website. More importantly, these websites also demonstrate how cursors can vastly improve user interactions on a site and provide feedback about specific actions while simultaneously showcasing the creativity of its creators. The sites we will discuss include:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#pest-stop-boys\">Pest Stop Boys<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#masters-1987\">Masters 1987<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#qode-kaleidoscope\">Qode Kaleidoscope<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#le-cantiche-1320\">Le Cantiche 1320<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#the-current-violent-white-supremacy\">The Current: Violent White Supremacy<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#samuel-day\">Samuel Day<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#groupe-castor-pollux\">Groupe Castor &amp; Pollux<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#the-new-company\">The New Company<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#glenn-catteeuw\">Glenn Catteeuw<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#julie-guzal\">Julie Guzal<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"pest-stop-boys\"><\/a>Pest Stop Boys<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Pest-Stop-Boys.jpg\" class=\"attachment-full size-full\" alt=\"Pest Stop Boys\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Pest-Stop-Boys.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Pest-Stop-Boys-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Pest-Stop-Boys-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Pest-Stop-Boys-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/peststopboys.co.uk\/\" target=\"_blank\" rel=\"noopener\">Pest Stop Boys<\/a> is a holistic pest control service located in South England. Their website is a true rhapsody of colors. It is rich with stunning animation effects and microinteractions, introducing the pest control service in a highly imaginative way. Cool scroll-triggered effects bring various types of bugs into the viewport, making your browsing experience just a bit more interesting. The cursor is initially shaped like an undulating splash of color, but as you begin to move it around, it dissolves into several colorful splotches.<strong> What makes this pointer particularly fun is the mix-blend-mode effect added to it, defining how the hovered element will blend with its background.<\/strong> Even when the cursor breaks into a few smaller dots, each of them includes the blend mode. When you hover over several differently colored elements at the same time (e.g., you partly place the mouse over a letter but you also cover a portion of the background and another abstract element), the cursor colors all of them in different hues. The mix-and-blend effect is a great way of breathing new life into your content with one simple hover and presenting displayed elements in several different, creative ways.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"masters-1987\"><\/a>Masters 1987<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"545\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Masters-1987.jpg\" class=\"attachment-full size-full\" alt=\"Masters 1987\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Masters-1987.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Masters-1987-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Masters-1987-768x432.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Masters-1987-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/1987masters.com\/\" target=\"_blank\" rel=\"noopener\">Masters 1987<\/a> is an event production company based in Los Angeles. Their website beautifully exemplifies the power of <a href=\"https:\/\/qodeinteractive.com\/magazine\/uppercase-sans-serif-typography-in-modern-web-design\/\">uppercase sans serif typography<\/a> which is used in various sizes on all pages. The background is black while the typography is mostly white, apart from some highlighted words in orange. The colors and fonts are simple, and that gave the designers room to implement a variety of effects and play around with the site\u2019s elements, especially the cursor. <strong>The movement of the circular pointer mirrors that of a comet \u2013 as soon as you move it in any direction, it leaves an animated trail behind that fades away once the movement stops. The pointer includes the blend mode effect which makes it look like some sort of a spotlight.<\/strong> Not only does it invert the colors of the hovered elements, but it also enlivens them. This is particularly obvious when you place the cursor on images. On the \u201cPortfolio\u201d page, as you hover over portfolio categories, the cursor turns outlined letters white while the blend mode is also in full effect.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"qode-kaleidoscope\"><\/a>Qode Kaleidoscope<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"545\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Qode-Kaleidoscope.jpg\" class=\"attachment-full size-full\" alt=\"Qode Kaleidoscope\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Qode-Kaleidoscope.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Qode-Kaleidoscope-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Qode-Kaleidoscope-768x432.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Qode-Kaleidoscope-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/qodeinteractive.com\/kaleidoscope\/\" target=\"_blank\" rel=\"noopener\">Qode Kaleidoscope<\/a> is a carefully curated collection of Qode Interactive\u2019s themes that highlights the importance of colors in modern web design. The loading screen includes an illustration of an eye and a myriad of tiny, colorful pieces that resemble the stained glass of <a href=\"https:\/\/qodeinteractive.com\/magazine\/qode-kaleidoscope-case-study\/\">kaleidoscopes<\/a>. The cursor on this part of the site looks just like the aforementioned eye. But, <strong>when you move it around the page, the eye breaks into several pieces. The pupil remains the primary mouse pointer, with the cornea, conjunctiva, and other parts trailing behind it. As soon as the movement stops, all parts come together and form the whole eye again.<\/strong> The scattered glass-like elements magnetically follow the movement of your mouse, enlivening the page. You can click anywhere you want to access the vibrant website and enjoy its attractive visuals as well as the engaging motion and transition effects that let you experience WordPress through a different lens.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"le-cantiche-1320\"><\/a>Le Cantiche 1320<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"545\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Le-Cantiche-1320.jpg\" class=\"attachment-full size-full\" alt=\"Le Cantiche 1320\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Le-Cantiche-1320.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Le-Cantiche-1320-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Le-Cantiche-1320-768x432.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Le-Cantiche-1320-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.lecantiche.com\" target=\"_blank\" rel=\"noopener\">Le Cantiche 1320<\/a> is a remarkable <a href=\"https:\/\/qodeinteractive.com\/magazine\/renaissance-web-design-trend\/\">Renaissance-inspired website<\/a>. It was created to mark the 700th anniversary since Dante\u2019s pivotal work, The Divine Comedy was completed. This whole site is a work of art in its own right. It is bustling with visuals that depict Dante\u2019s journey through Hell, Purgatory, and Paradise. The featured animation and transition effects, along with the <a href=\"https:\/\/qodeinteractive.com\/magazine\/horizontal-scrolling-websites\/\">horizontal navigation<\/a> effect, make the content appear all the more immersive and the journey more vivid. The cursor is very prominent and designed as a large, red circle. Within the circle, you\u2019ll notice some <strong>text, encouraging you to take some sort of action,<\/strong> like scrolling with your mouse or dragging the pointer to explore more content. <strong>Inserting instructions into a cursor is an excellent way of making the website exploration more intuitive for the user and helping them find their way around with greater ease.<\/strong> Moreover, the cursor on the Le Cantiche 1320 website <strong>features the mix-and-blend effect<\/strong>. When you place it on images, <strong>the area that you\u2019re hovering over turns into a negative.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;special-cursors-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"the-current-violent-white-supremacy\"><\/a>The Current: Violent White Supremacy<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"545\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/The-Current-Violent-White-Supremacy.jpg\" class=\"attachment-full size-full\" alt=\"The Current: Violent White Supremacy\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/The-Current-Violent-White-Supremacy.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/The-Current-Violent-White-Supremacy-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/The-Current-Violent-White-Supremacy-768x432.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/The-Current-Violent-White-Supremacy-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Jigsaw is a unit within Google that relies on technology to investigate global problems, such as human trafficking, terrorism, cybercrime, and many other societal threats. The Current is Jigsaw\u2019s publication that ensures access to information, in particular to all those who live in oppressive societies. In their <a href=\"https:\/\/jigsaw.google.com\/the-current\/white-supremacy\/\" target=\"_blank\" rel=\"noopener\">second edition<\/a>, which has <a href=\"https:\/\/winners.webbyawards.com\/2021\/websites-and-mobile-sites\/features-design\/best-individual-editorial-feature-indbrandorg\/177620\/jigsaw-the-current-the-violent-white-supremacy-issue\" target=\"_blank\" rel=\"noopener\">won the prestigious Webby award<\/a>, they tackle the subject of violent white supremacy. At first glance, the top section on the homepage seems plain white. But as you move the cursor around, you will see an illustration of a child with their arms outstretched, along with several more pairs of hands. The pointer reveals parts of the image in its wake, but when the movement stops, everything becomes white again save for the area where you\u2019ve stopped the mouse. <strong>This is the only section on the site where the cursor interacts in this way with the content, ensuring an impressive introduction to the issue.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"samuel-day\"><\/a>Samuel Day<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"545\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Samuel-Day.jpg\" class=\"attachment-full size-full\" alt=\"Samuel Day\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Samuel-Day.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Samuel-Day-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Samuel-Day-768x432.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Samuel-Day-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.samuelday.de\/\" target=\"_blank\" rel=\"noopener\">Samuel Day<\/a> is a Berlin-based designer. His idiosyncratic website provides an immersive insight into his creative mind. The stunning scroll-triggered animations take you on a peculiar journey filled with stunning illustrations that tell you Samuel\u2019s story. <strong>The cursor is shaped like an eye that occasionally even blinks. All the illustrated characters on the site have their eyes designed in the same way.<\/strong> When you reach the section with the train passing by, you will notice that the passengers actually embody Samuel\u2019s projects. On hover, the eyeball turns into an animated logo of the company in question, inviting you to click on it and explore the project in depth. As the color of the background changes, so does the color of the cursor. This website is a great example of how good design can make a cursor a part of the creative story that illustrates a designer\u2019s attention to detail as well as their skillset.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"groupe-castor-pollux\"><\/a>Groupe Castor &amp; Pollux<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"546\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Groupe-Castor-Pollux.jpg\" class=\"attachment-full size-full\" alt=\"Groupe Castor &amp; Pollux\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Groupe-Castor-Pollux.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Groupe-Castor-Pollux-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Groupe-Castor-Pollux-768x433.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Groupe-Castor-Pollux-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/rse.castoretpollux.com\/en\" target=\"_blank\" rel=\"noopener\">Groupe Castor &amp; Pollux<\/a> is a digital communication group. On the page where they discuss their CSRs (Corporate Social Responsibilities), you can see <strong>a beautiful oversized pointer<\/strong> in action. The round cursor is blue, but toward the edges, the intensity of the color slightly fades, making the pointer look like it has a slight <a href=\"https:\/\/qodeinteractive.com\/magazine\/beautiful-gradient-websites\/\">gradient effect<\/a>. <strong>When you place it on the hero text, it becomes huge<\/strong> and a down-facing arrow appears within the circle, instructing you to continue scrolling to discover more about the company\u2019s CSR experience. In some other sections, the cursor colors otherwise black typography in vibrant pink and purple gradients. Again, text appears inside of it, inviting you to read more on a particular topic. <strong>By implementing these effects, the designers not only made sure they would direct the users attention to specific elements on the site, but also improved the overall UX by providing clear signals indicating what the user should do next.<\/strong> They also added some purely decorative interactions. For example, when the cursor is placed on imagery, the image shifts slightly, and then starts following the movement of the mouse. On some other pages of the site, the pointer\u2019s design is equally interesting. For example, on the \u201cAgence\u201d page,<strong> the oversized cursor turns black typography into outlined lettering. It also reveals some background imagery that can only be seen within the borders of the cursor.<\/strong> Outside of the edges of the pointer, the background remains white.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"the-new-company\"><\/a>The New Company<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"545\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/The-New-Company.jpg\" class=\"attachment-full size-full\" alt=\"The New Company\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/The-New-Company.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/The-New-Company-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/The-New-Company-768x432.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/The-New-Company-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/www.new.company\/\" target=\"_blank\" rel=\"noopener\">The New Company<\/a> is a strategic design agency based in San Francisco and Los Angeles. Their website is filled with beautiful imagery that depicts the studio\u2019s creativity. Photos are thoughtfully arranged on the white background and their vibrancy breaks the calmness of the neutral backdrop. Another particularly prominent element on the site is the red cursor. Its color is eye-catching and intense, which allows it to stand out even when you place it on colorful pictures. <strong>The pointer is shaped like a circle, but when you move it around, you\u2019ll see it split into two parts, with a smaller circle in front and a larger one following it with a very dynamic motion effect. As soon as the movement stops, the circles merge again.<\/strong> While located on the slider at the top of the site, the cursor will transform into triangular arrows as you move it to either edge of the screen, inviting you to explore all of the slides. This seemingly small interaction is, in fact, a great and unobtrusive way of making the website exploration more intuitive and ensuring better user experience on your site. The pointer is, by default, oversized. But in some sections, when you place it on the displayed images, its size decreases. On most sites, usually, the opposite happens, but the New Company decided to switch things up a bit and surprise viewers. Hover effects are engaging, with featured videos playing the moment you hover over photos.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"glenn-catteeuw\"><\/a>Glenn Catteeuw<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"545\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Glenn-Catteeuw.jpg\" class=\"attachment-full size-full\" alt=\"Glenn Catteeuw\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Glenn-Catteeuw.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Glenn-Catteeuw-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Glenn-Catteeuw-768x432.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Glenn-Catteeuw-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/glenncatteeuw.com\/\" target=\"_blank\" rel=\"noopener\">Glenn Catteeuw<\/a> is a multidisciplinary designer and art director. The background on his one-page website is designed as a grainy, grey canvas, giving off cinematic vibes. The content is in black-white. There are also lots of outlined geometric shapes that slightly move on hover, awakening from their default inactive state. The cursor is shaped like an arrow until you place it over an image. It then turns into a<strong> billowy shape that adds a negative effect to a small portion of the photo.<\/strong> As you move the cursor around, the negative splotch follows its movement. This unusual detail amplifies the site\u2019s alternative vibe and makes project presentations more effective and eye-catching.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"julie-guzal\"><\/a>Julie Guzal<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"545\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Julie-Guzal.jpg\" class=\"attachment-full size-full\" alt=\"Julie Guzal\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Julie-Guzal.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Julie-Guzal-300x169.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Julie-Guzal-768x432.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/07\/Julie-Guzal-620x349.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<a href=\"https:\/\/julieguzal.fr\/en\/\" target=\"_blank\" rel=\"noopener\">Julie Guzal<\/a> is a freelance designer. Her portfolio website looks minimalist, starting off with Julie\u2019s simple introduction on a plain white background.<strong> The peacefulness of the layout is gently shaken up by the cursor that leaves a bubbly trace in its wake, with animated dots slowly evaporating from the screen.<\/strong> The cursor trail is colored in an elegant deep green shade, breaking the monochromatic character of the opening slide. As soon as you start to scroll down the page, the dancing dots disappear from the view, leaving the plain white arrow on the screen. This entire site\u2019s simplicity beautifully complements the vibrant examples of Julie\u2019s works that appear in the viewport with each new scroll, allowing them to capture the viewer\u2019s undivided attention.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Closing Words<\/h2>\n<p>[\/vc_column_text][vc_column_text]Even though they are most often small in size, mouse cursors offer a lot of room for expressing your creativity and improving the user experience on your site. Sure, you can always go for the tried-and-true arrow or hand design option. But users are guaranteed to appreciate innovative pointer designs that can not only complement the aesthetic of a site but also make the entire presentation more memorable.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We recognized those qualities on the sites featured on our list and we enjoyed exploring their content using some truly terrific mouse pointers. As you can see, in a lot of cases mouse pointers become crucial elements of a site, ensuring an easy, intuitive, and interesting browsing experience.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We hope you will find these cursor designs just as amusing, cool, and beautiful as we did, and that you will use them as inspiration when coming up with an innovative mouse pointer for your own website or next project. You can go for interesting graphic solutions, use the cursor to ignite color changes on sliders, or add engaging hover effects to your content. The possibilities are endless. At the end of the day, a beautifully designed cursor is, on its own, a great addition to a project, but you can further enhance the appeal of your website if you manage to implement the cursor into the overall experience and use it to both amuse and guide visitors.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Regardless of their small size, mouse cursors offer a lot room for expressing your creativity. Take a look at this collection of examples that illustrate how imaginative cursors can enhance the appeal of a site and improve the overall user experience on it<\/p>\n","protected":false},"author":4,"featured_media":27356,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[30,125,40,43],"class_list":["post-27330","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-creative","tag-cursors","tag-inspiration","tag-showcase"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/27330","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=27330"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/27330\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/27356"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=27330"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=27330"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=27330"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}