Animated Word Background
Watch as beautiful Pilates words gracefully float across the screen, creating an elegant backdrop that embodies mindfulness and movement.
Features
- • Randomized word selection from 18 Pilates terms
- • Elegant floating animations with rotation and scale
- • Beautiful color palette using design system
- • Smaller words have blur and transparency effects
- • Respects user's reduced motion preferences
- • Performance optimized with GPU acceleration
Words in Motion
breathe strength control lengthen energy inhale exhale core mind confidence commit center flow engage ground release align radiate
How to Use
1. Basic Usage
<AnimatedWordBackground />
2. With Custom Properties
<AnimatedWordBackground
maxWords=6
animationSpeed="medium"
colors=sageskyBlueteal
className="opacity-80"
/>
maxWords=6
animationSpeed="medium"
colors=sageskyBlueteal
className="opacity-80"
/>
3. In Any Section
<section class="relative">
<AnimatedWordBackground />
<div class="relative z-10">
Your content here
</div>
</section>
<AnimatedWordBackground />
<div class="relative z-10">
Your content here
</div>
</section>
Available Props
maxWords: number (default: 4)
animationSpeed: 'slow' | 'medium' | 'fast'
colors: string[] (color names)
className: string (additional CSS classes)