Kunal's Build
← Back to Home

Text Label

Cursor shows a custom text label that follows elegantly. Perfect for portfolio hover states.

textinteractiveportfolio
HTML
<!-- Paste before </body> -->
<div id="cursor-label">VIEW →</div>
<div id="cursor-dot-label"></div>

<!-- Add data-cursor-text="VIEW →" to any element to show the label on hover -->
<div data-cursor-text="VIEW →">Hover me</div>

How to Use

  1. Copy the HTML

    Add the HTML structure before your closing </body> tag

  2. Add the CSS

    Include the CSS in your stylesheet or <style> tag

  3. Include the JavaScript

    Add the JavaScript code in a <script> tag or external file

  4. Test it out

    Move your mouse to see the custom cursor in action!

Customization

Change Color

Update the color values in CSS to match your brand

#ef4444

Adjust Size

Modify width and height properties to scale the cursor

Animation Speed

Change transition duration values for faster/slower animations

Explore More Cursors

Dot + Ring

Classic two-layer cursor with a sharp dot and trailing ring. Clean and versatile.

Glow Orb

Soft glowing orb that pulses and leaves a luminous trail. Perfect for dark premium sites.

Magnetic Snap

Cursor snaps and distorts toward interactive elements like a magnet. Ultra-premium feel.