Component
Shiny Golden Badge in Framer
This is a shiny golden badge recreated in Framer, inspired by Pascal’s work. Remix it or simply copy the component into your own project.
Created by
About the resource
To create this, I started by designing the badge itself — that part was pretty straightforward. Then I added a highlight layer composed of multiple colored layers and set the blending mode to overlay to achieve the shiny effect.
For the animation, I added 5 trigger frames within the badge and created 5 variants — one for each frame. On each variant, I rotated the highlight layer slightly and set up mouse enter interactions to animate between them. Each variant also includes a mouse leave interaction that resets it back to the default state.
Finally, I connected the badge to the 3D hover component to give it that smooth tilt effect on hover.
About the resource
To create this, I started by designing the badge itself — that part was pretty straightforward. Then I added a highlight layer composed of multiple colored layers and set the blending mode to overlay to achieve the shiny effect.
For the animation, I added 5 trigger frames within the badge and created 5 variants — one for each frame. On each variant, I rotated the highlight layer slightly and set up mouse enter interactions to animate between them. Each variant also includes a mouse leave interaction that resets it back to the default state.
Finally, I connected the badge to the 3D hover component to give it that smooth tilt effect on hover.
About the resource
To create this, I started by designing the badge itself — that part was pretty straightforward. Then I added a highlight layer composed of multiple colored layers and set the blending mode to overlay to achieve the shiny effect.
For the animation, I added 5 trigger frames within the badge and created 5 variants — one for each frame. On each variant, I rotated the highlight layer slightly and set up mouse enter interactions to animate between them. Each variant also includes a mouse leave interaction that resets it back to the default state.
Finally, I connected the badge to the 3D hover component to give it that smooth tilt effect on hover.
The five variants of the badge component.
The five variants of the badge component.
The five variants of the badge component.
