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 useGlossEffect.
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:
Styling the Gloss Effect
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.
Crafting the useGlossEffect Hook
The heart of our gloss effect is the useGlossEffect hook. This hook takes three references as arguments: cardRef, cardContentRef, and glossRef. These references point to the card element, card content, and gloss element, respectively.
Inside the hook, we have three key functions:
🌟 addShineClass()
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.
🗺️ mapNumberRange()
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.
🧮 calculateTransformValues()
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.
✨ applyTransform()
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.
Bringing It All Together
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.
Usage
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! 🚀✨
Top comments (0)