Pixel Image

New

An image that resolves from chunky pixels to full detail as it scrolls into view.

motionutils@soultel/use-reduced-motion-safe

Installation

$ pnpm dlx shadcn@latest add @soultel/pixel-image

No namespace set up? npx shadcn@latest add https://asafefe.dev/r/pixel-image.json works too.

Manual installation

1. Install the dependencies.
terminal1 lines
```
npm install motion
```
2. Copy the source from the Code tab into components/pixel-image.tsx.

Usage

example.tsx5 lines

import { PixelImage } from "@/components/pixel-image"

export function Example() {
  return <PixelImage src="/photo.jpg" alt="Team photo" className="aspect-video w-full" />
}

Props

Prop	Type	Default	Description
src	string	-	Same-origin or CORS-enabled image URL.
alt	string	-	Accessible description.
from	number	48	Starting block size in px.
duration	number	1.6	Reveal time in seconds.
pixelateOnHover	boolean	false	Re-pixelate while hovered.