A single-image uploader where the photo develops as it uploads, blurred and grey at first, revealed sharp behind a scan line that follows the progress.
"use client"
import { demoAdapter } from "@/examples/_demo"
import { ImageRevealUpload } from "@/components/image-reveal-upload"
export default function ImageRevealUploadExample() {
return (
<div className="w-full max-w-md">
<ImageRevealUpload adapter={demoAdapter} />
</div>
)
}
Installation
npx shadcn@latest add @uploadcn/image-reveal-uploadUsage
import { ImageRevealUpload } from "@/components/image-reveal-upload"<ImageRevealUpload onSuccess={(item) => save(item.result)} />The reveal is a clip-path driven by the upload percent. The preview is a local object URL, so it appears instantly. With reduced motion the scan line and flash are skipped.
Props
Prop
Type