ETLondonDubaiTokyoSydneyLos Angeles57°FNew YorkNewsletter
Most read
Trending#Entertainment#Tech#Finance

No. 60 of 106

Interactive Cursor

A custom cursor for portfolio-style pages.

    On this page
  1. Interactive Cursor
  2. Pick a personality, see it live
  3. The cursor that explains itself
  4. Feedback you can feel
  5. Point, hover, delight.
NEWSON · ELEMENT NO. 60

Move your mouse. This whole page uses “Dot + ring” with stretch and magnetic buttons — and every box below runs its own cursor, so you can try all 17 styles and the hover actions on one page.

Try the styles Browse all elements
Liquid blobs follow youGooey style · click for a particle burst
17 CURSOR STYLES

Each box has its own cursor — just move your mouse into it. Colors, size, smoothness and blend mode are yours to set.

dot + ringblend blobtrailcrosshairfocus frameemojiimagegooeysparklesflashlightarrowelasticribbon
Dot + ring
Dot + ringThe classic agency cursor.
Ring
RingMinimal portfolios.
Dot
DotClean SaaS sites.
Invert me
Blend blobInverts whatever it covers — bold studios.
Soft glow
Soft glowA spotlight glow for dark hero sections.
Comet trail
Comet trailPlayful launches and games.
Text bubble
Text bubbleTells visitors what to do — “Drag”.
Crosshair
CrosshairDesign tools, maps and data sites.
Hover a button
Focus frameWraps whatever you hover — try the button.
Emoji
EmojiFun brands — any emoji or character.
Image / logo
Image / logoYour own logo as the pointer.
Gooey blobs
Gooey blobsLiquid, organic motion.
Sparkles
SparklesBeauty, gifts and celebrations.
Lights out — use the torchMove around to explore
FlashlightMystery reveals and escape rooms.
Gradient arrow
Gradient arrowA branded pointer that tilts as it moves.
Elastic ring
Elastic ringStretches with your speed.
Ribbon trail
Ribbon trailDraws a smooth ribbon — creative studios.
HOVER ACTIONS · REAL SITES

Show text, show an icon, stick to an element, hide, change color or invert — with hover rules in the panel, or data-cursor attributes on any element.

texticonstickhidecolorinvertmagneticdata-cursor
Election 2026Politics
The Heat MapClimate
Inside the FedBusiness
Portfolio · “View”Hover a project and the cursor turns into a “View” bubble — no extra buttons needed.
▶ 2:14Our story in two minutesVideo · sample cover
Showreel · play iconVideo covers show a play bubble, so visitors know it plays.
010203040506070809
Gallery · drag to scrollGrab and drag the row sideways. The cursor says “Drag” and squeezes while you pull.
Ready to launch?
Landing page · magnetic buttonsButtons lean toward the pointer and the cursor sticks to their shape.
Make it yours.Hover the headline
Studio headline · invertOver the big headline the cursor turns into a large circle that inverts the text.
Newsroom store · sample itemFront Page Print$29
Shop · zoom & addThe product photo shows a zoom icon, the button shows a cart. Click for a burst.
CLICK EFFECTS

Pick what happens on click. Text fields always get a thin blinking caret instead.

rippleburstsquishtext caret
Click anywhereRipple
RippleA ring spreads from the click.
Click anywhereParticle burst
Particle burstStars and dots fly out.
Click anywhereSquish
SquishThe cursor presses down like a button.

Projects, products and the showreel on this page (Kivora, Lumora, Orbitly, Trail Runner) are fictional samples.

106 elements for news, Interactive Cursor included.

Explore All Demos Browse All Elements