---
title: "Mosaic Image — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Angelo Engelbrecht · Effects. Description Focus Mosaic Image redraws the area around the pointer as a field of responsive image squares."
canonical: "https://framer.elliotli.dev/component/mosaic-image"
---

[Home](/)/[Components](/components)/[Effects](/components/category/effects)/Mosaic Image

# Mosaic Image

Pointer-responsive image mosaic

[View on Framer](https://framer.com/marketplace/components/mosaic-image/?via=elliot-li)

![Mosaic Image preview image 1](https://framer.elliotli.dev/og/component/mosaic-image/86a02ebe0f8b0dc1/1600x1180.jpg)

## Summary

Description Focus Mosaic Image redraws the area around the pointer as a field of responsive image squares.

## Description

Description

Focus Mosaic Image redraws the area around the pointer as a field of responsive image squares. Choose a crisp local Zoom, a soft Blur or combine both, while pointer velocity gently expands the focus field before it settles.

The Framer edition replaces the source demo's white dots and settings panel with responsive image controls, optional links, configurable fitting, a brand-controlled square grid, static Canvas behavior, reduced motion and near-viewport performance safeguards.

Features

-   Responsive image with Cover, Contain or Stretch fitting, focal position, alt text and optional link.
    
-   One exclusive Zoom, Blur or Zoom + Blur focus mode.
    
-   Adjustable square size, focus radius and optical strengths.
    
-   Optional full grid lines with thin width and custom color controls.
    
-   Smooth pointer following with velocity-sensitive expansion and no idle animation loop.
    
-   Loading, image-error, reduced-motion and static Canvas states.
    
-   Near-viewport pausing and Light, Auto or High Canvas quality.
    

Setup

1.  Paste the Component URL into a Framer project.
    
2.  Choose an Image, set its fit/focal position and write useful Alt Text.
    
3.  Select Zoom, Blur or Both and tune Focus Size.
    
4.  Optionally enable Grid Lines, then choose their color and width.
    
5.  Open Preview to test pointer response, reduced motion and optional link behavior.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #11157

## Details

- **Author**: Angelo Engelbrecht
- **Price**: $5.00
- **Published**: 2026-09-04
- **Updated**: 2026-09-04
- **Added**: 2026-09-04
- **Categories**: Effects

## More like this

-   [Liquid Glass Loupe](/component/liquid-glass-loupe) — Aisol Studio · $12 — Liquid glass lens over content
-   [Sticky Scenes](/component/sticky-scenes) — Sofía Martín · $5 — Scroll-driven stories with sticky
-   [Studio ASCII Reveal](/component/studio-ascii-reveal) — Tanmay Kaper · $12 — Your portrait, redrawn in ASCII
-   [Kinetic Sprout](/component/kinetic-sprout) — Buster Studios · $19 — A headline that grows