Skip to content

component

Pixelated Hover

By Mahfuzur Rahman

Details

Summary

Static images into interactive art

Description

Pixelated Canvas Hover Effect for Framer Turn static images into awesome interactive pixel art. This component converts any picture into a live grid of shapes that react, swirl, and move right under the cursor. Features Mouse Physics: Pixels smoothly swirl, repel, or attract as your cursor moves. Two Modes: Set it to pixelate only on hover or keep it always pixelated with mouse distortion. Super Smooth: Built on HTML5 Canvas with smart FPS limits so it runs flawlessly without slowing down computers or phones. Responsive: Looks crisp on Retina screens and resizes automatically. Great For Creative portfolio landing pages and headers. Tech, SaaS, and agency website hero graphics. Interactive "Meet the Team" headshot grids. Web3, crypto, and gaming site visual accents. ⚙ Easy Settings (No Code) Shapes: Pick between Circle or Square pixels. Tweak Physics: Control the size, speed, and pull of the cursor effect. Style Colors: Customize background colors, border styles, and tints. Glitch Effect: Add a "pixel dropout" look for a retro digital vibe. Setup Copy & paste the code into a new Framer component. Drag & drop it onto your page layout. Upload your image and tweak the sliders in the side panel!

Introduction

Static images into interactive art

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600178018/148/228/309/79/15
  • All · #7801