A React component that creates floating elements following mouse movement
npm install vive-floating-boxbash
npm install vive-floating-box
`
Usage
`tsx
import React from 'react';
import { FloatingBox } from 'vive-floating-box';
function App() {
return (
// adjust location here
moveRate={0.02} // move rate per mouse position
onlyActiveHover={false} // on/off option preset : hover
useHoverScaleUp={true} // scale up when hover
>
);
}
``
~~Css Usage~~
~~this component's css style~~
.box_move {
position: relative;
z-index: 999;
will-change: transform;
width: fit-content;
height: fit-content;
}
.box_size {
transition: transform 0.35s cubic-bezier(0.7, -0.5, 0.4, 1.5);
}
.box_size:hover {
transform: scale(1.13);
}
$3
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.