Vive Floating Box

A React component that creates floating elements that subtly follow mouse movement, creating an engaging interactive experience.

Installation

npm install vive-floating-box

Usage

import React from 'react';
import { FloatingBox } from 'vive-floating-box';

function App() {
  return (
    <div>   // adjust location here
        <FloatingBox
          isOn={true} // custom on/off option
          moveRate={0.02} // move rate per mouse position
          onlyActiveHover={false} // on/off option preset : hover
          useHoverScaleUp={true} // scale up when hover
        >
          <button onClick={() => setCount((count) => count + 1)}> // your contents
            count is {count}
          </button>
        </FloatingBox>
    <div>
  );
}

~~Css Usage~~

~~this component's css style~~

1.1 update : NO CSS FILE anymore

this component no longer relies on external CSS files. All visual behavior is now handled through inline styles.

Props

| Prop | Type | Default | Description | | :-------------- | :-------- | :------ | :------------------------------------------------------------ | | children | ReactNode | - | Content to be rendered inside the floating box | | moveRate | number | 0.02 | How much the element moves in response to mouse movement | | isOn | boolean | true | Whether the floating effect is active | | onlyActiveHover | boolean | false | Only activate when hovering over the element for optimization | | useHoverScaleUp | boolean | true | Enable scale up effect on hover |

License

This project is licensed under the MIT License - see the LICENSE file for details.