Getting Started
Templates
Components
Special Effects
Animations
Text Animations
Backgrounds
Stay hungry, stay foolishSSttaayy hhuunnggrryy,, ssttaayy ffoooolliisshh
import Text3DFlip from "@/components/ui/text-3d-flip"<Text3DFlip
className="bg-background"
textClassName="bg-background text-foreground"
flipTextClassName="bg-background text-foreground"
rotateDirection="top"
>
Stay hungry, stay foolish
</Text3DFlip>Design for failureDDeessiiggnn ffoorr ffaaiilluurree
| 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 |