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

New

New

New

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

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

  • Text 'Animated Gradients' over a dynamic blue gradient background

    Animated Gradient Background in Framer

    Component

    Text 'Animated Gradients' over a dynamic blue gradient background

    Animated Gradient Background in Framer

    Component

    Text 'Animated Gradients' over a dynamic blue gradient background

    Animated Gradient Background in Framer

    Component

  • An elegant user interface showcases the iPadOS pointer cursor within the Framer platform, emphasizing options to remix the project, copy the component, or seek inspiration, all set against a captivating deep blue gradient background

    iPadOS Pointer Cursor in Framer

    Component

    An elegant user interface showcases the iPadOS pointer cursor within the Framer platform, emphasizing options to remix the project, copy the component, or seek inspiration, all set against a captivating deep blue gradient background

    iPadOS Pointer Cursor in Framer

    Component

    An elegant user interface showcases the iPadOS pointer cursor within the Framer platform, emphasizing options to remix the project, copy the component, or seek inspiration, all set against a captivating deep blue gradient background

    iPadOS Pointer Cursor in Framer

    Component