Component
Pixelate Component for Framer
This is a Framer recreation of the pixelate component from the Fancy Components website. Feel free to copy and paste it into your Framer project to add a playful effect to your card hover states—no coding required.
Created by



About the resource
This is a component you can use by simply pasting it into your Framer project and uploading an image in the properties panel on the right.
The component is fully customizable—you can display either a video or an image, and you can switch between pixelate and depixelate modes.
About the resource
This is a component you can use by simply pasting it into your Framer project and uploading an image in the properties panel on the right.
The component is fully customizable—you can display either a video or an image, and you can switch between pixelate and depixelate modes.
About the resource
This is a component you can use by simply pasting it into your Framer project and uploading an image in the properties panel on the right.
The component is fully customizable—you can display either a video or an image, and you can switch between pixelate and depixelate modes.

Property controls of the Pixelate Component.

Property controls of the Pixelate Component.

Property controls of the Pixelate Component.
As you can see in the image above, you can also adjust how strong the pixelation effect is, as well as when it starts and ends (hover area, safe area). Have fun playing around with it, and be sure to share your creations on Twitter!
As you can see in the image above, you can also adjust how strong the pixelation effect is, as well as when it starts and ends (hover area, safe area). Have fun playing around with it, and be sure to share your creations on Twitter!
As you can see in the image above, you can also adjust how strong the pixelation effect is, as well as when it starts and ends (hover area, safe area). Have fun playing around with it, and be sure to share your creations on Twitter!