Thread by @aleksliving

Framer February → Day 5 ✨

A super quick way to create a gradient cursor highlighter in @framer. Let's get started ↓

🥹 As always, begin by drawing a frame (F)

Next, add a fill (𝘶𝘴𝘦 𝘥𝘢𝘳𝘬𝘦𝘳 𝘤𝘰𝘭𝘰𝘳𝘴 𝘰𝘯 𝘥𝘢𝘳𝘬 𝘣𝘢𝘤𝘬𝘨𝘳𝘰𝘶𝘯𝘥𝘴, 𝘢𝘯𝘥 𝘭𝘪𝘨𝘩𝘵𝘦𝘳 𝘤𝘰𝘭𝘰𝘳𝘴 𝘰𝘯 𝘭𝘪𝘨𝘩𝘵 𝘣𝘢𝘤𝘬𝘨𝘳𝘰𝘶𝘯𝘥𝘴)

• Add a corner radius (if you want...)
• Add a border (use a width of 1-3px)

Now, select your frame and create a component (⌘ + ⌥ + K)

✨ We'll need a little bit of code for the next step. Head on over here, and copy everything you see → pastebin.com/GZpHzA6n

Now, it's time to add an override to the component. With the primary variant selected, go to:

• Code Overrides → New File → New Override
• Name it whatever you want, and replace the default with the code you copied in the previous step ↓

Let's apply the newly created override. Select the primary variant and link the override you added earlier↓

If you preview your creation now, you'll notice that the highlight is working, but it's not quite aligned with your cursor 😰

To fix this, add a stack ( ⌥ + ⌘ + ↵ ), and set it to 100% width & height. At this point, you're pretty much done 🥳

But, if you'd like to get rid of the cursor on hover, keep up ↓

In the component settings, select the primary variant, and:

• Under styles hit the “ + “
• Select "Cursor," and set it to "None"

👆 You can, of course, edit the colors of your cursor highlighter by changing the rgb values for the "backgroundImage" propery of the "Highlight" function in the code override.

✨ That's it! Congrats, you have a pretty awesome card that adds a gradient highlight to your cursor. If you found this tutorial useful, please RT to share the love 🫶