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
className="retro animate-[blink_0.5s_step-end_infinite]"
style={{
textShadow: "1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff"
}}
>
LEVEL UP!
```
Conditional Animation States
Apply animations based on game state:
```tsx
className={cn(
"transition-all duration-300",
health <= 25 && "animate-pulse bg-red-500/20",
isLevelUp && "animate-bounce"
)}
/>
```
Radix UI Animations
Use Radix state-based animations for overlays:
```tsx
className={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out",
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
)}
/>
className={cn(
"overflow-hidden data-[state=closed]:animate-accordion-up",
"data-[state=open]:animate-accordion-down"
)}
/>
```
Key Principles
- Wrap SVGs - Always wrap in div for hardware acceleration
- Use transforms - Prefer
transform over top/left - Step animations - Use
step-end for pixel-art feel - Conditional classes - Apply animations based on game state
- Custom keyframes - Define retro-specific animations
- 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 spinnercomponents/ui/8bit/xp-bar.tsx - Custom blink animationcomponents/ui/8bit/skeleton.tsx - Loading skeletoncomponents/ui/8bit/accordion.tsx - Radix state animations
|