Hyperplexed Evervault Card Hover Effect

This Hyperplexed Evervault Card Hover Effect utilizes dynamic character generation and CSS masking to create a high-tech “decryption” visual. It replicates the sophisticated card interactions found on the Evervault website, blending procedural text with mouse-responsive radial gradients.

Core Technique

The magic of this component lies in the stacking of three distinct layers: a static image/logo, a colorful background gradient, and a procedural text layer that is revealed via a CSS mask.

1. Procedural Character Generation

The JavaScript function randomString populates the card with a fresh string of 1500 characters every time the pointer moves. This creates a jittery, digital “noise” effect that feels alive.

const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
const randomChar = () => chars[Math.floor(Math.random() * (chars.length - 1))],
      randomString = length => Array.from(Array(length)).map(randomChar).join("");

// Triggered on pointer move
letters.innerText = randomString(1500);

2. Dynamic Masking with CSS Variables

The pointer coordinates are captured and passed to CSS as variables (--x, --y). The text layer (.card-letters) uses these variables within a -webkit-mask-image radial gradient. This ensures the characters are only visible within a circular “flashlight” area around the cursor.

.card-letters {
  /* ... */
  -webkit-mask-image: radial-gradient(
    calc(var(--card-size) * 0.8) circle at var(--x) var(--y), 
    rgb(255 255 255) 20%, 
    rgb(255 255 255 / 25%), 
    transparent
  );
}

3. Visual Depth and Blending

To achieve the premium look, the .card-gradient uses mix-blend-mode: darken. This allows the text behind it to subtly interact with the vibrant colors of the radial gradient, making the “decryption” feel integrated into the card rather than just floating on top.

Browser Support

This snippet relies on modern CSS features like CSS Variables and Masking, along with standard ES6 JavaScript.