dither-image-demo

1"use client"
2 
3import {
4  DitherImage,
5  DitherImageCaption,
6  DitherImageContent,
7  DitherImageFrame,
8  DitherImageOverlay,
9  DitherImageReveal,
10  type DitherRevealDirection,
11} from "@/registry/default/ui/dither-image"
12 
13const GHIBLI_STILLS: { alt: string; src: string }[] = Array.from(
14  { length: 9 },
15  (_, i) => ({
16    src: `/images/gibli/gibli-${i + 1}.jpg`,
17    alt: `Studio Ghibli-style still ${i + 1}, dithered`,
18  })
19)
20 
21const FRAME_SIZES = "(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 90vw"
22/** Fixed box for `DitherImageReveal` + overlay demos (`size-56` → 14rem). */
23const REVEAL_SIZES = "224px"
24 
25const REVEAL_OVERLAY_VARIANTS: {
26  direction: DitherRevealDirection
27  from: number
28  to: number
29  label: string
30  hint: string
31}[] = [
32  {
33    direction: "r",
34    from: 0,
35    to: 65,
36    label: "r",
37    hint: "Clean left → dither right",
38  },
39  {
40    direction: "l",
41    from: 0,
42    to: 65,
43    label: "l",
44    hint: "Clean right → dither left",
45  },
46  {
47    direction: "t",
48    from: 0,
49    to: 65,
50    label: "t",
51    hint: "Clean top → dither bottom",
52  },
53  {
54    direction: "b",
55    from: 0,
56    to: 65,
57    label: "b",
58    hint: "Clean bottom → dither top",
59  },
60  {
61    direction: "tl-br",
62    from: 0,
63    to: 70,
64    label: "tl-br",
65    hint: "Diagonal (clean top-left)",
66  },
67  {
68    direction: "radial",
69    from: 25,
70    to: 75,
71    label: "radial",
72    hint: "Center clean, edges dither",
73  },
74]
75 
76export default function DitherImageDemo() {
77  return (
78    <main className="flex min-h-screen items-center justify-center bg-background p-8">
79      <div className="flex w-full max-w-5xl flex-col gap-10">
80        <header className="flex flex-col gap-2">
81          <h1 className="text-balance font-semibold text-2xl text-foreground tracking-tight">
82            DitherImage
83          </h1>
84          <p className="max-w-prose text-muted-foreground text-sm leading-relaxed">
85            CSS-only Bayer dither via{" "}
86            <code className="rounded bg-muted px-1 py-0.5 font-mono text-[0.75rem]">
87              dither-plugin
88            </code>
89            . Compound:{" "}
90            <code className="rounded bg-muted px-1 py-0.5 font-mono text-[0.75rem]">
91              DitherImage
92            </code>{" "}
93            wraps a{" "}
94            <code className="rounded bg-muted px-1 py-0.5 font-mono text-[0.75rem]">
95              DitherImageFrame
96            </code>{" "}
97            (the dithered surface) containing a{" "}
98// … truncated