Pixel Card
Animated pixel effect card with hover interactions and customizable variants
Pixel Card
Hover to see the effect
Usage
import PixelCard from './PixelCard';
<PixelCard variant="pink">
// your card content (use position: absolute)
</PixelCard>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'blue' | 'yellow' | 'pink' | 'default' | Predefined color variant |
gap | number | undefined | Gap between pixels (overrides variant) |
speed | number | undefined | Animation speed (overrides variant) |
colors | string | undefined | Comma-separated color values (overrides variant) |
noFocus | boolean | undefined | Disable focus interactions (overrides variant) |
className | string | '' | Additional CSS classes |
children | React.ReactNode | - | Card content |
Variants
- default: Light gray colors with moderate speed
- blue: Blue gradient colors with smooth animation
- yellow: Yellow/gold colors with fast animation
- pink: Pink/red colors with very fast animation and no focus