Magic Text
Sparkles Text Component
A text component with animated sparkle effects to draw attention to important text elements.
- Customizable sparkle colors and size
- Configurable animation speed
- Works with any text content
- Adds visual interest to headings or important text
Installation
The Sparkles Text component is part of our UI library. You can import it directly from the components directory.
Usage
Here is how to use the Sparkles Text component in your project.
React TSX
React TSX
Examples
Default Sparkles Text
Magic Text
Colored Sparkles Text
Colorful Magic
Custom Sparkles Text
Special Offer
API Reference
Properties
| Property | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The text content to display with sparkles |
text | string | - | Alternative to children prop for text content |
sparkleCount | number | 10 | Number of sparkles to display |
sparklesCount | number | 10 | Alias for sparkleCount |
sparkleSize | number | 15 | Size of sparkles in pixels |
sparkleColors | string[] | - | Array of custom sparkle colors |
colors | { first: string, second: string } | { first: "#9E7AFF", second: "#FE8BBB" } | Default pair of colors if sparkleColors not provided |
speed | number | 0.3 | Animation speed for sparkles (0.1 to 1.0) |
className | string | - | Additional CSS classes |