Back to Blog

7 Custom Cursor Ideas for Portfolio and Agency Websites (WordPress)

Seven custom cursor patterns that work on portfolio and agency sites — dot and ring, "View" labels, circular text, image hotspots, splash on dark pages and more — with how to build each in WordPress.

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

IdeaFreePro
Dot and ringYesYes
Logo or icon cursorYesYes, plus hotspot
Splash on a dark heroYes (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.

Common Questions

A small dot or ring site-wide, with a "View" label over project thumbnails, suits most portfolios. It looks crafted and tells visitors the work is clickable.

Yes. Ultimate Cursor Pro's Interactive Hover shows a label inside the cursor over the elements you choose by CSS selector, such as your project grid.

Ultimate Cursor Pro's Circular Text cursor wraps your text around the pointer as a rotating badge, with settings for radius, direction and speed.

Not if it is small, high-contrast and consistent. Avoid long trails over your work, keep the normal text cursor in forms, and respect visitors who reduce motion.

Get new guides and releases by email

Occasional emails when we publish a guide or ship a notable plugin update. No spam — unsubscribe any time.

We only use your email to send these updates. See our privacy policy.