50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T8133,"use client" import { useCallback, useEffect, useId, useRef, useState, type ChangeEvent, type DragEvent, type ReactNode, } from "react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" import { DitherImage, DitherImageContent, DitherImageFrame, DitherImageOverlay, DitherImageReveal, type DitherRevealDirection, type DitherSize, } from "@/registry/default/ui/dither-image" /** Layered edge + lift (SKILL-DESIGN) — replaces flat card borders. */ const PANEL_SURFACE = cn( "bg-card/65 rounded-2xl p-4 md:p-5", "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_2px_-1px_rgba(0,0,0,0.06),0px_2px_4px_0px_rgba(0,0,0,0.04)]", "dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.06),0px_1px_2px_-1px_rgba(255,255,255,0.03),0px_2px_4px_0px_rgba(0,0,0,0.2)]", "transition-shadow duration-200", "hover:shadow-[0px_0px_0px_1px_rgba(0,0,0,0.08),0px_1px_2px_-1px_rgba(0,0,0,0.08),0px_2px_4px_0px_rgba(0,0,0,0.06)]", "dark:hover:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.1),0px_1px_2px_-1px_rgba(255,255,255,0.05),0px_2px_4px_0px_rgba(0,0,0,0.25)]" ) const BTN_PRESS = "active:scale-[0.96] transition-transform duration-150 ease-[cubic-bezier(0.2,0,0,1)]" const SELECT_SURFACE = cn( "border-input/80 bg-input/15 h-10 w-full rounded-[calc(var(--radius)-2px)] border px-2.5 text-sm outline-none", "focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-2" ) const FALLBACK_SRC = "/images/gibli/gibli-1.jpg" const FALLBACK_ALT = "Sample wallpaper — upload or paste a URL to preview" const REMOTE_HTTP_RE = /^https?:\/\//i function labelFromRemoteUrl(href: string): string { if (href.startsWith("/")) { const file = href.split("/").pop() return file ?? href } try { const u = new URL(href) const path = u.pathname.length > 48 ? `${u.pathname.slice(0, 48)}…` : u.pathname return `${u.hostname}${path}` } catch { return "Remote image" } } /** Use with `next/image` when the optimizer cannot fetch the host (arbitrary URLs, blobs, data). */ function needsUnoptimizedImage(src: string): boolean { return ( src.startsWith("blob:") || src.startsWith("data:") || REMOTE_HTTP_RE.test(src) ) } const SIZE_OPTIONS: { value: DitherSize; label: string }[] = [ { value: "xs", label: "xs (8px)" }, { value: "sm", label: "sm (12px)" }, { value: "md", label: "md (16px)" }, { value: "lg", label: "lg (20px)" }, { value: "xl", label: "xl (28px)" }, { value: "2xl", label: "2xl (40px)" }, ] const ASPECT_OPTIONS = [ { value: "square" as const, label: "1:1" }, { value: "video" as const, label: "16:9" }, { value: "portrait" as const, label: "3:4" }, { value: "wide" as const, label: "21:9" }, ] const REVEAL_DIRECTION_OPTIONS: { value: DitherRevealDirection label: string }[] = [ { value: "r", label: "Right fade (clean left)" }, { value: "l", label: "Left fade (clean right)" }, { value: "t", label: "Top fade (clean top)" }, { value: "b", label: "Bottom fade (clean bottom)" }, { value: "tl-br", label: "Diagonal ↘ (clean top-left)" }, { value: "tr-bl", label: "Diagonal ↙ (clean top-right)" }, { value: "bl-tr", label: "Diagonal ↗ (clean bottom-left)" }, { value: "br-tl", label: "Diagonal ↖ (clean bottom-right)" }, { value: "radial", label: "Radial" }, ] const QUICK_GIFS = [ { href: "https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExMzBrNXo4dzFia3BpYzg5YnR6aGptcmxxY2VuN2d0ZDZvZnlhZTNzaiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/6ipe9NBXm39n0f6JCw/giphy.gif", label: "GIF 0", }, { href: "https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExZ3A5eWlqY2lyaW9mNHJkeGczanQ5azkxdDV1MzVnd3dpZWk0dTZ1dyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/x2N5CFzAjQ0NSaGKAO/giphy.gif", label: "GIF 1", }, { href: "https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExdm5tbTZ1ZGlibDB6bTJ0ZjluMnduYXNncjJwZDlqcHN2ZDZoMndnaSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/26xBs1E58r3ZHYvgQ/giphy.gif", label: "GIF 2", }, { href: "https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExZ2FyMjN6ZDc4YTdiMzY5dWtwbjhrb29pc2xlNDg1aTl0ZmU3eHVjMCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/xhzaJAhrcuDMUs1IjI/giphy.gif", label: "GIF 3", }, { href: "https://media1.giphy.com/media/v1.Y2lkPTc5MGI3NjExcGxmaTUybzN3ZmVqMDV4aHd6eXBwcDhuMWNicWZueTk4eWppNmQ2ciZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/LUl2tRY5oVlBu/giphy.gif", label: "GIF 4", }, ] as const /** Local stills: `public/images/gibli/gibli-1.jpg` … `gibli-9.jpg` → `/images/gibli/...`. */ const QUICK_GHIBLI: { href: string; label: string }[] = Array.from( { length: 9 }, (_, i) => { const n = i + 1 return { href: `/images/gibli/gibli-${n}.jpg`, label: String(n), } } ) function RangeField({ id, label, value, onChange, min, max, step, suffix, }: { id: string label: string value: number onChange: (v: number) => void min: number max: number step: number suffix?: string }) { return (

