Cursor-Animations.css

Configurable predefined cursor animations. Hover over the boxes below to see the effects!

Magnetic Effects

Magnetic

Magnetic Strong

Magnetic Subtle

<div class="cursor-magnetic cursor-target" data-cursor data-cursor-var="true">
    Content
</div>

Radial

Radial Large

Radial Color

Radial Glow

Radial Rainbow

Radial Subtle

<div class="cursor-radial cursor-target" data-cursor data-cursor-var="true">
    Content
</div>

Parallax

Parallax Fast

Parallax Slow

<div class="cursor-parallax" data-cursor data-cursor-var="true">
    <div class="cursor-target">Content</div>
</div>

Glow

Glow Color

Glow Strong

<div class="cursor-glow cursor-target" data-cursor data-cursor-var="true">
    Content
</div>

Scale

Scale Dynamic

Scale Large

<div class="cursor-scale cursor-target" data-cursor>
    Content
</div>

Rotate

Rotate Follow

Rotate Reverse

<div class="cursor-rotate" data-cursor data-cursor-var="true" data-cursor-degrees="true">
    <div class="cursor-target">Content</div>
</div>

Opacity Fade

Opacity Dynamic

<div class="cursor-opacity" data-cursor>
    <div class="cursor-target">Content</div>
</div>

Customize animations using CSS variables:

.cursor{
    --cursor-delay: 0s;
    --cursor-duration: 1s;
    --cursor-blend: ease-out;
    --cursor-direction: normal backwards;
}

Back to Documentation