Evervault Card
A card that reveals encrypted noise and a gradient on hover.
As the cursor sweeps across the card, a circular window opens with the pointer at its center, exposing the constantly shifting encrypted characters and cool-toned gradient underneath — Evervault's signature ciphertext effect.
Loading preview…
npx shadcn@latest add https://webberui.com/r/evervault-card.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
140
1500
<EvervaultCard />
Installation
npx shadcn@latest add https://webberui.com/r/evervault-card.jsonOr, once registries are configured in components.json, install it as @webberui/evervault-card.
Usage
import { EvervaultCard } from "@/components/ui/evervault-card";
<EvervaultCard text="webber" className="max-w-xs" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | "hover" | Text shown in the center of the card face |
gradient | string[] | ["#a855f7", "#6366f1", "#22d3ee"] | Gradient colors of the reveal glow |
radius | number | 140 | Radius of the reveal glow (px) |
chars | number | 1500 | Total number of noise characters; more is denser but costs more performance |
corners | boolean | true | Whether to show the cross decorations in the four corners |
Accessibility
- When the user has "reduce motion" enabled at the system level, the noise and mask tracking are disabled and only the static card remains
- The noise reveal layer carries
aria-hiddenand is hidden from assistive technology, so only the center text is announced - The random noise renders in two passes behind a mounted flag to avoid an SSR hydration mismatch