# LockNKey Animation System

Interactive demonstration of extension animations

## Basic Animations

### fadeIn

Fade in with upward movement

Animated Element

### slideInLeft

Slide from left with fade

Animated Element

### slideInRight

Slide from right with fade

Animated Element

### slideUp

Slide up from bottom

Animated Element

### scaleIn

Scale from center

Animated Element

### pulseGlow

Continuous pulsing glow

Q-Shield Active

## Hover Effects

### hover-lift

Lift with shadow on hover

Hover Me

### hover-scale

Scale up on hover

Hover Me

### hover-glow

Glow effect on hover

Hover Me

## Staggered Children

Password Entry 1
Password Entry 2
Password Entry 3
Password Entry 4
Password Entry 5

## Loading States

### Loading Skeleton

### Shimmer Overlay

Loading...

### Spin Animation

## Integration Examples

### CSS Usage

<!-- Simple animation --> <div class="animate-fadeIn">Content</div> <!-- Staggered list --> <ul class="stagger-children"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <!-- Hover effects --> <button class="hover-lift">Click me</button>

### TypeScript Usage

import { animate, staggerChildren } from '@/extension/styles/animation-utils'; // Simple animation await animate(element, { type: 'fadeIn' }); // Staggered children await staggerChildren(container, { type: 'slideInLeft', staggerDelay: 100, }); // Use presets import { ANIMATION_PRESETS } from '@/extension/styles/animation-utils'; await animate(dialog, ANIMATION_PRESETS.dialog);