GlitchVault Card
A dynamic interactive component that creates a matrix-style glitch effect on hover. Perfect for adding cyberpunk aesthetics to profiles, cards, and interactive elements.
Profile Card
A sleek profile card with cyan glitch effects perfect for showcasing team members or user profiles.
Hover me
Aura
UI/UX Designer & Developer
Project Card
A notification-style card with red glitch effects, ideal for status updates or project announcements.
🚀
Project Launch
Ready to deploy
Your application is ready for production deployment with all tests passing.
Installation
You can add this component to your project using the CLI or by manually copying the code.
npx shadcn@latest add glitchvault.json
Basic Usage
Loading...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Content to display inside the component |
| className | string | — | Additional CSS classes for styling |
| glitchColor | string | "#0AF0F0" | Hex color for the glitch effect |
| glitchRadius | number | 120 | Radius of the mouse interaction area |
| performanceMode | "high" \ | "balanced" \ | "low" |
| disabled | boolean | false | Disable the glitch effect |
| theme | "light" \ | "dark" \ | "auto" |
Examples
Different Colors
Loading...
Performance Modes
Loading...
Disabled State
Loading...