Agent Skills
› nexu-io/motion-anything
› glare-hover
glare-hover
GitHub实现卡片悬停时的光标跟随柔光效果，提升质感。无依赖，自动附着并更新坐标变量。已适配触屏禁用及减少动画偏好设置，建议仅用于少量重点卡片。
Trigger Scenarios
需要为卡片添加鼠标悬停光泽特效
希望实现跟随光标的动态视觉反馈
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
