---
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
<div className="transition-transform hover:scale-110" />
<div className="translate-x-0 translate-y-0" />
```

**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 (
    <div className="animate-spin">
      <svg viewBox="0 0 16 16">
        <rect x="2" y="2" width="4" height="4" fill="currentColor" />
      </svg>
    </div>
  );
}
```

### Loading States

Use pulse animations for retro loading indicators:

```tsx
function RetroSkeleton() {
  return (
    <div className="relative animate-pulse">
      <div className="h-20 bg-muted" />
    </div>
  );
}
```

### Custom Retro Animations

Define pixel-art-specific animations:

```tsx
<div
  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!
</div>

<style>{`
  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }
`}</style>
```

### Conditional Animation States

Apply animations based on game state:

```tsx
<div
  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
<DialogContent
  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"
  )}
/>

<AccordionContent
  className={cn(
    "overflow-hidden data-[state=closed]:animate-accordion-up",
    "data-[state=open]:animate-accordion-down"
  )}
/>
```

### 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


---
Source attribution: TheOrcDev
Original project: https://github.com/TheOrcDev/8bitcn-ui/blob/56066c038165223b8505a344309279ae27757a81/.claude/skills/animation-performance-retro/SKILL.md
License: MIT
License information: https://opensource.org/license/mit
Original upstream instructions; downloaded from Dave AI.

## Upstream license notice

MIT License

Copyright (c) 2025 8bitcn

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.



# Dave AI resource metadata

Creator / publisher: TheOrcDev
Original project: https://github.com/TheOrcDev/8bitcn-ui/blob/56066c038165223b8505a344309279ae27757a81/.claude/skills/animation-performance-retro/SKILL.md
Attribution basis: Recovered original package and original project license at a pinned revision

Fields of work: Design, Development & Engineering
Roles: Frontend Developer, Game Developer, UX Designer
Specialties: Cross Platform, Design, Frontend
Tools: Radix Ui
Country applicability: Country not specified
Classification basis: Source catalog labels
Instruction SHA-256: e719e45d3e765ccd1e05869cdce43eac84c4eb305858552d4e0416232bea2ece
Metadata reviewed: 2026-10-27
This metadata supersedes earlier Dave AI catalog attribution. Original instruction and supporting files are preserved.