--- name: animation-performance-retro description: Optimize 8-bit animations for smooth performance. Apply when creating animated pixel art, game UI effects, or any retro-styled animations. --- ## Animation Performance for Retro UI Optimize animations for smooth pixel art rendering and game-like interfaces. ### Hardware Acceleration Use CSS transforms for GPU-accelerated animations: ```tsx

``` **Avoid animating:** - `width`, `height` (triggers layout) - `margin`, `padding` (triggers layout) - `top`, `left` (triggers layout) **Prefer animating:** - `transform` (GPU accelerated) - `opacity` (GPU accelerated) - `filter` (GPU accelerated) ### Pixelated Animations Wrap animated SVGs in divs for hardware acceleration: ```tsx function PixelSpinner() { return (

); } ``` ### Loading States Use pulse animations for retro loading indicators: ```tsx function RetroSkeleton() { return (

); } ``` ### Custom Retro Animations Define pixel-art-specific animations: ```tsx

LEVEL UP!

``` ### Conditional Animation States Apply animations based on game state: ```tsx

``` ### Radix UI Animations Use Radix state-based animations for overlays: ```tsx ``` ### Key Principles 1. **Wrap SVGs** - Always wrap in div for hardware acceleration 2. **Use transforms** - Prefer `transform` over `top`/`left` 3. **Step animations** - Use `step-end` for pixel-art feel 4. **Conditional classes** - Apply animations based on game state 5. **Custom keyframes** - Define retro-specific animations 6. **Text shadows** - White shadow for legibility on colored backgrounds ### Performance Checklist - [ ] Animated elements wrapped in divs - [ ] No layout-triggering properties animated - [ ] Loading states use `animate-pulse` - [ ] Conditional animations properly gated - [ ] Custom animations use step timing functions ### Reference Components - `components/ui/8bit/spinner.tsx` - Animated spinner - `components/ui/8bit/xp-bar.tsx` - Custom blink animation - `components/ui/8bit/skeleton.tsx` - Loading skeleton - `components/ui/8bit/accordion.tsx` - Radix state animations

animation-performance-retro

Scan your own AI components