What it looks like
When the page loads, the usual arrow disappears and an SVG arrow with rounded corners grows from nothing to full size. It follows the mouse as if tied to a soft elastic band, arriving a moment later without bouncing. As the mouse moves, the tip turns to point where it is going, and the arrow shrinks slightly during the motion before returning to full size right after. Its color follows the surrounding text color, so it matches the light or dark theme of the site.
You may be looking for this if you asked for something like
- replace the mouse arrow with a nicer cursor
- a custom cursor with my brand icon
- a cursor that lags slightly behind the mouse, very smooth
- a mouse arrow that rotates toward the direction I move
- make my site feel premium with its own cursor
- that different cursor you see on agency and portfolio sites
Also known as
- custom cursor
- rotating arrow cursor
- spring cursor
- follow cursor
- animated cursor
- cursor replacement
When to use
- Premium company sites that want a cursor in the brand style
- Portfolios and agency pages where interaction details matter
- Launch landing pages with little text and few forms
When to avoid
- Apps, dashboards and forms, where the system arrow is more predictable
- Low-vision audiences who enlarge the system cursor in their settings
- Sites visited mostly on phones, which have no cursor at all
How to ask your AI
Replace the mouse arrow with a custom cursor that follows the pointer with spring physics and rotates toward the movement, using my brand icon, disabled on touch screens and with a non-animated version for reduced motion.
With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising.
Questions about Planador
Does Planador work on phones?
Phones have no cursor. Planador only listens to mouse movement, so on touch screens the arrow simply moves to the spot that was tapped. It is best to show the component only on devices with a mouse and keep the system arrow elsewhere; the THM Componentes prompt asks for mobile testing.
Can I use my logo as the cursor in Planador?
Yes. Planador takes any Vue component through its cursor prop to replace the default arrow, such as an SVG logo, a circle or an icon. The spring that drives the position is adjustable too, through the springConfig prop with damping, stiffness and mass.
Does Planador work with Nuxt and SSR?
Yes, as long as it runs only in the browser. Planador changes the body style as soon as it is created to hide the system arrow, and that needs the document object. In Nuxt, wrap it in ClientOnly or use a .client.vue file.
