127 Components
Peel Reveal Card
CardsDual-layer vault card with a spring-hinged top cover that peels upward on hover or keyboard activation to reveal sensitive credentials.
VAULT_DECRYPTED
bose_live_98f72a41c09e3b1d
Move cursor away or press button to re-seal cover
Hover or Click to PeelSHA-256
Production Secret Key
••••••••••••••••••••••••
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/peel-reveal-card.json"
Props
TypeScript props supported by <PeelRevealCard />.
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Production Secret Key" | Heading text displayed on the protective cover layer. |
| secretValue | string | "bose_live_98f72a41c09e3b1d" | Hidden string revealed inside the vault layer when peeled. |
| stiffness | number | 300 | Spring stiffness coefficient for the curtain peel motion. |
| damping | number | 24 | Spring damping coefficient controlling curtain settle. |
Key Features
- Spring-hinged cover sheet that lifts upward with 3D rotateX perspective on hover or click.
- Built-in one-click clipboard copy button inside the underlying vault layer.
- Full keyboard toggle support via Enter and Space keys.
Keyboard & Accessibility
- Cover layer implements role='button' with aria-expanded and descriptive aria-label.
- Underlying Copy Key button is directly focusable via Tab.
- Disables 3D tilt and spring oscillation when prefers-reduced-motion is enabled.