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

  • Framer component called 'Pixel Image Reveal' allowing image transitions from pixelated to clear; example shows a grayscale pixelated portrait

    Pixel Image Reveal Component for Framer

    Component

    Framer component called 'Pixel Image Reveal' allowing image transitions from pixelated to clear; example shows a grayscale pixelated portrait

    Pixel Image Reveal Component for Framer

    Component

    Framer component called 'Pixel Image Reveal' allowing image transitions from pixelated to clear; example shows a grayscale pixelated portrait

    Pixel Image Reveal Component for Framer

    Component

  • Toggle UI with options: Free, Monthly, and Annual; 'Annual' is currently selected under Premium

    Dynamic Toggle Component for Framer

    Component

    Toggle UI with options: Free, Monthly, and Annual; 'Annual' is currently selected under Premium

    Dynamic Toggle Component for Framer

    Component

    Toggle UI with options: Free, Monthly, and Annual; 'Annual' is currently selected under Premium

    Dynamic Toggle Component for Framer

    Component