Scramble Hover
A text component that scrambles the text on hover.
Installation
1pnpm dlx shadcn add @fancy/scramble-hover
Usage
For the scrambling effect, you can use either the original characters, or another set of characters specified in the characters prop.
You can also apply a different styling on the scrambled text by passing a string to the scrambleClassName prop. This allows for example to use a different font family or color, like in the following example. Please not that if the scrambledClassName is applied, it's not going to be merged with the className prop, so you have to style the original text and the scrambled text separately.
With the sequential prop, you can scramble the text in a sequential manner, starting from the start, the end, or the center of the text. In that case, the maxIterations prop is ignored.
In my experience this works best with a monospaced font, but feel free to experiment.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text* | string | - | The text to be displayed and scrambled |
| scrambleSpeed | number | 50 | Speed of the scrambling animation in milliseconds |
| maxIterations | number | 10 | Maximum number of iterations for the scrambling animation |
| sequential | boolean | false | Whether to scramble the text sequentially |
| revealDirection | "start" | "end" | "center" | "start" | The direction to reveal the scrambled text |
| useOriginalCharsOnly | boolean | true | Whether to use only the original characters or the whole string |
| className | string | undefined | Additional CSS classes for styling |
| characters | string |
| Characters to use for scrambling, if |
| scrambledClassName | string | undefined | Additional CSS classes for styling the scrambled text |