Pixel Background

Installation

File Structure

Usage

import { PixelBackground } from "@/components/backgrounds/pixel";

export default function MyPage() {
  return (
    <PixelBackground>
      <div className="flex items-center justify-center h-screen">
        <h1>Your content here</h1>
      </div>
    </PixelBackground>
  );
}

API Reference

PixelBackground

Animation Patterns

The component supports multiple animation patterns that control how pixels appear on hover:

• center — Ripples outward from the center of the container
• top — Reveals from top to bottom
• bottom — Reveals from bottom to top
• left — Reveals from left to right
• right — Reveals from right to left
• diagonal — Reveals along a diagonal from top-left to bottom-right
• ascend — Reveals from bottom-right to top-left
• edges — Reveals from the edges inward
• spiral — Reveals in a spiral pattern from center
• cursor — Ripples outward from the current mouse position
• random — Reveals in random order

Notes

• Canvas-based rendering: Uses HTML5 Canvas for efficient pixel animation
• Responsive: Automatically resizes and re-renders when the container size changes
• Accessibility: Respects the prefers-reduced-motion media query
• Color customization: Supports theme-aware colors with separate dark and light mode palettes
• Performance: Optimized animation loop with requestAnimationFrame
• Interactive: Supports hover-based animation triggers, with cursor-relative animations available

Examples

With Custom Colors

<PixelBackground
  darkColors="#ff6b6b,#ee5a6f,#c44569"
  lightColors="#ffe66d,#ffd93d,#ffc93c"
  pattern="spiral"
  speed={50}
>
  <YourContent />
</PixelBackground>

With Cursor Pattern

<PixelBackground pattern="cursor" gap={8} speed={45}>
  <YourContent />
</PixelBackground>

Credits

Built by Unlumen UI. Inspired by React Bits and their Pixel Card component.