Gradient Flow Text

Mesmerizing animated gradient that flows through text like liquid colors. Perfect for eye-catching headlines, brand names, and call-to-action elements.

Continuous Flow

Smooth, endless gradient animation that draws the eye.

Open in

Hover Activated

Gradient starts flowing when user hovers over the text.

Open in

Rainbow Spectrum

Full rainbow color cycle for maximum visual impact.

Open in

Installation

npm install framer-motion

pnpm install framer-motion

yarn add framer-motion

bun add framer-motion

Copy and paste the following code into your project.

'use client';

import { useState, useRef } from 'react';
import { motion, useInView } from 'framer-motion';

interface GradientFlowTextProps {
  text: string;
  className?: string;
  colors?: string[];
  speed?: number;
  angle?: number;
  trigger?: 'continuous' | 'hover' | 'inView';
}

export const GradientFlowText = ({
  text,
  className = '',
  colors = ['#ff0080', '#7928ca', '#ff0080'],
  speed = 3,
  angle = 90,
  trigger = 'continuous',
}: Readonly<GradientFlowTextProps>) => {
  const containerRef = useRef<HTMLSpanElement>(null);
  const isInView = useInView(containerRef, { once: false, amount: 0.5 });
  const [isHovering, setIsHovering] = useState(false);

  const shouldAnimate = () => {
    switch (trigger) {
      case 'continuous':
        return true;
      case 'inView':
        return isInView;
      case 'hover':
        return isHovering;
      default:
        return false;
    }
  };

  const gradientColors = colors.join(', ');

  return (
    <motion.span
      ref={containerRef}
      className={`inline-block bg-clip-text text-transparent ${className}`}
      onMouseEnter={() => setIsHovering(true)}
      onMouseLeave={() => setIsHovering(false)}
      style={{
        backgroundImage: `linear-gradient(${angle}deg, ${gradientColors})`,
        backgroundSize: '200% 200%',
      }}
      animate={
        shouldAnimate()
          ? {
              backgroundPosition: ['0% 50%', '100% 50%', '0% 50%'],
            }
          : { backgroundPosition: '0% 50%' }
      }
      transition={
        shouldAnimate()
          ? {
              duration: speed,
              ease: 'linear',
              repeat: Infinity,
            }
          : {}
      }
    >
      {text}
    </motion.span>
  );
};

export default GradientFlowText;

'use client';import { useState, useRef } from 'react';import { motion, useInView } from 'framer-motion';interface GradientFlowTextProps {  text: string;  className?: string;  colors?: string[];  speed?: number;  angle?: number;  trigger?: 'continuous' | 'hover' | 'inView';}export const GradientFlowText = ({  text,  className = '',  colors = ['#ff0080', '#7928ca', '#ff0080'],  speed = 3,  angle = 90,  trigger = 'continuous',}: Readonly<GradientFlowTextProps>) => {  const containerRef = useRef<HTMLSpanElement>(null);  const isInView = useInView(containerRef, { once: false, amount: 0.5 });  const [isHovering, setIsHovering] = useState(false);  const shouldAnimate = () => {    switch (trigger) {      case 'continuous':        return true;      case 'inView':        return isInView;      case 'hover':        return isHovering;      default:        return false;    }  };  const gradientColors = colors.join(', ');  return (    <motion.span      ref={containerRef}      className={`inline-block bg-clip-text text-transparent ${className}`}      onMouseEnter={() => setIsHovering(true)}      onMouseLeave={() => setIsHovering(false)}      style={{        backgroundImage: `linear-gradient(${angle}deg, ${gradientColors})`,        backgroundSize: '200% 200%',      }}      animate={        shouldAnimate()          ? {              backgroundPosition: ['0% 50%', '100% 50%', '0% 50%'],            }          : { backgroundPosition: '0% 50%' }      }      transition={        shouldAnimate()          ? {              duration: speed,              ease: 'linear',              repeat: Infinity,            }          : {}      }    >      {text}    </motion.span>  );};export default GradientFlowText;

Props

Prop

Type

Examples

// Brand colors
<GradientFlowText
  text="Company Name"
  colors={['#0066cc', '#00ccff', '#0066cc']}
  speed={4}
/>

// Sunset gradient
<GradientFlowText
  text="Sunset Vibes"
  colors={['#ff512f', '#f09819', '#ff512f']}
  angle={45}
/>

// Neon party
<GradientFlowText
  text="PARTY"
  colors={['#ff00ff', '#00ffff', '#ffff00', '#ff00ff']}
  speed={2}
/>

// Subtle professional
<GradientFlowText
  text="Enterprise"
  colors={['#1a1a2e', '#16213e', '#1a1a2e']}
  speed={6}
  trigger="hover"
/>

Gradient Flow Text

Continuous Flow

Hover Activated

Rainbow Spectrum

Installation

Copy and paste the following code into your project.

Props

Examples

On this page

Contribute