Orbit
A moon circling the pointer. Its orbit widens over anything clickable.
npx shadcn@latest add https://hoverui.fun/Adds components/cursors/orbit.tsx. The CLI also installs the useCursor hook it runs on, once, into your hooks folder. The files are yours from there.
Move through the preview, then hover the controls and press.Open this on a computer to move it around: it follows a mouse, not a finger.
- Kind
- Space
- Hook
- useCursor
- Dependencies
- None
- License
- MIT
Usage
import { OrbitCursor } from "@/components/cursors/orbit";
export function Section() {
return (
<section>
<OrbitCursor />
{/* this section now wears Orbit */}
</section>
);
}Put it inside <body> in your root layout to wear it on every page. Nested cursors take over inside their own element.
Props
- className
- Colors the cursor through currentColor, e.g. text-pink-500. To read on any background, pass text-white mix-blend-difference, as this site does.
- Hover targets
- a, button, input, select, textarea, label, [role=button], [data-cursor-label]
Source
"use client";
import { useRef } from "react";
import { cursorRoot, useCursor } from "@/hooks/use-cursor";
/** A moon circles the pointer; its orbit widens over anything clickable. */
export function OrbitCursor({ className = "" }: { className?: string }) {
const s = useRef({ a: 0, r: 16 });
const ref = useCursor((p, el) => {
const st = s.current;
if (!p.reduced) st.a += p.dt * 3.2;
st.r += ((p.hover ? 28 : 16) - st.r) * p.ease(10);
const [ring, moon, dot] = el.children as HTMLCollectionOf<HTMLElement>;
ring.style.transform = `translate(${p.x}px, ${p.y}px) scale(${st.r / 16})`;
moon.style.transform = `translate(${p.x + Math.cos(st.a) * st.r}px, ${p.y + Math.sin(st.a) * st.r}px)`;
dot.style.transform = `translate(${p.x}px, ${p.y}px)`;
});
return (
<div ref={ref} aria-hidden className={`${cursorRoot} ${className}`}>
<div className="absolute size-8 -translate-1/2 rounded-full border border-current opacity-30" />
<div className="absolute size-2 -translate-1/2 rounded-full bg-current" />
<div className="absolute size-1.5 -translate-1/2 rounded-full bg-current" />
</div>
);
}
It runs on the useCursor hook, which has its own source and API.
More space cursors
- CometA bright head whose tail stretches out as you speed up. It swells inside a faint coma over controls.
- RocketThe nose is the pointer. It turns to face where you go; the engine roars over controls and cuts on press.
- AstronautDrifts behind the pointer on a slack tether, bobbing in zero gravity. Reels itself in over controls.
- UFOA saucer hovering above the pointer. Over anything clickable, it lowers a tractor beam onto it.
- ConstellationDraws a constellation as you move, star by star, fading out behind you. A click sets a bright one.
- Black holeBends the page round it like a lens and swallows dust from your path. Swells over controls; hold, and time slows.
- GalaxyA spiral galaxy turning round the pointer, its arms trailing as you move. Over controls the stars trace the outline; press for a supernova.
Made a cursor of your own? Contributed cursors carry their maker's name on their page.
Contribute a cursor