Image with animated liquid distortion effect on hover.

Features

• ✅ Zero dependencies - Pure React implementation
• ✅ Full accessibility - ARIA labels, keyboard navigation, screen reader support
• ✅ Theme support - Light, dark, and auto modes
• ✅ Reduced motion support - Respects user preferences

Props

src

• Type: string - Default: ''
• Image source URL

alt

• Type: string - Default: 'Distorted image'
• Alt text

intensity

• Type: number - Default: 0.5
• Distortion intensity (0-1)

speed

• Type: number - Default: 1
• Animation speed (0-2)

theme

• Type: 'light' | 'dark' | 'auto' - Default: 'auto'
• Theme mode

className

• Type: string
• Additional CSS class

Customization

Webflow Classes

Target these classes in Webflow Designer for custom styles:

• .cc-liquid-distortion
• .cc-liquid-distortion__image