Agent Skills
› nexu-io/motion-anything
› glare-hover
glare-hover
GitHub提供跟随鼠标的光泽动效，增强卡片视觉质感。支持触摸禁用和减少动画模式，无依赖，通过复制CSS/JS文件并添加指定类名即可自动应用。
Trigger Scenarios
需要为UI组件添加高级鼠标悬停交互效果
前端开发中实现无障碍访问兼容的视觉反馈
Install
npx skills add nexu-io/motion-anything --skill glare-hover -g -y
SKILL.md
Frontmatter
{
"od": {
"mode": "prototype",
"preview": {
"type": "html"
},
"surface": "web",
"category": "animation-motion",
"platform": "desktop",
"upstream": "https:\/\/reactbits.dev\/animations\/glare-hover",
"design_system": {
"requires": false
}
},
"name": "glare-hover",
"triggers": [
"glare hover",
"sheen on hover",
"premium card hover",
"高光扫过",
"卡片光泽"
],
"description": "A soft glare sweeps across a card following the cursor on hover — a premium, tactile sheen. Keep it\nsubtle; a few hero cards, not a grid. Disabled on touch and under prefers-reduced-motion.\n"
}
glare-hover
A glare that follows the cursor across a card. Dependency-free, reduced-motion + touch safe.
How to apply
Copy glare-hover.css + glare-hover.js; <div class="glare"> … </div>. Auto-attaches; JS writes --gx/--gy.
Version History
- b016900 Current 2026-07-11 17:08
