HoverEffect/ useHoverEffect
Triggers on mouseenter with built-in throttle to prevent spam on rapid hover.
14px
1000ms
400ms
import { useHoverEffect } from '@onomatope/react'
function MyComponent() {
const ref = useHoverEffect<HTMLDivElement>({
texts: ['whoosh', '~'],
tone: 'drift',
color: '#4a4a4a',
size: 14,
})
return <div ref={ref}>...</div>
}Options
| Option | Type | Default | Description |
|---|---|---|---|
texts | string[] | ["POP!"] | Text to display |
tone | Tone | "pop" | Animation style |
color | string | "#666666" | Text color |
size | number | tone default | Font size in px |
throttle | number | 400 | Minimum ms between effects |
Notes
- •Effect position is randomized within the top area of the element
- •Throttle uses leading-edge — first hover fires immediately