Encrypted Card
A card whose surface hides a live stream of scrambling ciphertext, revealed only through a soft spotlight that follows the pointer.
Security and AI products love the "there's something powerful under the hood" feeling. EncryptedCard renders your real content on top, but the surface underneath is a living field of ciphertext that re-scrambles every frame — visible only inside a radial reveal that tracks the cursor. Move across the card and the encryption bleeds through, then re-seals.
Production API key
rotated 3 days ago
sk_live_51Nc••••••••4Rf2Installation
pnpm dlx shadcn@latest add "https://godui.design/r/encrypted-card.json"Usage
import { EncryptedCard } from "@/components/godui/encrypted-card";Wrap any content — the card is a drop-in surface:
<EncryptedCard className="w-80">
<div className="p-6">Your content sits above the cipher.</div>
</EncryptedCard>Tune the reveal and the stream:
<EncryptedCard revealRadius={80} speed={35} />
<EncryptedCard streamColor="color-mix(in oklch, var(--primary) 70%, #22d3ee)" />
<EncryptedCard characters="01" />The stream honors prefers-reduced-motion: the glyphs stop re-scrambling and the
reveal becomes a static peek, so nothing flickers for motion-sensitive users.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
characters | string | ciphertext alphabet | Pool of glyphs the stream is drawn from. |
speed | number | 55 | Milliseconds between glyph re-randomizations while hovered. |
revealRadius | number | 130 | Radius of the pointer-following reveal window, in pixels. |
streamColor | string | var(--primary) | Color of the encrypted glyph stream. |
All other div props are forwarded to the root element.