ComponentsCards
Cipher Card
A card covered in hidden characters that show, and keep shifting, only where the pointer shines, around a round seal with a short word.
"use client";
import { CipherCard } from "@/components/miyuki-ui/cipher-card";
export default function CipherCardDemo() {
return (
<div className="flex flex-col items-center gap-5">
<CipherCard text="Sealed" className="h-[380px] w-80 max-w-full" />
<p className="max-w-xs text-center text-sm text-muted-foreground">
Route plans are encrypted on this device. Hover to read the cipher.
</p>
</div>
);
}Install
npx shadcn@latest add @miyuki-ui/cipher-cardThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
CipherCard
Prop
Type
Character Picture
Turns an image into a picture made of characters, sized so the columns fill the width, with an entrance where the characters fall into place.
Contour Card
A card drawn over a living contour map: a low hill follows the pointer, the lines flow around it, and a small label reads the elevation underneath.