Claude-skill-registry animation-performance-retro

Optimize 8-bit animations for smooth performance. Apply when creating animated pixel art, game UI effects, or any retro-styled animations.

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/animation-performance-retro" ~/.claude/skills/majiayu000-claude-skill-registry-animation-performance-retro && rm -rf "$T"

manifest: skills/data/animation-performance-retro/SKILL.md

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:

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

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:

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

Custom Retro Animations

Define pixel-art-specific animations:

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

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

<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

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