Pixelated Hover

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!