Components/Text Animations
Text Frame
A canvas boundary like frame for texts to wrap around with blur effect and dashed or solid line style.
frameblurcanvasdashed
Preview
Installation
npx shadcn@latest add @grootstudio/text-frameUsage
1
Import the component
2
Use like this
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| children | React.ReactNode | undefined | The text to display and animate. | |
| as | React.ElementType | span | The element to display the text in. | |
| lineStyle | solid|dashed | solid | The style of the frame line. | |
| accessible | boolean | true | Whether the text frame should be accessible. | |
| className | string | - | Additional Tailwind classes for custom styling. |
Dependencies
motion