Direction Hover
0
Used by 0Controls
Direction Hover
Swap text to an accent-colored copy that slides in from the top or bottom edge the cursor enters, then out again on leave.
KEY FEATURES
- — Detects whether the cursor enters from the top or bottom edge
- — Slides an accent copy in from the entered edge and out on leave
- — Base text stays visible while the accent copy animates
- — Separate base text and hover accent colors
- — Adjustable gap spacing between the stacked text copies
- — Full font control including family, weight, size, and letter spacing
- — Configurable transition type, duration, delay, and easing
- — Editable title text
- — Sizes to the text with no box, background, or padding
API Reference
All props map directly to the controls panel sliders and color pickers.
LAYOUT
PROP
TYPE
DEFAULT
DESCRIPTION
title
string
DIRECTION HOVER
The text shown at rest and in the accent copy that slides in on hover.
font
font
{"..."}
Font family, weight, size, spacing, and alignment of the text.
gap
number
20
Pixel spacing between the base and accent copies; higher slides further.
textColor
color
#ffffff
Color of the base copy shown at rest.
hoverColor
color
#6E92FF
Color of the accent copy that slides in on hover.
transition
transition
{"..."}
Timing and easing of the slide animation on hover.
