Twitch Style Gradient Hover Card

This Twitch Style Gradient Hover Card brings a high-energy interactive element to your UI, perfect for feature highlights or gaming profiles. It combines a sliding background gradient that utilizes responsive vmin units with a JavaScript-powered staggered text reveal. The result is a fluid animation where the background shifts dynamically while the subtitle types itself in word by word.

Core Technique

The core visual magic relies on a pseudo-element (:before) sized at 300% of the card’s width. Instead of simply fading the opacity, the code transitions the background-position, making the gradient slide across the card physically. For the text, JavaScript splits the sentence into individual <span> elements. It assigns a calculated transition-delay to each word based on its index (index * 40ms). This creates the “domino effect” where words appear one after another, rather than all at once, adding a sophisticated layer of motion to a standard hover state.

Customization

To adapt this card to your brand, start by modifying the CSS variables for the gradient colors. You can also adjust the angle of the gradient slide to match your design language.

:root {
  /* Change the border color */
  --border: rgb(3, 169, 244);
  
  /* Update gradient stops */
  --g1: rgb(98, 0, 234);   /* Purple */
  --g2: rgb(236, 64, 122); /* Pink */
  --g3: rgb(253, 216, 53); /* Yellow */
}

.card:before {
  /* 
    Change 130deg to alter the slide direction 
  */
  background: linear-gradient(
    130deg, 
    transparent 0% 33%, 
    var(--g1) 66%, 
    var(--g2) 83.5%, 
    var(--g3) 100%
  );
}

To change the speed of the text animation, modify the multiplier in the JavaScript function.

const createWord = (text, index) => {
  // ... creates span ...
  
  // Increase 40 to slow down, decrease to speed up
  word.style.transitionDelay = `${index * 40}ms`;
  
  return word;
}

Tips

1. CSS Transition Gotcha: The staggered text effect relies on a specific CSS setup. Notice in the CSS that transition: none is set on the base class, but defined specifically on hover. Crucially, opacity has a 0ms duration. If you give opacity a duration (e.g., 200ms) and a delay, the delay applies to the start of the opacity fade. By keeping it tight, the calculation works perfectly with the transform.

/* Crucial for the stagger effect to work cleanly */
.card:hover > .card-content > .card-subtitle > .card-subtitle-word {  
  opacity: 1;
  /* Opacity is instant, transform carries the visual weight */
  transition: opacity 0ms, transform 200ms cubic-bezier(.90, .06, .15, .90);
}

2. Browser Support: This code relies on aspect-ratio to maintain the card shape. While widely supported now, older browsers (pre-2021) will collapse the card height.