On a portfolio or agency site, the custom cursor works best as a quiet signature: a small dot or ring that follows the mouse, grows over links and shows "View" over your projects. Bolder ideas — circular text, a splash on a dark hero, your logo as the pointer — work in one place, not everywhere. Here are seven patterns and how to build each with Ultimate Cursor.
1. Dot and ring (free)
The classic agency cursor: a small dot or ring in your accent colour. With Ultimate Cursor's free Shape cursor, pick a circle or ring, set the colour, size and border, and save. The ring grows over links and buttons automatically.
Use it: site-wide, as the base for everything else. See the shape cursor.
2. "View" over projects (Pro)
The single most useful portfolio cursor. Over a project thumbnail the cursor scales up and shows "View" (or "Open", "Case study"), so visitors know the whole card opens.
With Pro's Interactive Hover, add your project grid's CSS selector (for example .wp-block-post-template li or your builder's portfolio class), set the label, scale and colours, and save. Add a second rule for video thumbnails with "Play". The interactive hover guide has the full setup.
3. Circular text badge (Pro)
Your text wraps around the cursor as a rotating badge — "scroll to explore", "view work", your studio name. It's distinctive enough to be remembered and works especially well on an editorial or fashion portfolio.
Use it in the hero only (Pro targeting by CSS selector), then hand back to the dot and ring. See circular text.
4. Magnetic buttons (Pro)
The cursor pulls toward a button as it approaches and snaps back as it leaves. It makes the main call to action — "Start a project", "Get in touch" — feel responsive. Keep the pull subtle and apply it to one or two buttons, not every link.
5. Your mark as the pointer (free)
Use your logo mark or a simple icon as the cursor. The free Image cursor accepts your own image; the free Icon cursor has 113 built-in icons. With Pro you can set the hotspot — the point that clicks — so an arrow-shaped mark clicks at its tip.
Keep it small and simple; a full wordmark is unreadable at cursor size. See the image cursor.
6. Splash on a dark hero (free)
The Splash effect leaves a fluid ripple, like ink in water. It's striking on a dark, minimal hero with plenty of empty space — and too much on a busy page. Pro adds colour, radius and force settings, so you can match it to your palette and calm it down. With Pro targeting, keep it to the hero section. Try Splash.
7. Different cursors for different sections (Pro)
A portfolio usually has a few distinct areas: the hero, the work grid, an about section, a contact form. Pro's multiple cursor configurations let each have its own cursor — circular text in the hero, "View" over the grid, the plain dot everywhere else. See multiple cursors.
Pair the cursor with a background
Ultimate Cursor also includes two free animated backgrounds — Antigravity (floating particles) and Light Pillar (a glowing vertical light). On a dark portfolio, a background plus a small dot cursor reads as a designed experience. If you want more background styles, Animation Kit adds WebGL backgrounds to individual blocks.
Rules that keep it classy
- Small and high-contrast. It should be visible on both your darkest and lightest work.
- Never over the work for long. Trails and splashes on top of project images compete with the projects.
- Forms stay normal. Ultimate Cursor keeps the text cursor in form fields so typing feels normal.
- Phones get the default. The custom cursor is hidden on touch devices automatically.
- Respect reduced motion. Animations switch off for visitors who ask their device to reduce motion.
What you need
| Idea | Free | Pro |
|---|---|---|
| Dot and ring | Yes | Yes |
| Logo or icon cursor | Yes | Yes, plus hotspot |
| Splash on a dark hero | Yes (site-wide) | Yes, with settings and targeting |
| "View" / "Play" labels | — | Yes |
| Circular text badge | — | Yes |
| Magnetic buttons | — | Yes |
| Different cursors per section | — | Yes |
Ultimate Cursor Pro starts at $24.99 a year. Every idea above can be tried in the browser on the Ultimate Cursor demo site before you install anything.