FluxHover

A 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.

Built with React, TypeScript, and Framer Motion.

Live demo →

Install

npm install @8bitbish/flux-hover framer-motion

react, react-dom, and framer-motion are peer dependencies.

Quick start

import { FluxHover } from '@8bitbish/flux-hover';

function NavButton() {
  return (
    <FluxHover background="rgba(255,255,255,0.08)" style={{ borderRadius: 10 }}>
      <button>Features</button>
    </FluxHover>
  );
}

The blob automatically inherits the borderRadius of the wrapper element — set it once via style or a CSS class and you're done.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | ReactNode | — | Content to wrap | | background | string | "rgba(255,255,255,0.09)" | CSS background of the hover blob (color, gradient, etc.) | | pressColor | string | — | Color overlaid on the blob on pointer-down. Accepts any CSS color including rgba. | | intensity | number | 0.25 | Magnetic movement strength 0–1. Higher = more travel | | duration | number | 0.22 | Enter/exit animation duration in seconds | | opacity | number | 1 | Peak opacity of the blob 0–1 | | scale | number | 1 | Scale of the blob at rest | | enterDelay | number | 40 | Delay in ms before hover activates. Cancels if cursor leaves first — useful for segmented controls | | clip | boolean | false | Clip blob to wrapper bounds (overflow: hidden). Blob slides in from the entry edge | | focusVisible | boolean | true | Show blob on :focus-visible (keyboard nav) | | disabled | boolean | false | Disable all hover and press effects | | as | keyof JSX.IntrinsicElements | "div" | Render wrapper as a different element | | className | string | — | Extra class on the wrapper element | | style | CSSProperties | — | Inline styles on the wrapper element. Use this to set borderRadius. |

Any extra props (e.g. href, onClick) are forwarded to the underlying element.

Examples

Ghost button

<FluxHover
  background="rgba(255,255,255,0.07)"
  pressColor="rgba(255,255,255,0.12)"
  style={{ borderRadius: 10 }}
>
  <button>Click me</button>
</FluxHover>

Tinted button

<FluxHover
  background="rgba(99,102,241,0.22)"
  pressColor="rgba(99,102,241,0.2)"
  enterDelay={0}
  style={{ borderRadius: 10 }}
>
  <button style={{ color: '#a5b4fc' }}>Get started</button>
</FluxHover>

Segmented control

<div style={{ display: 'inline-flex', gap: 4, padding: 4, background: '#111', borderRadius: 11, overflow: 'hidden' }}>
  {['All', 'Design', 'Engineering'].map((tab) => (
    <FluxHover key={tab} style={{ borderRadius: 7 }}>
      <button>{tab}</button>
    </FluxHover>
  ))}
</div>

Card hover

<FluxHover
  as="article"
  background="rgba(99,102,241,0.08)"
  intensity={0.4}
  enterDelay={0}
  style={{ padding: 24, border: '1px solid #1e1e1e', borderRadius: 16 }}
>
  <h3>Card title</h3>
  <p>Some content</p>
</FluxHover>

FluxHoverProvider

Set project-wide defaults once. Every FluxHover in the tree inherits them, and any prop passed directly to an instance overrides the default.

import { FluxHoverProvider, FluxHover } from '@8bitbish/flux-hover';

<FluxHoverProvider defaults={{
  background:  "rgba(255,255,255,0.09)",
  pressColor:  "rgba(255,255,255,0.15)",
  duration:    0.22,
  intensity:   0.25,
  enterDelay:  40,
}}>
  <App />
</FluxHoverProvider>

// Inherits all provider defaults
<FluxHover style={{ borderRadius: 7 }}>
  <button>Tab</button>
</FluxHover>

// Overrides just what differs
<FluxHover background="rgba(99,102,241,0.22)" enterDelay={0} style={{ borderRadius: 10 }}>
  <button>Get started</button>
</FluxHover>

useFluxHover hook

For lower-level control, the hook is exported directly:

import { useFluxHover } from '@8bitbish/flux-hover';
import { motion, useTransform } from 'framer-motion';

function CustomButton() {
  const {
    wrapperRef,
    blobX, blobY,
    blobOpacity, blobScale,
    pressScale, pressOverlay,
    onPointerEnter, onPointerMove, onPointerLeave,
    onPointerDown, onPointerUp,
    onFocus, onBlur,
  } = useFluxHover({ intensity: 0.25, duration: 0.22 });

  const combinedScale = useTransform(() => blobScale.get() * pressScale.get());

  return (
    <div
      ref={wrapperRef}
      style={{ position: 'relative', display: 'inline-flex', borderRadius: 8 }}
      onPointerEnter={onPointerEnter}
      onPointerMove={onPointerMove}
      onPointerLeave={onPointerLeave}
      onPointerDown={onPointerDown}
      onPointerUp={onPointerUp}
      onFocus={onFocus}
      onBlur={onBlur}
    >
      <motion.span
        aria-hidden
        style={{
          position: 'absolute', inset: 0,
          borderRadius: 'inherit',
          background: 'rgba(255,255,255,0.09)',
          overflow: 'hidden',
          pointerEvents: 'none',
          x: blobX, y: blobY,
          opacity: blobOpacity,
          scale: combinedScale,
        }}
      >
        <motion.span
          aria-hidden
          style={{
            position: 'absolute', inset: 0,
            background: 'rgba(255,255,255,0.15)',
            opacity: pressOverlay,
          }}
        />
      </motion.span>
      <span style={{ position: 'relative', zIndex: 1 }}>
        Custom content
      </span>
    </div>
  );
}

Customization notes

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.

Segmented controls — use enterDelay={40} to debounce fast sweeps, preventing the effect from firing when the cursor briefly crosses an item.

Standalone buttons — pass enterDelay={0} to override the default delay for elements that should respond instantly.

Gradient backgrounds — any CSS background value works:

background="linear-gradient(135deg, rgba(99,102,241,0.25), rgba(168,85,247,0.25))"

Reduced motion — FluxHover automatically detects prefers-reduced-motion and skips all animations, falling back to an instant appear/disappear.

Focus visible — keyboard users get the same hover highlight on :focus-visible. Pass focusVisible={false} to opt out.

License

MIT