animation-performance-retro
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)
More from theorcdev/8bitcn-ui
fumadocs-mdx-structure
Create MDX documentation files with proper frontmatter, imports, and component integration. Apply when creating or updating Fumadocs documentation pages in content/docs/.
161rendering-animate-svg
Wrap animated SVG elements in a div to enable hardware acceleration. Apply when animating SVG icons or elements, especially in 8-bit retro components with pixel art animations.
928-bit-pixel-art-patterns
Create pixelated borders, shadows, and effects for 8-bit retro components. Apply when building 8-bit styled UI components that need authentic pixel art aesthetics.
86fumadocs-component-docs
Create component documentation with installation, usage examples, and preview sections. Apply when documenting 8-bit components with proper structure and examples.
85fumadocs-registry-integration
Register 8-bit components in registry.json for shadcn/ui add command. Apply when adding new components to the component library distribution.
60retro-css-architecture
Organize 8-bit CSS with custom properties, pixel fonts, and responsive pixel art. Apply when creating or modifying retro-styled components and their CSS.
53