Pixel Grid
Animated pixel grids (3x3, 4x4, 5x5, 6x6) for brand visuals and loading states.
Interactive Demo
Customize the pixel grid with different dimensions, patterns, colors, sizes, and speeds.
frame
Color Themes
Three color themes with light/dark mode support. Dark mode features neon glow effects.
Sizes
Three sizes available: small (6px pixels), medium (10px), and large (14px).
Grid Dimensions
Four grid dimensions: 3x3 (9 pixels), 4x4 (16 pixels), 5x5 (25 pixels), and 6x6 (36 pixels). Each has unique patterns optimized for that size.
Static Mode
Set animated=false to show a static display of the pattern.
All Patterns
31 animation patterns organized into 11 categories (3x3 grid).
Solo
solo-center
solo-tl
solo-br
Horizontal Lines
line-h-top
line-h-mid
line-h-bot
Vertical Lines
line-v-left
line-v-mid
line-v-right
Diagonal Lines
line-diag-1
line-diag-2
Corners
corners-sync
corners-only
L-Shapes
L-tl
L-tr
L-bl
L-br
T-Shapes
T-top
T-bot
T-left
T-right
Duos
duo-h
duo-v
duo-diag
Frame
frame
frame-sync
Plus
plus-hollow
Sparse
sparse-1
sparse-2
sparse-3
Features
- Four grid dimensions: 3x3, 4x4, 5x5, 6x6
- 94 total animation patterns across all dimensions
- Three color themes: green (Sourceful brand), blue, pink
- Neon glow effects in dark mode
- Three sizes: sm, md, lg
- Three speed options: slow, normal, fast
- Static mode for non-animated display
- Pause/resume animation control
- Optional pattern labels
- Smooth CSS transitions
- Reduced motion support for accessibility
- Light and dark mode support
Usage
import { PixelGrid, PixelGridShowcase } from "@sourceful-energy/ui"
// Basic usage (3x3)
<PixelGrid pattern="frame" />
// 4x4 grid with unique pattern
<PixelGrid dimension={4} pattern="square-inner" />
// 5x5 grid with unique pattern
<PixelGrid dimension={5} pattern="diamond" />
// 6x6 grid with unique pattern
<PixelGrid dimension={6} pattern="ripple" />
// Static (non-animated) display
<PixelGrid pattern="corners-sync" animated={false} />
// With all options
<PixelGrid
pattern="corners-sync"
dimension={3} // 3 | 4 | 5 | 6 (default: 3)
color="green" // "green" | "blue" | "pink"
size="md" // "sm" | "md" | "lg"
speed="normal" // "slow" | "normal" | "fast"
animated={true} // true | false (default: true)
showLabel // Show pattern name below
paused={false} // Pause animation
/>
// Showcase all patterns for a dimension
<PixelGridShowcase dimension={4} color="green" size="md" />Pattern Categories
// Solo (3 patterns)
"solo-center" | "solo-tl" | "solo-br"
// Horizontal Lines (3)
"line-h-top" | "line-h-mid" | "line-h-bot"
// Vertical Lines (3)
"line-v-left" | "line-v-mid" | "line-v-right"
// Diagonal Lines (2)
"line-diag-1" | "line-diag-2"
// Corners (2)
"corners-sync" | "corners-only"
// L-Shapes (4)
"L-tl" | "L-tr" | "L-bl" | "L-br"
// T-Shapes (4)
"T-top" | "T-bot" | "T-left" | "T-right"
// Duos (3)
"duo-h" | "duo-v" | "duo-diag"
// Frame (2)
"frame" | "frame-sync"
// Plus (1)
"plus-hollow"
// Sparse (3)
"sparse-1" | "sparse-2" | "sparse-3"Props
interface PixelGridProps {
pattern: PatternType // Required - animation pattern
dimension?: PixelGridDimension // 3 | 4 | 5 | 6 (default: 3)
color?: PixelGridColor // "green" | "blue" | "pink" (default: "green")
size?: PixelGridSize // "sm" | "md" | "lg" (default: "md")
speed?: PixelGridSpeed // "slow" | "normal" | "fast" (default: "normal")
animated?: boolean // Enable animation (default: true)
paused?: boolean // Pause animation (default: false)
showLabel?: boolean // Show pattern name (default: false)
className?: string // Additional CSS classes
}