Liquid Text

Create a dynamic liquid-like text effect with smooth animations of border radius and scale. Perfect for adding eye-catching text animations to your UI.

Overview

The LiquidText component creates a visually engaging liquid-like animation by dynamically adjusting the border radius and scale of the text container. This effect adds fluidity and energy to the text.

The component takes additional classes to customize the component's styling.

Preview

Liquid

Usage

'use client'
 
import { LiquidText } from '@/components/text/liquid-text'
 
<LiquidText text="Liquid" />

Code

'use client'
 
import { motion } from 'motion/react'
 
import { cn } from '@/lib/utils'
 
interface LiquidTextProps {
  text: string
  className?: string
  as?: React.ElementType
}
 
const animationVariants = {
  animate: {
    borderRadius: ['20% 80% 20% 80%', '80% 20% 80% 20%', '20% 80% 20% 80%'],
    boxShadow: [
      '0 0 10px rgba(0, 0, 0, 0.2)',
      '0 0 20px rgba(0, 0, 0, 0.4)',
      '0 0 10px rgba(0, 0, 0, 0.2)',
    ],
    scale: [1, 1.05, 1], // A subtle scaling effect for more emphasis
  },
  transition: {
    duration: 3,
    repeat: Infinity,
    ease: 'easeInOut',
  },
}
 
export function LiquidText({
  text,
  className,
  as: Component = 'div',
}: LiquidTextProps) {
  const MotionComponent = motion.create(Component)
 
  return (
    <MotionComponent
      className={cn(
        `w-44 overflow-hidden rounded p-6 text-4xl font-bold text-white shadow-lg
        will-change-transform`,
        className
      )}
      variants={animationVariants}
      animate="animate"
      transition={animationVariants.transition}
    >
      {text}
    </MotionComponent>
  )
}

Example

Custom Colors Gradient