Pixel Card
0
Used by 0Controls
Pixel Card
Fill a card with a shimmering canvas grid of pixels that grow in from the center or any edge on hover, scroll, or automatically.
KEY FEATURES
- — Directional grow-in reveal from middle, top, bottom, left, or right
- — Default auto-run, hover, or scroll-into-view enter triggers
- — Scroll enter position threshold with optional replay on re-entry
- — Multi-color palette cycled evenly across pixels
- — Adjustable pixel gap, size, and shimmer speed
- — Continuous shimmer flicker once pixels reach full size
- — Customizable background, border color, width, and corner radius
- — Optional centered label with font and color controls
- — Respects prefers-reduced-motion for accessibility
- — Static single-frame render on export and thumbnails
API Reference
All props map directly to the controls panel sliders and color pickers.
LAYOUT
PROP
TYPE
DEFAULT
DESCRIPTION
appearFrom
enum
middle
Origin the grow-in sweeps from: middle, top, bottom, left, or right.
trigger
enum
default
How the reveal starts: auto by default, on hover, or on scroll into view.
enterPosition
enum
above
Scroll point that fires the Enter reveal: top, middle, or bottom of view.
enterReplay
enum
no
Replays the Enter reveal each time the card re-enters view.
gap
number
6
Spacing between grid pixels; larger values give fewer, sparser pixels.
pixelSize
number
2
Maximum size of each pixel square, in pixels.
padding
number
0
Inner padding between the card edge and the pixel canvas, in pixels.
backgroundColor
color
#000000
Background fill color of the card behind the pixels.
borderColor
color
#27272a
Color of the card's outer border stroke.
borderWidth
number
1
Thickness of the card border, in pixels.
radius
number
25
Corner rounding of the card, in pixels.
showLabel
boolean
false
Shows a centered text label overlaid on the pixels.
label
object
{"..."}
Text, color, and font of the centered label overlay.
ANIMATION
PROP
TYPE
DEFAULT
DESCRIPTION
speed
number
80
Shimmer speed of the pixels; 0 freezes them, higher shimmers faster.
COLORS
PROP
TYPE
DEFAULT
DESCRIPTION
colors
array
[...]
Palette of pixel colors, cycled evenly across the grid by index.
