Skip to main content

Custom Cursor — Playground

move your pointer here · click for ripple/burst · pick a style →
Dot + Ring — options
Global
Sample option — updates as you tweak
'animation_cursor' => [
    'enable'       => 'yes',
    'color'        => [ 'predefined' => '', 'custom' => '#2f74e6' ],
    'size'         => 8,
    'hover_grow'   => 'yes',
    'magnetic'     => 'no',
    'blend'        => 'no',
    'click_ripple' => 'no',
    'click_burst'  => 'no',
    'style' => [
        'shape' => 'dot_ring',
        'dot_ring' => [
            'trail' => 0.18,
        ],
    ],
],

The Custom Cursor is site-wide — Theme Settings → Site-wide UX → Custom Cursor. style is a multi-picker (the shape + its own sub-options);color uses the theme color-preset picker (stored as [ 'predefined' => '', 'custom' => '#hex' ]). It auto-disables on touch / coarse pointers and honours reduced motion.

Move your pointer over the stage and pick a style on the right. This runs the real runtime — each style's own driver (the shared shape-follower, plus bespoke ones for spring, elastic, comet chains, particle pools, swarm trails, rope, sticky and spotlight) and the verbatim .upw-cursor-* CSS. Tweak Size / Color / Trail, toggle Hover grow, Magnetic, Blend and Click ripple / burst, and hover the demo targets to see grow / magnetic / sticky behaviour. The Sample option updates as you tweak.

Where it lives

The Custom Cursor is site-wide — Theme Settings → Site-wide UX → Custom Cursor. Turn on Enable cursor (off by default), pick a Style and configure it. It auto-disables on touch / coarse-pointer devices and honours reduce motion, and ships only the one style's CSS + JS.

A few styles need a live page

Magnify Lens, Image Reveal, Gooey Metaball, Ink Brush / Fluid Smear / Ripple Trail, Word Trail and Contextual Label rely on canvas, SVG filters, real page content or typography settings, so they aren't simulated here — they're documented on this page and work on a live site.

← Back to Custom Cursor