Pixel Grid
Animated 3x3 pixel grid for brand visuals and loading states.
Interactive Demo
Customize the pixel grid with different 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).
All Patterns
31 animation patterns organized into 11 categories.
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
- 31 unique animation patterns across 11 categories
- 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
- 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
<PixelGrid pattern="frame" />
// With all options
<PixelGrid
pattern="corners-sync"
color="green" // "green" | "blue" | "pink"
size="md" // "sm" | "md" | "lg"
speed="normal" // "slow" | "normal" | "fast"
showLabel // Show pattern name below
paused={false} // Pause animation
/>
// Showcase all patterns
<PixelGridShowcase 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
color?: PixelGridColor // "green" | "blue" | "pink" (default: "green")
size?: PixelGridSize // "sm" | "md" | "lg" (default: "md")
speed?: PixelGridSpeed // "slow" | "normal" | "fast" (default: "normal")
paused?: boolean // Pause animation (default: false)
showLabel?: boolean // Show pattern name (default: false)
className?: string // Additional CSS classes
}