Docs / Components / Pixel Fall Effect
Pixel Fall Effect
A card component where an interactive pixelated screen shatters and falls down on hover, revealing an underlying vibrant color.
Canvas Effect
DigitalShatter
Interactive structural physics built natively.
Hover to reveal
Dependencies
Install the following dependencies to use this component:
1npm install lucide-react
Installation
Run the following command in your terminal to add the component to your project:
1npx rankflow-ui@latest add pixel-fall-effect
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| direction | string | 'down' | The direction of the pixel fall. |
| defaultColor | string | '#2563eb' | The color of the canvas layer. |
| hoverColor | string | '#ef4444' | The background color revealed on hover. |
| pixelSize | number | 16 | The size of each falling pixel block. |
| className | string | '' | Additional CSS classes. |