Liquid Text

Liquid Text creates mesmerizing organic flow animations that make your text appear to be made of liquid! With wave-like letter movements, customizable intensity, and animated particle droplets, this component adds fluid, dynamic motion to your typography.

Preview

Code

Liquid Intensities

Low Intensity Flow

Medium Intensity Flow

High Intensity Flow

Animation Speeds

Slow Liquid Motion

Normal Liquid Speed

Fast Liquid Motion

Different Text Styles

Bold Liquid Text

Large Liquid Text

Stylized Examples

�� Liquid Motion

�� Fluid Animation

�� Wave Effect

Interactive Demo

Feel the liquid flow!

Letters flow and ripple like liquid with organic motion

Installation

First, make sure you have the required dependencies:

npx @rajdevxd/aura-ui add liquid-text

yarn @rajdevxd/aura-ui add liquid-text

pnpm dlx @rajdevxd/aura-ui add liquid-text

bunx --bun @rajdevxd/aura-ui add liquid-text

Usage

import { LiquidText } from "@/components/ui/liquid-text"

export function Example() {
  return (
    <LiquidText
      text="Flowing Liquid"
      intensity="high"
      speed="normal"
    />
  )
}

Props

Prop	Type	Required	Description
`text`	`string`	Yes	The text to apply liquid effect to
`intensity`	`"low" \| "medium" \| "high"`	No	Strength of the liquid flow (default: "medium")
`speed`	`"slow" \| "normal" \| "fast"`	No	Animation speed (default: "normal")
`className`	`string`	No	Additional CSS classes

Intensity Levels

Low Intensity

Gentle, subtle liquid movement.

<LiquidText text="Low Intensity" intensity="low" />

Medium Intensity (Default)

Balanced liquid flow animation.

<LiquidText text="Medium Intensity" intensity="medium" />

High Intensity

Dramatic, intense liquid movement.

<LiquidText text="High Intensity" intensity="high" />

Speed Variations

Slow Liquid

Gentle, relaxed liquid motion.

<LiquidText text="Slow Liquid" speed="slow" />

Normal Speed (Default)

Balanced liquid animation timing.

<LiquidText text="Normal Speed" speed="normal" />

Fast Liquid

Quick, energetic liquid motion.

<LiquidText text="Fast Liquid" speed="fast" />

Features

Organic Flow: Realistic liquid-like movement
Wave Animation: Sine wave letter positioning
Particle Effects: Animated droplet particles
Intensity Control: Three levels of flow strength
Speed Control: Adjustable animation timing
Hardware Acceleration: Smooth 60fps animations

Advanced Usage

Water-themed Content

<LiquidText
  text="AQUATIC"
  intensity="high"
  speed="normal"
  className="text-4xl font-bold text-blue-400"
/>

Interactive Liquid

const InteractiveLiquid = () => {
  const [intensity, setIntensity] = React.useState('medium')

  return (
    <div className="space-y-4">
      <div className="flex space-x-2">
        <button onClick={() => setIntensity('low')}>Low</button>
        <button onClick={() => setIntensity('medium')}>Medium</button>
        <button onClick={() => setIntensity('high')}>High</button>
      </div>

      <LiquidText
        text="Interactive Liquid"
        intensity={intensity}
        speed="normal"
        className="text-2xl font-bold"
      />
    </div>
  )
}

Brand Names

<LiquidText
  text="FLUID BRAND"
  intensity="medium"
  speed="slow"
  className="text-3xl font-bold bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent"
/>

Loading States

<LiquidText
  text="Loading..."
  intensity="low"
  speed="normal"
  className="text-lg text-muted-foreground"
/>

Multi-line Liquid

<div className="space-y-4">
  <LiquidText text="First Line" intensity="high" />
  <LiquidText text="Second Line" intensity="medium" />
  <LiquidText text="Third Line" intensity="low" />
</div>

Performance

GPU Accelerated: Uses CSS transforms for smooth animations
Efficient Rendering: Minimal DOM manipulation
Hardware Acceleration: CSS wave animations
Memory Efficient: Lightweight animation system

Browser Support

Modern Browsers: Full support for Chrome, Firefox, Safari, Edge
CSS Transforms: Requires CSS transform support
Fallback: Graceful degradation to static text

Accessibility

Screen Reader Support: Proper text content for assistive technologies
Reduced Motion: Respects user's motion preferences
High Contrast: Maintains readability with liquid effects

Liquid Text - adding fluid motion to your typography! 💧🌊

Aura UI