Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA text effect that flips each letter in 3D with a staggered animation on hover.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | - | The content to be displayed and animated |
as | ElementType | "p" | HTML element to render the component as |
className | string | - | Class name for the main container element |
textClassName | string | - | Class name for each letter (visible before flip) |
flipTextClassName | string | - | Class name for each letter (revealed after flip) |
staggerDuration | number | 0.05 | Duration of stagger delay between each letter in seconds |
staggerFrom | "first" | "last" | "center" | number | "random" | "first" | Direction to stagger animations from. Use a number to stagger from a specific character index |
transition | ValueAnimationTransition | AnimationOptions | { type: "spring", damping: 30, stiffness: 300 } | Animation transition configuration from Motion |
rotateDirection | "top" | "right" | "bottom" | "left" | "right" | Direction of 3D rotation on hover |