Interactive Cursor Design

Also called: Custom cursor UI, Magnetic cursor, Blend-mode cursor

The pointer becomes the star: an inverting cursor blob that grows and labels what it touches, magnetic buttons and spotlight reveals.

“Cursor-as-character”Interaction‑ledEra: 2018 → today (award-site era)EdgyPlayfulBoldLuxury

Open full screen ↗

interactive-cursor-design / landingEN

interactive-cursor-design / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm0pxRadius md0pxRadius lg0pxRadius xl0pxDensity×1.1Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

custom cursor blobmix-blend differencemagnetic buttonsspotlight hovercursor labelsoversized wide display typegallery whitespacethin black rules

Interactive Cursor Design replaces the arrow with a large blend-mode blob that inverts whatever it passes over, trails the pointer with a soft lag, and swells into a labelled disc (“View”, “Drag”, “Play”) over interactive things. Buttons are magnetic — they lean toward the pointer before you click — and cards light up with a spotlight that follows the mouse. The page around it is a quiet gallery: warm bone background, black ink, an ultramarine accent, oversized wide display type and thin black rules, so the cursor has a stage. On touch screens the same language becomes tap spotlights.

Best for

Design studios, agencies and portfolios
Fashion, art and music campaign sites
Product reveal and launch microsites
Award-style showcases where exploration is the point

Avoid for

Forms-heavy apps and checkouts
Accessibility-critical or older audiences
Touch-only products (the effect disappears)

✓ Do

Keep the native cursor available for text fields and when JS fails
Ease the blob with lerp 0.15–0.25; shrink it to ~0.55 over links and grow it to ~1.25 with a label over cards and media
Give every hover reveal a keyboard focus equivalent

✕ Don't

Don’t hide where the click lands — keep a small precise dot inside the blob
Don’t make magnetic pull larger than ~10px
Don’t run the cursor on touch devices

Not to be confused with

Micro-interactions →Micro-interactions give feedback on the control you press; Interactive Cursor Design makes the pointer itself a visible, blend-mode character that reacts before you click.Exaggerated Minimalism →Exaggerated Minimalism is static oversized type in empty space; this style uses a similar gallery stage but the cursor blob, magnetism and spotlights carry the identity.Kinetic Typography →Kinetic Typography animates the letters on its own; here type stays still and the cursor reveals and inverts it.

On mobile

There is no cursor on touch: translate the blob into a tap spotlight (an inverting circle that blooms where the finger lands) and keep magnetic and hover reveals as pressed states. Never hide content behind hover.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinSyne · 700/800

The quick brown fox

Heading · ThaiK2D · 700/800

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinWork Sans · 400/500/600

Clear words make shared decisions.

Body · ThaiIBM Plex Sans Thai · 400/500/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

K2D’s wide, geometric loopless forms with a techno twist echo Syne’s eccentric wide display; IBM Plex Sans Thai is the neutral grotesque that sits quietly beside Work Sans.

Colour palette

Light

Dark

Design tokens

Radius	`sm 0px · md 0px · lg 0px · xl 0px · pill 999px`
Border	`1px`
Shadow	`none`
Display	`clamp(3.2rem, 8.5vw, 7.6rem)`
Motion	`350ms cubic-bezier(.16,1,.3,1)`
Density	`×1.1`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Interactive Cursor Design (interactive-cursor-design) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Work+Sans:wght@400;500;600&family=Space+Mono:wght@400&family=K2D:wght@700;800&family=IBM+Plex+Sans+Thai:wght@400;500;600&display=swap
 */
