Framer February β Day 5 β¨
A super quick way to create a gradient cursor highlighter in @framer. Let's get started β
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)
β’ 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 β
β’ 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 β
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"
β’ 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 π«Ά
β’ β’ β’
Missing some Tweet in this thread? You can try to
force a refresh
γ
