光晕指针

{
  "slug": "cursor-aura",
  "name": "光晕指针",
  "nameEn": "Cursor Aura",
  "description": "在鼠标附近显示克制的柔和光晕，增强空间感但不替换系统光标。",
  "descriptionEn": "A restrained soft aura follows the pointer to add depth without replacing the system cursor.",
  "category": "pointer",
  "tags": [
    "cursor",
    "aura",
    "ambient",
    "pointer"
  ],
  "trigger": "continuous",
  "difficulty": "intermediate",
  "duration": "continuous",
  "easing": "lerp",
  "cssProperties": [
    "transform",
    "opacity"
  ],
  "isGPUAccelerated": true,
  "previewBg": "dark",
  "keywords": [
    "cursor aura",
    "custom cursor",
    "pointer follow",
    "ambient cursor"
  ],
  "useCases": [
    "Creative landing pages",
    "Interactive galleries",
    "Subtle desktop polish"
  ],
  "relatedAnimations": [
    "cursor-trail",
    "spotlight-card"
  ],
  "recommendedStyles": [
    "editorial",
    "holographic",
    "macos-vibrancy"
  ],
  "playgroundMode": "js-driven",
  "intensity": "low",
  "input": "pointer-fine",
  "performanceNotes": "Track pointer coordinates in refs and write transform in requestAnimationFrame.",
  "accessibilityNotes": "Do not hide the native cursor. Disable for reduced motion, coarse pointers, inputs, code blocks, and admin tools.",
  "recommendedUseCases": [
    "Creative pages",
    "Gallery browsers",
    "Demo surfaces"
  ],
  "codeSnippets": [
    {
      "label": "React Provider",
      "language": "tsx",
      "code": "\"use client\";\n\nimport { useEffect } from \"react\";\n\nexport function CursorAuraProvider() {\n  useEffect(() => {\n    if (!matchMedia(\"(hover: hover) and (pointer: fine)\").matches) return;\n    if (matchMedia(\"(prefers-reduced-motion: reduce)\").matches) return;\n\n    const aura = document.createElement(\"div\");\n    aura.className = \"cursor-aura\";\n    document.body.appendChild(aura);\n\n    let raf = 0;\n    let x = 0;\n    let y = 0;\n    const render = () => {\n      raf = 0;\n      aura.style.transform = `translate3d(${x}px, ${y}px, 0)`;\n    };\n\n    const onMove = (event: PointerEvent) => {\n      x = event.clientX;\n      y = event.clientY;\n      if (!raf) raf = requestAnimationFrame(render);\n    };\n\n    window.addEventListener(\"pointermove\", onMove, { passive: true });\n    return () => {\n      window.removeEventListener(\"pointermove\", onMove);\n      cancelAnimationFrame(raf);\n      aura.remove();\n    };\n  }, []);\n\n  return null;\n}"
    },
    {
      "label": "CSS",
      "language": "css",
      "code": ".cursor-aura {\n  position: fixed;\n  left: 0;\n  top: 0;\n  width: 34px;\n  height: 34px;\n  border-radius: 999px;\n  translate: -50% -50%;\n  pointer-events: none;\n  background: radial-gradient(circle, rgb(255 255 255 / 0.18), transparent 62%);\n  will-change: transform;\n}"
    }
  ]
}