:root {
  --radius: 0px;
  --background: #EDEAE3;
  --foreground: #0C0C0C;
  --card: #F6F4EF;
  --card-foreground: #0C0C0C;
  --popover: #F6F4EF;
  --popover-foreground: #0C0C0C;
  --primary: #0C0C0C;
  --primary-foreground: #EDEAE3;
  --secondary: #2B2BFF;
  --secondary-foreground: #FFFFFF;
  --muted: #E3DFD6;
  --muted-foreground: #55524C;
  --accent: #E3DFD6;
  --accent-foreground: #0C0C0C;
  --destructive: #C8321C;
  --border: #0C0C0C;
  --input: #0C0C0C;
  --ring: #0C0C0C;
  --chart-1: #0C0C0C;
  --chart-2: #2B2BFF;
  --chart-3: #FF4D2E;
  --chart-4: #8E8A82;
  --chart-5: #C9C5BC;
  --sidebar: #F6F4EF;
  --sidebar-foreground: #0C0C0C;
  --sidebar-primary: #0C0C0C;
  --sidebar-primary-foreground: #EDEAE3;
  --sidebar-accent: #E3DFD6;
  --sidebar-accent-foreground: #0C0C0C;
  --sidebar-border: #0C0C0C;
  --sidebar-ring: #0C0C0C;
}

