ULTRAKIT · WIDGET #100

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 widgets
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
KivoraBrand identity
LumoraPackaging
OrbitlyWeb design
Portfolio · “View”Hover a project and the cursor turns into a “View” bubble — no extra buttons needed.
▶ 2:14Our story in two minutesShowreel · 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.
Running · sample productTrail Runner$89
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.
BUILT IN

Everything that makes a custom cursor feel good instead of getting in the way.

areasrulesmagneticcarettouch safereduced motion
🗺
Page or area
One cursor for the whole page, or different cursors in different sections — like this page.
🏷
Hover rules
Any selector → grow, text, icon, stick, hide, color or invert. Or use data-cursor attributes.
🧲
Magnetic elements
Buttons and icons lean toward the pointer — you set how strongly.
💨
Smooth & stretchy
Set how much the follower lags, and let it stretch with speed.
⌨
Text-field caret
Over inputs the cursor becomes a thin caret so typing still feels right.
📱
Touch safe
Phones and tablets keep their normal behavior — nothing to tap around.
♿
Reduced motion
Visitors who ask for less motion get no lag and no trails.
🪶
Lightweight
One shared animation loop; only the cursor you are using runs.

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

201 premium elements, Interactive Cursor included.

Explore All Demos Browse All Widgets