GradientText

'use client';
import { useEffect, useRef } from 'react';

export default function GradientText({ text = "Build something amazing", size = "48px" }) {
  const ref = useRef(null);

  useEffect(() => {
    let angle = 0;
    const frame = () => {
      angle = (angle + 0.5) % 360;
      if (ref.current) {
        ref.current.style.backgroundImage = `linear-gradient(${angle}deg, #C9A84C, #6366f1, #C9A84C, #e8c96d)`;
      }
      requestAnimationFrame(frame);
    };
    const id = requestAnimationFrame(frame);
    return () => cancelAnimationFrame(id);
  }, []);

  return (
    <h1
      ref={ref}
      style={{
        fontSize: size,
        fontWeight: 900,
        fontFamily: 'system-ui, sans-serif',
        backgroundImage: 'linear-gradient(135deg, #C9A84C, #6366f1)',
        backgroundSize: '200% 200%',
        WebkitBackgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
        backgroundClip: 'text',
        margin: 0,
        lineHeight: 1.2,
        letterSpacing: '-0.02em',
      }}
    >
      {text}
    </h1>
  );
}

Component info

About

Animated gradient text with shimmer effect