"use client"; import React, { useId, CSSProperties } from "react"; interface AuroraTextProps { children?: React.ReactNode; className?: string; style?: CSSProperties; fontSize?: string | number; } const keyframesCSS = ` @keyframes aurora-bg-pos { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes aurora-seed { 0% { } 50% { } 100% { } } `; export function AuroraText({ children, className, style, fontSize = "4rem", }: AuroraTextProps) { const id = useId().replace(/:/g, ""); const filterId = `aurora-filter-${id}`; const spanStyle: CSSProperties = { display: "inline-block", background: "conic-gradient(from 0deg, #18B5FF, #7FE8FF, #a855f7, #ec4899, #18B5FF)", backgroundSize: "300% 300%", WebkitBackgroundClip: "text", backgroundClip: "text", WebkitTextFillColor: "transparent", color: "transparent", animation: "aurora-bg-pos 6s ease infinite", filter: `url(#${filterId})`, fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize, fontWeight: 700, lineHeight: 1.2, }; return ( <> {children} ); } export default AuroraText;

Aurora Text