.dark {
  --background: #0C0C0C;
  --foreground: #EDEAE3;
  --card: #151515;
  --card-foreground: #EDEAE3;
  --popover: #151515;
  --popover-foreground: #EDEAE3;
  --primary: #EDEAE3;
  --primary-foreground: #0C0C0C;
  --secondary: #6B6BFF;
  --secondary-foreground: #0C0C0C;
  --muted: #1C1C1C;
  --muted-foreground: #A29E96;
  --accent: #1C1C1C;
  --accent-foreground: #EDEAE3;
  --destructive: #FF6A4D;
  --border: #EDEAE3;
  --input: #EDEAE3;
  --ring: #EDEAE3;
  --chart-1: #EDEAE3;
  --chart-2: #6B6BFF;
  --chart-3: #FF6A4D;
  --chart-4: #77736C;
  --chart-5: #3C3A36;
  --sidebar: #151515;
  --sidebar-foreground: #EDEAE3;
  --sidebar-primary: #EDEAE3;
  --sidebar-primary-foreground: #0C0C0C;
  --sidebar-accent: #1C1C1C;
  --sidebar-accent-foreground: #EDEAE3;
  --sidebar-border: #EDEAE3;
  --sidebar-ring: #EDEAE3;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Interactive Cursor Design (interactive-cursor-design) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Work+Sans:wght@400;500;600&family=Space+Mono:wght@400&family=K2D:wght@700;800&family=IBM+Plex+Sans+Thai:wght@400;500;600&display=swap
 */
@theme {
  --color-bg: #EDEAE3;
  --color-surface: #F6F4EF;
  --color-surface-2: #E3DFD6;
  --color-text: #0C0C0C;
  --color-text-muted: #55524C;
  --color-primary: #0C0C0C;
  --color-on-primary: #EDEAE3;
  --color-secondary: #2B2BFF;
  --color-on-secondary: #FFFFFF;
  --color-accent: #FF4D2E;
  --color-border: #0C0C0C;
  --color-success: #1F7A45;
  --color-warning: #9A5B00;
  --color-danger: #C8321C;
  --color-chart-1: #0C0C0C;
  --color-chart-2: #2B2BFF;
  --color-chart-3: #FF4D2E;
  --color-chart-4: #8E8A82;
  --color-chart-5: #C9C5BC;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-pill: 999px;
  --shadow-sm: 0 0 #0000;
  --shadow-md: 0 0 #0000;
  --shadow-lg: 0 30px 60px -30px rgba(12,12,12,0.35);
  --font-heading: "Syne", "K2D", system-ui, sans-serif;
  --font-body: "Work Sans", "IBM Plex Sans Thai", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, "IBM Plex Sans Thai", monospace;
}

.dark {
  --color-bg: #0C0C0C;
  --color-surface: #151515;
  --color-surface-2: #1C1C1C;
  --color-text: #EDEAE3;
  --color-text-muted: #A29E96;
  --color-primary: #EDEAE3;
  --color-on-primary: #0C0C0C;
  --color-secondary: #6B6BFF;
  --color-on-secondary: #0C0C0C;
  --color-accent: #FF6A4D;
  --color-border: #EDEAE3;
  --color-success: #4CC383;
  --color-warning: #E0A43A;
  --color-danger: #FF6A4D;
  --color-chart-1: #EDEAE3;
  --color-chart-2: #6B6BFF;
  --color-chart-3: #FF6A4D;
  --color-chart-4: #77736C;
  --color-chart-5: #3C3A36;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Interactive Cursor Design (interactive-cursor-design). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Work+Sans:wght@400;500;600&family=Space+Mono:wght@400&family=K2D:wght@700;800&family=IBM+Plex+Sans+Thai:wght@400;500;600&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9294,
            0.9176,
            0.8902
          ],
          "hex": "#edeae3"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9647,
            0.9569,
            0.9373
          ],
          "hex": "#f6f4ef"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8902,
            0.8745,
            0.8392
          ],
          "hex": "#e3dfd6"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0471,
            0.0471,
            0.0471
          ],
          "hex": "#0c0c0c"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3333,
            0.3216,
            0.298
          ],
          "hex": "#55524c"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0471,
            0.0471,
            0.0471
          ],
          "hex": "#0c0c0c"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9294,
            0.9176,
            0.8902
          ],
          "hex": "#edeae3"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0.1686,
            1
          ],
          "hex": "#2b2bff"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.302,
            0.1804
          ],
          "hex": "#ff4d2e"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0471,
            0.0471,
            0.0471
          ],
          "hex": "#0c0c0c"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1216,
            0.4784,
            0.2706
          ],
          "hex": "#1f7a45"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6039,
            0.3569,
            0
          ],
          "hex": "#9a5b00"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7843,
            0.1961,
            0.1098
          ],
          "hex": "#c8321c"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0471,
            0.0471,
            0.0471
          ],
          "hex": "#0c0c0c"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0.1686,
            1
          ],
          "hex": "#2b2bff"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.302,
            0.1804
          ],
          "hex": "#ff4d2e"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5569,
            0.5412,
            0.5098
          ],
          "hex": "#8e8a82"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7882,
            0.7725,
            0.7373
          ],
          "hex": "#c9c5bc"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0471,
            0.0471,
            0.0471
          ],
          "hex": "#0c0c0c"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0824,
            0.0824,
            0.0824
          ],
          "hex": "#151515"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1098,
            0.1098,
            0.1098
          ],
          "hex": "#1c1c1c"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9294,
            0.9176,
            0.8902
          ],
          "hex": "#edeae3"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6353,
            0.6196,
            0.5882
          ],
          "hex": "#a29e96"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9294,
            0.9176,
            0.8902
          ],
          "hex": "#edeae3"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0471,
            0.0471,
            0.0471
          ],
          "hex": "#0c0c0c"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4196,
            0.4196,
            1
          ],
          "hex": "#6b6bff"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0471,
            0.0471,
            0.0471
          ],
          "hex": "#0c0c0c"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4157,
            0.302
          ],
          "hex": "#ff6a4d"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9294,
            0.9176,
            0.8902
          ],
          "hex": "#edeae3"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.298,
            0.7647,
            0.5137
          ],
          "hex": "#4cc383"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8784,
            0.6431,
            0.2275
          ],
          "hex": "#e0a43a"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4157,
            0.302
          ],
          "hex": "#ff6a4d"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9294,
            0.9176,
            0.8902
          ],
          "hex": "#edeae3"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4196,
            0.4196,
            1
          ],
          "hex": "#6b6bff"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4157,
            0.302
          ],
          "hex": "#ff6a4d"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4667,
            0.451,
            0.4235
          ],
          "hex": "#77736c"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2353,
            0.2275,
            0.2118
          ],
          "hex": "#3c3a36"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0471,
              0.0471,
              0.0471
            ],
            "hex": "#0c0c0c",
            "alpha": 0.35
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 30,
            "unit": "px"
          },
          "blur": {
            "value": 60,
            "unit": "px"
          },
          "spread": {
            "value": -30,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Syne",
        "K2D",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Work Sans",
        "IBM Plex Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "Space Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "IBM Plex Sans Thai",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 800
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 350,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.16,
      1,
      0.3,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.1
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 3
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!