ComponentsCards
Dot Mosaic
An image rebuilt as a mosaic of dots in its own colours, sized by tone, which scatter around the pointer and spring back.
This example uses generated pictures from this site: art.ts. Copy that file from the repository, or use your own images in its place.
"use client";
import { DotMosaic } from "@/components/miyuki-ui/dot-mosaic";
import { landscape } from "@/registry/lib/art";
const src = landscape("niseko-first", { mood: "day", width: 960, height: 600 });
export default function DotMosaicDemo() {
return (
<DotMosaic
src={src}
alt="Morning sun over layered ridges above Niseko, drawn in dots"
className="aspect-[16/10] w-full max-w-160"
/>
);
}Install
npx shadcn@latest add @miyuki-ui/dot-mosaicThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
DotMosaic
Prop
Type