# Interactive Cursor Design > The pointer becomes the star: an inverting cursor blob that grows and labels what it touches, magnetic buttons and spotlight reveals. - Nickname: Cursor-as-character - Also called: Custom cursor UI, Magnetic cursor, Blend-mode cursor - Category: Interaction‑led - Moods: Edgy, Playful, Bold, Luxury - Industries: Creative & Portfolio, Media & Entertainment, Luxury & Premium, Startup & Tech, Gaming - Style page: https://uilingo.dev/styles/interactive-cursor-design/ 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 ## Audit Passed after 3 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Interactive Cursor Design" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line The pointer becomes the star: an inverting cursor blob that grows and labels what it touches, magnetic buttons and spotlight reveals. Design keywords: custom cursor blob, mix-blend difference, magnetic buttons, spotlight hover, cursor labels, oversized wide display type, gallery whitespace, thin black rules. ## Visual language A quiet gallery stage — warm bone #EDEAE3, black ink, one ultramarine #2B2BFF, thin 1px black rules and square edges — built so the pointer can perform. The arrow is replaced by a 120px white blob with mix-blend-mode: difference that trails the mouse with a soft lag and inverts every letter it covers; over links it shrinks to a lens, over cards it swells and shows a word ('View', 'Drag'). Buttons lean toward the pointer before you click, and cards light up with an ultramarine spotlight that follows the mouse. Oversized wide display type (Syne 800, tight tracking) gives the cursor something to reveal. ## Signature details (must be visible) - Cursor blob: position fixed, 120×120px, border-radius 50%, background #fff, mix-blend-mode: difference, pointer-events none; follows the pointer with lerp 0.2 per frame; a 6px accent #FF4D2E dot marks the exact hotspot and is shown from load. One inline script (~60–90 lines) drives the blob (lerp 0.2), the labels, the magnetism and --mx/--my; without JS the native cursor stays and nothing is hidden. While the blob script is active set cursor:none on html, and cursor:text on inputs and textareas, where the blob hides - Blob states: scale .55 over links and secondary buttons, .7 with the 'Go' label over primary CTAs, 1.25 with a label over cards and images, .4 while pressed, hidden over text inputs (native I-beam returns). Labels: ดู (View) over work/feature cards and images, ลาก (Drag) over the hero mock or a horizontal gallery, ไป (Go) over primary CTAs; English pages use View / Drag / Go. Label text #000 at 0.8rem 600 centred in the white blob (difference blend makes it show as the page colour inside the inverted disc; that is intended); Thai labels use the Thai body font with no uppercase or tracking - Magnetic buttons: translate up to 8px horizontally / 6px vertically toward the pointer, easing back with cubic-bezier(.16,1,.3,1) over 300ms - Spotlight cards: background-image radial-gradient(220px circle at var(--mx) var(--my), color-mix(in srgb,#2B2BFF 22%,transparent), transparent 70%) with --mx/--my set on pointermove - At rest the blob is centred on the first line of the hero headline at 72% of its width, so the inverted letters are visible before anyone moves; the 6px hotspot dot sits at its centre - Reduced motion, touch and keyboard: prefers-reduced-motion: reduce → lerp 1 (no lag), no magnetism, the blob still inverts; (hover: none) or (pointer: coarse) → don't create the blob and skip the spotlight's pointermove; :focus-visible on a spotlight card centres the spotlight at 50% 50% - Mono vs Thai: Space Mono has no Thai glyphs, so any '( LABEL )' eyebrow, form label or cursor label containing Thai switches to the Thai body font (IBM Plex Sans Thai 500, 0.85rem, no uppercase, letter-spacing 0); keep Space Mono for Latin and digits only (.eyebrow:lang(th), or wrap Latin runs in ) - Gallery skin: square corners, 1px #0C0C0C rules, no shadows, black pill buttons, mono '( LABEL )' eyebrows, display clamp(3.2rem, 8.5vw, 7.6rem) with Latin display line-height .92; Thai display :lang(th) uses clamp(2.8rem, 6.4vw, 5.6rem) (7.6rem Thai in 8 of 12 columns leaves 2–3 words per line) and line-height 1.3 (never below; the global Thai rule wins); Thai section heads 1.3 ## Design tokens — use these exact values Colours (light mode): - background #EDEAE3 - surface #F6F4EF - surface-2 #E3DFD6 - text #0C0C0C - text-muted #55524C - primary #0C0C0C (text on it #EDEAE3) - secondary #2B2BFF (text on it #FFFFFF) - accent #FF4D2E - border #0C0C0C - success #1F7A45 · warning #9A5B00 · danger #C8321C - chart series #0C0C0C, #2B2BFF, #FF4D2E, #8E8A82, #C9C5BC Radius: sm 0px, md 0px, lg 0px, xl 0px, pill 999px Border width: 1px Shadows: sm `none`, md `none`, lg `0 30px 60px -30px rgba(12,12,12,0.35)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.1 density Motion: 350ms cubic-bezier(.16,1,.3,1) ## Typography (Latin + Thai) - Headings: Syne 700/800 with Thai fallback K2D 700/800 - Body: Work Sans 400/500/600 with Thai fallback IBM Plex Sans Thai 400/500/600 - Mono: Space Mono - Google Fonts URL: 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 - CSS stacks: heading `"Syne", "K2D", system-ui, sans-serif`; body `"Work Sans", "IBM Plex Sans Thai", system-ui, sans-serif`; mono `"Space Mono", ui-monospace, "SFMono-Regular", Menlo, "IBM Plex Sans Thai", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to IBM Plex Sans Thai — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(3.2rem, 8.5vw, 7.6rem), heading weight 800, heading tracking -0.045em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: 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. ## Components - Primary button: black pill, bone text, 60px tall when large; hover fills ultramarine; magnetic lean - Secondary button: transparent pill with a 1px black border; hover inverts to black - Nav links: an underline that draws in from the left on hover and stays on the current page - Feature list: borderless rows divided by 1px rules, big Syne titles, circular outline icons - Shape rules: inputs and tabs are square with bottom rules; only buttons, chips, badges and the segmented control use the pill radius; shadow lg appears only on the floating mobile tab bar - Inputs: bottom rule only; focus = 2px ultramarine rule; mono uppercase labels - Badges and chips: outline pills; active chip and selected radio cards invert to black - Image/art panels: black vertical stripes on bone with a parked white difference-blend disc - CTA: black panel, huge headline, a difference-blend disc that inverts part of it - Dashboard: icon rail of circular items (active = black disc), black line and bars with one ultramarine series, table rows invert on hover - Mobile tab bar: floating black capsule; active tab icon in a bone disc ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: oversized flush-left headline on a wide column with a narrow supporting column. Navigation: split style. Sections in order: hero → showcase → features → testimonials → stats → cta. Feature section as list. Editorial hero on a 12-column grid: the headline spans columns 1–8 at the top left; sub-copy and two CTAs sit under the headline in the same column; columns 9–12 hold an art panel of black vertical stripes on bone with a parked white difference-blend disc labelled 'Drag' (ลาก in Thai), with the product mock set into its lower part; a full-width rule closes the hero and the cursor blob rests over the headline's first line. Then a showcase with tabs (CSS-only via radio/:target, or handled by the same single inline script), a feature list of ruled rows, testimonials in bold display type, giant stat numbers and a black CTA panel with an inverting disc. Section heads are left-aligned and oversized. Navigation is a split bar on one 1px bottom rule: wordmark left, the page links centred, then a secondary text link + black pill CTA right; links use the underline-draw hover. Every hover has a visible focus equivalent for keyboard users. ## Content Use realistic product copy (fictional brand) suited to: Design studios, agencies and portfolios. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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 - Hiding the click hotspot or the text cursor in fields - Magnetic pull larger than ~10px or blobs lagging so far behind that clicks feel wrong - Rounded, shadowed SaaS cards that compete with the cursor — keep the stage flat and ruled - Animating the letters themselves — that is Kinetic Typography - Running the cursor script on touch devices or ignoring reduced motion - Revealing essential content only on hover ## Stack notes One self-contained HTML file with a