GradientText

gradienttext-1779394026079.tsx

'use client'
export default function GradientText({
  text = 'Empire UI',
  size = '48px',
  gradient = 'linear-gradient(90deg, #6d28d9, #2563eb, #0891b2, #10b981, #6d28d9)',
}) {
  return (
    <div>
      <style>{'@keyframes flow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}'}</style>
      <h1 style={{
        fontSize:size, fontWeight:900, margin:0,
        background:gradient, backgroundSize:'200% auto',
        WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent',
        backgroundClip:'text', animation:'flow 3s ease infinite',
        letterSpacing:'-0.02em',
      }}>{text}</h1>
    </div>
  )
}

Component info

CategoryAnimations

Frameworkreact

TierFREE

Copies0

About

Animated gradient text with flowing color transition

More from Animations

'use client'
import { useState, useEffect } from 'react'

const STRINGS = ['Build faster.', 'Ship better.', 'Design smarter.', 'Scale effortlessly.']

export default function TypingAnimation({ strings = STRINGS, speed = 80, pause = 1500 }) {
  const

TypingAnimation

Animations

'use client'
import { useState } from 'react'

export default function ParticleButton({ label = 'Click Me! 🎉' }) {
  const [particles, setParticles] = useState([])
  const burst = (e) => {
    const rect = e.currentTarget.getBoundingClientRect()

ParticleButton

Animations

'use client'
export default function PulseIndicator({
  label = 'Live',
  color = '#10b981',
  size = 12,
  rings = 2,
}) {
  return (
    <div style={{ display:'flex', alignItems:'center', gap:'10px' }}>
      <div style={{ position:'relative', widt

PulseIndicator

Animations

'use client'
import { useState, useRef } from 'react'

export default function MagneticButton({ label = 'Hover me ✨', strength = 30 }) {
  const [pos, setPos] = useState({ x:0, y:0 })
  const ref = useRef(null)
  const onMove = (e) => {
    const rec

MagneticButton

Animations