Animated Gradient Text
An animated gradient background which transitions between colors for text.
🎉
Introducing HiUI
Introducing HiUI
Installation
Copy and paste the following code into your project.
import { ReactNode } from "react"
import { cn } from "@/lib/utils"
export function AnimatedGradientText({
children,
className,
}: {
children: ReactNode
className?: string
}) {
return (
<div
className={cn(
"group relative mx-auto flex max-w-fit flex-row items-center justify-center rounded-2xl bg-white/40 px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#8fdfff1f] backdrop-blur-sm transition-shadow duration-500 ease-out [--bg-size:300%] hover:shadow-[inset_0_-5px_10px_#8fdfff3f] dark:bg-black/40",
className
)}
>
<div
className={`absolute inset-0 block h-full w-full animate-gradient bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:var(--bg-size)_100%] p-[1px] ![mask-composite:subtract] [border-radius:inherit] [mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)]`}
/>
{children}
</div>
)
}
Update the import paths to match your project setup.
Update tailwind.config.js
Add the following animations to your tailwind.config.js
file:
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
animation: {
gradient: "gradient 8s linear infinite",
},
keyframes: {
gradient: {
to: {
backgroundPosition: "var(--bg-size) 0",
},
},
},
},
},
}
Props
Prop | Type | Description | Default |
---|---|---|---|
children | The children passed into the component | ||
className | string | The class name to be applied. |