Component
Logo Hover Shine Effect in Framer
This is a logo hover shine effect in Framer, recreated from Obsidian’s website. Feel free to remix or simply copy the component to add a similar shine animation to your project.
About the resource
To recreate the logo hover shine effect in Framer, I started by building the Obsidian logo using four individual sides. Each side was placed in its own frame and then grouped together into one parent layer to form the full logo.
Inside each of those side frames, I added a layer with a radial gradient fill to simulate light hitting the surface. Below that gradient layer, I dropped in the Parallax floating component and adjusted its settings to get the smooth floating hover interaction.
For the glow around the icon, I exported the blur as an image and added that image inside a dedicated blur frame. Within that blur frame, I placed the Follow Cursor component so the glow subtly follows the user’s mouse movement.
About the resource
To recreate the logo hover shine effect in Framer, I started by building the Obsidian logo using four individual sides. Each side was placed in its own frame and then grouped together into one parent layer to form the full logo.
Inside each of those side frames, I added a layer with a radial gradient fill to simulate light hitting the surface. Below that gradient layer, I dropped in the Parallax floating component and adjusted its settings to get the smooth floating hover interaction.
For the glow around the icon, I exported the blur as an image and added that image inside a dedicated blur frame. Within that blur frame, I placed the Follow Cursor component so the glow subtly follows the user’s mouse movement.
About the resource
To recreate the logo hover shine effect in Framer, I started by building the Obsidian logo using four individual sides. Each side was placed in its own frame and then grouped together into one parent layer to form the full logo.
Inside each of those side frames, I added a layer with a radial gradient fill to simulate light hitting the surface. Below that gradient layer, I dropped in the Parallax floating component and adjusted its settings to get the smooth floating hover interaction.
For the glow around the icon, I exported the blur as an image and added that image inside a dedicated blur frame. Within that blur frame, I placed the Follow Cursor component so the glow subtly follows the user’s mouse movement.
The default and hover variants of the logo hover component.
The default and hover variants of the logo hover component.
The default and hover variants of the logo hover component.
