Evandro Fonseca Junior
5c1ccbc69a
Added Tailwind CSS and tw-animate-css imports to globals.css. Introduced a custom dark variant and an extensive @theme inline block with CSS variables for colors, radii, and animations. Included keyframes for shimmer-slide, spin-around, gradient, shine, and background-position-spin to enable consistent theming and dynamic UI effects across the application.
39 lines
887 B
TypeScript
39 lines
887 B
TypeScript
import { ComponentPropsWithoutRef } from "react"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export interface AnimatedGradientTextProps
|
|
extends ComponentPropsWithoutRef<"div"> {
|
|
speed?: number
|
|
colorFrom?: string
|
|
colorTo?: string
|
|
}
|
|
|
|
export function AnimatedGradientText({
|
|
children,
|
|
className,
|
|
speed = 1,
|
|
colorFrom = "#ffaa40",
|
|
colorTo = "#9c40ff",
|
|
...props
|
|
}: AnimatedGradientTextProps) {
|
|
return (
|
|
<span
|
|
style={
|
|
{
|
|
"--bg-size": `${speed * 300}%`,
|
|
"--color-from": colorFrom,
|
|
"--color-to": colorTo,
|
|
} as React.CSSProperties
|
|
}
|
|
className={cn(
|
|
`animate-gradient inline bg-gradient-to-r from-[var(--color-from)] via-[var(--color-to)] to-[var(--color-from)] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</span>
|
|
)
|
|
}
|