A chip-style call-to-action link with sliding label and rotating icon chips on hover.
Made by AxylInstallation
Usage
Props
| Prop | Type | Default |
|---|---|---|
asChild? | boolean | false |
children? | string | ReactElement | - |
label? | string | - |
variant? | "accent" | "inverted" | "outline" | "ghost" | "accent" |
size? | "sm" | "default" | "lg" | "default" |
duration? | number | 0.7 |
ease? | [number, number, number, number] | [0.77, 0, 0.175, 1] |
labelOffset? | number | - |
labelOffsetLg? | number | - |
startChipRestRotate? | number | -45 |
startChipActiveRotate? | number | 0 |
endChipRestRotate? | number | 0 |
endChipActiveRotate? | number | -45 |
startChipRestScale? | number | 0 |
startChipActiveScale? | number | 1 |
endChipRestScale? | number | 1 |
endChipActiveScale? | number | 0 |
icon? | ReactNode | - |
startIcon? | ReactNode | - |
endIcon? | ReactNode | - |
className? | string | - |
groupClassName? | string | - |
chipClassName? | string | - |
labelClassName? | string | - |
startChipClassName? | string | - |
endChipClassName? | string | - |
iconClassName? | string | - |
Credits
Inspired by Annnimate.
Built by Axyl. The source code will be available on GitHub soon.
Last updated: 6/9/2026