Agent Skills
› nexu-io/motion-anything
› tilt-3d
tilt-3d
GitHub为卡片或封面图添加跟随鼠标的3D倾斜及柔光效果，提升视觉交互体验。适用于少量英雄卡片，避免密集网格导致混乱。自动适配无障碍偏好和触摸设备，保持GPU安全。
Trigger Scenarios
需要为Hero卡片或封面图添加3D倾斜互动效果
用户希望增强产品或作品集缩略图的视觉吸引力
Install
npx skills add nexu-io/motion-anything --skill tilt-3d -g -y
SKILL.md
Frontmatter
{
"od": {
"mode": "prototype",
"preview": {
"type": "html"
},
"surface": "web",
"category": "animation-motion",
"platform": "desktop",
"upstream": "https:\/\/micku7zu.github.io\/vanilla-tilt.js\/",
"design_system": {
"requires": false
},
"example_prompt": "Use tilt-3d on the hero product card: a small 3D tilt toward the cursor with a soft glare. Just\nthe hero card; flat under reduced-motion and on touch."
},
"name": "tilt-3d",
"triggers": [
"3d tilt",
"tilt on hover",
"parallax card",
"tactile card",
"3D 倾斜",
"立体 hover"
],
"description": "Add tactile depth to a hero card or cover image: it tilts in 3D toward the pointer with a soft\nglare. Keep the max angle small (~10°) and reserve it for one or a few hero cards, not a grid.\nFlat under prefers-reduced-motion and on touch.\n"
}
tilt-3d
A card that tilts in 3D toward the pointer. Part of
motion-anything; obeys MOTION-SPEC.md. Technique
popularized by vanilla-tilt.js, reimplemented dependency-free.
When to use it
- A hero product card, cover image, or a few portfolio thumbnails where depth adds delight.
When NOT to use it (restraint)
- Dense grids — many tilting cards feel chaotic and can induce motion sickness. A few hero cards.
- Text-heavy cards (tilt hurts readability); touch-only contexts (it stays flat automatically).
How to apply
- Copy
tilt-3d.cssandtilt-3d.jsinto the project, and link them. - Mark the card:
<div class="tilt" data-tilt-max="10"> … </div> - Auto-attaches to
.tilt. Keepdata-tilt-maxsmall (8–10). Resets flat onpointerleave.
Accessibility & performance
- Flat under
prefers-reduced-motionand on(hover: none)touch devices. transform: rotateX/rotateY+ a masked glare only — GPU-safe.
Framework notes
- React: call
attachTilt(ref.current)inuseEffect, guarded by the same checks.
Version History
- b016900 Current 2026-07-11 17:11
