Component
Shimmer Dot Component for Framer
This is a fully customizable shimmer dot component for Framer. I noticed a couple of websites use this element, such as clerk.com or vercel.com, and figured I should make this accessible for Framer users, since I very much see this becoming a design trend on the web. Feel free to copy the component to your project, play around with its settings, and use it in creative ways.
About the resource
This component is fully customizable. So, after pasting it into your project, you can start tweaking it using the properties in the right panel.
About the resource
This component is fully customizable. So, after pasting it into your project, you can start tweaking it using the properties in the right panel.
About the resource
This component is fully customizable. So, after pasting it into your project, you can start tweaking it using the properties in the right panel.
Shimmer Dot component properties in Framer.
Shimmer Dot component properties in Framer.
Shimmer Dot component properties in Framer.
By default, the dots are grey on the component (this is to make sure you can see them no matter if you add it to a white or black background).
You can easily change the dot colors by adding new colors in the Colors property. Each color added there will have equal distribution on the component. If you want to see more of a certain color, you can add it multiple times, increasing its share.
The Contrast property changes the dots' opacity. When Contrast is >0, you'll see more high and low opacity dots, and everything in between will appear less frequently. When Contrast is <0, you'll see more high opacity dots, and fewer low opacity dots.
The Speed adjusts the speed of shimmering.
Note: the component might not shimmer in Safari due to compatibility issues.
By default, the dots are grey on the component (this is to make sure you can see them no matter if you add it to a white or black background).
You can easily change the dot colors by adding new colors in the Colors property. Each color added there will have equal distribution on the component. If you want to see more of a certain color, you can add it multiple times, increasing its share.
The Contrast property changes the dots' opacity. When Contrast is >0, you'll see more high and low opacity dots, and everything in between will appear less frequently. When Contrast is <0, you'll see more high opacity dots, and fewer low opacity dots.
The Speed adjusts the speed of shimmering.
Note: the component might not shimmer in Safari due to compatibility issues.
By default, the dots are grey on the component (this is to make sure you can see them no matter if you add it to a white or black background).
You can easily change the dot colors by adding new colors in the Colors property. Each color added there will have equal distribution on the component. If you want to see more of a certain color, you can add it multiple times, increasing its share.
The Contrast property changes the dots' opacity. When Contrast is >0, you'll see more high and low opacity dots, and everything in between will appear less frequently. When Contrast is <0, you'll see more high opacity dots, and fewer low opacity dots.
The Speed adjusts the speed of shimmering.
Note: the component might not shimmer in Safari due to compatibility issues.
