{"_id":"@8bitbish/flux-hover","_rev":"4-086916d9d28066b99ee4471343661653","name":"@8bitbish/flux-hover","dist-tags":{"latest":"0.3.1"},"versions":{"0.1.0":{"name":"@8bitbish/flux-hover","version":"0.1.0","keywords":["react","hover","animation","magnetic","framer-motion","typescript"],"author":{"name":"8bitbish"},"license":"MIT","_id":"@8bitbish/flux-hover@0.1.0","maintainers":[{"name":"8bitbish","email":"jakesb1996@gmail.com"}],"homepage":"https://github.com/8bitbish/FluxHover#readme","bugs":{"url":"https://github.com/8bitbish/FluxHover/issues"},"dist":{"shasum":"9c93b4c05632a90ecbfca9057b9eee07dd0f9edc","tarball":"https://registry.npmjs.org/@8bitbish/flux-hover/-/flux-hover-0.1.0.tgz","fileCount":11,"integrity":"sha512-URvMwMgzBSEd/MIaUwMEzZyBw30cUt3VFJcB9teWMHcXD8LVe/QZibwc2IjkJZ+NJEnVzxNlvUtWlJr5IRijWg==","signatures":[{"sig":"MEUCIBYRgXcEV9J8DYV+1kXdGrg3MmR4unXpxnapQJmKx0wjAiEAh6fnOk08iWzw4NoYqcl+edCk45npnSIMFq9eg/OmTaY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":76645},"main":"./dist/cjs/index.cjs","type":"module","types":"./dist/types/index.d.ts","module":"./dist/esm/index.js","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/esm/index.js","require":"./dist/cjs/index.cjs"}},"gitHead":"3c5b57eddfb9019b4583b7d2bc023faaddefc9a7","scripts":{"dev":"vite --config demo/vite.config.ts","lint":"tsc --noEmit","build":"npm run build:esm && npm run build:cjs && npm run build:types","build:cjs":"vite build --config vite.lib.cjs.config.ts","build:esm":"vite build --config vite.lib.config.ts","build:demo":"vite build --config demo/vite.config.ts","build:types":"tsc --project tsconfig.build.json"},"_npmUser":{"name":"8bitbish","email":"jakesb1996@gmail.com"},"repository":{"url":"git+https://github.com/8bitbish/FluxHover.git","type":"git"},"_npmVersion":"11.6.2","description":"Premium directional magnetic hover background effect for React","directories":{},"_nodeVersion":"25.1.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.0","react":"^18.3.0","react-dom":"^18.3.0","typescript":"^5.5.0","@types/node":"^25.6.0","@types/react":"^18.3.0","framer-motion":"^11.0.0","vite-plugin-dts":"^4.0.0","@types/react-dom":"^18.3.0","@vitejs/plugin-react":"^4.3.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","framer-motion":">=11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/flux-hover_0.1.0_1778146051466_0.1510799481694498","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@8bitbish/flux-hover","version":"0.2.0","keywords":["react","hover","animation","magnetic","framer-motion","typescript"],"author":{"name":"8bitbish"},"license":"MIT","_id":"@8bitbish/flux-hover@0.2.0","maintainers":[{"name":"8bitbish","email":"jakesb1996@gmail.com"}],"homepage":"https://github.com/8bitbish/FluxHover#readme","bugs":{"url":"https://github.com/8bitbish/FluxHover/issues"},"dist":{"shasum":"135165661ecb4dd43b116bfbba76f7de970fe891","tarball":"https://registry.npmjs.org/@8bitbish/flux-hover/-/flux-hover-0.2.0.tgz","fileCount":12,"integrity":"sha512-+rlDxttNFxC7HG/SIrOdQ88jrvewQLGUIUmmaj0h6rGZyMW8Mqf2bgiYIM5tcfNEVewc9GSIRXdBYhjhO/ttVg==","signatures":[{"sig":"MEUCIAc3njT58M+s50K+zLYkKhGJlx/GugsHwkJr3ZTaAnX/AiEAkpIA7g+lvcK/UfjmnZscvteWq3CWQ9uXV8/TmIQyax4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@8bitbish%2fflux-hover@0.2.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":171237},"main":"./dist/cjs/index.cjs","type":"module","types":"./dist/types/index.d.ts","module":"./dist/esm/index.js","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/esm/index.js","require":"./dist/cjs/index.cjs"}},"gitHead":"a353be9fc0a2b7269191476a4374cc67b9d3117b","scripts":{"dev":"vite --config demo/vite.config.ts","lint":"tsc --noEmit","build":"npm run build:esm && npm run build:cjs && npm run build:types","build:cjs":"vite build --config vite.lib.cjs.config.ts","build:esm":"vite build --config vite.lib.config.ts","build:demo":"vite build --config demo/vite.config.ts","build:types":"tsc --project tsconfig.build.json"},"_npmUser":{"name":"8bitbish","email":"jakesb1996@gmail.com"},"repository":{"url":"git+https://github.com/8bitbish/FluxHover.git","type":"git"},"_npmVersion":"10.8.2","description":"Premium directional magnetic hover background effect for React","directories":{},"_nodeVersion":"20.20.2","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.0","react":"^18.3.0","react-dom":"^18.3.0","typescript":"^5.5.0","@types/node":"^25.6.0","@types/react":"^18.3.0","framer-motion":"^11.0.0","vite-plugin-dts":"^4.0.0","@types/react-dom":"^18.3.0","@vitejs/plugin-react":"^4.3.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","framer-motion":">=11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/flux-hover_0.2.0_1778171379956_0.6684455867533432","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@8bitbish/flux-hover","version":"0.3.0","keywords":["react","hover","animation","magnetic","framer-motion","typescript"],"author":{"name":"8bitbish"},"license":"MIT","_id":"@8bitbish/flux-hover@0.3.0","maintainers":[{"name":"8bitbish","email":"jakesb1996@gmail.com"}],"homepage":"https://github.com/8bitbish/FluxHover#readme","bugs":{"url":"https://github.com/8bitbish/FluxHover/issues"},"dist":{"shasum":"cb61222faaa22603acdc2d7a020eba31287990f2","tarball":"https://registry.npmjs.org/@8bitbish/flux-hover/-/flux-hover-0.3.0.tgz","fileCount":12,"integrity":"sha512-qIDxZjAaFoAEe6asIPuJ2wOy9t29CQtbtsrUJ6tWyA4F0N1bVwWpBIcVo+Q+JacFsPL6UqMDYutBNt8/kIQ41Q==","signatures":[{"sig":"MEQCICkVPmXGsb4CZxkToN6lF10leQT4azjihPp5yfJ3RCPfAiBDPL34buo+jEAuf47R9QaazyXOsh434Rsl8YUGm/3stw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@8bitbish%2fflux-hover@0.3.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":177289},"main":"./dist/cjs/index.cjs","type":"module","types":"./dist/types/index.d.ts","module":"./dist/esm/index.js","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/esm/index.js","require":"./dist/cjs/index.cjs"}},"gitHead":"9047675acec5bb82dd6c8afb42eeaab7b50b7d0d","scripts":{"dev":"vite --config demo/vite.config.ts","lint":"tsc --noEmit","build":"npm run build:esm && npm run build:cjs && npm run build:types","build:cjs":"vite build --config vite.lib.cjs.config.ts","build:esm":"vite build --config vite.lib.config.ts","build:demo":"vite build --config demo/vite.config.ts","build:types":"tsc --project tsconfig.build.json"},"_npmUser":{"name":"8bitbish","email":"jakesb1996@gmail.com"},"repository":{"url":"git+https://github.com/8bitbish/FluxHover.git","type":"git"},"_npmVersion":"10.8.2","description":"Premium directional magnetic hover background effect for React","directories":{},"_nodeVersion":"20.20.2","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.0","react":"^18.3.0","react-dom":"^18.3.0","typescript":"^5.5.0","@types/node":"^25.6.0","@types/react":"^18.3.0","framer-motion":"^11.0.0","vite-plugin-dts":"^4.0.0","@types/react-dom":"^18.3.0","@vitejs/plugin-react":"^4.3.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0","framer-motion":">=11.0.0"},"_npmOperationalInternal":{"tmp":"tmp/flux-hover_0.3.0_1778172813138_0.35808275250153687","host":"s3://npm-registry-packages-npm-production"}},"0.3.1":{"name":"@8bitbish/flux-hover","version":"0.3.1","description":"Premium directional magnetic hover background effect for React","type":"module","main":"./dist/cjs/index.cjs","module":"./dist/esm/index.js","types":"./dist/types/index.d.ts","exports":{".":{"import":"./dist/esm/index.js","require":"./dist/cjs/index.cjs","types":"./dist/types/index.d.ts"}},"scripts":{"build":"npm run build:esm && npm run build:cjs && npm run build:types","build:esm":"vite build --config vite.lib.config.ts","build:cjs":"vite build --config vite.lib.cjs.config.ts","build:types":"tsc --project tsconfig.build.json","dev":"vite --config demo/vite.config.ts","build:demo":"vite build --config demo/vite.config.ts","lint":"tsc --noEmit"},"keywords":["react","hover","animation","magnetic","framer-motion","typescript"],"author":{"name":"8bitbish"},"license":"MIT","peerDependencies":{"framer-motion":">=11.0.0","react":">=18.0.0","react-dom":">=18.0.0"},"devDependencies":{"@types/node":"^25.6.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0","@vitejs/plugin-react":"^4.3.0","framer-motion":"^11.0.0","react":"^18.3.0","react-dom":"^18.3.0","typescript":"^5.5.0","vite":"^5.4.0","vite-plugin-dts":"^4.0.0"},"repository":{"type":"git","url":"git+https://github.com/8bitbish/FluxHover.git"},"_id":"@8bitbish/flux-hover@0.3.1","gitHead":"6f0803d6a9a6ee1c1e3725372376f8e21a930339","bugs":{"url":"https://github.com/8bitbish/FluxHover/issues"},"homepage":"https://github.com/8bitbish/FluxHover#readme","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-C2xuyCHYTg7YoiAERWnnAGp+fcWByjwfu+0TlkFToDrRVij38xnJB34qYU8VwDqsQAF+Y97hf0KHoHTbKp8Yvw==","shasum":"f4e46384216b682bdbd7e1cf9e76369dd256d1bc","tarball":"https://registry.npmjs.org/@8bitbish/flux-hover/-/flux-hover-0.3.1.tgz","fileCount":12,"unpackedSize":179702,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@8bitbish%2fflux-hover@0.3.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCC7Oet4YtqZj9YkKDhSUhndmRWSt1WL3x6Gfxg2X7NzQIgd83uSAk6DMlCYeTvL9HzxDF9Of27ZPW82TALD/OJYvE="}]},"_npmUser":{"name":"8bitbish","email":"jakesb1996@gmail.com"},"directories":{},"maintainers":[{"name":"8bitbish","email":"jakesb1996@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/flux-hover_0.3.1_1778179158055_0.5805705504961578"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-07T09:27:31.372Z","modified":"2026-05-07T18:39:18.576Z","0.1.0":"2026-05-07T09:27:31.605Z","0.2.0":"2026-05-07T16:29:40.089Z","0.3.0":"2026-05-07T16:53:33.291Z","0.3.1":"2026-05-07T18:39:18.248Z"},"bugs":{"url":"https://github.com/8bitbish/FluxHover/issues"},"author":{"name":"8bitbish"},"license":"MIT","homepage":"https://github.com/8bitbish/FluxHover#readme","keywords":["react","hover","animation","magnetic","framer-motion","typescript"],"repository":{"type":"git","url":"git+https://github.com/8bitbish/FluxHover.git"},"description":"Premium directional magnetic hover background effect for React","maintainers":[{"name":"8bitbish","email":"jakesb1996@gmail.com"}],"readme":"# FluxHover\n\nA directional magnetic hover background effect for React. The highlight enters from the direction the cursor approached, follows the cursor softly while hovered, and exits toward where the cursor leaves.\n\nBuilt with React, TypeScript, and Framer Motion.\n\n**[Live demo →](https://8bitbish.github.io/FluxHover/)**\n\n---\n\n## Install\n\n```bash\nnpm install @8bitbish/flux-hover framer-motion\n```\n\n> `react`, `react-dom`, and `framer-motion` are peer dependencies.\n\n---\n\n## Quick start\n\n```tsx\nimport { FluxHover } from '@8bitbish/flux-hover';\n\nfunction NavButton() {\n return (\n \n \n \n );\n}\n```\n\nThe blob automatically inherits the `borderRadius` of the wrapper element — set it once via `style` or a CSS class and you're done.\n\n---\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `children` | `ReactNode` | — | Content to wrap |\n| `background` | `string` | `\"rgba(255,255,255,0.09)\"` | CSS background of the hover blob (color, gradient, etc.) |\n| `pressColor` | `string` | — | Color overlaid on the blob on pointer-down. Accepts any CSS color including `rgba`. |\n| `intensity` | `number` | `0.25` | Magnetic movement strength `0–1`. Higher = more travel |\n| `duration` | `number` | `0.22` | Enter/exit animation duration in seconds |\n| `opacity` | `number` | `1` | Peak opacity of the blob `0–1` |\n| `scale` | `number` | `1` | Scale of the blob at rest |\n| `enterDelay` | `number` | `40` | Delay in ms before hover activates. Cancels if cursor leaves first — useful for segmented controls |\n| `clip` | `boolean` | `false` | Clip blob to wrapper bounds (`overflow: hidden`). Blob slides in from the entry edge |\n| `focusVisible` | `boolean` | `true` | Show blob on `:focus-visible` (keyboard nav) |\n| `disabled` | `boolean` | `false` | Disable all hover and press effects |\n| `as` | `keyof JSX.IntrinsicElements` | `\"div\"` | Render wrapper as a different element |\n| `className` | `string` | — | Extra class on the wrapper element |\n| `style` | `CSSProperties` | — | Inline styles on the wrapper element. Use this to set `borderRadius`. |\n\nAny extra props (e.g. `href`, `onClick`) are forwarded to the underlying element.\n\n---\n\n## Examples\n\n### Ghost button\n\n```tsx\n\n \n\n```\n\n### Tinted button\n\n```tsx\n\n \n\n```\n\n### Segmented control\n\n```tsx\n
\n\n```\n\n---\n\n## FluxHoverProvider\n\nSet project-wide defaults once. Every `FluxHover` in the tree inherits them, and any prop passed directly to an instance overrides the default.\n\n```tsx\nimport { FluxHoverProvider, FluxHover } from '@8bitbish/flux-hover';\n\n\n \n\n\n// Inherits all provider defaults\n\n \n\n\n// Overrides just what differs\n\n \n\n```\n\n---\n\n## useFluxHover hook\n\nFor lower-level control, the hook is exported directly:\n\n```tsx\nimport { useFluxHover } from '@8bitbish/flux-hover';\nimport { motion, useTransform } from 'framer-motion';\n\nfunction CustomButton() {\n const {\n wrapperRef,\n blobX, blobY,\n blobOpacity, blobScale,\n pressScale, pressOverlay,\n onPointerEnter, onPointerMove, onPointerLeave,\n onPointerDown, onPointerUp,\n onFocus, onBlur,\n } = useFluxHover({ intensity: 0.25, duration: 0.22 });\n\n const combinedScale = useTransform(() => blobScale.get() * pressScale.get());\n\n return (\n \n \n \n \n \n Custom content\n \n \n );\n}\n```\n\n---\n\n## Customization notes\n\n**Subtle default feel** — defaults are tuned for modern dark UIs. Small background opacity (`0.07–0.12`) and moderate intensity (`0.25`) produce the most polished result.\n\n**Segmented controls** — use `enterDelay={40}` to debounce fast sweeps, preventing the effect from firing when the cursor briefly crosses an item.\n\n**Standalone buttons** — pass `enterDelay={0}` to override the default delay for elements that should respond instantly.\n\n**Gradient backgrounds** — any CSS background value works:\n```tsx\nbackground=\"linear-gradient(135deg, rgba(99,102,241,0.25), rgba(168,85,247,0.25))\"\n```\n\n**Reduced motion** — FluxHover automatically detects `prefers-reduced-motion` and skips all animations, falling back to an instant appear/disappear.\n\n**Focus visible** — keyboard users get the same hover highlight on `:focus-visible`. Pass `focusVisible={false}` to opt out.\n\n---\n\n## License\n\nMIT\n","readmeFilename":"README.md"}