Velora UI

Evervault Card

Card that reveals shuffling brand-tinted characters through a mask following the pointer.

  • 1.7 KB gzipped
  • Zero dependencies
  • Reduced-motion safe
  • Base UI & Radix compatible
Open in v0
Velora

Installation

pnpm dlx shadcn@latest add https://velora.colorlib.com/r/evervault-card.json

Adds components/velora/evervault-card.tsx.

Examples

Encrypted at rest

A security feature card with a lock badge, copy, tags and a docs link.

Encrypted at rest

Every record is sealed with AES-256-GCM. Keys live in a separate HSM and rotate every 30 days.

AES-256SOC 2
Security docs

Props

PropTypeDefault
label

Centred badge content (text or an icon) drawn above the character field

React.ReactNode—
radius

Radius of the reveal mask in px

number140
interval

Minimum ms between re-randomising the characters while the pointer moves

number60

Also accepts every <div> attribute, forwarded to the root element.

Accessibility

Reduced motion
The characters are drawn once and never reshuffle, and the reveal stays centred instead of following the pointer.
Keyboard
The card is not focusable itself; keyboard focus on a link or button inside it reveals the characters around the centre.
Screen readers
The character field is aria-hidden; the label and children are the only content read.