Text Icons Effect

An interactive React component that enhances the cursor with dynamic text and icons, adapting in real time based on the hovered element to provide contextual feedback.

Search Area

Click to Navigate

Video Area

1// @ts-nocheck
2'use client';
3
4import React, { useState } from 'react';
5import { useMouse } from '@/hooks/use-mouse';
6import { Edit, Search, Play, Link } from 'lucide-react';
7
8const TextIconCursor = () => {
9  const [mouseState, ref] = useMouse();
10  const [cursorContent, setCursorContent] = useState(null);
11
12  const icons = {
13    edit: <Edit size={16} />,
14    search: <Search size={16} />,
15    play: <Play size={16} />,
16    link: <Link size={16} />,
17  };
18
19  return (
20    <div className='relative w-full h-full ' ref={ref}>
21      {mouseState.x !== null && mouseState.y !== null && (
22        <div
23          className='fixed pointer-events-none z-50'
24          style={{
25            left: mouseState.x,
26            top: mouseState.y,
27            transform: 'translate(-50%, -50%)',
28          }}
29        >
30          {/* Main cursor */}
31          <div className='w-4 h-4 bg-white rounded-full mix-blend-screen' />
32
33          {/* Text/Icon container */}
34          {cursorContent && (
35            <div
36              className='absolute left-6 top-0 bg-white/90 text-gray-900 px-3 py-1.5 rounded-full whitespace-nowrap flex items-center gap-2 text-sm animate-fade-in'
37              style={{
38                animation: 'fadeIn 0.2s ease-out',
39              }}
40            >
41              {typeof cursorContent === 'string'
42                ? cursorContent
43                : icons[cursorContent]}
44            </div>
45          )}
46        </div>
47      )}
48
49      <div className='flex flex-col items-center justify-center h-full gap-6'>
50        <button
51          className='px-6 py-3 bg-white/10 text-white rounded-lg transition-colors'
52          onMouseEnter={() => setCursorContent('edit')}
53          onMouseLeave={() => setCursorContent(null)}
54        >
55          Edit Button
56        </button>
57
58        <div
59          className='px-6 py-3 bg-white/10 text-white rounded-lg cursor-help'
60          onMouseEnter={() => setCursorContent('Click to search')}
61          onMouseLeave={() => setCursorContent(null)}
62        >
63          Search Area
64        </div>
65
66        <a
67          href='#'
68          className='px-6 py-3 bg-white/10 text-white rounded-lg'
69          onMouseEnter={() => setCursorContent('link')}
70          onMouseLeave={() => setCursorContent(null)}
71        >
72          Click to Navigate
73        </a>
74
75        <div
76          className='w-32 h-32 bg-white/10 rounded-lg flex items-center justify-center'
77          onMouseEnter={() => setCursorContent('play')}
78          onMouseLeave={() => setCursorContent(null)}
79        >
80          <span className='text-white'>Video Area</span>
81        </div>
82      </div>
83
84      <style jsx>{`
85        @keyframes fadeIn {
86          from {
87            opacity: 0;
88            transform: translateX(-10px);
89          }
90          to {
91            opacity: 1;
92            transform: translateX(0);
93          }
94        }
95      `}</style>
96    </div>
97  );
98};
99
100export default TextIconCursor;
101

Installtion

1npm install lucide-react

useMouse

1'use client';
2import { type RefObject, useLayoutEffect, useRef, useState } from 'react';
3
4interface MouseState {
5  x: number | null;
6  y: number | null;
7  elementX: number | null;
8  elementY: number | null;
9  elementPositionX: number | null;
10  elementPositionY: number | null;
11}
12
13export function useMouse(): [MouseState, RefObject<HTMLDivElement>] {
14  const [state, setState] = useState<MouseState>({
15    x: null,
16    y: null,
17    elementX: null,
18    elementY: null,
19    elementPositionX: null,
20    elementPositionY: null,
21  });
22
23  const ref = useRef<HTMLDivElement | null>(null);
24
25  useLayoutEffect(() => {
26    const handleMouseMove = (event: MouseEvent) => {
27      const newState: Partial<MouseState> = {
28        x: event.pageX,
29        y: event.pageY,
30      };
31
32      if (ref.current instanceof Element) {
33        const { left, top } = ref.current.getBoundingClientRect();
34        const elementPositionX = left + window.scrollX;
35        const elementPositionY = top + window.scrollY;
36        const elementX = event.pageX - elementPositionX;
37        const elementY = event.pageY - elementPositionY;
38
39        newState.elementX = elementX;
40        newState.elementY = elementY;
41        newState.elementPositionX = elementPositionX;
42        newState.elementPositionY = elementPositionY;
43      }
44
45      setState((s) => ({
46        ...s,
47        ...newState,
48      }));
49    };
50
51    document.addEventListener('mousemove', handleMouseMove);
52
53    return () => {
54      document.removeEventListener('mousemove', handleMouseMove);
55    };
56  }, []);
57
58  return [state, ref];
59}

Props

Prop	Type	Default	Description
`text`	`string`	`'Hello!'`	The text to display next to the cursor.
`color`	`string`	`'#000'`	The color of the text and the dot.
`font`	`string`	`'Arial, sans-serif'`	The font of the text.
`textSize`	`number`	`14`	The size of the text in pixels.
`gap`	`number`	`5`	The gap between the dot and the text in pixels.
`element`	`HTMLElement`	`undefined`	The HTML element where the cursor effect will be applied. If not specified, the effect applies to the document.
`size`	`number`	`10`	The size of the dot in pixels.

Scaling Cursor 3D Cursor