{
  "id": 11674446,
  "title": "Make Your Buttons Dodge the Cursor with a Wrium Plugin",
  "url": "https://urgent.news/2026/10/03/make-your-buttons-dodge-the-cursor-with-a-wrium-plugin",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-10-03T11:57:53.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/benkhalife/make-your-buttons-dodge-the-cursor-with-a-wrium-plugin-2fhc"
  },
  "original_language": "en",
  "account": "Buttons often wait patiently for a click. The Wrium Evasive Button plugin, however, can make a button—or any interactive element—smoothly avoid the cursor as you approach. This playful feature offers several benefits, such as enabling smart form validation, gamified forms, and challenging confirmations. Here’s how to implement it:\n\nFirst, install the plugin along with its dependency, Wrium, using npm: `npm install @wrium/evasive-button @wrium/wrium`. Then, add the EvasiveButtonPlugin to your Wrium application. Usage is straightforward:\n\n```html\n<div id=\"app\">\n<button v-evade>Try to Click Me!</button>\n</div>\n```\n\nIn your JavaScript, initialize the app and mount it:\n\n```javascript\nimport { createApp } from \"@wrium/wrium\";\nimport { EvasiveButtonPlugin } from \"@wrium/evasive-button\";\n\ncreateApp(() => ({})).use(EvasiveButtonPlugin).mount(\"#app\");\n```\n\nFor form validation, bind the `active` property of the button to your form’s state. When the form is invalid, the button will evade the cursor, providing a playful experience until the form is correct:\n\n```html\n<div id=\"button-arena\">\n<button v-evade=\"{ active: !isFormValid, bounds: \"#button-arena\", maxRadius: 150 }\">\n{{ isFormValid ? \"Log In\" : \"Fill fields first!\" }}\n</button>\n</div>\n```\n\nCustomize the button’s appearance based on its state with CSS:\n\n```css\n.login-btn.is-evading {\nbackground: #e11d48;\n}\n```\n\nRemember, while the plugin adds fun, it should be used sparingly for critical actions. It respects user preferences for reduced motion, supports keyboard navigation, and automatically stops evading after a set duration or number of attempts. The project is available on GitHub, MIT licensed, and welcomes contributions with creative uses of the plugin.",
  "summary": "Most buttons just sit there and wait to be clicked. This one doesn't. Wrium Evasive Button is a small plugin for Wrium that makes a button (or any interactive element) smoothly dodge the cursor when you get close. It's silly on purpose, but it turns out to be surprisingly useful. Why would you want this? Smart form validation: the submit button stays out of reach until the required fields are…",
  "key_points": [
    "Wrium Evasive Button plugin makes buttons avoid cursor.",
    "Install plugin via npm with @wrium/evasive-button.",
    "Use plugin for smart form validation and gamified forms."
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}