Description
When importing and using the AuroraText component from Magic UI, the color shift effect does not apply correctly inside the text. Instead, it appears as if a div with changing colors is placed over the text, rather than blending seamlessly with the text itself.
To Reproduce
Steps to reproduce the issue:
Install and import AuroraText from Magic UI.
Use the component in a Next.js/React project with the following sample code:
import { AuroraText } from "magic-ui";
export default function Example() {
return <h1 className="text-4xl font-bold tracking-tighter md:text-5xl lg:text-7xl">
<AuroraText>Free Trial</AuroraText> classes for 3 days
</h1>
}
Run the application and observe the text rendering.
Expected Behavior
The color shifting effect should be applied inside the text itself, rather than appearing as an overlay outside of the text boundaries.
Screenshots
Attached is an image showing the issue where the gradient effect is appearing as a separate overlay instead of affecting the text properly.
This issue may be related to improper styling or missing blending properties in the component. If there's a workaround (such as additional CSS or props to modify the effect), please advise.