A perfect fit for stylish sites
The cursor
There are 6 main states that you assign to the cursor based on different elements on the page. The options are endless though as you can add multiple variations of these on a single page.
Default
The default setup is the one that you see on all general areas of this page. In addition you can set the default mouse cursor to be hidden (which we have done on this page)
Links
On buttons and links (or any other element that you wish) the cursor enters 'pointer' mode and can be styled in a particular way. Here we make the cursor bigger and largely transparent.
Hover over this link to see this in action.
Text
You can set the cursor to contain text over certain elements.
Hover over this box to see this in action.
Icon
You can set the cursor to contain an icon over certain elements.
Hover over this box to see this in action.
Image
You can set the cursor to contain an image over certain elements. The media can additionally be set to pick up any effects and styles (more information below).
Hover over this box to see this in action.
New
Video
You can set the cursor to contain a video over certain elements. The media can additionally be set to pick up any effects and styles (more information below).
Hover over this box to see this in action.
New
Icon set
Magic Mouse 2 comes with its own set of icons that can be used as cursor content.
Effects and styles
Each style has some default settings (that can be adapted). In addition to that though there are numerous in-built effects and styles that can be added.
Long story short: you have total control!
Inverse
A quick style that can be applied is to invert the cursor colours. Which is useful when the default wouldn't stand out enough.
Size and colour
You have full control over the size and colour of the cursor too at all times. In this box we have set for it to be big, purple and with 50% opacity!
Blend modes
A nice effect can be acheived by setting the cursor to use a blend mode like 'Exclusion' (used here). It can have a dramatic effect when the cursor moves over text or images.
Mouse cursor
We have opted to hide the default mouse cursor on this page but you can choose to show or hide it wherever you like. We show it if the mouse is in this box.
Hover over these boxes to see the different effects
Use cases
Magic Mouse really comes into its own when used in conjuction with areas of interaction on a web page - i.e. to view blog posts, to launch a pop-up to, to zoom in on an image, to drag a slider etc. All of these interactions can be made clear to the user by adapting the cursor and/or by adding relevant content to the cursor.
Check out the examples below

Image gallery
If an image gallery is displayed then often the user will be able to click on images to show them in full screen. Showing a relevant icon or text in the cursor can really transform this interaction. Hover the cursor over all of the galleries in this example (using InStack's Iconic gallery).
Source blog
Blog links
Getting the visitor to view a blog post or an article can be improved by generating a cursor with a useful prompt. This example is the Source blog (and note that on this page we only use Magic Mouse in that single way. Other than linking to each post it is not visible on the page at all.).
You can see another live example in the FAQ section at the bottom of this page!
Get Magic Mouse 2
You can get this stack on its own or as part of our hugely discounted stacks bundle.
Our stacks bundle includes Magic Mouse 2 and ALL of our other stacks that are currently available. Buying as a bundle offers huge savings compared to buying the stacks separately. Currently the bundle consists of the following stacks:

Magic Mouse 2
Stunning, modern cursor effects to your RapidWeaver projects
Buy for
Buy for
Buy for
Over 60% off!

Stacks bundle
Our stacks bundle includes ALL of our stacks in one incredible bundle dea (along with an exclusive project file)!
Buy for
Buy for
Buy for
FAQs
Below are some of the most common questions about this and our other stacks.
Stack FAQs
If someone is using a touch device then they will interact with the page as they normally would and this will not affect them at all.
The cursor effect will not work within any iframe elements on your page.
The original Magic Mouse stack was far more limited than the current version. You could use a few different cursor styles and no option to add icons or text etc. One thing that it does that Magic Mouse 2 currently doesn't is offer a magnetic effect with the cursor and buttons.
General FAQs
Yes this stack has been designed to work in any framework. If you encounter any issues then please contact us with an example and we will do our best to resolve.
All our stacks use only local resources, collect no data and include no calls to remote servers or CDNs etc. As such the stacks are completely GDPR compliant.
We have a full supporting Knowledge Base including articles for all of our stacks and settings. If you can’t find what you need there then do not hesitate to reach out to us via your preferred channel.
The whole site has been built with Source micro framework. In addition, this page also uses (obviously). Finally, this FAQ section has been built with Toggle stack and the Bundle details section above uses Moreish stack.