TextProNew
Letter 3D Swap
On hover every letter turns like the face of a cube and reveals its copy. Works well for headlines and menu links.
Customize
gradientFrom
gradientTo
swapColor
Based on Letter 3D Swap (MIT license) · Terms of use
Props
12 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The text to animate. |
| rotateDirection | 'top' | 'right' | 'bottom' | 'left' | "right" | Which way the letters turn. |
| staggerDuration | number | 0.05 | Delay between letters, in seconds. |
| staggerFrom | 'first' | 'last' | 'center' | 'random' | number | "first" | Which letter the wave starts from. |
| transition | ValueAnimationTransition | AnimationOptions | "{ type: 'spring', damping: 30, stiffness: 300 }" | Spring or timing settings. |
| as | ElementType | "p" | HTML tag of the outer element. |
| mainClassName | string | — | Classes for the outer element. |
| frontFaceClassName | string | — | Classes for the front face. Give it the page background. |
| secondFaceClassName | string | — | Classes for the second face that shows on turn. |
| gradientFrom | string | "#ffffff" | Colour of the first letter. The text fades into the gradient end colour. |
| gradientTo | string | "#d4d4d8" | Colour of the last letter, the end of the gradient. |
| swapColor | string | "rgba(255,255,255,0.6)" | Colour of the face that turns into view on hover. |
Dependencies
3 required packages
npm install motion clsx tailwind-merge