{label} {value} {suffix ?? ""}

onChange(Number(e.target.value))} step={step} type="range" value={value} />

) } /** Single stat pill — wraps as one unit so lines never break mid-value (e.g. “reveal r”). */ function CaptionMetaChip({ kicker, children, }: { kicker: string children: ReactNode }) { return ( {kicker} {children} ) } function PanelSection({ eyebrow, title, description, children, className, }: { eyebrow: string title: string description?: string children: ReactNode className?: string }) { return (

{eyebrow}

{title}

{description ? (

{description}

) : null}

{children}

) } export interface DitherImageDemoUploadProps { /** Starting image: same-origin path (e.g. `/images/foo.jpg`) or `https://…` image / GIF. */ initialSrc?: string /** Caption label when `initialSrc` is set; if omitted and `initialSrc` is remote, a short URL label is derived. */ initialLabel?: string } export default function DitherImageDemoUpload({ initialSrc, initialLabel, }: DitherImageDemoUploadProps = {}) { const baseId = useId() const blobUrlRef = useRef(null) const [previewSrc, setPreviewSrc] = useState(() => initialSrc ?? FALLBACK_SRC) const [fileLabel, setFileLabel] = useState(() => { if (initialLabel) { return initialLabel } if (initialSrc && REMOTE_HTTP_RE.test(initialSrc)) { return labelFromRemoteUrl(initialSrc) } if (initialSrc?.startsWith("data:")) { return "Data URL" } return null }) const [urlDraft, setUrlDraft] = useState(() => { if (initialSrc && REMOTE_HTTP_RE.test(initialSrc)) { return initialSrc } return "" }) const [size, setSize] = useState("md") const [aspect, setAspect] = useState<(typeof ASPECT_OPTIONS)[number]["value"]>("square") const [grayscale, setGrayscale] = useState(1) const [contrast, setContrast] = useState(120) const [brightness, setBrightness] = useState(1) const [blurPx, setBlurPx] = useState(0) const [opacity, setOpacity] = useState(1) const [revealEnabled, setRevealEnabled] = useState(true) const [revealDir, setRevealDir] = useState("r") const [revealFrom, setRevealFrom] = useState(0) const [revealTo, setRevealTo] = useState(65) const [fileDragging, setFileDragging] = useState(false) const fileDropDepth = useRef(0) const revokeBlob = useCallback(() => { if (blobUrlRef.current) { URL.revokeObjectURL(blobUrlRef.current) blobUrlRef.current = null } }, []) useEffect(() => () => revokeBlob(), [revokeBlob]) const applyFile = useCallback( (file: File) => { if (!file.type.startsWith("image/")) { return } revokeBlob() const url = URL.createObjectURL(file) blobUrlRef.current = url setPreviewSrc(url) setFileLabel(file.name) setUrlDraft("") }, [revokeBlob] ) const onFileChange = useCallback( (e: ChangeEvent) => { const file = e.target.files?.[0] if (file) { applyFile(file) } e.target.value = "" }, [applyFile] ) const onFileDragEnter = useCallback((e: DragEvent) => { e.preventDefault() e.stopPropagation() fileDropDepth.current += 1 if (e.dataTransfer.types.includes("Files")) { setFileDragging(true) } }, []) const onFileDragLeave = useCallback((e: DragEvent) => { e.preventDefault() e.stopPropagation() fileDropDepth.current -= 1 if (fileDropDepth.current <= 0) { fileDropDepth.current = 0 setFileDragging(false) } }, []) const onFileDragOver = useCallback((e: DragEvent) => { e.preventDefault() e.stopPropagation() e.dataTransfer.dropEffect = "copy" }, []) const onFileDrop = useCallback( (e: DragEvent) => { e.preventDefault() e.stopPropagation() fileDropDepth.current = 0 setFileDragging(false) const file = e.dataTransfer.files?.[0] if (file) { applyFile(file) } }, [applyFile] ) const loadRemoteImage = useCallback( (href: string) => { revokeBlob() setPreviewSrc(href) setFileLabel(labelFromRemoteUrl(href)) setUrlDraft(href) }, [revokeBlob] ) const applyImageUrl = useCallback(() => { const raw = urlDraft.trim() if (!raw) { return } if (raw.startsWith("data:")) { revokeBlob() setPreviewSrc(raw) setFileLabel("Pasted data URL") return } let href: string try { const u = new URL(raw) if (u.protocol === "http:" || u.protocol === "https:") { href = u.href } else { return } } catch { try { const u = new URL(`https://${raw}`) href = u.href } catch { return } } loadRemoteImage(href) }, [loadRemoteImage, urlDraft, revokeBlob]) const resetToSample = useCallback(() => { revokeBlob() setPreviewSrc(FALLBACK_SRC) setFileLabel(null) setUrlDraft("") }, [revokeBlob]) const resetSliders = useCallback(() => { setSize("md") setAspect("square") setGrayscale(1) setContrast(120) setBrightness(1) setBlurPx(0) setOpacity(1) setRevealEnabled(true) setRevealDir("r") setRevealFrom(0) setRevealTo(65) }, []) const unoptimized = needsUnoptimizedImage(previewSrc) return (

Cult UI · sandbox

DitherImage — upload

Upload a file, paste an image or GIF URL, or use the sample. Tune{" "} dither-plugin{" "} live. Remote URLs, blobs, and{" "} data:{" "} use{" "} next/image{" "} with{" "} unoptimized{" "} so any host works without changing{" "} next.config .

{/* Left rail — source */}

Image or GIF URL

setUrlDraft(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault() applyImageUrl() } }} placeholder="https://example.com/photo.jpg or animated.gif" type="url" value={urlDraft} />

Quick GIFs

{QUICK_GIFS.map((g) => ( ))}

Ghibli stills (local)

{QUICK_GHIBLI.map((g) => ( ))}

Upload image or GIF

{fileDragging ? "Drop to load" : "Drop image or GIF here"} or click to choose — same formats as URL presets

{/* Preview — shares top row with source */}

{revealEnabled ? ( ) : ( )} {/*

{fileLabel ?? "Sample image"}

{size}
{contrast}
{grayscale.toFixed(2)}
{revealDir} · {revealFrom}→{revealTo}%

*/}

{/* Below preview: reveal, dither, frame */}

) } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@cult-ui","registryDependencies":["dither-image"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/example/dither-image-demo-upload.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]