A simple text flip animation on hover component built with Tailwind CSS.
Adjust the translate prop to control the distance the text travels during animation. For most cases 130% is enough but for skew on large fonts, you might need to increase the translate value to prevent the text from being cut off.
$ npx shadcn@latest add https://akshitr.com/r/text-flip.json
import { TextFlip } from "@/components/text-flip";
export default function TextFlipDemo() {
return <TextFlip text="Hello World" />;
}| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | — | The text displayed and animated. |
| secondText? | string | same as text | Different text to show on hover. |
| as? | React.ElementType | "div" | The element or component to render as. |
| direction? | "up" | "down" | "up" | Direction the text slides in and out. |
| duration? | number | 300 | Animation duration in milliseconds. |
| skew? | boolean | false | Whether to skew the text on hover. |
| blur? | boolean | false | Whether to blur the text on hover. |
| underline? | boolean | false | Whether to show underline on the hover text. |
| translate? | string | "130%" | How far the text travels during animation. |
| easing? | string | "cubic-bezier(0.22,1,0.36,1)" | CSS easing function for the animation. |
| className? | string | — | Class applied to the root element. |