Aurora gradient text accent
Wraps one word in a shifting multicolor gradient to draw the eye in a hero headline. Pass a custom `colors` array to match brand palette instead of the default rainbow. Use on one word max per headline, more reads as noisy.
Live preview
open in new tab ↗import { AuroraText } from "@/components/magicui/aurora-text"
export function AuroraTextDemo() {
return (
<h1 className="text-4xl font-bold tracking-tighter md:text-5xl lg:text-7xl">
Ship <AuroraText>beautiful</AuroraText> products
</h1>
)
}Block id: magicui-aurora-textreact-tailwind · swap-content
More animation-text blocks
Want the whole site, not just the block?
We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.