Sparkling Gradient Text Highlight

Typography on the web often suffers from a lack of vitality. We treat words as static information, ignoring their potential to convey wonder. This component injects a sense of “magic” into the reading experience. By combining a kinetic gradient with a randomized particle system, we create a focal point that breathes. It is not just a highlight; it is a celebration of the message, designed to captivate the user’s peripheral vision without overwhelming the content.

Core Technique

The elegance here lies in the seamless fusion of CSS aesthetic properties and JavaScript randomization.

• The Gradient: We utilize background-clip: text paired with a translucent text-fill-color to masking a moving linear gradient directly onto the typeface.
• The Sparkles: The stars are not a heavy canvas implementation. They are lightweight SVGs positioned absolutely.
• The Loop: JavaScript acts as the conductor, calculating random coordinates (--star-left, --star-top) and forcing a DOM reflow (offsetHeight) to reset the CSS animation instantly. This ensures a non-repetitive, organic twinkle pattern.

Customization

You have absolute control over the palette and the physics of the stars. Adjusting the CSS variables allows you to match any brand identity instantly.

Configuring the Gradient

:root {  
  /* Define your brand colors here */
  --purple: rgb(123, 31, 162);
  --violet: rgb(103, 58, 183);
  --pink: rgb(244, 143, 177);
}

/* Adjust the speed of the color shift */
h1 > .magic > .magic-text {
  animation: background-pan 3s linear infinite;
}

Tuning the Particles

const interval = 1000; // Time between sparkles (ms)

const animate = star => {
  // Adjust the spread area of the stars
  star.style.setProperty("--star-left", `${rand(-10, 100)}%`);
  star.style.setProperty("--star-top", `${rand(-40, 80)}%`);
  // ...
}

Browser Support

The code relies on background-clip: text, which is now a stable standard in modern web design.