Have you ever come across something on those stunning websites where elements seem to shimmer and shine as you hover over them? Well, you're in luck because in this quick tutorial, I am going to show you how to create a cool gloss effect using a custom React hook called
But first, let's give credit where it's due. We were inspired to create this React version of the awesome gloss effect created by Tahazsh on CodePen. You can check out the original pen right here: Tahazsh's CodePen.
Let's start with a demo:
We'll start by defining the appearance of our gloss using CSS. We'll create a class called
.gloss that specifies the gloss's opacity, size, position, and that beautiful radial gradient background.
The heart of our gloss effect is the
useGlossEffect hook. This hook takes three references as arguments:
glossRef. These references point to the card element, card content, and gloss element, respectively.
Inside the hook, we have three key functions:
This function adds the gloss--shine class to our gloss element. This class triggers the transition and makes the gloss shine when we hover over it.
At the heart of the
mapNumberRange function lies a fundamental mathematical concept known as linear interpolation. Linear interpolation is a technique used to estimate values within a given range based on known values at two endpoints. In our case, we leverage this technique to map a value from one range to another.
In this function, we calculate various values needed for the gloss effect, including rotation degree, translation, and opacity. We use the mouse pointer's position and the card's dimensions to determine how the gloss should behave. Kudos to Tahazsh's for the math here.
Here, we apply the calculated transforms and opacity to our card content and gloss elements, creating that mesmerizing effect. It uses the values calculated in the previous step.
To complete our gloss effect, we wrap it up within a
useEffect block. This effect initializes the gloss effect when the component mounts and removes event listeners when the component unmounts.
To use this captivating gloss effect, simply import the
useGlossEffect hook into your React component and call it, passing the appropriate refs. Here's how you can use it:
And there you have it! You've successfully added a mesmerizing gloss effect to your React components, taking inspiration from the awesome work of Tahazsh on CodePen. Now, it's time to see your cards come to life with a captivating shine and sparkle as you hover over them.
Feel free to fork the CodePen demo and give Tahazsh a follow to explore even more inspiring UX.
Happy coding! 🚀✨