This is a "sweep light" hover effect, first seen on the Vercel website, now recreated in Framer. Feel free to copy this component, paste it into your project, and use it on your own websites.
This component uses two variants. Each variant features a frame - that's our shiny light effect on the card. We shift the position of this layer; for the 'normal' variant, it's up in the top left corner, while for the 'hover' variant, it's down in the bottom right corner. We animate between these two states by linking them with the suitable interaction.
This component uses two variants. Each variant features a frame - that's our shiny light effect on the card. We shift the position of this layer; for the 'normal' variant, it's up in the top left corner, while for the 'hover' variant, it's down in the bottom right corner. We animate between these two states by linking them with the suitable interaction.
This component uses two variants. Each variant features a frame - that's our shiny light effect on the card. We shift the position of this layer; for the 'normal' variant, it's up in the top left corner, while for the 'hover' variant, it's down in the bottom right corner. We animate between these two states by linking them with the suitable interaction.
Learn how I went from 0 to $11.5k with Framer in 60 days.
From no followers, no portfolio, no reputation, to secretly building a profitable Framer business.