Animated text with kinetic typography effects including wave, bounce, reveal, and scatter animations.

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

text

• Type: string - Default: 'Kinetic Text'
• Text to animate

effect

• Type: AnimationEffect - Default: 'wave'
• Animation effect type

speed

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

autoplay

• Type: boolean - Default: true
• Auto-start animation

loop

• Type: boolean - Default: false
• Continuous loop

theme

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

className

• Type: string
• Additional CSS class

Customization

CSS Variables

Override these variables in your Webflow custom code or CSS:

--speed: 1; /* Speed */

Webflow Classes

Target these classes in Webflow Designer for custom styles:

• .cc-kinetic-typography
• .cc-kinetic-typography__char
• .cc-kinetic-typography__text