Cursor Follow
betaA dot that trails the pointer on a spring inside a container and swells into a label over marked elements.
- Effects & motion
- 1 file
- 2 npm packages
- Accessibility notes
- Animates with motion
Loading the example…
pnpm dlx @dowel-ui/cli add cursor-follownpm packages installed: class-variance-authority, motion.
import { CursorFollow } from "@/components/ui/cursor-follow";Default
Gallery
<CursorFollow>
| Prop | Type | Default |
|---|---|---|
appearance | "solid" | "invert" | "blur" | "solid" |
followerClassNameClasses for the follower. | string | — |
hideCursorHides the system cursor inside the container. Off by default. | boolean | false |
Plus every attribute of <div>.
Purely decorative: the follower is aria-hidden and ignores the pointer, and the container adds no role or tab stop (the source's role="application" and tabIndex are dropped). A `data-cursor-text` label is shown only by the follower, so the same words must also be in the element's alt text or visible text. Nothing renders for touch input or under reduced motion. Hiding the system cursor is opt-in (`hideCursor`). The spring is `motion`, wrapped in MotionConfig reducedMotion="user".
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes