Dancepad

Getting started
Introduction Installation
Texts
Arc Title Blade Reveal Blended Hover Blur Reading Blur Reveal Counter Decode Hover Decode Reveal Fluid Gradient Highlight Hover Letter Launcher Looping Lines Mousefill Title Random Letters Scroll Reading Swap Hover Text Shimmer Twist Reveal Typed Underline Hover Unfold Hover Unfold Reveal 3D Swap Hover
Buttons
Anyside Button Arrow Button Arrow Button v2 Arrow Button v3 Arrow Icon Crystal Button Glowing Button Layer Button Marquee Button Marquee Button v2 Mask Button Modal Button Prism Button Ripple Button Ripple Button v2 Ripple Button v3 Shiny Button
Menus
Burger Circular Menu Dock Drawer Dropdown Dropdown megaMenu Dynamic Island Expanding Menu Focus Nav Gooey Nav Morphing Nav Multi Offcanvas Menu Offcanvas Menu Overlay Menu Sticky Header
Medias
Before/After Image Image Hotspots Image Reveal Parallax
Cursors
Cursor Cursor Slide Designer Cursor
Sliders
Infinite Slider Parallax Slider
Backgrounds
Border Beam Fluids Gradiently Grainy Particles Physics Spotlight Spotlight v2 Tiles
Cores
Accordion Back to Top Click and Copy Flipbox Glitchy Glowing Card Horizontal Marquee Interactive Divider Inverted Corner Mask Hover Motion Divider Observer Parallax Hover Progress Bar QR Code Scrollbar Smooth Scroll Stacking Cards Tabs Tippy Pixels Shimmer Card Vertical Marquee
Jose Tamu
January 11, 2025 /
Intermediate

Cursor

Demo

Description

Cursor works with states. States are those properties shown at the demo: Magnetic, Repel, Exclusion, Color, Skew…
In order to apply a state to the Cursor when an element is hovered you will have to link that Cursor’s state with the element.
Linking works with classes. So, if we want to make an element magnetic, then we have to apply a class to that element, like “my-magnetic”. Once set, at Cursor’s Magnetic state we will create a new magnetic item and set “my-magnetic” at the class input. That’s it. This is how all states work and each item created at the states will have it’s own customization controls.
Although linking states works with classes, it also admits tags selector. It is specially useful for example to apply “Hidden” state to all links at a page using the “a” tag selector.

Content tab

Cursor settings

CSS Cursor: the determines the CSS cursor to apply to user’s cursor at the page.
Color: determines the initial color of the Cursor.
Size: determines the initial size of the Cursor.
Active size: determines the size of the Cursor when the user makes a click.
Skew: determines the initial skew of the Cursor.
zIndex: determines the z-index of the Cursor.
Visible by default: wether the Cursor should be initially visible or not. If it isn’t visible, Cursor can become visible using Scale state. If it is visible, Cursor can be hidden using Hidden state.
Border radius: determines the border radius of the Cursor.
Speed: determines how much delay to apply to the Cursor to catch up user’s cursor.
Hide on leave: if true, Cursor will have a hide animation when the user leaves the site.
GSAP easing: you can choose from a wide variety of easings. Learn more about GSAP easings here.

Multiple Cursors

In order to have more than one Cursor at a page, then you will just need to create a new Cursor element. Each of the Cursors created will have it’s own settings and states, and the same element target can be shared by all of the Cursors at a page at any moment. This is so powerful, allowing you to create fancy Cursor trails.