Inspired by the shape-shifting sea god, Proteus Cursor is a powerful JavaScript library that turns the standard mouse pointer into a dynamic, interactive design element
Turns the default cursor into an elegant circle that is fully customizable with dynamic size, color and shadow effects.
Apply custom shadows to your cursor with complete control over color, intensity, and diffusion to create stunning visual effects
Enter text directly into the cursor to create interactive and informative experiences that follow your mouse movement.
The cursor can be drawn to specific elements on the page, creating a smooth and intuitive navigation experience.
Advanced effect that combines magnetic attraction with parallax movement of HTML elements for immersive interaction.
Change cursor and shadow colors in real time, with support for gradients and smooth transitions.
Customize cursor
Customize shadow
Customize the text
data-proteus-* AttributesYou can insert these data attributes inside HTML tags to trigger a behaviour when the mouse hovers over them.
| Attribute | Description | Example |
|---|---|---|
data-proteus-shape-size |
Sets a custom text to display inside the cursor. | "Click me!" |
data-proteus-shape-color |
Defines the color (hexadecimal) of the text displayed. | "#ff00ff" |
data-proteus-text-content |
Sets the font size of the cursor text. | "30px" |
data-proteus-text-color |
Changes the color of shape text (hexadecimal) | "#aaa" |
data-proteus-text-size |
Changes the size of shape text | "20px" |
data-proteus-text-weight |
Changes the weight of shape text. | "400" |
data-proteus-shadow-isEnabled |
Enables the shadow. | "true" |
data-proteus-shapeSize="80px"
data-proteus-shapeColor="#fff"
data-proteus-text="Hello"
data-proteus-textColor="#162394"
data-proteus-textSize="25px"
data-proteus-textWeight="500"
data-proteus-shadowIsEnabled="500"