ComponentsCards
Depth of Field
A grid of image cards where the one under the pointer stays sharp and the rest blur with distance, like depth of field.
This example uses sample data from this site: data.ts, which also needs art.ts. Copy those files from the repository, or use your own data in their place.
"use client";
import { DepthOfField } from "@/components/miyuki-ui/depth-of-field";
import { places } from "@/registry/lib/data";
const cards = ["Otaru", "Hakuba", "Shirakawa", "Aomori", "Niseko", "Matsumoto"].map((name) => {
const place = places.find((p) => p.name === name)!;
return { title: place.name, subtitle: place.region, src: place.image };
});
export default function DepthOfFieldDemo() {
return <DepthOfField cards={cards} className="w-full max-w-4xl" />;
}Install
npx shadcn@latest add @miyuki-ui/depth-of-fieldThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
DepthOfField
Prop
Type