Focus Transitions
Advanced focus state transitions with smooth animations, multiple ring types, and comprehensive keyboard navigation support for accessibility
Pro Features
Unlock advanced capabilities with the Pro version
8 Animation Types
Glow, scale, border, shadow, slide, fade, pulse, outline
Customizable Colors
Full color palette with intensity control
6 Easing Functions
Ease, bounce, elastic, and more
Accessibility First
WCAG 2.1 compliant, keyboard friendly
Performance Optimized
Hardware-accelerated animations
Flexible Integration
Works with any focusable element
Installation
Install via CLI
npx moonui-cli@latest add focus-transitionsUsage
Examples
Animation Types
8 different focus animation types - glow, scale, border, shadow, slide, fade, pulse, and outline effects
Easing Functions
6 different easing functions for natural focus transitions
Focus Colors
Customizable focus colors for different brand themes and UI contexts
Intensity Levels
Control focus effect intensity from subtle to prominent
Duration Variations
Adjust transition duration for different UI contexts and user preferences
Interactive Buttons
Real-world button components with enhanced focus states for better accessibility
Form Elements
Enhanced focus states for form inputs and text areas with keyboard navigation support
Card Focus States
Interactive card components with sophisticated focus transitions for navigation
Glow Focus
Press Tab to focus this card
Card with glowing focus ring for enhanced visibility.
Scale Focus
Elastic scale animation on focus
Card with subtle scale effect for modern interactions.