Canvas
Pixelated Image
OGL image revealer that starts as coarse blocks and sharpens to full resolution over time.
Preview
Animated depixelation reveal that doubles the sampling grid until the image resolves to full detail.
Attributes
Installation
pnpm dlx motion-blocks add pixelated-imageUsage
---import "@/components/motion-blocks/pixelated-image-element.ts";--- <motion-pixelated-image image="https://picsum.photos/seed/pixelated/800/600" initial-grid-size="6" step-duration="0.15"></motion-pixelated-image>API Reference
| Attribute | Type | Default |
|---|---|---|
image Image source URL used for the depixelation reveal. | string | "" |
initial-grid-size Starting vertical grid size before each depixelation step doubles it. | number | 6 |
step-duration Seconds each depixelation step lasts before the grid doubles again. | number | 0.15 |