Shimmer Grid Component in Framer

Copy component

Shimmer Grid Component in Framer

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Component

Shimmer Grid Component in Framer

This is a customizable shimmer grid component for Framer, inspired by Mousymusic's request. With seven built-in patterns and full customization options in the right panel, this component lets you experiment and enhance your website designs with stunning visual effects.

image of Nandi Muzsik
image of Isaac Roberts
image of Prianca S.

Created by

,

and

Digital interface showcasing 'Shimmer Grid COMP' with a light blue dot matrix on a dark background, highlighting a UI component for web design
Digital interface showcasing 'Shimmer Grid COMP' with a light blue dot matrix on a dark background, highlighting a UI component for web design
Digital interface showcasing 'Shimmer Grid COMP' with a light blue dot matrix on a dark background, highlighting a UI component for web design

About the resource

To use the shimmer grid component, simply paste it into your Framer project and set it as a background layer. You can choose from seven built-in patterns or upload your own image for a custom look.

The component offers extensive customization options: adjust pattern and hover colors, set hover size in pixels, and choose between a smooth glow or circle hover effect. Fine-tune your design by controlling image sizing, position, and transparency through alpha or luminance mask modes. Complete your perfect layout by adjusting the tile size and radius.

About the resource

To use the shimmer grid component, simply paste it into your Framer project and set it as a background layer. You can choose from seven built-in patterns or upload your own image for a custom look.

The component offers extensive customization options: adjust pattern and hover colors, set hover size in pixels, and choose between a smooth glow or circle hover effect. Fine-tune your design by controlling image sizing, position, and transparency through alpha or luminance mask modes. Complete your perfect layout by adjusting the tile size and radius.

About the resource

To use the shimmer grid component, simply paste it into your Framer project and set it as a background layer. You can choose from seven built-in patterns or upload your own image for a custom look.

The component offers extensive customization options: adjust pattern and hover colors, set hover size in pixels, and choose between a smooth glow or circle hover effect. Fine-tune your design by controlling image sizing, position, and transparency through alpha or luminance mask modes. Complete your perfect layout by adjusting the tile size and radius.

Settings panel for 'Shimmer Grid' component with options for color, hover color, size, and pattern on a dark user interface background

The shimmer grid component properties in Framer.

Settings panel for 'Shimmer Grid' component with options for color, hover color, size, and pattern on a dark user interface background

The shimmer grid component properties in Framer.

Settings panel for 'Shimmer Grid' component with options for color, hover color, size, and pattern on a dark user interface background

The shimmer grid component properties in Framer.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Product Hunt Maker of the Year 2025 gold badge

    Shiny Golden Badge in Framer

    Component

    Product Hunt Maker of the Year 2025 gold badge

    Shiny Golden Badge in Framer

    Component

    Product Hunt Maker of the Year 2025 gold badge

    Shiny Golden Badge in Framer

    Component

  • Keyboard shortcut CMD+2 highlights Work menu tab

    Shortcut Component for Framer

    Component

    Keyboard shortcut CMD+2 highlights Work menu tab

    Shortcut Component for Framer

    Component

    Keyboard shortcut CMD+2 highlights Work menu tab

    Shortcut Component for Framer

    Component