Animated Gradient Text

Description

The Animated Gradient Text component is a versatile and visually appealing text element that features an animated gradient background. It allows for customization of text content, heading level, font size, font weight, and gradient colors. The component creates a dynamic, eye-catching effect by animating multiple radial gradients, making it ideal for headlines, titles, or any text that needs to stand out.

Installation

bash

sabaccui add animatedGradientText

Usage

Here are examples of how to use the Animated Gradient Text component with different configurations:

Large Heading

Preview

Welcome to our site! (Gradient text)

Subtle Gradient Effect

Preview

Subtle gradient effect (Gradient text)

Schema

Field Name	Type	Description	Default Value
`text`	`text`	The text content to be displayed	-
`colors`	`textarea`	A list of color codes, each on a new line, used for the gradient effect	-
`speed`	`number`	The animation speed of the gradient effect	0
`level`	`option`	The HTML heading level or paragraph tag for the text	h1
`size`	`option`	The font size of the text	-
`weight`	`option`	The font weight of the text	-

Field Details:

text: The main content of the component. It supports plain text input.
colors: A required field where you specify the colors for the gradient. Each color should be on a new line and can be in any valid CSS color format (e.g., hex, rgb, rgba).
speed: Controls the animation speed of the gradient. Higher values result in faster movement.
level: Determines the HTML tag used for the text. Options are:
- h1
- h2
- h3
- h4
- p
size: Sets the font size of the text. Options are:
- 9xl
- 7xl
- 5xl
- 3xl
- xl
- lg
weight: Defines the font weight of the text. Options are:
- Bold
- Semibold
- Light

Notes

The component uses Vue 3 composition API and TypeScript for enhanced type safety and improved code organization.
The gradient animation is implemented using requestAnimationFrame for smooth performance.
The component automatically adjusts the gradient position and animation based on the specified colors and speed.
The gradient effect is created using multiple radial gradients, which are dynamically generated and animated.

Best Practices:

Use contrasting colors in the gradient for better visibility of the text.
Adjust the speed carefully to ensure the animation is not distracting from the content.
Consider the context where the component is used; highly animated text may not be suitable for all parts of a website.
Test the component across different devices and screen sizes to ensure readability and performance.