← All components
Surfaces / component
Pixel Card
A field of tiny pixels appears and shimmers on hover or focus.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- The included Demo.tsx and shared/demo.css recreate the complete preview. Import the main component to compose your own design.
- Reduced motion keeps a still effect. Hidden and offscreen instances stop requesting frames; all owned work is cancelled on unmount.
- Each color variant retains its original spacing and shimmer speed. The pink variant also responds to keyboard focus.
React 19CSS
React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children (required) | ReactNode | — | Content rendered inside the interactive surface; the demo uses this control as its heading. |
variant | default|blue|yellow|pink | default | Color variant |
gap | number | variant default | Pixel spacing in CSS pixels, at least 1; adapts to keep the grid below 16,384 pixels. |
speed | number | variant default | Shimmer speed, 0–100; appearance timing remains unchanged. |
colors | string | variant default | Comma-separated CSS colors; overrides the variant palette. |
noFocus | boolean | false | Disable wrapper tab stop and focus-triggered pixels. Child controls remain accessible. |
paused | boolean | false | Freeze the current frame; hidden time is excluded. |
replayToken | number | 0 | Change this value to restart the effect. |
className | string | '' | Additional outer classes. |