Evervault Card
Card with animated noise/encryption pattern that responds to mouse position.
Preview
Evervault Card
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Security-focused features and data-related product sections.
Why this component matters
The noise pattern communicates encryption and security visually, reinforcing product messaging.
Usage guidance
Use for security features, API keys, or data-sensitive content. The noise should feel purposeful — pair with minimal text about security or data.
Installation
bash
npx shadcn@latest add @aceternity/evervault-cardUsage
example.tsxtsx
import { EvervaultCard } from "@/components/ui/evervault-card";
export default function Example() {
return (
<EvervaultCard>
{/* Your content here */}
</EvervaultCard>
);
}Source
evervault-card.tsx
components/ui/evervault-card.tsx