Torsional Link
Animated link component with torsional movement on hover, adding dynamic visual flair to your UI.
Link Reveal Animation
Installation
Run the following command:
npx gopx-webui add torsional-linkProps
| Prop | Type | Required | Description |
|---|---|---|---|
href | string | Yes | The URL that the link points to. |
children | string | Yes | The text content to be displayed within the link. |
duration | number | No | The duration of the hover animation in seconds (default is 0.25). |
stagger | number | No | The delay between the animations of each letter in seconds (default is 0.025). |
fontSize | string | No | The size of the font (default is "4xl"). |
fontWeight | string | number | No | The weight of the font (default is "extrabold"). |
textTransform | "uppercase" | "lowercase" | "capitalize" | "none" | No | The text transformation style (default is "uppercase"). |
initialColor | string | No | The initial color of the text before hover (default is "black"). |
hoverColor | string | No | The color of the text when hovered (default is "black"). |
lineHeight | number | string | No | The line height of the text (default is 0.9). |
easing | string | No | The easing function for the animation (default is "easeInOut"). |
className | string | No | Additional custom CSS classes to apply to the link element. |