Pixel Swap
On hover an image builds in block by block, in a springy wave that starts where the pointer came in.
import { PixelSwap } from "pleate/effects/pixel-swap";Reveal
Hover to reveal
The wave starts where you come in.
Props
- src
Image that builds in.
string- alt
Description of the image.
string- columns
Blocks across.
numberdefault 14- duration
Time one block takes (ms).
numberdefault 420- spread
Time the wave takes to cross (ms).
numberdefault 420
Accessibility
- The image layer is role=img with the alt text.
- Focus inside starts the swap from the center.
- Reduced motion swaps with a fade.