How to create hover gesture

create your app

import { gsap } from 'gsap'
import { useHover } from 'rege/react'

export const App = () => {
        const { ref } = useHover(({ active, target, movement: [x, y] }) => {
                gsap.to(target, { scale: active ? 1.2 : 1, x, y })
        })
        return <span ref={ref} style={style} />
}

with Hover component

You can use shorthands Hover component

import { Hover } from 'rege/react'

export const onHover = ({ active, target, movement: [x, y] }) => {
        gsap.to(target, { x, y, scale: active ? 1.2 : 1 })
}

export const App2 = () => {
        return (
                <Hover onHover={onHover}>
                        {({ ref }) => <span ref={ref} style={style} />}
                </Hover>
        )
}